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 :
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8bRnM28DsAfOcTU6enQwdrrhkRX5-hA_OUuh93ZRAtORyKEW9-4zSQGxBAITBCVjermEUGSQOe532U4qzaxwG8F8w-iFtAOLbVPORoOv8pPUZClkcVsWqtjzdJxYJRB0nCtVvTcy_-zk/s1600/1.png)
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ấ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 đầucột tráicột phảiphầ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.
0 comments:
Post a Comment