Bài 4. Bootstrap Girds (lưới)

1.Hệ thống lưới trong bootstrap

Bootstrap gird (lưới) chia màn hình thành 12 cột bằng nhau.

Nếu bạn không muốn sử dụng tất cả 12 cột riêng, bạn có thể nhóm các cột lại với nhau để tạo ra các cột rộng hơn:

Hệ thống lưới (grids) trong bootstrap hỗ trợ responsive và các cột sẽ sắp xếp tự động tùy thuộc vào kích cỡ màn hình.

2. Các lớp với lưới (grids)

Hệ thống lưới (grids) trong bootstrap có 4 lớp

+) xs (cho điện thoại)

+) sm (cho tablets)

+) md (cho desktop)

+) lg (cho màn hình lớn hơn desktop)

Các lớp học trên có thể được kết hợp để bố trí năng động và linh hoạt hơn.

3. Cấu trúc cơ bản của lưới (grids) trong bootstrap

Dưới đây là một cấu trúc cơ bản của một lưới (grids) Bootstrap:

 <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 ra một hàng (<div class = "row">). Sau đó, thêm số mong muốn của cột (thẻ với .col thích hợp - * - * các lớp). Lưu ý rằng con số trong .col - * - * nên luôn luôn có tổng đến 12 cho mỗi hàng.

4.Ví dụ với 3 cột bằng nhau

Ví dụ sau đây cho thấy làm thế nào để có được ba cột bằng chiều rộng bắt đầu từ máy tính bảng và máy tính để bàn rộng đến lớn. Trên điện thoại di động, các cột sẽ tự động ngăn xếp:

 <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>