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.

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

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.

Liên hệ