[Bootstrap] Phần 2: Hệ thống lưới trong Bootstrap

Nội dung của phần này là về hệ thống lưới được sử dụng trong Bootstrap. Như các bạn đã biết, độ rộng màn hình 1 trang web dùng Bootstrap là tương đối, tức là độ rộng này tùy thuộc theo kích thước màn hình.

Hệ thống lưới của Bootstrap chia thành 12 cột theo chiều rộng của trang. Chúng ta có thể gom các cột lại với nhau để tạo thành vùng lớn hơn, chẳng hạn 4 cột có độ rộng 1 được gom thành 1 cột có độ rộng 4.

Khi thiết kế giao diện, người thiết kế phải đảm bảo độ rộng của các cột tạo thành luôn là 12 để giao diện không bị bể (hiển thị sai). Các trường hợp thiết kế:

• span 3 – span 9: OK
• span 4 – span 8: OK
• span 5 – span 7: OK
• span 3 – span 4 – span 5: OK
• span 4 – span 6 – span 2: OK
• span 8 – span 6: không OK, vì tổng số cột là 14, lớn hơn số cột tối đa là 12

Các lớp lưới
Trong Bootstrap, có 4 lớp lưới chính như sau:

• xs (dùng cho di động): có chiều rộng màn hình nhỏ hơn 768px
• sm (dùng cho tablet): có chiều rộng màn hình từ 768px trở lên
• md (dùng cho desktop): có chiều rộng màn hình từ 992px trở lên
• lg (dùng cho desktop có kích thước lớn): có chiều rộng màn hình từ 1200px trở lên

Tùy theo thiết kế, bạn có thể chọn các loại lớp lưới phù hợp với màn hình thiết bị hiển thị. Ngày nay, do xu hướng sử dụng điện thoại di động và tablet phổ biến, cho nên bạn nên dùng 2 lớp sm hoặc md.

Cấu trúc cơ bản của lưới Bootstrap
Chúng ta xét đến 1 đoạn mã sau để thấy rõ cấu trúc lưới của Bootstrap.

<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>

Đầu tiên, chúng ta phải tạo 1 dòng (thông qua đoạn mã). Sau đó, thêm số cột mong muốn vào dòng này (thông qua các lớp .col-*-* với * đầu tiên là loại xs, sm, md, lg và * thứ 2 là số cột). Lưu ý tổng số cột trên 1 cùng 1 row phải luôn là 12.

Tạo 3 vùng bằng nhau

Để tạo 1 dòng chứa 3 vùng bằng nhau có giao diện khớp với tablet trở lên, chúng ta sử dụng đoạn mã sau:

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

Trong đoạn mã trên, chúng ta thấy có 3 lớp col-sm-4 tức là 3 lớp này sử dụng cho màn hình Tablet, Desktop và Desktop có kích thước lớn. Mỗi lớp có 4 cột như vậy, với 3 lớp, chúng ta có 12 cột, đúng theo yêu cầu của hệ thống lưới Bootstrap.

Tạo 2 vùng không bằng nhau

Tiếp đến chúng ta sẽ tạo giao diện với 2 vùng không bằng nhau với vùng trái có kích thước 4 cột, và vùng phải có kích thước 8.

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Tóm lại, bài viết này giúp các bạn nắm kiến thức cơ bản về hệ thống lưới của Bootstrap cũng như cách phân vùng cho các giao diện Bootstrap đơn giản.