Bài 2: Hệ thống lưới trong Bootstrap và responsive – Grid System Bootstrap
Trong bài học này, chúng ta sẽ tìm hiểu một phần rất quan trọng và cũng là một trong những lý do nên dùng Bootstrap là Hệ thống lưới trong Bootstrap và responsive – Grid System Bootstrap. Mình sẽ giới thiệu về hệ thống lưới cũng như cách sử dụng chúng.
Nội dung chính
Video – Hệ thống lưới trong Bootstrap và responsive – Grid System Bootstrap
Responsive là một ưu điểm và cũng là lý do tại sao nên dùng Bootstrap. Mình đã từng giới thiệu cách tạo web responsive trong bài 29 của HTML và CSS cơ bản. Nhưng cách làm đó rất mất thời gian và kh6ong tối ưu. Với hệ thống lưới Bootstrap, việc responsive cho web dễ dàng hơn.
Hướng dẫn chi tiết
Hệ thống lưới trong Bootstrap
Một lưu ý trước tiên là Bootstrap 4 chuyển sang dùng flexbox thay vì float cho hệ thống lưới này.
Website sẽ chia thành 12 cột có chiều rộng bằng nhau.

Đầu tiên cần khối có class container hoặc container-fluid bao bên ngoài. Sự khác biệt giữa 2 loại này là:
+ container: sẽ là một khối có chiều rộng khoảng 1200px, nằm chính giữa trang web.
+ container-fuild: sẽ là một khối có chiều rộng full màn hình.
Sau đó, bên trong khối container (container-fluid) là khối có class row chia thành từng phần theo hàng ngang
Trong mỗi row chia cột bằng 5 loại class col-loại màn hình chuẩn -số cột
FBI Warning - dưới đây có QUẢNG CÁO Bạn MUỐN TĂNG KÍCH THƯỚC website, nhanh, rẻ và dễ sử dụng có thể chọn hosting Azdigi nhé. Link đăng ký: https://my.azdigi.com/aff.php?aff=1612 Nếu các bạn click và đăng ký hosting từ link trên, mình sẽ có một ít tiền để duy trì.
Các loại chuẩn màn hình
+ xs: extremely small – phone – chiều rộng màn hình nhỏ hơn 576px
+ sm: small – tablet- máy tính bảng > 576px
+ md: medium – laptop >768px
+ lg: large màn hình desktop > 992px
+ xl: extremely large màn hình lớn > 1200px
Cách sử dụng
+ Nếu chỉ có 1 khối và không có số cột thì mặc định là 12 cột (full khối container).
+ Nếu bạn có 3 khối <div class=”col-md”> </div> thì sẽ tự động được chia đều như <div class=”col-md-4″> </div>. Vì như đã trình bày lúc đầu, Bootstrap 4 sử dụng flexbox.
+ Các màn hình có kích thước lớn hơn loại được sử dụng sẽ áp dụng giống, các màn hình nhỏ hơn sẽ tự động chuyển sang col-12 (một cột một hàng) nếu không có cài đặt riêng.
Ví dụ đoạn code sau
Thêm thẻ meta này vào phần head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Phần thẻ body như sau
<div class="container" style="background-color: grey; margin-bottom: 50px;"> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="khoi"></div> </div> <div class="col-md-8 col-sm-6 col-xs-12"> <div class="khoi"></div> </div> </div> </div>
Kết quả khi chạy của đoạn code trên
+ Khi màn hình có chiều rộng >768px thì mỗi hàng sẽ chia 2 cột, một cột 4 và một cột 8.
+ Nếu chiều rộng nhỏ hơn 768px thì sẽ chia thành 2 cột 6.
+ Nếu chiều rộng nhỏ hơn 576px, mỗi hàng chỉ còn 1 cột.
Code mẫu: Download
Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.
Admin cho mình hỏi sao download bootstrap về cài local , mà báo bị lỗi, ko download được
coi lại mạng nha
HI anh! Em muốn khi sử dụng trên điện thoại hiển thị 2 cột thì sao anh?
vậy bạn chia thành 2 cột, mỗi cột chiếm 6 phần, hiển thị khi màn hình nhỏ hơn 576. Dùng class col-sm-6 nha
em đã căn cho col-sm-8 vs sm-4 như trên mà nó chỉ hiện 1 hàng dọc thôi ạ
không tách thành cột
Bạn có thêm row vào chưa
[…] Nếu bạn còn vướng mắt vấn đề chia lưới Bootstrap và responsive, có thể tham khảo Bài 2: Hệ thống lưới Bootstrap – Grid System. […]
[…] cũng có sử dụng kiến thức về hệ thống lưới Bootstrap của bài 2. Ngoài ra các bạn cũng nên biết về […]