Hệ thống lưới Bootstrap 4

Trong bài này, bạn sẽ học hệ thống lưới ở Bootstrap 4, có đôi chút khác biệt so với Bootstrap 3.

Hệ thống lưới Bootstrap 4
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 — dienloi.com –>
<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>
Trong ví dụ trên, các lớp .col-*-* có dấu sao đầu tiên (*) là kích thước màn hình: sm, md, lg hay xl, và dấu sao thứ hai thể hiện một số từ 1 đến 12. Chẳng hạn, .col-md-6 có nghĩa là ở màn hình thiết bị trung bình (kích thước màn hình >= 768px) thì vùng này chứa độ rộng là 6 cột con gộp lại, có độ rộng tối thiểu (768/12)*6 px = 384px.

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 –>
<div class=”row”>
<div class=”col”></div>
<div class=”col”></div>
<div class=”col”></div>
</div>
Ở ví dụ này, thay vì định nghĩa chiều rộng mỗi cột, Bootstrap sẽ tự động xử lý. Với 3 cột, có nghĩa là độ rộng sẽ là 100%/3 = khoảng 33%.

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

Học Bootstrap