Lưới Bootstrap - Bootstrap Grids.

Bài viết này tôi sẽ hướng dẫn về Bootstrap Grids và một vài ví dụ đơn giản để sử dụng lưới của Bootstrap trong thiết kế.

Hệ thống lưới của Bootstrap - Bootstrap Grid System

Hệ thống lưới của Bootstrap cho phép tạo tới 12 cột trong một trang.

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

Hệ thống lưới của Bootstrap là kiểu đáp lại(responsive), và các cột của bạn sẽ tự đông sắp xếp lại tương ứng với kích thước màn hình hiển thị.

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

Grid Classes:

Hệ thông lưới Bootstrap có 4 lớp:

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

Các lớp của Grid Bootstrap có thể được kếp hợp để tạo ra các bố trí năng động và linh hoạt.


Cấu trúc cơ bản của một lưới 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 một dòng (<div class="row">). sau đó thêm vào số cột mong muốn (gắn vào thẻ với các lớp .col-*-* phù hợp). Chú ý số cột trong .col-*-* phải đủ 12 cho mỗi dòng.

Bên dưới chúng tôi đã thu thập một số ví dụ cơ bản về Boostrap grid layout.


Three Equal Columns Bootstrap Grid - Lưới Bootstrap 3 Cột Bằng Nhau.

Ví dụ dưới đây sẽ trình bày cách tạo một lưới với 3 cột bằng nhau và sẽ tự đông sắp xếp thay đổi theo kích thước theo kích thước màn hình từ máy tính bảng, máy tính để bàn, máy tính để bàn to hơn, hoặc trên điện thoại.





Two Unequal Columns Bootstrap Grid - Lưới Bootstrap 2 Cột Không Bằng Nhau.

Ví dụ bên dưới sẽ hướng dẫn cách để tạo 2 cột với chiều rộng khác nhau có độ rộng tự đông thay đổi bắt đầu tù máy tính bảng tới máy tính bàn màn hình lớn.