Bài 3: Hệ thống lưới Grid System trong Bootstrap 4

0
771

Xin chào các bạn, trong bài 3 trong series học Bootstrap 4, mình sẽ giới thiệu cho các bạn về khái niệm cũng như cách xây dựng hệ thống lưới, hay còn gọi là Grid System trong Bootstrap. Hệ thống lưới có lẽ là khái niệm quan trọng, nền tảng nhất để các bạn có thể hiểu được cách thức xây dựng bố cục trong Bootstrap.

Lưu ý: Học Bootstrap là học cách sử dụng các class một cách hợp lý và hiệu quả, nên các bài từ bây giờ, chủ yếu là mình hướng dẫn các bạn học các class mẫu trong Bootstrap nhé.

Lớp container và container-fluid

Để có thể xây dựng được hệ thống lưới và để hệ thống lưới hoạt động hiệu quả nhất, chúng ta cần xây dựng nó bên trong 1 trong 2 class là container hoặc container-fluid. Vì vậy, trước khi đi tìm hiểu hệ thống lưới, chúng ta cần phải hiểu cách sử dụng 2 class này và ý nghĩa của 2 class như thế nào.

.container

Mình sẽ giải thích thông qua ví dụ chạy nhé. Đầu tiên, mình sẽ có 1 giao diện sử dụng class .container, như sau:

Để các bạn có thể thấy được hiển thị của class container này, mình sẽ trang trí cho nó màu nền, như sau:

Kết quả khi các bạn sử dụng class .container như sau:

Các bạn sẽ nhận ra giao diện này không trải rộng toàn bộ màn hình, mình sẽ cho các bạn xem cách Bootstrap 4 xây dựng CSS cho class này nhé:

Như vậy rút ra, .container là 1 class có độ rộng trên thiết bị laptop là 1140px, được căn giữa màn hình.

.container-fluid

Tương tự, class .container-fluid có cách sử dụng cũng như CSS giống với class .container

Điểm khác duy nhất đó là về kích thước độ rộng màn hình thì class .container-fluid có độ rộng trải toàn bộ full màn hình, như ví dụ dưới:

Hệ thống lưới Grid System trong Bootstrap 4

Và sau khi hiểu được về 2 class đầu tiên, các bạn sẽ học đến Hệ thống lưới. Mình có lưu ý như sau, hệ thống lưới chỉ có thể hoạt động mạnh mẽ và hiệu quả nhất khi chúng được đặt trong 1 trong 2 class trên, thế nên các bạn cần phải nhớ nhé!

Trong Bootstrap 4, hệ thống lưới của chúng ta bao gồm các dòng, trong các dòng sẽ có tổng cộng 12 cột. Nếu các bạn không muốn dùng 12 cột riêng lẻ, các bạn có thể gom nhiều cột lại thành 1 cột lớn.

bootstrap 4

Hệ thống lưới đã được reponsive trên các thiết bị, thế nên các cột sẽ được tự động sắp xếp lại tùy theo kích thước màn hình mà website đang chạy. Và các bạn phải chắc chắn tổng số cột trên 1 dòng phải là 12 cột hoặc ít hơn 12 cột.

.row

Class đầu tiên trong hệ thống lưới là .row, 1 row các bạn khởi tạo nghĩa là 1 dòng.

Trong row này sẽ có tối đa 12 cột.

Cú pháp sử dụng class .row như sau:

Rất đơn giản đúng không nào, chúng ta đi tiếp vào các cột nhé.

.col

Trong 1 row có tối đa 12 cột, công thức để sử dụng class .col chia cột như sau:

Trong đó:

  • x là tên thiết bị chia:
    • col- (thiết bị cực nhỏ – độ rộng màn hình ít hơn 576px)
    • .col-sm- (thiết bị nhỏ – kích thước màn hình >= 576px)
    • .col-md- (thiết bị trung bình – kích thước màn hình >= 768px)
    • .col-lg- (thiết bị lớn – kích thước màn hình >= 992px)
    • .col-xl- (thiết bị siêu lớn – kích thước màn hình >= 1200px)
  • y là số cột chia cho thành phần đó chiếm bao nhiều trong tổng số 12 cột: các bạn điền từ 1 đến 12 là được.

Nếu để ý bạn có thể lấy lớp .col-xs- ở BS3 đã bị bỏ thay bằng lớp .col-. Các lớp ở trên có thể kết hợp để tạo bố cục giao diện linh hoạt và năng động hơn.

Cấu trúc cơ bản của một mạng lưới Bootstrap 4

Lưu ý: Nếu bạn không muốn định nghĩa các vùng div con theo kích thước màn hình, bạn có thể dùng lớp .col để cho Boostrap tự định nghĩa kích thước này, như sau:

Ở ví dụ này, thay vì định nghĩa chiều rộng mỗi cột, Bootstrap sẽ tự động xử lý. Với 3 cột, có nghĩa là độ rộng sẽ là 100%/3 = khoảng 33%.

Kết luận

Như vậy, bạn đã nắm được hệ thống lưới trong Bootstrap 4 và cách định nghĩa hệ thống lưới với các ví dụ cơ bản. Mời bạn tiếp tục theo dõi bài tiếp theo.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây