Trong bài này chúng ta sẽ học về hệ thống lưới của Bootstrap 4. Mặc dù cũng là hệ thống 12 cột thế nhưng hệ thống lưới của Bootstrap 4 có đôi chút khác biệt với Bootstrap 3 vì vậy bạn tránh nhầm lẫn khi sử dụng nhé!
Hệ thống lưới Bootstrap 4 (Bootstrap 4 Grid System).
Hệ thống lưới của Bootstrap được xây dựng bằng flexbox và cho phép tối đa 12 cột trên toàn trang.
Nếu bạn không muốn sử dụng tất cả 12 cột riêng lẻ, bạn có thể nhóm các cột lại với nhau để tạo các cột rộng hơn:
Hệ thống lưới có tính đáp ứng và các cột sẽ tự động sắp xếp lại tùy thuộc vào kích thước màn hình. Tuy nhiên chúng ta cần đảm bảo rằng tổng số cột tối đa là 12 hoặc ít hơn (không bắt buộc bạn phải sử dụng tất cả 12 cột có sẵn).
Cá lớp lưới (Grid Classes).
Điểm mới là Hệ thống lưới Bootstrap 4 có năm lớp
- .col- (thiết bị cực nhỏ - chiều rộng màn hình nhỏ hơn 576px)
- .col-sm- (thiết bị nhỏ - chiều rộng màn hình bằng hoặc lớn hơn 576px)
- .col-md- (thiết bị trung bình - chiều rộng màn hình bằng hoặc lớn hơn 768px)
- .col-lg- (thiết bị lớn - chiều rộng màn hình bằng hoặc lớn hơn 992px)
- .col-xl- (thiết bị phóng to - chiều rộng màn hình bằng hoặc lớn hơn 1200px)
Các lớp trên có thể được kết hợp để tạo ra các bố cục năng động và linh hoạt hơn. Nếu từng học Bootstrap 3 chúng ta sẽ dễ dàng nhận ra lớp .col-xs- ở BS3 đã bị bỏ thay bằng lớp .col-.
Mẹo: Mỗi lớp sẽ tăng tỷ lệ, vì vậy nếu bạn muốn đặt cùng độ rộng cho sm và md, bạn chỉ cần chỉ định sm.
Cấu trúc cơ bản của Bootstrap 4 Grid.
Dưới đây là cấu trúc cơ bản của lưới Bootstrap 4:
<!-- Đ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 Hoc.tv> <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>
Phân tích code ví dụ
- Đầu tiên tạo một hàng (<div class = "row">).
- Sau đó, thêm số cột mong muốn (các thẻ có các lớp .col - * - * thích hợp).
- Dấu sao đầu tiên (*) đại diện cho khả năng phản hồi: sm, md, lg hoặc xl,
- Dấu sao thứ hai đại diện cho một số, sẽ cộng tối đa 12 cho mỗi hàng.
- Ví dụ 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.
Chúng ta có thể dùng lớp .col để cho Boostrap tự định nghĩa kích thước vùng con theo kích thước màn hình
<!-- 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%.
Các ví dụ lưới Bootstrap 4
Dưới đây là một số ví dụ về bố cục lưới Bootstrap 4 cơ bản.
Ba cột bằng nhau
Ví dụ sau cho thấy cách tạo ba cột có chiều rộng bằng nhau, trên tất cả các thiết bị và chiều rộng màn hình:
<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>
Cột đáp ứng (Responsive Columns)
Ví dụ sau đây cho thấy cách tạo bốn cột có chiều rộng bằng nhau ở màn hình máy tính bảng và kéo căng ra đến máy tính để bàn cực lớn. Trên điện thoại di động hoặc màn hình có chiều rộng nhỏ hơn 576px, các cột sẽ tự động xếp chồng lên nhau:
<div class="row"> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> </div>
Dạng 2 cột Responsive không cân xứng
Ví dụ sau đây cho thấy cách lấy hai cột có độ rộng khác nhau trên màn hình máy tính bảng và kéo căng ra đến các máy tính để bàn lớn hơn:
<div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>
Lời kết
Như vậy, chúng ta đã tìm hiểu xong cơ bản về hệ thống lưới trong Bootstrap 4 , cách định nghĩa hệ thống lưới cùng với các ví dụ cơ bản rồi đấy. Hẹn gặp các bạn ở bài viết tiếp theo nhé!
