Bootstrap 4 – Hệ thống lưới

Bootstrap 4 - Grid System
Bootstrap 4 - Grid System

Chúng ta đã tìm hiểu về hệ thống lưới và vai trò của nó trong thiết kế giao diện web. Framework Bootstrap có một module tên là Grid System. Mục đích chính của module này là hỗ trợ xây dựng hệ thống lưới. Giúp cho việc xây dựng giao diện trang web dễ dàng và tiết kiệm thời gian hơn.

Tổng quan hệ thống lưới

Hệ thống lưới trong Bootstrap là một hệ thống bao gồm các đối tượng container, row và column. Nó được xây dựng dựa trên thuộc tính flexbox. Dưới đây là một ví dụ để các bạn có thể hiểu rõ hơn về hệ thống lưới.

Với đoạn mã HTML trên chúng ta có thể dễ dàng nhận thấy cấu trúc:

  • Bao bên ngoài nội dung là phần tử div với class ‘container’
  • Bên trong là phần tử div với class ‘row’
  • Bên trong row là các phần tử div với class ‘col-*’.

Với đoạn mã trên, để các bạn có thể dễ dàng phân biệt được các khu vực. Mình đã thêm thuộc tính background cho các class. Các bạn có thể sử dụng Devtools với chức năng kiểm tra phần tử để hiểu rõ hơn.

Các thông số

  • Số luợng cột: 12
  • Chiều rộng Gutter: 30px (mỗi bên 15px)
  • Có khả năng lồng các dòng và cột
  • Có khả năng thay đổi thứ tự các cột
Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Chiều rộng container None (tự động điều chỉnh) 540px 720px 960px 1140px
Tiền tố .col- .col-sm- .col-md- .col-lg- .col-xl-

Responsive classes

Tổng quan

Dựa trên bảng thông số phía trên, chúng ta thấy Boostrap hỗ trợ các class column có khả năng điều chỉnh theo chiều rộng của màn hình. Ý tưởng thiết kế của chúng như sau:

  • Sử dụng tiền tố để phân biệt và thể hiện sự tương quan của chúng với kích thước màn hình.
  • Bootstrap 4 được xây dựng dựa trên phương pháp thiết kế ‘mobile first’. Nhờ đó, rút gọn được số lượng class cần sử dụng.

Xét đoạn mã sau:

Ta thấy các div có vai trò là column được mô tả tận 3 classes. Đầu tiên, các bạn có thể xem qua kết quả của ví dụ tại đây. Sử dụng chức năng giả lập mobile để xem cách các cột của chúng ta điều chỉnh.

Dựa vào kiến thức về media query, chúng ta hoàn toàn biết được cách mà boostrap hiện thực các class này. Vấn đề ở đây là phương pháp sử dụng chúng một cách hợp lý.

Cách sử dụng

  • Các bạn để ý đầu tiên mình sử dụng class col-12. Nghĩa là cột của chúng ta chiếm 12/12 của hàng. Class này được định nghĩa mà không phụ thuộc vào điều kiện media query.
  • Kế đến, mình sử dụng class col-md-6. Class này được định nghĩa trong điều kiện media min-width: 768px. Do đó, khi màn hình có chiều rộng >= 768px. Phần tử div của chúng ta sẽ bị áp thuộc tính của class này. Tương tự với class col-lg-3.
  • Do sau đó mình không sử dụng class col-xl-* không tiếp tục ghi đè. Nên dù màn hình có lớn hơn 1200px. Phần tử div của chúng ta vẫn bị áp các thuộc tính của class col-lg-3