Bootstrap - Grid System

Grid System

Hệ thống lưới của Bootstrap được chia làm 12 cột.

Nếu bạn không sử dụng hết 12 cột, bạn có thê gom nhóm các cột lại với nhau :

---

Grid Classes

Bootstrap grid system có 4 class :

• xs : dành cho điện thoại
• sm : dành cho tablets
• md : dành cho desktops
• lg : dành cho desktops loại lớn

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

---

Cấu trúc cơ bản của Grid System

Sau đây là cấu trúc cơ bản của một grib system :

Cấu trúc :

1. <div class="row">
2. <div class="col-*1-*2">.....</div>
3. <div class="row">
4. <div class="col-1-*2">.....</div>
5. <div class="col-1-*2">.....</div>
6. <div class="col-1-*2">.....</div>
7. </div>

Trong đoạn code trên :

• <div class="row">.....</div> : tạo ra một dòng
• <div class="col-*1-*2">.....</div> : tạo ra số cột mong muốn trong dòng vừa tạo (trong đó : *1 là tên lớp, *2 là số cột)

Ví dụ : Tạo ra 3 cột bằng nhau hiển thị trên desktop

1. <div class="row" >
2. <div class="col-md-4" style="background-color:red;">Cột 1</div>
3. <div class="col-md-4" style="background-color:green;">Cột 2</div>
4. <div class="col-md-4" style="background-color:blue;">Cột 3</div>
5. </div>