bootstrap grid
Grid system được sử dụng để tạo bố cục trang web thông qua một loạt các hàng và cột chứa nội dung.
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 không muốn sử dụng tất cả 12 cột riêng lẻ, chúng ta có thể nhóm các cột lại với nhau để tạo các cột rộng hơn.
Hệ thống lưới của Bootstrap đáp ứng 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(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.
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="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>
Trước tiên, chúng ta tạo một hàng (<div class="row">). Sau đó, chúng ta thêm số lượng cột mong muốn (thẻ với các lớp .col-*-* thích hợp).
Lưu ý rằng các số trong lớp .col-*-* phải luôn có tối đa 12 cho mỗi hàng.
Dưới đây là 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ệ đến 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 nhỏ hơn 768px, các cột sẽ tự động xếp chồng lên nhau.
Ví dụ
<div class="container-fluid"> <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> </div>
Hai cột không bằng nhau
Ví dụ sau đây cho thấy cách lấy hai cột có độ rộng khác nhau bắt đầu từ máy tính bảng và chia tỷ lệ trên máy tính để bàn lớn.
Ví dụ
<div class="container-fluid"> <div class="row"> <div class="col-sm-4">.col-sm.4</div> <div class="col-sm-8">.col-sm.8</div> </div> </div>