Ví dụ về lưới Bootstrap 5
Dưới đây chúng tôi đã thu thập một số ví dụ về bố cục lưới Bootstrap 5.
Ba cột bằng nhau
Sử dụng lớp .col trên một số phần tử được chỉ định và Bootstrap sẽ nhận ra có bao nhiêu phần tử (và tạo các cột có chiều rộng bằng nhau). Trong ví dụ bên dưới, chúng tôi sử dụng ba phần tử col, mỗi phần tử có chiều rộng là 33,33%.
Ví dụ
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div
class="col">col</div>
</div> Hãy tự mình thử »Ba cột bằng nhau sử dụng số
Bạn cũng có thể sử dụng số để kiểm soát độ rộng của cột. Chỉ cần đả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):
Ví dụ
<div class="row">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
<div
class="col-4">col-4</div>
</div> Hãy tự mình thử »Ba cột không bằng nhau
Để tạo các cột không bằng nhau, bạn phải sử dụng số. Ví dụ sau sẽ tạo mức phân chia 25%/50%/25%:
Ví dụ
<div class="row">
<div class="col-3">col-3</div>
<div class="col-6">col-6</div>
<div
class="col-3">col-3</div>
</div>
Hãy tự mình thử » Đặt chiều rộng một cột
Tuy nhiên, chỉ cần đặt độ rộng của một cột và để các cột anh chị em tự động thay đổi kích thước xung quanh nó là đủ. Ví dụ sau sẽ tạo mức phân chia 25%/50%/25%:
Ví dụ
<div class="row">
<div class="col">col</div>
<div class="col-6">col-6</div>
<div
class="col">col</div>
</div>
Hãy tự mình thử »Nhiều cột bằng nhau hơn
Ví dụ
<!-- Two equal columns -->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four equal columns -->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
<!-- Six equal columns -->
<div class="row">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3
of 6</div>
<div class="col">4 of 6</div>
<div class="col">5
of 6</div>
<div class="col">6 of 6</div>
</div> Hãy tự mình thử »Hàng Cols
Bạn cũng có thể kiểm soát số lượng cột sẽ xuất hiện cạnh nhau (bất kể có bao nhiêu cột), bằng các lớp .row-cols-* :
Ví dụ
<div class="row row-cols-1">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
<div class="row row-cols-3">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3
of 6</div>
<div class="col">4 of 6</div>
<div class="col">5
of 6</div>
<div class="col">6 of 6</div>
</div> Hãy tự mình thử »Thêm cột không bằng nhau
Ví dụ
<!-- Two Unequal
Columns -->
<div class="row">
<div class="col-8">1 of 2</div>
<div class="col-4">2 of 2</div>
</div>
<!-- Four Unequal Columns -->
<div class="row">
<div class="col-2">1 of 4</div>
<div class="col-2">2 of 4</div>
<div class="col-2">3
of 4</div>
<div class="col-6">4 of 4</div>
</div>
<!-- Setting two column widths -->
<div class="row">
<div class="col-4">1 of 4</div>
<div class="col-6">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div> Hãy tự mình thử »Chiều cao bằng nhau
Nếu một trong các cột cao hơn cột kia (do chiều cao của văn bản hoặc CSS), phần còn lại sẽ theo sau:
Ví dụ
<div class="row">
<div class="col">Lorem ipsum...</div>
<div class="col">col</div>
<div class="col">col</div>
</div> Hãy tự mình thử »Cột lồng nhau
Ví dụ sau đây cho thấy cách tạo bố cục hai cột, với hai cột khác bên trong một trong các cột:
Ví dụ
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div> Hãy tự mình thử »Lớp học đáp ứng
Hệ thống lưới Bootstrap 5 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ị xlarge - chiều rộng màn hình bằng hoặc lớn hơn 1200px) -
.col-xxl-(thiết bị xxl - chiều rộng màn hình bằng hoặc lớn hơn 1400px)
Các lớp trên 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 sm và md , bạn chỉ cần chỉ định sm .
Xếp chồng lên nhau theo chiều ngang
Ví dụ sau đây cho thấy cách tạo bố cục cột bắt đầu được xếp chồng lên nhau trên các thiết bị cực nhỏ trước khi chuyển sang bố cục theo chiều ngang trên các thiết bị lớn hơn (sm, md, lg và xl):
Ví dụ
<div class="row">
<div class="col-sm-9">col-sm-9</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div
class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div> Hãy tự mình thử »Pha trộn và kết hợp
Ví dụ
<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices
-->
<div class="row">
<div class="col-6
col-sm-9">col-6 col-sm-9</div>
<div class="col-6
col-sm-3">col-6 col-sm-3</div>
</div>
<!-- 58%/42% split
on extra small, small and medium devices and 66.3%/33.3% split on large and
xlarge devices -->
<div class="row">
<div class="col-7 col-lg-8">col-7
col-lg-8</div>
<div class="col-5 col-lg-4">col-5
col-lg-4</div>
</div>
<!-- 25%/75% split on small devices, a 50%/50% split
on medium devices, and a 33%/66% split on large and xlarge devices. On extra
small devices, it will automatically stack (100%) -->
<div
class="row">
<div class="col-sm-3 col-md-6 col-lg-4">col-sm-3
col-md-6 col-lg-4</div>
<div class="col-sm-9 col-md-6
col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div> Hãy tự mình thử »Không có máng xối
Để thay đổi các khoảng trống (thêm khoảng trắng) giữa các cột, hãy sử dụng bất kỳ lớp .g-1|2|3|4|5 ( .g-4 là mặc định).
Để loại bỏ hoàn toàn máng xối, hãy sử dụng .g-0 :
Với một mục tiêu tối thiểu là có thể làm được, điều này sẽ không xảy ra khi bạn phải làm việc quá sức để có được một giải pháp sau mỗi giao dịch.
