Home » Web Design » [Bootstrap] Bài 3: Hệ thống lưới và căn chỉnh.

[Bootstrap] Bài 3: Hệ thống lưới và căn chỉnh.

This entry is part 3 of 5 in the series Bootstrap

Hệ thống căn chỉnh lưới trong bootstrap

Tổng quát

Ví dụ:
Trong một file html như sau:
screenshot-1

Chung ta sẽ thêm các đường linh file css, js vào như sau. Lưu ý các file css, js custom nên để dưới link file chính.
;
screenshot-2

Hệ thống lưới trong Bootstrap

Bootstrap chứa một hệ thống lưới responsive, tương thích với hầu hết các thiết bị di động. Nó được chia thành 12 cột tương thích với mọi kích thước khung nhìn của các thiết bị. Nó bao gồm các class được định nghĩa trước để thuận tiện cho việc xây dựng bố cục, cùng với đó một bộ các mixin để tạo ra nhiều bố cục theo ngữ nghĩa..

Các hệ thống lưới được sử dụng để tạo ra bố cực cho các trang bằng các chuỗi hàng và cột chứa nội dung của bạn. Và dưới đây là cách hệ thống lưới của Bootstrap hoạt động:

  • Các hàng được đặt bên trong một .container (fixed-width) hoặc .container-fluid (full-width) để căn chỉnh và thiết lập padding một cách thích hợp.
  • Sử dụng các hàng để tạo ra nhóm các cột theo hàng ngang.
  • Nội dung cần phải được đặt trong các cột, và chỉ có duy nhất các cột là phần tử con trực tiếp của các hàng.
  • Các class được định nghĩa trước như .row.col-xs-4 luôn sẵn có để dựng lên các bố cục lưới một cách nhanh nhất. Một số ít các mixin cũng được sử dụng để tạo ra các bố cục ngữ nghĩa.
  • Các cột tạo nên các gutter (khoảng trắng nằm giữa nội dung cột) bằng padding. Giá trị padding đó là độ lệch đối với cột đầu tiên và cột cuối cùng trong các hàng do giá trị margin âm trên các .row.
  • Các cột của lưới được tạo ra bằng cách chỉ định số các cột mà bạn muốn sử dụng trong tổng số 12 cột. Ví dụ, để tạo ra một bố cục với 3 cột có độ rộng bằng nhau, bạn hãy sử dụng 3 class .col-xs-4.

1: Các tùy chọn của lưới:

Hãy xem hệ thống lưới của Bootstrap hoạt động như thế nào trên các thiết bị trong bảng sau.

capture

Ví dụ:
Để hiển thị bắt đầu từ Small devices Tablets (≥768px) và chia làm 2 cột bằng nhau ta làm như sau:

Ta được:
screenshot-6

Như vậy thì 2 cột sẽ hiển thị từ col-sm-* trở lên, Nhưng khi màn hình là Extra small devices Phones (<768px) thì nó sẽ hiện thị 1 cột.

Đây là bảng hướng dẫn chia cột:

capture

Chúng ta cũng có thể quy định ở các màn hình sẽ hiển thị mấy cột. Ví dụ, ở (<768px) hiển thị 3 cột, (≥768px) hiển thị 4 cột và (≥992px) hiển thị 2 cột thì ta làm như sau:

 

2: Di chuyển cột:

Di chuyển cột sang phía bên phải bằng cách sử dụng các class .col-md-offset-*. Các class này làm tăng khoảng lề trái (margin-left) của một cột lên bằng * cột. Ví dụ, .col-md-offset-4 dịch .col-md-4 sang bên phải một khoảng cách bằng 4 lần chiều rộng của một cột.

capture

3: Thứ tự cột:

Dễ dàng thay đổi thứ tự của các cột trong hệ thống lưới bằng cách sử dụng các class .col-md-push-*.col-md-pull-*. như hình sau:

capture

Link demo bài này: các bạn xem tại đây.

Chúc các bạn thành công
Nếu có thắc mắc gì các bạn có thể comment ngay bên dưới. 🙂

Series Navigation<< [Bootstrap] Bài 2: Hướng dẫn cài Sublime Text và các plugin cần thiết[Bootstrap] Bài 4: Tạo Navigation Bar (menu) đơn giản. >>
Share
Share
Free WordPress Themes - Download High-quality Templates