Quy tắc, cấu trúc và các tùy chọn lưới trong Bootstrap 3

Trong bài trước chúng ta đã tìm hiểu về hệ thống Grid cơ bản trong Bootstrap 3 rồi vào phải không nào. Trong bài này chúng ta sẽ tìm hiểu chi tiết về hệ thống lưới (Grid) trên Bootstrap 3 này nhé. Bài học gồm các phần quy tắc, cấu trúc và các tùy chọn lưới trong Bootstrap 3 mời các bạn cùng theo dõi.

Nhắc lại về Bootstrap 3 Grid System

Hệ thống lưới của Bootstrap 3 cho phép tối đa 12 cột trên toàn trang, dựa vào nhu cầu của bản thân bạn có thể nhóm các cột lại với nhau để tạo các cột rộng hơn như thể hiện ở hình dưới

Hệ thống lưới của Bootstrap là responsive và các cột sẽ sắp xếp lại tùy thuộc vào kích thước màn hình: Trên màn hình lớn, nội dung có thể trông đẹp hơn với nội dung được tổ chức thành ba cột, nhưng trên màn hình nhỏ sẽ tốt hơn nếu các mục nội dung được xếp chồng lên nhau

Các quy tắc hệ thống lưới Bootstrap 3

Dưới đây là một số quy tắc hệ thống lưới Bootstrap:

• Các hàng phải được đặt trong .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 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à phần tử con trực tiếp của các hàng
• Các lớp được xác định trước như .row  và .col-sm-4  có sẵn để nhanh chóng tạo bố cục lưới
• Cột tạo tạo thành gutters (khoảng trắng nằm giữa nội dung cột) thông qua padding. Khoảng đệm  (padding) đó đượ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 .row 
• Các cột của lưới được tạo bằng cách chỉ định số lượng trong 12 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-sm-4
• Chiều rộng cột tính theo phần trăm, vì vậy chúng luôn linh hoạt và có kích thước tương ứng với phần tử mẹ của chúng

Cấu trúc cơ bản của lưới Bootstrap

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

<div class="container">
<div class="row">
  <div class="col-*-*"></div>
  <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í dụ trên cho thấy để tạo bố cục bạn muốn, trước hết bạn cần tạo một vùng chứa <div class="container">. Tiếp theo, tạo một hàng <div class="row">. . Sau đó, thêm số cột mong muốn (các thẻ với các lớp .col-*-* thích hợp). Lưu ý rằng số .col - * - *  cho mỗi hàng tối đa là 12.

Tùy chọn lưới (Grid Options)

Bảng sau đây tóm tắt cách hệ thống lưới Bootstrap hoạt động trên nhiều thiết bị:

Ví dụ

Các bài học tiếp theo sẽ trình bày các ví dụ về hệ thống lưới cho các thiết bị khác nhau:

• Stacked-to-horizontal
• Small devices
• Medium devices
• Large devices
• More grid examples

Lời kết

Trên đây là các toàn bộ các quy tắc, cấu trúc và các tùy chọn lưới trong Bootstrap 3 mà các bạn cần nhớ. Không có gì thay đổi trong bài sau chúng ta sẽ tìm hiểu chi tiết hơn nâng cao hơn về hệ thống lưới trong Bootstrap 3 nhé . Chúc các bạn học tốt!