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

Grid System (hệ thống lưới) trong Bootstrap được xây dựng với flexbox, cho phép tạo tới 12 cột trên một trang. Nếu bạn không muốn sử dụng tất cả 12 cột riêng biệt thì có thể nhóm chúng lại với nhau để tạo ra những cột rộng hơn.

Hệ thống lưới này có thể responsive, có nghĩa là các cột có thể tự động sắp xếp lại để phù hợp với kích thước của màn hình. Hãy chắc chắn rằng, tổng các cột tối đa là 12 hoặc ít hơn (bạn không nhất thiết phải sử dụng hết tất cả 12 cột).

12 cột trên một trang

Các class của Grid

Hệ thống Grid của Bootstrap 5 có 6 class:

  • .col- (thiết bị cực nhỏ - độ rộng màn hình nhỏ hơn 576px)
  • .col-sm- (thiết bị nhỏ - độ rộng màn hình bằng hoặc lớn hơn 576px)
  • .col-md- (thiết bị trung bình - độ rộng màn hình bằng hoặc lớn hơn 768px)
  • .col-lg- (thiết bị lớn - độ rộng màn hình bằng hoặc lớn hơn 992px)
  • .col-xl- (thiết bị cực lớn - độ rộng màn hình bằng hoặc lớn hơn 1200px)
  • .col-xxl- (thiết bị siêu lớn - độ rộng màn hình bằng hoặc lớn hơn 1400px)

Các class trên có thể kết hợp với nhau để tạo ra bố cục động và linh hoạt hơn.

Mẹo: Vì class sẽ tăng/giảm theo tỷ lệ, vì vậy nếu muốn đặt cùng độ rộng cho smmd thì chỉ cần chỉ định sm thôi.

Các tùy chọn Grid

Bảng sau đây tóm tắt cách hoạt động của hệ thống lưới Bootstrap 5 trên các kích thước màn hình khác nhau:

Extra small (<576px)Small (>=576px)Medium (>=768px)Large (>=992px)Extra Large (>=1200px)XXL (>=1400px)
Class.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-
Phạm vi GridNgang mọi lúcBắt đầu thu gọn, dàn ngang phía trên các điểm ngắtBắt đầu thu gọn, dàn ngang phía trên các điểm ngắtBắt đầu thu gọn, dàn ngang phía trên các điểm ngắtBắt đầu thu gọn, dàn ngang phía trên các điểm ngắtBắt đầu thu gọn, dàn ngang phía trên các điểm ngắt
Độ rộng ContainerKhông
(tự động)
540px720px960px1140px1320px
Phù hợp vớiĐiện thoại dọcĐiện thoại ngangMáy tính bảngLaptopLaptop và DesktopLaptop và Desktop
Số cột121212121212
Chiều rộng Gutter1.5rem (.75rem trên mỗi bên của 1 cột)1.5rem (.75rem trên mỗi bên của 1 cột)1.5rem (.75rem trên mỗi bên của 1 cột)1.5rem (.75rem trên mỗi bên của 1 cột)1.5rem (.75rem trên mỗi bên của 1 cột)1.5rem (.75rem trên mỗi bên của 1 cột)
Có thể lồng
Offset
Thứ tự cột

Quy tắc dành cho Grid System trong Bootstrap

Grid System trong Bootstrap có vài quy tắc sau:

1. Các hàng phải được đặt trong một .container (fixed-width) hoặc .container-fluid (full-width) để căn chỉnh và padding phù hợp.

2. Sử dụng hàng để tạo các nhóm cột ngang.

3. Nội dung nên được đặt trong các cột và chỉ các cột có thể là con của các hàng.

4. Các lớp được xác định trước như .row.col-sm-4 có sẵn để nhanh chóng tạo bố cục grid.

5. Cột tạo gutter (khoảng cách giữa nội dung cột) thông qua padding. Padding đó được bù đắp theo hàng cho cột đầu tiên và cột cuối cùng thông qua negative margin trên .rows.

6. Các cột lưới được tạo bằng cách chỉ định số lượng cột trong tổng số 12 cột mà bạn muốn tạo. Ví dụ: 3 cột bằng sau sẽ sử dụng 3 .col-sm-4.

7. Độ rộng cột được tính theo tỷ lệ %, vì vậy chúng rất linh hoạt và có kích thước tương ứng với phần tử cha của chúng.

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

Sau đây là cấu trúc cơ bản của Grid trong Bootstrap 5:

<!-- Ví dụ 1: Kiểm soát độ rộng cột và cách chúng xuất hiện trên các thiết bị khác nhau -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- Ví dụ 2: Để Bootstrap tự xử lý bố cục -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Ở Ví dụ 1: Sau khi tạo 1 hàng (<div class="row">), bạn thêm số cột mình cần (tương ứng với các class .col-*-* thích hợp). Dấu * đầu tiên đại diện cho khả năng responsive: sm, md, lg, xl hay xxl; trong khi dấu * thứ 2 đại diện cho 1 số, nên tối đa là 12 số trên 1 hàng.

Ở Ví dụ 2: Thay vì thêm một số vào mỗi col, bạn có thể để Bootstrap xử lý bố cục, tạo các cột có chiều rộng bằng nhau:

  • 2 phần tử col thì mỗi col là 50%
  • 3 phần tử col thì mỗi cái có độ rộng là 33.33%
  • 4 col thì mỗi col là 25%
  • ...

Bạn có thể sử dụng .col-sm|md|lg|xl|xxl để làm cho các cột có tính responsive.

Dưới đây là vài ví dụ cơ bản về bố cục lưới cơ bản trong Bootstrap 5.

Tạo 3 cột bằng nhau

Ví dụ bên dưới sẽ chỉ cho bạn cách tạo 3 cột có chiều rộng bằng nhau, trên tất cả các thiết bị và độ rộng màn hình.

Bạn cần thêm vào các thẻ div sau:

<div class="row">
  <div class="col">nội dung trong cột</div>
  <div class="col">nội dung trong cột</div>
  <div class="col">nội dung trong cột</div>
</div>

Dưới đây là file html đầy đủ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>3 cột có độ rộng bằng nhau</h1>
  <p>Lưu ý: Thử thêm div mới với class="col" trong class row - nó sẽ tạo ra 3 cột rộng bằng nhau.</p>
  <div class="row">
    <div class="col" style="background-color:#FFFF00;">.col</div>
    <div class="col" style="background-color:#FFFFE0;">.col</div>
    <div class="col" style="background-color:#FFFF00;">.col</div>
  </div>
</div>

</body>
</html>

Khi chạy file trên ta sẽ có được bố cục như dưới đây:

Tạo 3 cột bằng nhau

Tạo cột Responsive trong Bootstrap

Ví dụ dưới đây sẽ chỉ cho bạn biết cách tạo 4 cột có độ rộng bằng nhau bắt đầu từ độ rộng màn hình máy tính bảng và chia tỷ lệ cho những màn hình lớn hơn. Trên điện thoại hoặc màn hình nhỏ hơn 576px, các cột sẽ tự động được xếp chồng lên nhau.

Khi này, bạn cần dùng đến các thẻ div sau:

<div class="row">
  <div class="col-sm-3">nội dung trong cột</div>
  <div class="col-sm-3">nội dung trong cột</div>
  <div class="col-sm-3">nội dung trong cột</div>
  <div class="col-sm-3">nội dung trong cột</div>
</div>

Và file html đầy đủ sẽ là:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Cột thích ứng</h1>
  <p>Thay đổi cửa sổ trình duyệt để thấy sự thay đổi.</p>
  <p>Các cột sẽ tự động chồng lên nhau khi màn hình có chiều rộng nhỏ hơn 576px.</p>
  <div class="row">
    <div class="col-sm-3" style="background-color:#FF1493;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:#FFC0CB;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:#FF1493;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:#FFC0CB;">.col-sm-3</div>
  </div>
</div>

</body>
</html>

Khi chạy file trên bạn sẽ nhận được 2 bố cục khi màn hình rộng hơn 576px, và khi màn hình nhỏ hơn 576px như dưới đây:

Tạo 2 cột Responsive với độ rộng khác nhau

Tiếp theo là ví dụ về cách tạo 2 cột có độ rộng khác nhau, bắt đầu từ màn hình máy tính bảng và mở rộng đến những màn hình lớn hơn. Giả sử ta tạo 1 cột sm-4 và 1 cột sm-8, khi đó bạn sẽ dùng các thẻ div sau:

<div class="row">
  <div class="col-sm-4">nội dung của cột</div>
  <div class="col-sm-8">nội dung của cột</div>
</div>

File html đầy đủ lúc này sẽ như sau:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>2 cột độ rộng khác nhau</h1>
  <p>Thay đổi độ rộng của cửa sổ trình duyệt để xem hiệu ứng.</p>
  <p>Các cột sẽ tự động chồng lên nhau khi màn hình nhỏ hơn 576px.</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:#00CED1;">.col-sm-4</div>
    <div class="col-sm-8" style="background-color:#E0FFFF;">.col-sm-8</div>
  </div>
</div>
    
</body>
</html>

Sau khi chạy file trên, bạn sẽ nhận được 2 bố cục tương ứng với độ rộng màn hình lớn hơn 576px hay nhỏ hơn mức này.

Bạn có thể thử dùng CSS editor online này để chạy các file html bên trên hoặc cài Bootstrap trên máy tính và dùng editor để tự tạo file html nhé.

Thứ Hai, 22/08/2022 14:25
53 👨 10.382
0 Bình luận
Sắp xếp theo