Tương tự như Bootstrap 2, Bootstrap 4 cũng có hệ thống lưới 12 cột. Nếu bạn không muốn dùng 12 cột riêng lẻ, bạn có thể gom nhiều cột lại thành một cột rộng hơn.

Hệ thống lưới có tính đáp ứng, các cột sẽ tự động sắp xếp lại tùy theo kích thước màn hình. Bạn hãy chắn chắn tổng các cột phải là 12 hoặc ít hơn.

Các lớp lưới

Điểm mới ở Bootstrap 4 là hệ thống lưới có 5 lớp.

• .col- (thiết bị cực nhỏ – độ rộng màn hình ít hơn 576px)
• .col-sm- (thiết bị nhỏ – kích thước màn hình >= 576px)
• .col-md- (thiết bị trung bình – kích thước màn hình >= 768px)
• .col-lg- (thiết bị lớn – kích thước màn hình >= 992px)
• .col-xl- (thiết bị siêu lớn – kích thước màn hình >= 1200px)

Nếu để ý bạn có thể lấy lớp .col-xs- ở BS3 đã bị bỏ thay bằng lớp .col-. Các lớp ở trên có thể kết hợp để tạo bố cục giao diện linh hoạt và năng động hơn.

Cấu trúc cơ bản của một mạng lưới Bootstrap 4

Để định nghĩa một lưới BS4, bạn định nghĩa thẻ div với lớp .row ở ngoài, bên trong là các thẻ div với các lớp col-*-* định nghĩa cách hiển thị ở các kích thước màn hình.

Điều khiển chiều rộng cột và cách hiển thị trên các thiết bị khác nhau - dammio.com -->

Nếu bạn không muốn định nghĩa các vùng div con theo kích thước màn hình, bạn có thể dùng lớp .col để cho Boostrap tự định nghĩa kích thước này.

Bootstrap tự động định nghĩa kích thước bố cục theo chiều rộng màn hình >

Dự đoán các phiên bản sau của Bootstrap

Các bạn có thể thấy, Bootstrap 4 cũng chia thành 12 cột, nhưng tại sao phải là 12 cột mà không phải là 16 hay 24 cột hay con số nào khác. Đôi khi chúng ta cần cách chia nhiều cột hơn để có thể có nhiều bố cục giao diện đa dạng hơn. Vì vậy, có khả năng Bootstrap 5 sẽ có nhiều cột hơn.

Tương tự, với sự phát triển năng động của ngành chế tạo màn hình, ngày càng có nhiều thiết bị với độ phân giải rất cao (4K) vì vậy, khả năng cao là Bootstrap 5 phải có nhiều lớp hơn ngoài sm, md, lg, xl để đáp ứng nhu cầu. Hãy tưởng tượng, nếu bạn chạy một giao diện web trên màn hình 4K thì bạn sẽ thấy giao diện sẽ bị kéo căng ra và khoảng trống rất nhiều.

Các ví dụ

Tiếp theo, chúng ta sẽ xem các ví dụ sau để hiểu rõ hơn về Bootstrap.

Ba cột bằng nhau

Ví dụ này chứa 3 cột bằng nhau và kích thước do Bootstrap quyết định. Như vậy mỗi vùng sẽ có kích thước khoảng 33.33%.

.col
  
.col
  
.col
  

Cột đáp ứng

Ví dụ chứa 4 cột bằng nhau ở màn hình tablet và kéo căng ra đến các màn hình lớn. Nếu là thiết bị di động có kích thước bé hơn 576px thì các cột sẽ chồng lên nhau.

.col-sm-3
  
.col-sm-3
  
.col-sm-3
  
.col-sm-3
  

Dạng 2 cột đáp ứng không cân xứng

Đây là bố cục rất thường gặp ở giao diện Web dùng Bootstrap trên thực tế, tức gồm 2 cột: cột nhỏ chứa menu, cột to chứa nội dung. Trong ví dụ, hai cột sẽ có tỉ lệ 4-8 ở màn hình tablet và giữ nguyên cho đến màn hình có kích thước siêu rộng ở desktop.

.col-sm-4
  
.col-sm-8
  

Kết luận

Như vậy, bạn đã nắm được hệ thống lưới trong Bootstrap 4 và cách định nghĩa hệ thống lưới với các ví dụ cơ bản. Mời bạn tiếp tục theo dõi bài tiếp theo.