Bài 38: Hệ thống Grid từ xếp chồng tới nằm ngang trong Bootstrap 5

Chí Vỹ

Hệ thống Grid trong Bootstrap 5 khá đa dạng. Ở bài học này, chúng ta sẽ tập trung vào hai cách sắp xếp Grid thông dụng nhất trong Bootstrap 5 nhé!

Giờ hãy cùng nhau tạo một hệ thống lưới Grid cơ bản, bắt đầu từ xếp chồng trên các thiết bị nhỏ, trước khi chuyển thành dàn ngang trên thiết bị lớn hơn.

Ví dụ bên dưới hiện một bố cục hai cột “xếp chồng tới nằm ngang”. Điều đó có nghĩa nó sẽ chia đôi màn hình trên tất cả kích cỡ màn hình, ngoại trừ màn hình quá nhỏ. Trong trường hợp đó, nó sẽ tự động xếp chồng (100%).

Code cơ bản:

<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

Ví dụ:

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

<div class="container-fluid mt-3">
  <h1>Ví dụ về Grid</h1>
  <p>Ví dụ này minh họa tỷ lệ phân chia 50%/50% trên các thiết bị nhỏ, vừa, lớn, xlarge và xxlarge. Trên các thiết bị cực nhỏ, nó sẽ xếp chồng lên nhau (100% chiều rộng)..</p>      
  <p>Chỉnh lại kích thước cửa sổ trình duyệt để thấy sự khác biệt.</p> 
  <div class="row">
    <div class="col-sm-6 bg-primary text-white p-3">
      Quantrimang...
    </div>
    <div class="col-sm-6 bg-dark text-white p-3">
      Downloadvn...
    </div>
  </div>
</div>

</body>
</html>

Grid trong Bootstrap 5

Mẹo: Các số trong class .col-sm-* cho biết số lượng cột nên gộp (trong số 12). Do đó, .col-sm-1 gộp 1 cột, .col-sm-4 gộp 4 cột, .col-sm-6 gộp 6 cột…

Lưu ý: Đảm bảo tổng số thêm vào tối đa chỉ tới 12. Bạn không cần phải dùng tất cả 12 cột có sẵn.

Mẹo: Bạn có thể chuyển bất kỳ bố cục full-width thành bố cục fixed-width responsive (chiều rộng cố định), bằng cách thay đổi class .container-fluid sang .container. Ví dụ:

<div class="container">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

Tự động bố cục cột

Bootstrap 5 có một cách dễ dàng tạo các cột có chiều rộng bằng nhau cho tất cả thiết bị: chỉ cần loại bỏ số từ .col-size-* và chỉ dùng class .col-size trên một số các phần tử col nhất định. Bootstrap sẽ xác định số lượng cột hiện có. Mỗi cột đều có cùng chiều rộng. Class size (sm, md…) xác định thời điểm cột phải phản hồi. Code mẫu:

<!-- Two columns: 50% width on all screens, except for extra small (100% width) -->
<div class="row">
<div class="col-sm">1 of 2</div>
<div class="col-sm">2 of 2</div>
</div>

<!-- Four columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3 of 4</div>
<div class="col-sm">4 of 4</div>
</div>
1 of 2

Ví dụ:

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

<div class="container-fluid mt-3">
  <p><strong>Hai cột</strong>: chiều rộng 50% trên mọi màn hình, ngoại trừ cực nhỏ (100% chiều rộng trên màn hình có chiều rộng nhỏ hơn <strong>576px</strong>)</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm bg-primary text-white p-3">1 of 2</div>
      <div class="col-sm bg-dark text-white p-3">2 of 2</div>
    </div>  
  </div>
  <br>
  
  <p><strong>Bốn cột</strong>: 25% chiều rộng trên mọi màn hình, except for extra small ngoại trừ cực nhỏ (100% chiều rộng trên màn hình có chiều rộng nhỏ hơn <strong>576px</strong>)</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm bg-primary text-white p-3">1 of 4</div>
      <div class="col-sm bg-dark text-white p-3">2 of 4</div>
      <div class="col-sm bg-primary text-white p-3">3 of 4</div>
      <div class="col-sm bg-dark text-white p-3">4 of 4</div>
    </div>  
  </div>
</div>

</body>
</html>

Cột tự động chỉnh kích thước theo màn hình

Hệ thống Grid rất quan trọng khi phát triển web. Bạn sẽ có nhiều kiểu chỉnh Grid khác nhau khi sử dụng Bootstrap 5. Trên đây là hai ví dụ tạo Grid đơn giản và có thể áp dụng trên mọi web, ứng dụng. Hi vọng bài viết hữu ích với các bạn.

Thứ Sáu, 09/12/2022 16:20

5 ★ 1 👨 606

#Bootstrap