Tự học Bootstrap – Cơ bản – bài 02 – Hệ thống lưới

Hệ thống lưới trong Bootstrap

Hệ thống lưới Bootstrap cho phép tối đa chia thành 12 cột theo chiều ngang của trang.

Nếu bạn không muốn dùng tất cả 12 cột độc lập , bạn có thể nhóm các cột lại để tạo ra cột rộng hơn:

span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1
span 4				span 4				span 4
span 4				span 8
span 6						span 6
span 12

Hệ lưới Bootstrap thì tự động tương thích với nhiều kiểu màn hình, các cột sẽ tự động tái sắp xếp tùy vào kích thước màn hình.

---

Các lớp trong hệ lưới

Trong hệ lưới Bootstrap có 04 lớp:

• xs (dành cho điện thoại)
• sm (dành cho máy tính bảng)
• md (dành cho desktops)
• lg (dành cho desktops cỡ lớn)

Các lớp trên có thể kết hợp với nhau để tạo ra nhiều layout động và phức tạp.

---

Cấu trúc cơ bản của 01 lưới Bootstrap

Xem ví dụ sau:

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

Đầu tiên; tạo 01 dòng (<div class="row">). Sau đó, thêm số lượng cột mong muốn (bắt đầu tên lớp bằng chữ .col-*-* ). Chú ý rằng tổng số cột cho mỗi dòng tối đa là 12 trong lớp .col-*-* .

Sau đây, tôi sẽ đưa ra vài ví dụ cơ bản về hệ thống layout lưới Bootstrap.

---

03 cột bằng nhau

Ví dụ sau sẽ cho thấy cách tạo 03 cột bề rộng bằng nhau khi hiển thị dù là máy tính bảng hay desktop. Trên di động , các cột sẽ tự động hiển thị xếp chồng theo hàng dọc:

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

---

02 cột không bằng nhau

Ví dụ sau hiển thị cách tạo 02 cột có bề rộng khác nhau dù trên máy tính bảng hay desktop:

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

P/S: Bạn sẽ học thêm về lưới Bootstrap trong các bài hướng dẫn sau.