Mẫu cơ bản Bootstrap 5
- Trang trước Lưới BS5 XXL
- Trang tiếp theo Mẫu cơ bản BS5
Dưới đây chúng tôi đã sắp xếp một số ví dụ về bố cục lưới Bootstrap 5.
Ba cột bằng nhau
Sử dụng trên số lượng phần tử đã chỉ định .col Class, Bootstrap sẽ nhận biết số lượng phần tử (và tạo ra các cột có độ rộng bằng nhau). Trong ví dụ sau, chúng ta đã sử dụng ba phần tử col, mỗi phần tử có độ rộng 33.33%.
Mẫu
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
Ba cột bằng nhau sử dụng số
Bạn cũng có thể sử dụng số để điều khiển độ rộng cột. Chỉ cần đảm bảo tổng số bằng hoặc nhỏ hơn 12 (không cần sử dụng tất cả 12 cột có sẵn):
Mẫu
<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>
Ba cột không bằng nhau
Để tạo ra các cột không bằng nhau, bạn phải sử dụng số. Ví dụ sau sẽ tạo ra phân chia 25%/50%/25%:
Mẫu
<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>
Thiết lập độ rộng của một cột
Tuy nhiên, chỉ cần thiết lập độ rộng của một cột là đủ, và để các cột anh em tự động điều chỉnh kích thước xung quanh. Ví dụ sau sẽ tạo ra phân chia 25%/50%/25%:
Mẫu
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
Nhiều cột bằng nhau hơn
Mẫu
<!-- hai cột bằng nhau --> <div class="row"> <div class="col">1 của 2</div> <div class="col">2 của 2</div> </div> <!-- bốn cột bằng nhau --> <div class="row"> <div class="col">1 của 4</div> <div class="col">2 của 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <!-- sáu cột bằng nhau --> <div class="row"> <div class="col">1 của 6</div> <div class="col">2 của 6</div> <div class="col">3 của 6</div> <div class="col">4 của 6</div> <div class="col">5 của 6</div> <div class="col">6 của 6</div> </div>
Row Cols
Bạn cũng có thể sử dụng .row-cols-* Số lượng cột điều khiển nên xuất hiện bên cạnh nhau (không kể số lượng cột):
Mẫu
<div class="row row-cols-1"> <div class="col">1 của 2</div> <div class="col">2 của 2</div> </div> <div class="row row-cols-2"> <div class="col">1 của 4</div> <div class="col">2 của 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 của 6</div> <div class="col">2 của 6</div> <div class="col">3 của 6</div> <div class="col">4 của 6</div> <div class="col">5 của 6</div> <div class="col">6 của 6</div> </div>
Nhiều cột không bằng nhau hơn
Mẫu
<!-- hai cột không bằng nhau --> <div class="row"> <div class="col-8">1 của 2</div> <div class="col-4">2 của 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>
Cao bằng nhau
Nếu một cột cao hơn cột khác (do văn bản hoặc chiều cao CSS), phần còn lại sẽ theo sau:
Mẫu
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
Cột nhúng
Dưới đây là ví dụ về cách tạo bố cục hai cột, trong đó một cột có thêm hai cột khác:
Mẫu
<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>
Lớp phản hồi
Hệ thống lưới Bootstrap 5 có năm lớp:
.col-(Máy tính siêu nhỏ - độ rộng màn hình nhỏ hơn 576px).col-sm-(Máy tính nhỏ - độ rộng màn hình bằng hoặc lớn hơn 576px).col-md-(Máy tính trung - độ rộng màn hình bằng hoặc lớn hơn 768 pixel).col-lg-(Máy tính lớn - độ rộng màn hình bằng hoặc lớn hơn 992 pixel).col-xl-(Máy tính lớn - độ rộng màn hình bằng hoặc lớn hơn 1200px).col-xxl-(Máy tính toa - độ rộng màn hình bằng hoặc lớn hơn 1400px)
Bạn có thể kết hợp các lớp trên để tạo ra bố cục động và linh hoạt hơn.
Lưu ý:Mỗi lớp đều được mở rộng theo tỷ lệ, vì vậy nếu bạn muốn cho sm và md Để đặt cùng một độ rộng, chỉ cần chỉ định sm。
Sắp xếp theo chiều dọc
Dưới đây là ví dụ về cách tạo bố cục cột, bắt đầu bằng việc sắp xếp theo chiều dọc trên các thiết bị siêu nhỏ, sau đó chuyển sang bố cục ngang trên các thiết bị lớn hơn (sm, md, lg và xl):
Mẫu
<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>
Kết hợp và phù hợp
Mẫu
<!-- Phân chia 50%/50% trên thiết bị siêu nhỏ, 75%/25% trên thiết bị lớn. --> <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> <!-- Phân chia 58%/42% trên thiết bị siêu nhỏ, nhỏ, trung, 66.3%/33.3% trên thiết bị lớn và siêu lớn. --> <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> <!-- Phân chia 25%/75% trên thiết bị nhỏ, 50%/50% trên thiết bị trung, 33%/66% trên thiết bị lớn và siêu lớn. Trên thiết bị siêu nhỏ, sẽ tự động xếp chồng (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>
Không có gutter
Nếu muốn thay đổi khoảng cách giữa các cột (khoảng trống thêm), hãy sử dụng bất kỳ .g-1|2|3|4|5 Loại (.g-4 Là giá trị mặc định).
Nếu muốn xóa hoàn toàn viền cuốn (gutter), hãy sử dụng .g-0：
Mẫu
<div class="row g-0">
- Trang trước Lưới BS5 XXL
- Trang tiếp theo Mẫu cơ bản BS5
