Bootstrap 4 lưới
Hệ thống lưới Bootstrap 4
Hệ thống lưới của Bootstrap được xây dựng bằng flexbox và 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 đá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.
Đảm bảo rằng tổng cộng tối đa 12 hoặc ít hơn (không bắt buộc bạn phải sử dụng tất cả 12 cột có sẵn).
Lớp lưới
Hệ thống lưới Bootstrap 4 có năm lớp:
.col-(thiết bị cực nhỏ - chiều rộng màn hình nhỏ hơn 576px).col-sm-(thiết bị nhỏ - chiều rộng màn hình bằng hoặc lớn hơn 576px).col-md-(thiết bị trung bình - chiều rộng màn hình bằng hoặc lớn hơn 768px).col-lg-(thiết bị lớn - chiều rộng màn hình bằng hoặc lớn hơn 992px).col-xl-(thiết bị phóng to - chiều rộng màn hình 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 mở rộng quy mô, vì vậy nếu bạn muốn đặt cùng độ rộng cho
smvà md, bạn chỉ cần chỉ định sm.
Cấu trúc cơ bản của Bootstrap 4 Grid
Sau đây là cấu trúc cơ bản của lưới Bootstrap 4:
<!-- Control the column width, and how they should appear on different
devices -->
<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>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Ví dụ đầu tiên: 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). Dấu sao đầu tiên (*) đại diện cho khả năng phản hồi: sm, md, lg hoặc xl, trong khi dấu sao thứ hai đại diện cho một số, sẽ cộng tối đa 12 cho mỗi hàng.
Ví dụ thứ hai: thay vì thêm một số vào mỗi colcột, hãy để bootstrap xử lý bố cục, để tạo các cột có chiều rộng bằng nhau: hai "col"phần tử = 50% chiều rộng cho mỗi cột. ba cols = 33,33% chiều rộng cho mỗi col. bốn cột = 25% chiều rộng, v.v. Bạn cũng có thể sử dụng .col-sm|md|lg|xlđể làm cho các cột phản hồi.
Dưới đây chúng tôi đã thu thập một số ví dụ về bố cục lưới Bootstrap 4 cơ bản.
Ba cột bằng nhau
Ví dụ sau đây cho thấy cách tạo ba cột có chiều rộng bằng nhau, trên tất cả các thiết bị và chiều rộng màn hình:
Thí dụ
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Các cột đáp ứng
Ví dụ sau đây cho thấy cách tạo bốn 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 cực lớn. Trên điện thoại di động hoặc màn hình có chiều rộng dưới 576px, các cột sẽ tự động xếp chồng lên nhau :
Thí dụ
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Hai cột phản hồi 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à mở rộng sang các máy tính để bàn lớn hơn:
Thí dụ
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Mẹo: Bạn sẽ tìm hiểu thêm về lưới Bootstrap 4 ở phần sau trong hướng dẫn này.