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
Kích thước màn hình
Lớp (Class)
Kích thước chiều rộng
Mô tả
Extra small (xs)
col-xs-*
< 768px
Dành cho mobile (điện thoại) có kích thước nhỏ hơn 768px
Small (sm)
col-sm-*
≥ 768px
Dành cho tablet và các thiết bị có kích thước từ 768px đến 991px
Medium (md)
col-md-*
≥ 992px
Dành cho desktop vừa và các thiết bị có kích thước từ 992px đến 1199px
Large (lg)
col-lg-*
≥ 1200px
Dành cho desktop lớn và các thiết bị có kích thước từ 1200px trở lên
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.
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.
This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
Strictly Necessary Cookies
Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.