Ví dụ về lưới Bootstrap
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, các cột sẽ tự động xếp chồng lên nhau:
Thí 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>
Ba cột không bằng nhau
Ví dụ sau đây cho thấy cách lấy ba cột có độ rộng khác nhau bắt đầu từ máy tính bảng và mở rộng đến máy tính để bàn lớn:
Thí dụ
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
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:
Thí dụ
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Không có máng xối
Sử dụng .row-no-gutterslớp để loại bỏ các máng xối khỏi một hàng và các cột của nó:
Thí dụ
<div class="row row-no-gutters">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Hai cột với hai cột lồng nhau
Ví dụ sau cho thấy cách lấy hai cột bắt đầu từ máy tính bảng và chia tỷ lệ cho máy tính để bàn lớn, với hai cột khác (chiều rộng bằng nhau) trong cột lớn hơn (ở điện thoại di động, các cột này và các cột lồng nhau của chúng sẽ xếp chồng lên nhau):
Thí dụ
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Hỗn hợp: Điện thoại di động và Máy tính để bàn
Hệ thống lưới Bootstrap có bốn lớp: xs (điện thoại), sm (máy tính bảng), md (máy tính để bàn) và lg (máy tính để bàn lớn hơn). Các lớp 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.
Thí dụ
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
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.
Hỗn hợp: Điện thoại di động, Máy tính bảng và Máy tính để bàn
Thí dụ
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
Clear Floats
Xóa các phao nổi (với .clearfixlớp) tại các điểm ngắt cụ thể để tránh gói lạ với nội dung không đồng đều:
Thí dụ
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
Cột bù trừ
Di chuyển các cột sang bên phải bằng cách sử dụng .col-md-offset-*các lớp. Các lớp này tăng lề trái của cột bằng * cột:
Thí dụ
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
</div>
Đẩy và kéo - Thay đổi thứ tự cột
Thay đổi thứ tự của các cột lưới với .col-md-push-*và
.col-md-pull-*các lớp:
Thí dụ
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>