Bài 2: Hệ thống lưới trong Bootstrap và responsive – Grid System Bootstrap

6

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.

Hệ thống lưới trong Bootstrap và responsive - Grid System Bootstrap
Hệ thống lưới trong bootstrap. Nguồn w3school

Đầ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ệ

  1. lộc nói

    HI anh! Em muốn khi sử dụng trên điện thoại hiển thị 2 cột thì sao anh?

    1. Admin nói

      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

  2. khang nói

    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

    1. Admin nói

      Bạn có thêm row vào chưa

  3. […] 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. […]

  4. […] 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ề […]

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.