Hệ thống lưới Bootstrap 5
Hệ thống lưới
Hệ thống lưới của Bootstrap được xây dựng bằng flexbox và cho phép tối đa 12 cột trên trang.
Nếu không muốn sử dụng riêng lẻ cả 12 cột, bạn có thể nhóm các cột lại với nhau để tạo cột rộng hơn:
| nhịp 1 | nhịp 1 | nhịp 1 | nhịp 1 | nhịp 1 | nhịp 1 | nhịp 1 | nhịp 1 | nhịp 1 | nhịp 1 | nhịp 1 | nhịp 1 |
| nhịp 4 | nhịp 4 | nhịp 4 | |||||||||
| nhịp 4 | nhịp 8 | ||||||||||
| nhịp 6 | nhịp 6 | ||||||||||
| nhịp 12 | |||||||||||
Hệ thống lưới phản hồi nhanh và các cột sẽ tự động sắp xếp lại tùy theo kích thước màn hình.
Đảm bảo rằng tổng cộng tối đa là 12 hoặc ít hơn (không bắt buộc bạn phải sử dụng tất cả 12 cột có sẵn).
Lớp lưới
Hệ thống lưới Bootstrap 5 có sáu lớp:
-
.col-(thiết bị cực nhỏ - chiều rộng màn hình nhỏ hơn 576px) -
.col-sm-(thiết bị nhỏ - chiều rộng màn hình bằng hoặc lớn hơn 576px) -
.col-md-(thiết bị trung bình - chiều rộng màn hình bằng hoặc lớn hơn 768px) -
.col-lg-(thiết bị lớn - chiều rộng màn hình bằng hoặc lớn hơn 992px) -
.col-xl-(thiết bị xlarge - chiều rộng màn hình bằng hoặc lớn hơn 1200px) -
.col-xxl-(thiết bị xxlarge - chiều rộng màn hình bằng hoặc lớn hơn 1400px)
Các lớp trên có thể được kết hợp để tạo ra bố cục năng động và linh hoạt hơn.
Mẹo: Mỗi lớp sẽ tăng quy mô, vì vậy nếu bạn muốn đặt cùng độ rộng cho sm và md , bạn chỉ cần chỉ định sm .
Cấu trúc cơ bản của lưới Bootstrap 5
Sau đây là cấu trúc cơ bản của lưới Bootstrap 5:
<!-- Control the column width, and how they should appear on different
devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div> Hãy tự mình thử » Ví dụ đầu tiên: tạo một hàng ( <div class="row"> ). Sau đó, thêm số cột mong muốn (thẻ có lớp .col-*-* thích hợp). Ngôi sao đầu tiên (*) biểu thị mức độ phản hồi: sm, md, lg, xl hoặc xxl, trong khi ngôi sao thứ hai đại diện cho một số, tổng của mỗi hàng phải bằng 12.
Ví dụ thứ hai: thay vì thêm một số vào mỗi col , hãy để bootstrap xử lý bố cục để tạo các cột có chiều rộng bằng nhau: hai phần tử "col" = 50% chiều rộng cho mỗi cột, trong khi ba cột = 33,33% chiều rộng cho mỗi cột. Bốn cols = 25% chiều rộng, v.v. Bạn cũng có thể sử dụng .col-sm|md|lg|xl|xxl để làm cho các cột phản hồi nhanh.
Tùy chọn lưới
Bảng sau đây tóm tắt cách hệ thống lưới Bootstrap 5 hoạt động trên các kích thước màn hình khác nhau:
| Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | XXL (>=1400px) | |
|---|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops | Laptops and Desktops |
| # of columns | 12 | 12 | 12 | 12 | 12 | 12 |
| Gutter width | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes | Yes | Yes |
