Hệ thống lưới Bootstrap 4
Hệ thống lưới Bootstrap 4
Hệ thống lưới của Bootstrap cho phép tối đa 12 cột trên toàn trang.
Nếu bạn không muốn sử dụng tất cả 12 cột riêng lẻ, bạn có thể nhóm các cột lại với nhau để tạo các 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 của Bootstrap đáp ứng và các cột sẽ sắp xếp lại tùy thuộc vào kích thước màn hình: Trên màn hình lớn, nội dung được sắp xếp thành ba cột có thể trông đẹp hơn, nhưng trên màn hình nhỏ sẽ tốt hơn nếu các mục nội dung được xếp chồng lên nhau chồng lên nhau.
Lớp lưới
Hệ thống lưới Bootstrap 4 có năm 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ị phóng to - chiều rộng màn hình bằng hoặc lớn hơn 1200px)
Các lớp trên có thể được kết hợp để tạo ra các bố cục năng động và linh hoạt hơn.
Mẹo: Mỗi lớp tăng tỷ lệ, vì vậy nếu bạn muốn đặt cùng độ rộng cho
smvà md, bạn chỉ cần chỉ định sm.
Quy tắc hệ thống lưới
Một số quy tắc hệ thống lưới Bootstrap 4:
- Các hàng phải được đặt trong một
.container(chiều rộng cố định) hoặc.container-fluid(toàn chiều rộng) để căn chỉnh và đệm thích hợp - Sử dụng các hàng để tạo các nhóm cột theo chiều ngang
- Nội dung phải được đặt trong các cột và chỉ các cột mới có thể là con ngay lập tức của các hàng
- Các lớp được xác định trước thích
.rowvà.col-sm-4có sẵn để nhanh chóng tạo bố cục lưới - Các cột tạo rãnh (khoảng trống giữa nội dung cột) thông qua đệm. Khoảng đệm đó được bù đắp trong các hàng cho cột đầu tiên và cột cuối cùng thông qua lề âm trên
.rows - Cột lưới được tạo bằng cách chỉ định số lượng 12 cột có sẵn mà bạn muốn kéo dài. Ví dụ: ba cột bằng nhau sẽ sử dụng ba
.col-sm-4 - Chiều rộng cột tính theo phần trăm, vì vậy chúng luôn linh hoạt và có kích thước tương ứng với phần tử mẹ của chúng
- Sự khác biệt lớn nhất giữa Bootstrap 3 và Bootstrap 4 là Bootstrap 4 hiện sử dụng flexbox, thay vì float. Một lợi thế lớn với flexbox là các cột lưới không có chiều rộng được chỉ định sẽ tự động bố trí dưới dạng "cột có chiều rộng bằng nhau" (và chiều cao bằng nhau). Ví dụ: Ba phần tử với
.col-smwill tự động có chiều rộng 33,33% từ điểm ngắt nhỏ trở lên. Mẹo: Nếu bạn muốn tìm hiểu thêm về Flexbox, bạn có thể đọc Hướng dẫn CSS Flexbox của chúng tôi .
Lưu ý rằng Flexbox không được hỗ trợ trong IE9 và các phiên bản trước đó.
Nếu bạn yêu cầu hỗ trợ IE8-9, hãy sử dụng Bootstrap 3. Đây là phiên bản ổn định nhất của Bootstrap và nó vẫn được nhóm hỗ trợ cho các bản sửa lỗi và thay đổi tài liệu quan trọng. Tuy nhiên, sẽ không có tính năng mới nào được thêm vào nó.
Cấu trúc cơ bản của Bootstrap 4 Grid
Sau đây là cấu trúc cơ bản của lưới Bootstrap 4:
<!-- Control the column width, and how they should appear on different
devices -->
<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 class="col"></div>
</div>
Ví dụ đầu tiên: tạo một hàng ( <div
class="row">). Sau đó, thêm số cột mong muốn (thẻ với các
.col-*-*lớp thích hợp). Dấu sao đầu tiên (*) đại diện cho khả năng phản hồi: sm, md, lg hoặc xl, trong khi dấu sao thứ hai đại diện cho một số, luôn phải cộng tối đa 12 cho mỗi hàng.
Ví dụ thứ hai: thay vì thêm một số vào mỗi colcột, hãy để bootstrap xử lý bố cục, để tạo các cột có chiều rộng bằng nhau: hai "col"phần tử = 50% chiều rộng cho mỗi cột. ba cols = 33,33% chiều rộng cho mỗi col. bốn cột = 25% chiều rộng, v.v. Bạn cũng có thể sử dụng .col-sm|md|lg|xlđể làm cho các cột phản hồi.
Tùy chọn lưới
Bảng sau đây tóm tắt cách hoạt động của hệ thống lưới Bootstrap 4 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) | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| 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 |
| Container width | None (auto) | 540px | 720px | 960px | 1140px |
| Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops |
| # of columns | 12 | 12 | 12 | 12 | 12 |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes | Yes |
Các ví dụ
Các chương tiếp theo trình bày các ví dụ về hệ thống lưới cho các thiết bị và độ rộng màn hình khác nhau:
- Xếp chồng lên nhau
- Bố cục cực nhỏ
- Thiết bị nhỏ
- Thiết bị trung bình
- Thiết bị lớn
- Các thiết bị cực lớn
- Thêm các ví dụ về lưới