Bootstrap 5 Lưới

Bootstrap 5 Hệ thống lưới

Hệ thống lưới Bootstrap được xây dựng bằng flexbox, trang web có thể cho phép tối đa 12 cột.

Nếu bạn không muốn sử dụng tất cả 12 cột một cách riêng lẻ, bạn có thể kết hợp chúng lại để tạo ra các cột rộng hơn:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

Hệ thống lưới phản hồi nhanh chóng, các cột sẽ tự động sắp xếp lại dựa trên kích thước màn hình.

Hãy đảm bảo tổng số bằng hoặc nhỏ hơn 12 (nếu bạn không cần sử dụng tất cả 12 cột có sẵn).

Lớp lưới

Hệ thống lưới Bootstrap 5 có sáu 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 bình - độ 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 lớn - độ 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 Để thiết lập cùng một độ rộng, bạn chỉ cần chỉ định sm。

Cấu trúc cơ bản của lưới Bootstrap 5

Dưới đây là cấu trúc cơ bản của lưới Bootstrap 5:

/* Điều chỉnh độ rộng của cột, cũng như cách chúng hiển thị trên các thiết bị khác nhau */
<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>
/* hoặc để Bootstrap tự động xử lý bố cục */
<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ố lượng cột cần thiết (cùng với các thẻ lớp phù hợp) .col-*-* thẻ lớp). Đ颗 ngôi sao (*) đại diện cho tính tương ứng: sm, md, lg, xl hoặc xxl, còn ngôi sao thứ hai đại diện cho số, tổng của mỗi hàng nên là 12.

Ví dụ thứ hai: Không cung cấp cho mỗi col Thêm một số số, mà để bootstrap xử lý bố cục, để tạo các cột bằng nhau: hai "col" Phần tử = mỗi col có độ rộng 50%, trong khi ba cols = mỗi col có độ rộng 33.33%. Bốn cột = 25% độ rộng, v.v. Bạn cũng có thể sử dụng .col-sm|md|lg|xl|xxl Làm cho cột có tính tương ứng.

Dưới đây chúng tôi đã sắp xếp một số ví dụ cơ bản về bố cục lưới Bootstrap 5.

Cột chia ba

Dưới đây là ví dụ về cách bạn có thể tạo ba cột có độ rộng bằng nhau trên tất cả các thiết bị và độ rộng màn hình:

Mô hình

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Thử ngay lập tức

Cột tương ứng

Dưới đây là ví dụ về cách bạn có thể tạo bốn cột có độ rộng bằng nhau bắt đầu từ máy tính bảng và mở rộng đến bàn làm việc siêu lớn.Trên điện thoại hoặc màn hình có độ rộng nhỏ hơn 576px, các cột sẽ tự động chồng lên nhau:

Mô hình

<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>

Thử ngay lập tức

Cột tương ứng không bằng nhau

Dưới đây là ví dụ về cách bạn có thể nhận được hai cột có độ rộng khác nhau trên máy tính bảng và mở rộng đến bàn làm việc siêu lớn:

Mô hình

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Thử ngay lập tức

Lưu ý:Bạn sẽ học về Hệ thống lưới thêm nội dung.