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 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.
Mẹo: Hãy nhớ rằng các cột lưới phải thêm tối đa mười hai 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ể khung nhìn.
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(dành cho 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 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 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 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
Cấu trúc cơ bản của Bootstrap Grid
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 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ẻ với các
.col-*-*lớp thích hợp). Lưu ý rằng các số trong .col-*-*phải luôn cộng tối đa 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 |
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 điện cho các thiết bị khác nhau: