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ệ cho 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:
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ử »Ba cột không bằng nhau
Ví dụ sau đây cho thấy cách lấy ba 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-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</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ử »Không có máng xối
Sử dụng lớp .row-no-gutters để loại bỏ các gutter khỏi một hàng và các cột của nó:
Ví 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> Hãy tự mình thử »Hai cột có hai cột lồng nhau
Ví dụ sau đây 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 (có chiều rộng bằng nhau) trong cột lớn hơn (trê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):
Ví 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ãy tự mình thử »Hỗn hợp: 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 bố cục năng động và linh hoạt hơn.
Mẹo: Mỗi lớp sẽ tăng quy mô, 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.
Ví 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> Hãy tự mình thử »Mẹo: Hãy nhớ rằng các cột lưới phải có tổng cộng tối đa 12 cột 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ể chế độ xem.
Hỗn hợp: Điện thoại di động, máy tính bảng và máy tính để bàn
Ví 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> Hãy tự mình thử »Xóa nổi
Xóa các float (với lớp .clearfix ) tại các điểm dừng cụ thể để ngăn chặn việc gói lạ với nội dung không đồng đều:
Ví 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> Hãy tự mình thử »Cột bù đắp
Di chuyển các cột sang bên phải bằng cách sử dụng các lớp .col-md-offset-* . Các lớp này tăng lề trái của một cột thêm * cột:
Ví 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> Hãy tự mình thử »Đẩy và kéo - Thay đổi thứ tự cột
Thay đổi thứ tự của các cột lưới với các lớp .col-md-push-* và .col-md-pull-* :
Ví 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> Hãy tự mình thử »