Hệ Thống Grid trong Bootstrap

Hệ Thống Grid trong Bootstrap là phương tiện nhanh chóng để tạo bố cục đáp ứng. Hãy tham gia vào bài học Bootstrap dưới đây của Mytour để hiểu rõ về Hệ thống Grid trong Bootstrap.

Hệ Thống Grid trong Bootstrap

1. Grid System trong Bootstrap là gì?

Grid System trong Bootstrap là cách nhanh nhất để tạo bố cục đáp ứng. Phiên bản Bootstrap 4 mới nhất bổ sung thêm hệ thống lưới mobile-first với tối đa 12 cột khi kích thước thiết bị hoặc viewport tăng.

Bootstrap 4 đi kèm với các lớp lưới được định nghĩa trước để nhanh chóng tạo bố cục lưới cho các thiết bị khác nhau như điện thoại di động, máy tính bảng, laptop và máy tính.

Chẳng hạn, bạn có thể áp dụng các lớp .col-* để tạo cột lưới cho các thiết bị di động kích thước nhỏ ở chế độ dọc. Tương tự, sử dụng các lớp .col-sm-* để tạo cột lưới cho các thiết bị kích thước nhỏ ở chế độ ngang, .col-md-* cho thiết bị có kích thước màn hình trung bình như máy tính bảng, .col-lg-* cho thiết bị kích thước màn hình lớn như máy tính, và .col-xl-* cho màn hình máy tính lớn hơn.

Bảng dưới đây tóm tắt một số tính năng quan trọng của hệ thống lưới:

Nếu chúng ta sử dụng lớp .col-sm-* cho một phần tử, nó sẽ ảnh hưởng đến style của phần tử đó trên cả thiết bị kích thước màn hình nhỏ, màn hình trung bình, và thậm chí là cả thiết bị kích thước màn hình lớn hoặc cực lớn nếu thiếu lớp .col-md-*, .col-lg-* hoặc .col-xl-*

Tương tự, lớp .col-md-* không chỉ ảnh hưởng đến style của các phần tử trên thiết bị kích thước màn hình trung bình, mà còn ảnh hưởng trên thiết bị màn hình lớn và cực lớn nếu thiếu lớp .col-lg-* hoặc .col-xl-.

Để tạo các hàng và cột sử dụng grid system cố định 12 cột, trước hết hãy tạo một phần tử chứa làm trình bao cho hàng và cột bằng lớp .container. Sau đó, tạo các hàng bên trong phần tử chứa bằng lớp .row. Để tạo các cột trong một hàng, sử dụng các lớp .col-*, .col-sm-*, .col-md-*, .col-lg-* và .col-xl-*

Các cột đóng vai trò là vùng chứa nội dung, nơi chúng ta thêm nội dung cần hiển thị.

Dưới đây là minh họa cách tạo bố cục 2 cột cho các thiết bị màn hình kích thước trung bình, lớn và cực lớn như máy tính bảng, laptop và máy tính. Tuy nhiên, trên các thiết bị có kích thước màn hình nhỏ (chiều rộng dưới 768px), các cột sẽ tự động chuyển thành chiều ngang.

Chú ý: Trong cấu trúc lưới, hãy đặt nội dung bên trong các cột (.col và .col-*) và chỉ có cột mới có thể là con của các hàng (.row). Các hàng cần được đặt bên trong .container (bố cục lưới fixed-width) hoặc .container-fluid (bố cục lưới full-width) để có padding và căn chỉnh đúng.

Mẹo: Chiều rộng cột của lưới được xác định theo đơn vị phần trăm, nên kích thước của cột phụ thuộc vào phần tử cha của nó. Ngoài ra, mỗi cột còn có phần padding ngang để điều chỉnh khoảng cách giữa chúng.

Vì Grid System trong Bootstrap chia thành 12 cột, vì vậy để giữ các cột trong một dòng (tức là các cột liền kề), tổng số cột trong một hàng không được vượt quá 12.

3. Tạo bố cục 3 cột trong Bootstrap

Tương tự, chúng ta có thể tạo các bố cục sáng tạo khác dựa trên nguyên tắc trên. Ví dụ, trong trường hợp dưới đây, chúng ta tạo một bố cục 3 cột cho các thiết bị có màn hình lớn như laptop và máy tính. Bố cục này cũng sẽ hiển thị đẹp trên các thiết bị màn hình trung bình như máy tính bảng, đặc biệt khi ở chế độ ngang với độ phân giải màn hình lớn hơn hoặc bằng 992 pixel.

Chú ý: Nếu có nhiều hơn 12 cột lưới trong một hàng, các nhóm cột bổ sung sẽ tự động đặt vào các hàng mới.

4. Tạo các cột có chiều rộng bằng nhau trong Bootstrap

Bên cạnh đó, chúng ta có thể tạo các cột với chiều rộng đồng đều trên tất cả các thiết bị (bao gồm cả thiết bị có màn hình cực nhỏ, nhỏ, trung bình, lớn và cực lớn) bằng cách sử dụng lớp .col mà không cần chỉ định số cột.

Hãy tham khảo ví dụ dưới đây để hiểu cách mọi thứ hoạt động:

Chúng ta cũng có thể đặt chiều rộng cho một cột và các cột khác sẽ tự động điều chỉnh kích thước tương tự như cột đó.

Ví dụ: Trong ví dụ sau, các cột liền kề trong lớp .col sẽ có chiều rộng bằng nhau:

5. Các cột được bọc trong Bootstrap

Chúng ta có thể tạo bố cục linh hoạt hơn, điều chỉnh hướng dựa trên kích thước viewport.

Trong ví dụ dưới đây, chúng ta sẽ thiết lập bố cục 3 cột cho các thiết bị màn hình lớn như laptop và máy tính ở chế độ ngang. Trên các thiết bị kích thước màn hình trung bình như máy tính bảng ở chế độ dọc (chiều rộng màn hình từ 768px đến 992px), bố cục thay đổi thành 2 cột và cột thứ ba di chuyển xuống góc dưới cùng của 2 cột đầu tiên:

Như bạn có thể thấy trong ví dụ trên, tổng số cột lưới trung bình (tức là col-md-*) là 3 + 9 + 12 = 24 > 12. Do đó, phần tử div thứ 3 có lớp .col-md-12 được thêm vào sau 12 cột tối đa trong .row, và nó được bọc trong một dòng mới dưới dạng đơn vị liền kề trên các thiết bị có kích thước màn hình trung bình.

Tương tự, bạn có thể tạo các bố cục tương thích khác cho trang web của mình bằng cách sử dụng tính năng bọc cột lưới trong Bootstrap.

6. Sáng tạo bố cục đa dạng trong Bootstrap

Với hệ thống lưới mobile-first trong Bootstrap 4, chúng ta dễ dàng kiểm soát bố cục trên các loại thiết bị khác nhau như điện thoại, máy tính bảng, laptop, ... .

Trong ví dụ trên, có tổng cộng 12 cột nội dung trên tất cả các thiết bị, nhưng bố cục thay đổi tùy thuộc vào kích thước màn hình thiết bị. Trên thiết bị di động, bố cục hiển thị 1 cột và 12 hàng chồng lên nhau, trên máy tính bảng hiển thị 2 cột và 6 hàng.

Trong khi đó, trên máy tính, laptop, bố cục hiển thị 3 cột và 4 hàng. Đối với các thiết bị màn hình cực lớn, bố cục hiển thị 4 cột và 3 hàng.

Vấn đề là làm thế nào để tạo bố cục giao diện Responsive tương tự bằng cách sử dụng grid system trong Bootstrap.

Giả sử thiết bị mục tiêu là máy tính thông thường hoặc laptop. Với bố cục laptop 3 cột và 4 hàng, tức là lưới là 3x4. Mã HTML để tạo cấu trúc bố cục như sau:

Trong ví dụ trên, nếu màn hình laptop có chiều rộng từ 992px đến 1200px, bố cục đầu ra có 4 hàng, mỗi hàng 3 cột bằng nhau.

Để tùy chỉnh bố cục cho máy tính bảng, chúng ta sử dụng lưới 2x6 (2 cột và 6 hàng). Thêm lớp .col-md-6 cho mỗi cột.

Mẹo: Để điều chỉnh bố cục cho các thiết bị khác nhau, hãy xác định thiết bị mục tiêu và tạo bố cục cho nó, sau đó thêm các lớp tương ứng.

Tương tự, bạn có thể tùy chỉnh bố cục cho thiết bị có kích thước màn hình cực lớn bằng cách thêm lớp .col-xl-3 cho mỗi cột.

Mẹo: Không cần điều chỉnh bố cục cho các thiết bị di động, vì cột tự động chuyển sang bố cục chiều ngang và hiển thị dưới dạng lưới 1x12 mà không cần .col-* hoặc .col-sm-*.

7. Lồng các cột lưới trong Bootstrap

Các cột lưới trong Bootstrap có thể được lồng với nhau, cho phép đặt hàng và cột bên trong cột hiện tại. Tổng số cột không nên vượt quá 12 trong một hàng.

Ví dụ: Dưới đây là minh họa về việc lồng các cột lưới trong Bootstrap:

8. Tạo các cột có chiều rộng thay đổi trong Bootstrap

Bằng cách sử dụng các lớp col-{breakpoint}-auto, chúng ta có thể xác định kích thước cột dựa trên nội dung bên trong.

Ví dụ: Trong ví dụ dưới đây, chúng ta sẽ tạo các cột có chiều rộng thay đổi:

9. Căn chỉnh các cột lưới trong Bootstrap

Ngoài ra, chúng ta có thể sử dụng các tính năng căn chỉnh của flexbox để căn chỉnh các cột lưới theo chiều ngang và chiều dọc trong một phần tử chứa. Tham khảo một số ví dụ dưới đây:

9.1. Căn chỉnh các cột lưới theo chiều dọc

Sử dụng các lớp .align-items-start, .align-items-center và .align-items-end để căn chỉnh các cột lưới theo chiều dọc ở đầu trang, giữa và cuối cùng trong một phần tử chứa tương ứng.

Nếu muốn, bạn cũng có thể căn chỉnh từng cột lẻ trong một hàng theo chiều dọc như thể hiện trong ví dụ dưới đây:

Lưu ý: Có thể bỏ qua số trong lớp .col-* grid và chỉ sử dụng lớp .col để tạo các cột có chiều rộng bằng nhau trên tất cả các thiết bị với kích thước màn hình khác nhau.

9.2 Căn chỉnh các cột lưới theo chiều ngang

Sử dụng các lớp .justify-content-start, .justify-content-center và .justify-content-end để căn chỉnh các cột lưới theo chiều ngang ở phía trái, giữa và phải một phần tử chứa tương ứng.

Ví dụ: Trong ví dụ sau, chúng ta căn chỉnh các cột lưới theo chiều ngang:

Ngoài ra, có thể sử dụng lớp .justify-content-around để phân phối các cột lưới một cách đồng đều với khoảng trống nửa kích thước ở cả hai đầu, hoặc sử dụng lớp .justify-content-between để phân phối các cột lưới đều với cột đầu tiên ở đầu và cột cuối cùng ở cuối.

Ví dụ:

10. Điều chỉnh thứ tự của cột lưới

Nếu bạn muốn, bạn có thể thay đổi trực quan thứ tự của các cột lưới mà không làm thay đổi thứ tự thực sự của chúng. Sử dụng lớp .order-last để đặt cột ở vị trí cuối cùng, hoặc lớp .order-first để đặt cột ở vị trí đầu tiên.

Xem ví dụ dưới đây:

Sử dụng các lớp .order-* để sắp xếp các cột lưới theo số thứ tự. Các cột với số thứ tự lớn hơn sẽ xuất hiện sau cột có số thứ tự thấp hơn, hoặc nếu không có lớp order, chúng sẽ theo thứ tự mặc định.

Ví dụ:

11. Dịch chuyển cột lưới trong Bootstrap

Chúng ta có thể dịch chuyển các cột lưới sang phải để căn chỉnh bằng cách sử dụng các lớp dịch chuyển cột như .offset-sm-*, .offset-md-*, .offset-lg-*, ... .

Những lớp này tạo khoảng trống bằng cách tăng lề trái theo số cột được chỉ định. Chẳng hạn, lớp .offset-md-4 trên cột .col-md-8 đẩy sang phải 4 cột từ vị trí ban đầu. Tham khảo ví dụ dưới đây để hình dung rõ hơn:

Ngoài ra, có thể sử dụng các lớp căn lề để tạo phần bù cho các cột. Các lớp này hữu ích khi chiều rộng của phần bù không cố định.

Ví dụ:

Lưu ý: Có thể sử dụng lớp .col-auto để tạo các cột mà chiếm nhiều dung lượng, tức là kích thước cột dựa trên nội dung.

12. Tạo bố cục rút gọn trong Bootstrap

Sử dụng lớp .no-gutters trên .row để loại bỏ khoảng trắng giữa các cột nội dung (gutter) và tạo bố cục gọn gàng trong Bootstrap. Lớp này xóa lề và padding ngang từ tất cả các cột con ngay lập tức.

Ví dụ: Dưới đây là minh họa cách tạo bố cục rút gọn trong Bootstrap:

13. Chia các cột thành dòng mới

Chia các cột thành dòng mới bằng cách thêm thẻ div với lớp .w-100 tại vị trí muốn tách các cột thành dòng mới. Có thể kết hợp lớp .w-100 với các lớp responsive display để kiểm soát hiển thị trên các thiết bị khác nhau.

Mẫu: trong ví dụ dưới đây, chúng ta tách các cột thành các dòng mới:

Bài học trên đây đã giới thiệu về Hệ thống Lưới trong Bootstrap. Tiếp theo, Mytour sẽ hướng dẫn cách tạo bố cục cố định trong Bootstrap.