Hệ thống lưới Bootstrap
Hệ thống lưới Bootstrap
Hệ thống lưới của Bootstrap 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 của Bootstrap phản hồi nhanh và các cột sẽ sắp xếp lại tùy theo 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.
Mẹo: Hãy nhớ rằng các cột lưới phải có tổng cộng tối đa 12 cột cho một hàng. Hơn thế nữa, các cột sẽ xếp chồng lên nhau bất kể chế độ xem.
Lớp lưới
Hệ thống lưới Bootstrap có bốn lớp:
-
xs(dành cho điện thoại - màn hình rộng dưới 768px) -
sm(dành cho máy tính bảng - màn hình rộng bằng hoặc lớn hơn 768px) -
md(đối với máy tính xách tay nhỏ - màn hình rộng bằng hoặc lớn hơn 992px) -
lg(dành cho máy tính xách tay và máy tính để bàn - màn hình rộng 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 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 xs và sm, bạn chỉ cần chỉ định xs.
Quy tắc hệ thống lưới
Một số quy tắc hệ thống lưới Bootstrap:
- Các hàng phải được đặt trong
.container(có chiều rộng cố định) hoặc.container-fluid(toàn bộ chiều rộng) để căn chỉnh và đệm phù hợp - Sử dụng hàng để tạo nhóm cột 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 hàng
- Các lớp được xác định trước như
.rowvà.col-sm-4có sẵn để nhanh chóng tạo bố cục lưới - Các cột tạo ra các khoảng trống (khoảng trống giữa nội dung các cột) thông qua phần đệm. Phần đệm đó được bù theo hàng cho cột đầu tiên và cột cuối cùng thông qua lề âm trên
.rows - Các 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 mở rộng. Ví dụ: ba cột bằng nhau sẽ sử dụng ba
.col-sm-4 - Độ rộng cột được tính theo tỷ lệ 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ử gốc của chúng
Cấu trúc cơ bản của lưới Bootstrap
Sau đây là cấu trúc cơ bản của lưới Bootstrap:
<div class="container">
<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>
<div class="row">
...
</div>
</div> Vì vậy, để tạo bố cục bạn muốn, hãy tạo một vùng chứa ( <div class="container"> ). Tiếp theo, 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). Lưu ý rằng các số trong .col-*-* phải luôn có tổng bằng 12 cho mỗi hàng.
Tùy chọn lưới
Bảng sau đây tóm tắt cách hệ thống lưới Bootstrap hoạt động trên nhiều thiết bị:
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| 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) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
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ị khác nhau:
Bạn có biết không?
W3.CSS là một sự thay thế tuyệt vời cho Bootstrap.
W3.CSS nhỏ hơn, nhanh hơn và dễ sử dụng hơn.
Nếu bạn muốn tìm hiểu W3.CSS, hãy truy cập Hướng dẫn W3.CSS của chúng tôi.
