Bootstrap - Tạo bố cục trang

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 :

...

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 một website với bố cục đơn giản hiển thị trên desktop

phần đầu



cột trái

cột phải



phần cuối

phần đầu

cột trái

cột phải

phần cuối

Bạn thấy đó, chỉ cần vài lệnh đơn giản, bạn đã có thể tùy biến bố cục của trang rất dể dàng, thay vì ngồi viết các đoạn css mình chỉ cần gọi lại các class của boostrap là đã có bố cục rất nhanh.