Bài 42: Grid Large trong Bootstrap 5

Chí Vỹ

Phần bài học Bootstrap trước đã giới thiệu cho bạn những ví dụ về hệ thống lưới với các class cho thiết bị nhỏ và trung bình. Ví dụ sử dụng hai div (cột) và chia chúng theo tỷ lệ 25%/75% trên thiết bị nhỏ và 50%/50% trên thiết bị trung bình:

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

Nhưng trên thiết bị lớn, thiết kế có thể tốt hơn khi được chia theo tỉ lệ 33%/66%. Những thiết bị được xem là lớn khi có chiều rộng màn hình từ 992 pixel tới 1199 pixel trở lên.

Đối với các thiết bị lớn, chúng ta sẽ dùng class .col-lg-*:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

Trong Bootstrap, ở thiết bị nhỏ, bạn sẽ dùng class với -sm-, trung bình là -md-, còn ở kích thước lớn, -lg- sẽ được dùng trong class.

Ví dụ dưới đây sẽ cho kết quả chia màn hình theo tỉ lệ 25%/75% trên thiết bị nhỏ, 50%/50% trên thiết bị trung bình và 33%/66% trên thiết bị lớn, siêu lớn và cực lớn:

<!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>Grid lớn</h1>
  <p>Điều chỉnh kích thước cửa sổ trình duyệt để thấy sự thay đổi.</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 col-md-6 col-lg-4 bg-primary text-white">
      Khởi nguồn từ một trang web cung cấp kiến thức về mạng, server, các thiết bị mạng, thủ thuật máy tính. Hiện nay, Quantrimang.com đã trở thành mạng xã hội về khoa học công nghệ, mở rộng nội dung để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính,...
      </div>
      <div class="col-sm-9 col-md-6 col-lg-8 bg-dark text-white">
        Chúng tôi mong muốn các thành viên của mình luôn nắm bắt được những thông tin, kiến thức, xu hướng công nghệ mới nhất, cũng như gỡ rối những vấn đề công nghệ các thành viên gặp phải khi sử dụng máy tính, điện thoại, các thiết bị điện tử thông dụng khác.
      </div>
    </div>
  </div>
</div>

</body>
</html>

Grid lớn trong Bootstrap 5

Chỉ dành cho thiết bị lớn

Ở ví dụ bên dưới, chúng ta chỉ dùng class .col-lg-6 (không có .col-md-* và .col-sm-*). Điều đó có nghĩa thiết bị lớn, rất lớn và cực lớn sẽ chia theo tỷ lệ 50%/50%. Tuy nhiên, trên thiết bị trung bình, nhỏ, và cực nhỏ, nó sẽ xếp chồng theo chiều dọc với 100% chiều rộng.

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>Thay đổi kích thước cửa sổ trình duyệt để thấy sự thay đổi.</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6 bg-primary text-white">
       Khởi nguồn từ một trang web cung cấp kiến thức về mạng, server, các thiết bị mạng, thủ thuật máy tính. Hiện nay, Quantrimang.com đã trở thành mạng xã hội về khoa học công nghệ, mở rộng nội dung để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính,...
      </div>
      <div class="col-lg-6 bg-dark text-white">
       Chúng tôi mong muốn các thành viên của mình luôn nắm bắt được những thông tin, kiến thức, xu hướng công nghệ mới nhất, cũng như gỡ rối những vấn đề công nghệ các thành viên gặp phải khi sử dụng máy tính, điện thoại, các thiết bị điện tử thông dụng khác.

Các bạn có thể trở thành một phần của Quantrimang.com bằng cách gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã hội thông qua địa chỉ email  hoặc đăng ký tài khoản và đăng bài trực tiếp trên Quantrimang.com.
      </div>
    </div>
  </div>
</div>

</body>
</html>

Chỉ dùng class lớn

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

Bootstrap 5 cung cấp một cách dễ dàng để tạo các cột có cùng chiều rộng cho tất cả thiết bị. Về cơ bản, bạn chỉ cần bỏ số trong .col-lg-* và chỉ dùng class .col-lg trên số cụ thể của phần tử col. Bootstrap sẽ xác định số lượng cột hiện có và tất cả sẽ có cùng chiều rộng.

Nếu kích thước màn hình nhỏ hơn 992px, các cột sẽ cộng dồn theo chiều ngang:

<!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>Cột bố cục tự động đáp ứng</h1>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg bg-primary text-white">1 of 2</div>
      <div class="col-lg bg-dark text-white">2 of 2</div>
    </div>  
  </div>
  <br>
  
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg bg-primary text-white">1 of 4</div>
      <div class="col-lg bg-dark text-white">2 of 4</div>
      <div class="col-lg bg-primary text-white">3 of 4</div>
      <div class="col-lg bg-dark text-white">4 of 4</div>
    </div>  
  </div>
</div>

</body>
</html>

Bố cục tự động đáp ứng