Tìm hiểu về Bootstrap Grid System

♠ Posted by Hà Phạm in Bootstrap,Bootstrap Grid System,lập trình web,thiết kế web at 3:07 PM

Bootstrap được xây dựng trên đáp ứng lưới 12 cột, bố trí layouts và các thành phần.

---

Grid là gì?

Grid system là khái niệm bắt nguồn từ kỹ thuật in ấn, thiết kế đồ họa, thiết kế các poster, bìa sách, tạp chí,…. Đó là một hệ thống các đường kẻ ngang, dọc chia không gian trang thành nhiều ô để bạn đặt bố cục cho các phần của trang.

Một lưới điện được sử dụng rộng rãi để thiết kế bố trí và cấu trúc nội dung trong thiết kế in ấn.

Trong thiết kế web, một mạng lưới là một phương pháp rất hiệu quả để tạo ra một bố trí phù hợp nhanh chóng và hiệu quả sử dụng HTML và CSS.

---

Bootstrap Grid System

Được ứng dụng sang lĩnh vực thiết kế web, hệ thống grid chia layout web của bạn thành các hàng (row) và các cột (column). Cụ thể trong Bootstrap, layout sẽ được chia thành 12 cột, mỗi cột sẽ chiếm tỷ lệ % nhất định và bằng nhau trên layout.

Các hệ thống Grid đáp ứng một cách thích hợp quy mô lên đến 12 cột như là thiết bị hoặc tăng kích thước khung nhìn.

1	1	1	1	1	1	1	1	1	1	1	1
4				4				4
4				8
6						6
12

	Chiến lược điện thoại di động đầu tiên! Hãy nhớ rằng Bootstrap 3 là điện thoại di động đầu tiên! Mã cho Bootstrap giờ bắt đầu bằng cách nhắm mục tiêu nhỏ hơn như màn hình thiết bị di động và máy tính bảng, và sau đó "mở rộng" các thành phần và lưới điện cho màn hình lớn hơn.

---

Grid System Rules

Một số quy tắc Bootstrap Grid System:

• Bootstrap quy định các hàng (.row) phải nằm trong lớp .container hoặc lớp container-fluid. Nếu bạn bao các hàng bằng lớp container thì chiều rộng của lớp container của các thiết bị khác nhau được cho ở bảng trên. Còn nếu dùng container-fluid thì chiều rộng của nó sẽ full-width.
• Sử dụng hàng để tạo ra các nhóm ngang của cột
• Nội dung cần được đặt trong cột
• Các class được xác định trước như .row và .col-xs-4 có sẵn để nhanh chóng thực hiện bố trí lưới điện
• Cột tạo gutters (khoảng cách giữa các cột nội dung) thông qua padding. Đệm được bù đắp trong hàng cho cột đầu tiên và cuối cùng thông qua lợi nhuận tiêu cực .rows
• Cột lưới được tạo ra bằng cách xác định số 12 cột có sẵn, bạn muốn kéo dài. Ví dụ, ba cột bằng nhau sẽ sử dụng ba .col-xs-4

---

Cấu trúc cơ bản của một Bootstrap Grid

Sau đây là một cấu trúc cơ bản của một mạng lưới Bootstrap:

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

Vì vậy, để tạo ra những gì bạn muốn, tạo ra một container (một yếu tố <div> với class = "container"). Sau đó, tạo ra một hàng (một yếu tố <div> với class = "hàng"). Sau đó, thêm số mong muốn của các cột (thẻ với .col thích hợp - * - * lớp học). Lưu ý rằng các con số trong col - * - * nên luôn luôn thêm lên đến 12 cho mỗi hàng.

---

Tùy chọn Grid

Bảng sau đây tóm tắt như thế nào hệ thống lưới điện Bootstrap làm việc trên nhiều thiết bị:

	Extra small devices Phones (<768px)	Small devices Tablets (>=768px)	Medium devices Desktops (>=992px)	Large devices Desktops (>=1200px)
Grid behaviour	Horizontal at all times	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints
Container width	None (auto)	750px	970px	1170px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
Number of columns	12	12	12	12
Column width	Auto	~62px	~81px	~97px
Gutter width	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)
Nestable	Yes	Yes	Yes	Yes
Offsets	Yes	Yes	Yes	Yes
Column ordering	Yes	Yes	Yes	Yes

Bài viết được Thiet ke web o Ha Noi dịch từ nguồn nước ngoài nên đôi khi từ ngữ không được hay và đúng, mong các bạn thông cảm. Nếu các bạn có những vấn đề cần trao đôi hoặc có những nội dung hay thì cùng chia sẻ trên đây nhé!