Hệ thống lưới (grid system) các điểm dừng (breakpoints) trong Bootstrap 3

Trong Bootstrap 3, hệ thống lưới (grid system) dựa trên các điểm dừng (breakpoints) để thiết kế giao diện phản hồi (responsive). Các breakpoints này tương ứng với các kích thước màn hình khác nhau (mobile, tablet, desktop), từ đó điều chỉnh layout của website phù hợp với từng thiết bị.

Các điểm dừng (breakpoints) chính trong Bootstrap 3

Giải thích chi tiết

• col-xs-* (Extra small): Dành cho các thiết bị có kích thước màn hình nhỏ hơn 768px, thường là điện thoại. Lớp này không có điểm dừng tối thiểu, tức là nó sẽ áp dụng cho tất cả các thiết bị từ màn hình cực nhỏ cho đến các thiết bị lớn hơn nếu không có lớp col-sm-*, col-md-*, hoặc col-lg-*.
• col-sm-* (Small): Dành cho các thiết bị như tablet và một số màn hình nhỏ. Breakpoint này áp dụng khi kích thước màn hình từ 768px đến 991px.
• col-md-* (Medium): Dành cho desktop cỡ vừa. Kích thước màn hình từ 992px đến 1199px.
• col-lg-* (Large): Dành cho desktop lớn, kích thước màn hình lớn hơn hoặc bằng 1200px.

Ví dụ sử dụng các breakpoints

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      Cột 1
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      Cột 2
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      Cột 3
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      Cột 4
    </div>
  </div>
</div>

Cách hoạt động của ví dụ trên:

• Trên màn hình nhỏ hơn 768px (mobile – xs): Mỗi cột sẽ chiếm toàn bộ chiều rộng màn hình (col-xs-12).
• Trên màn hình từ 768px đến 991px (tablet – sm): Mỗi cột chiếm 50% chiều rộng màn hình (col-sm-6), tức là có 2 cột mỗi hàng.
• Trên màn hình từ 992px đến 1199px (desktop vừa – md): Mỗi cột chiếm 33.33% chiều rộng màn hình (col-md-4), tức là có 3 cột mỗi hàng.
• Trên màn hình lớn hơn hoặc bằng 1200px (desktop lớn – lg): Mỗi cột chiếm 25% chiều rộng màn hình (col-lg-3), tức là có 4 cột mỗi hàng.

Kết luận

Các breakpoints trong Bootstrap 3 giúp bạn kiểm soát layout của website trên các thiết bị với kích thước màn hình khác nhau. Việc sử dụng các lớp col-xs-*, col-sm-*, col-md-*, và col-lg-* giúp tạo ra các giao diện tương thích trên mobile, tablet và desktop.