OBin's Blog

Bootstrap là một framework front-end cực kỳ mạnh và phổ biến nên mình không cần phải giải thích về nó nhiều nữa. Hôm nay mình xin hướng dẫn cách sử dụng Grid System trong Bootstrap để phân chia cột ( Column ) cho bố cục của website mà không cần phải css gì thêm.

1 Bootstrap Grid System

Bootstrap Grid System cho phép bạn tạo được tối 12 cột đều nhau trên một trang hoặc chia theo từng khối riêng:

Bootstrap Grid System sẽ tự thay đổi theo kích thước trình duyệt (Responsive)

2 Grid Classes

Grid Classes là những class dùng để gán css theo mỗi kích thước trình duyệt khác nhau:
- xs (điện thoại)
- sm (tablets)
- md (desktops)
- lg (lớn hơn desktops)

3 Cấu trúc cơ bản của Bootstrap Grid:

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

- Chia 2 cột đồng đều:

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

- Chia 2 cột không đồng đều:

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

- Chia 3 cột đều:

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

.... bạn có thể tự vận dụng để chia cột theo ý mình nhé.

4 Chia cột responsive:

Bạn có thể sử dụng grid class để phân chia theo từng giao diện riêng. Ví dụ:

  <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"> Your content 1 </div>
  <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"> Your content 2 </div>
  <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"> Your content 3 </div>
  <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"> ... </div>

Trong ví dụ trên, khi giao diện mobile thì tự động sẻ thành 1 cột lớn (col-xs-12), giao diện tablet thì tự động chuyển thành 2 cột đều (col-sm-6), giao diện desktop => 3 cột đều (col-md-4) và khi giao diện màn hình lớn => tự động chia thành 6 cột đều nhau (col-lg-2)

Rất dễ dàng phải không nào? Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Tạo menu dropdowns nhanh trong Bootstrap  
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin