Bài 41: Grid Medium trong Bootstrap 5

Chí Vỹ

Ở bài học Bootstrap 5 trước, bạn đã biết cách tạo grid với các class cho thiết bị màn hình nhỏ. Đó là hai div (cột) được chia theo tỷ lệ 25%/75%:

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

Thế nhưng trên thiết bị trung bình có thiết kế tốt hơn sẽ thường được chia theo 50%/50%.

Thiết bị trung bình sẽ có chiều rộng màn hình từ 768px tới 991px.

Đối với các thiết bị trung bình, chúng ta sẽ dùng class .col-md-*:

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

Hiện tại, theo Bootstrap, ở kích thước nhỏ, class sẽ được dùng với -sm. Ở kích thước trung bình, bạn sẽ dùng -md-.

Ví dụ sau sẽ cho kết quả trong thiết bị nhỏ được chia theo tỷ lệ 25%/75% và 50%/50% trên thiết bị trung bình:

<!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>Medium Grid</h1>
  <p>Chỉnh lạ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-sm-3 col-md-6 bg-primary text-white">
      Giới thiệu về Quantrimang.com
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 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>

Medium Grid trên Bootstrap 5

Chỉ dùng Medium

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

<!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>Chỉnh lại kích thước trình duyệt để thấy sự thay đổi.</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 bg-primary text-white">
       Giới thiệu về Quantrimang.com:
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-md-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>

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

Trong Bootstrap 5, bạn có một cách tạo các cột có cùng chiều rộng cực dễ dàng trên mọi thiết bị: chỉ cấn số số trong .col-md-* và chỉ dùng class .col-md trên một số cụ thể của phần tử col. Bootstrap sẽ xác định số lượng cột và chúng sẽ có cùng độ rộng.

Nếu kích thước màn hình nhỏ hơn 768px, cột sẽ được xếp chồng 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-md bg-primary text-white">1 of 2</div>
      <div class="col-md bg-dark text-white">2 of 2</div>
    </div>  
  </div>
  <br>
  
  <div class="container-fluid">
    <div class="row">
      <div class="col-md bg-primary text-white">1 of 4</div>
      <div class="col-md bg-dark text-white">2 of 4</div>
      <div class="col-md bg-primary text-white">3 of 4</div>
      <div class="col-md bg-dark text-white">4 of 4</div>
    </div>  
  </div>
</div>

</body>
</html>

Cột bố cục tự động cho grid medium