Hệ thống grid từ xếp chồng tới nằm ngang trong bootstrap 5

Công nghệ Lập trình Bootstrap 5

15/12
Thạch
Bootstrap 5
0
459

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 nhé!

Bài 37: Form Validation trong Bootstrap 5
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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">
      Sinitc...
    </div>
    <div class="col-sm-6 bg-dark text-white p-3">
      Sinitc1...
    </div>
  </div>
</div>

</body>
</html>

Hai kết quả trước và sau khi đổi kích thước width

Sau khi đổi

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Sự khác biệt khi đổi kích thước
Trước khi đổi

Sau khi thay đổi

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.