Bootstrap - Demo lưới

Grid là gì?

Trong thiết kế đồ họa, lưới là một cấu trúc (thường là hai chiều) được tạo thành từ một loạt các đường thẳng (dọc, ngang) giao nhau được sử dụng để cấu trúc nội dung. Nó được sử dụng rộng rãi để thiết kế bố cục và cấu trúc nội dung trong thiết kế in ấn. Trong thiết kế web, nó là một phương pháp rất hiệu quả để tạo một bố cục nhất quán một cách nhanh chóng và hiệu quả bằng cách sử dụng HTML và CSS.

Hoạt động của hệ thống lưới Bootstrap

Hệ thống lưới được sử dụng để tạo bố cục trang thông qua một loạt các hàng và cột chứa nội dung của bạn. Đây là cách hệ thống lưới Bootstrap hoạt động -

• Các hàng phải được đặt trong một .container lớp để căn chỉnh và đệm thích hợp.

• Sử dụng các hàng để tạo các nhóm cột theo chiều ngang.

• Nội dung phải được đặt trong các cột và chỉ các cột mới có thể là con ngay lập tức của các hàng.

• Các lớp lưới được xác định trước như .row and .col-xs-4có sẵn để nhanh chóng tạo bố cục lưới. LESS mixin cũng có thể được sử dụng cho nhiều bố cục ngữ nghĩa hơn.

• Cột tạo rãnh (khoảng trống giữa nội dung cột) thông qua đệm. Khoảng đệm đó được bù đắp trong các hàng cho cột đầu tiên và cột cuối cùng thông qua lề âm trên.rows.

• Cột lưới được tạo bằng cách chỉ định số lượng mười hai cột có sẵn mà bạn muốn kéo dài. Ví dụ: ba cột bằng nhau sẽ sử dụng ba.col-xs-4.

Thí dụ	Sự miêu tả	Liên kết tải xuống
Lưới	Ví dụ này chỉ ra về cấu trúc lưới trong Bootstrap.	Tải xuống