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ẽ tự động sắp xếp lại tùy thuộc vào kích thước màn hình.
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.
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="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> Đầ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). Lưu ý rằng các số trong .col-*-* phải luôn có tổng bằng 12 cho mỗi hàng.
Dưới đây chúng tôi đã thu thập một số ví dụ về bố cục lưới Bootstrap cơ bản.
Ba cột bằng nhau
Ví dụ sau đây cho thấy cách lấy ba cột có chiều rộng bằng nhau bắt đầu từ máy tính bảng và chia tỷ lệ cho máy tính để bàn lớn. Trên điện thoại di động hoặc màn hình có chiều rộng dưới 768px, các cột sẽ tự động xếp chồng:
Ví dụ
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div> Hãy tự mình thử »Hai cột không bằng nhau
Ví dụ sau đây cho thấy cách lấy hai cột có chiều rộng khác nhau bắt đầu từ máy tính bảng và chia tỷ lệ cho máy tính để bàn lớn:
Ví dụ
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div> Hãy tự mình thử »Mẹo: Bạn sẽ tìm hiểu thêm về lưới Bootstrap sau trong hướng dẫn này.
