Thiết lập một bố cục lưới
Một bố cục lưới dựa trên các dòng của các phần tử trôi, rất giống như bạn đã làm trong bố
cục của Pandaisia home page trong các học phần trước. Mỗi phần tử trôi hình thành một cột.
Tập các phần tử trôi cạnh nhau thiết lập một dòng. Để cung cấp một cấu trúc ổn định đối với
các đối tượng trôi này, nhiều bố cục lưới sử dụng phần tử div để đánh dấu các dòng và các
cột khác biệt của hệ thống lưới. Hãy cùng thẩm định ví dụ đơn giản sau của một hệ thống lưới
chứa một dòng đơn với hai cột:
<div class=”row”>
<div class=”column1”></div>
<div class=”column2”></div></div>
Bên trong các phần tử div này, bạn đặt nội dung trang, nhưng bạn không cần lo lắng về cái đó.
Cho bố cục chi tiết hơn, một cột có thể chứa một hệ thống lưới các dòng và cột của bản thân nó.
Code sau mở rộng bố cục lưới trước bằng cách đặt một grid 2 dòng và 2 cột bên trong mỗi row div
bên trong phần tử div column1:
<div class=”row”>
<div class=”column1”>
<div class=”row”>
<div class=”column1a”></div>
<div class=”column1b”></div></div>
<div class=”row”><div class=”column1c”></div>
<div class=”column1d”></div></div>
</div>
<div class=”column2”></div></div>
Nó là phổ biến trong các bố cục lưới để cung cấp các cột các tên class chỉ ra độ
rộng của chúng. Ví dụ, sử dụng một tên class “col-1-4” để chỉ một cột với width
bằng 1/4 hay 25 % hay sử dụng một tên class “col-2-3” để chỉ một cột với width
bằng 2/3 hay 67 %. Sử dụng hệ thống tên class này, HTML markup sau:
<div class=”row”>
<div class=”col-2-3”>
<div class=”row”>
<div class=”col-1-4”></div>
<div class=”col-1-4”></div>
<div class=”col-1-2”></div></div>
<div class=”row”>
<div class=”col-1-1”></div>
</div>
</div>
<div class=”col-1-3”></div>
</div>
dẫn đến kết quả bố cục lưới được thể hiện ở ảnh dưới. Chú ý rằng bố cục này chứa một dòng
đơn với hai cột với bản thân cột đầu tiên chứa ba cột được xắp sếp qua hai dòng. Nhớ là
mặc dù rằng các widths cột thực sự không được thiết lập bởi các tên class, thay vào đó chúng
được định nghĩa trong style sheet. Các tên class chỉ hỗ trợ cho chúng ta biên dịch bố cục lưới
trong file HTML.
