Bootstrap 5 Hệ thống lưới

Hệ thống lưới

Hệ thống lưới của Bootstrap được xây dựng dựa trên flexbox, trang web 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:

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 (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 cung cấp sáu lớp:

  • .col- (Điều kiện thiết bị rất nhỏ - độ rộng màn hình nhỏ hơn 576px)
  • .col-sm- (Điều kiện thiết bị nhỏ - độ rộng màn hình bằng hoặc lớn hơn 576px)
  • .col-md- (Điều kiện thiết bị trung - độ rộng màn hình bằng hoặc lớn hơn 768px)
  • .col-lg- (Điều kiện thiết bị lớn - độ rộng màn hình bằng hoặc lớn hơn 992px)
  • .col-xl- (Điều kiện thiết bị rất lớn - độ rộng màn hình bằng hoặc lớn hơn 1200px)
  • .col-xxl- (Điều kiện thiết bị lớn - độ rộng màn hình bằng hoặc lớn hơn 1400px)

Kết hợp các lớp trên để tạo ra 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 đặt cùng một độ rộng cho sm và md, bạn chỉ cần quy đị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 chiều rộng cột, và 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>

Thử ngay

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 .col-*-* thẻ lớp). Đ颗 ngôi sao (*) đại diện cho tính phản hồi: sm, md, lg, xl hoặc xxl, và ngôi sao thứ hai đại diện cho một số, tổng cộng mỗi hàng nên là 12.

Ví dụ thứ hai: không phải cho mỗi col Thêm một số, để bootstrap xử lý bố cục, để tạo ra các cột đồng đều: hai "col" Element = chiều rộng 50% của mỗi cột, trong khi ba cột = chiều rộng 33.33% của mỗi cột. Bốn cột = 25% chiều rộng. Bạn cũng có thể sử dụng .col-sm|md|lg|xl|xxl Làm cho cột có tính phản hồi.

Tùy chọn lưới

Bảng dưới đây tóm tắt cách mà hệ thống lưới Bootstrap 5 hoạt động trên các kích thước màn hình khác nhau:

Siêu nhỏ (<576px) Nhỏ (>=576px) Trung (>=768px) Lớn (>=992px) Siêu lớn (>=1200px) Cực lớn (>=1400px)
Tiền tố lớp .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Hành vi lưới Luôn ngang Bắt đầu gấp, ở trên điểm ngang Bắt đầu gấp, ở trên điểm ngang Bắt đầu gấp, ở trên điểm ngang Bắt đầu gấp, ở trên điểm ngang Bắt đầu gấp, ở trên điểm ngang
Chiều rộng khay None (tự động) 540px 720px 960px 1140px 1320px
Dành cho Máy di động dọc Máy di động ngang Máy tính bảng Laptop Laptop và máy tính để bàn Laptop và máy tính để bàn
Cột # 12 12 12 12 12 12
Chiều rộng Gutter 1.5rem (ở mỗi bên của cột .75rem) 1.5rem (ở mỗi bên của cột .75rem) 1.5rem (ở mỗi bên của cột .75rem) 1.5rem (ở mỗi bên của cột .75rem) 1.5rem (ở mỗi bên của cột .75rem) 1.5rem (ở mỗi bên của cột .75rem)
Thức ăn Có Có Có Có Có Có
Dời Có Có Có Có Có Có
Sắp xếp cột Có Có Có Có Có Có