Bootstrap 5 lưới trung bình
Ví dụ về lưới trung bì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 |
Trong chương trước, chúng tôi đã trình bày một ví dụ về lưới với các lớp dành cho thiết bị nhỏ. Chúng tôi đã sử dụng hai div (cột) và chia chúng theo tỷ lệ 25%/75%:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Nhưng trên các thiết bị trung bình, thiết kế có thể tốt hơn khi chia tỷ lệ 50%/50%.
Thiết bị trung bình được định nghĩa là có chiều rộng màn hình từ 768 pixel đến 991 pixel .
Đối với các thiết bị trung bình, chúng tôi sẽ sử dụng các lớp .col-md-*
:
<div class="col-sm-3 col-md-6 ">....</div>
<div class="col-sm-9 col-md-6 ">....</div>
Bây giờ Bootstrap sẽ nói "ở kích thước nhỏ, hãy xem các lớp có -sm- trong đó và sử dụng chúng. Ở kích thước trung bình, hãy xem các lớp có -md- trong đó và sử dụng chúng".
Ví dụ sau đây sẽ dẫn đến mức chia 25%/75% trên các thiết bị nhỏ và mức chia 50%/50% trên các thiết bị trung bình (và 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 col-md-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6">
<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):
Chỉ sử dụng phương tiện
Trong ví dụ bên dưới, chúng tôi chỉ chỉ định lớp .col-md-6
(không có .col-sm-*
). Điều này có nghĩa là các thiết bị trung bình, lớn, cực lớn và XXL sẽ chia 50%/50% - do quy mô lớp học tăng lên. Tuy nhiên, đối với các thiết bị nhỏ và cực nhỏ, nó sẽ xếp chồng theo chiều dọc (chiều rộng 100%):
Ví dụ
<div class="row">
<div class="col-md-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6">
<p>Sed ut perspiciatis...</p>
</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-md-*
và chỉ sử dụng lớp .col-md
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 768px thì các cột sẽ xếp chồng lên nhau theo chiều ngang:
<!-- Two columns: 50% width on medium and up-->
<div class="row">
<div class="col-md">1 of
2</div>
<div class="col-md">2 of 2</div>
</div>
<!-- Four
columns: 25% width on medium and up -->
<div class="row">
<div class="col-md">1 of 4</div>
<div class="col-md">2 of 4</div>
<div class="col-md">3
of 4</div>
<div class="col-md">4 of 4</div>
</div>
Chương tiếp theo trình bày cách thêm phần trăm phân chia khác cho các thiết bị lớn.