Bootstrap 5 lưới nhỏ
Ví dụ về lưới nhỏ
XSmall | Small | Medium | Large | Extra Large | XXL | |
---|---|---|---|---|---|---|
Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
Screen width | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
Giả sử chúng ta có một bố cục đơn giản với hai cột. Chúng tôi muốn các cột được chia theo tỷ lệ 25%/75% cho các thiết bị nhỏ.
Các thiết bị nhỏ được định nghĩa là có chiều rộng màn hình từ 576 pixel đến 767 pixel .
Đối với các thiết bị nhỏ, chúng tôi sẽ sử dụng các lớp .col-sm-*
.
Chúng tôi sẽ thêm các lớp sau vào hai cột của chúng tôi:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Ví dụ sau đây sẽ dẫn đến tỷ lệ phân chia 25%/75% trên các thiết bị nhỏ (và trung bình, lớn, xlarge và xxlarge). Trên các thiết bị cực nhỏ, nó sẽ tự động xếp chồng (100%):
Ví dụ
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Hãy tự mình thử »Lưu ý: Đảm bảo rằng tổng cộng tối đa 12 hoặc ít hơn (không bắt buộc bạn phải sử dụng hết 12 cột có sẵn):
Để chia 33,3%/66,6%, bạn sẽ sử dụng .col-sm-4
và .col-sm-8
(và để chia 50%/50%, bạn sẽ sử dụng .col-sm-6
và .col-sm-6
):
Ví dụ
<!-- 33.3/66.6% split: -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 50%/50% split: -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Hãy tự mình thử » Cột bố cục tự động
Trong Bootstrap 5, có một cách dễ dàng để tạo các cột có chiều rộng bằng nhau cho tất cả các thiết bị: chỉ cần xóa số khỏi .col-sm-*
và chỉ sử dụng lớp .col-sm
trên một số phần tử col được chỉ định. Bootstrap sẽ nhận biết có bao nhiêu cột và mỗi cột sẽ có cùng chiều rộng.
Nếu kích thước màn hình nhỏ hơn 576px thì các cột sẽ xếp chồng lên nhau theo chiều ngang:
<!-- Two columns: 50% width on all screens, except for extra small (100%
width) -->
<div class="row">
<div class="col-sm">1 of
2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four
columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3
of 4</div>
<div class="col-sm">4 of 4</div>
</div>
Chương tiếp theo cho thấy cách thêm phần trăm phân chia khác cho các thiết bị trung bình.