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:

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:

Ngày thứ nhất; 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.

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ệ thành 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 lên nhau:

Hai cột không bằng nhau

Ví dụ sau 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ệ thành máy tính để bàn lớn: