Bootstrap 5 Lưới: Thiết bị lớn
- Trang trước BS5 Lưới Medium
- Trang tiếp theo BS5 Lưới XLarge
Khóa học khuyến nghị:
Mạng thiết bị lớn | XSmall | Small | Medium | Large | Extra Large | |
---|---|---|---|---|---|---|
XXL | Tiền tố class |
.col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- | Độ rộng màn hình | <576px | >=768px | >=992px | >=1200px | >=1400px |
Trong chương trước, chúng ta đã trình bày một ví dụ về lưới, bao gồm các class phù hợp với các thiết bị nhỏ và trung bình. Chúng ta đã sử dụng hai div (cột) và chia nhỏ 25%/75% trên các thiết bị nhỏ, 50%/50% trên các thiết bị trung bình:
<div class="col-sm-3 col-md-6">....</div> <div class="col-sm-9 col-md-6">....</div>
Nhưng trên các thiết bị lớn, thiết kế chia nhỏ 33% / 66% có thể tốt hơn.
Thiết bị lớn được định nghĩa là độ rộng màn hìnhtừ 992 pixel đến 1199 pixel。
Đối với các thiết bị lớn, chúng ta sẽ sử dụng .col-lg-*
class:
<div class="col-sm-3 col-md-6 col-lg-4">....</div> <div class="col-sm-9 col-md-6 col-lg-8">....</div>
Trên các thiết bị nhỏ, hãy sử dụng bao gồm -sm- class. Trên các thiết bị trung bình, hãy sử dụng bao gồm -md- class. Trên các thiết bị lớn, hãy sử dụng bao gồm -lg- class.
Dưới đây là ví dụ sẽ dẫn đến việc chia nhỏ 25%/75% trên các thiết bị nhỏ, 50%/50% trên các thiết bị trung bình, và 33%/66% trên các thiết bị lớn, xlarge và xxlarge. Trên các thiết bị siêu nhỏ, nó sẽ tự động xếp chồng (100%):
Mô hình
<div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4"> <p>Tổ chức Quỹ Bảo tồn Thiên nhiên Thế giới (WWF), được thành lập vào ngày 29 tháng 4 năm 1961, biểu tượng của nó là một con gấu trúc ...</p> </div> <div class="col-sm-9 col-md-6 col-lg-8"> <p>1980 năm, WWF chính thức đến Trung Quốc, được chính phủ Trung Quốc mời đến Trung Quốc để thực hiện công tác bảo vệ đại bàng và môi trường sống của nó ...</p> </div> </div> </div>
Lưu ý:đảm bảo tổng số bằng hoặc nhỏ hơn 12 (không cần sử dụng tất cả 12 cột có sẵn):
chỉ sử dụng Large
trong ví dụ sau, chúng ta chỉ chỉ định .col-lg-6
class (không có .col-md-*
và/hoặc .col-sm-*
)。 Điều này có nghĩa là các thiết bị large, xlarge và xxlarge sẽ chia nhỏ 50%/50%. Tuy nhiên, đối với các thiết bị medium, small và extra small, nó sẽ stack dọc (độ rộng 100%):
Mô hình
<div class="container-fluid"> <div class="row"> <div class="col-lg-6"> <p>Tổ chức Quỹ Bảo tồn Thiên nhiên Thế giới (WWF), được thành lập vào ngày 29 tháng 4 năm 1961, biểu tượng của nó là một con gấu trúc ...</p> </div> <div class="col-lg-6"> <p>1980 năm, WWF chính thức đến Trung Quốc, được chính phủ Trung Quốc mời đến Trung Quốc để thực hiện công tác bảo vệ đại bàng và môi trường sống của nó ...</p> </div> </div> </div>
cột布局 tự động
Trong Bootstrap 5, có một cách đơn giản để tạo các cột bằng độ rộng bằng nhau cho tất cả các thiết bị: chỉ cần từ .col-lg-*
xóa số và chỉ sử dụng trên phần tử col .col-lg
class. Bootstrap sẽ nhận diện có bao nhiêu cột và mỗi cột sẽ có cùng độ rộng.
Nếu kích thước màn hìnhDưới 992px,cột sẽ xếp chồng ngang:
<!-- Hai cột: trên các thiết bị lớn hơn là 50% độ rộng --> <div class="row"> <div class="col-lg">1 của 2</div> <div class="col-lg">2 của 2</div> </div> <!-- Bốn cột: trên các thiết bị lớn hơn là 25% độ rộng --> <div class="row"> <div class="col-lg">1 của 4</div> <div class="col-lg">2 của 4</div> <div class="col-lg">3 của 4</div> <div class="col-lg">4 của 4</div> </div>
- Trang trước BS5 Lưới Medium
- Trang tiếp theo BS5 Lưới XLarge