Bài 41: Grid Medium trong Bootstrap 5
Ở 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>
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>
Trên đây là những điều cần biết về cách tạo grid medium trong Bootstrap 5. Hi vọng bài viết hữu ích với các bạn.
Bạn nên đọc
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
-
Bài 38: Hệ thống Grid từ xếp chồng tới nằm ngang trong Bootstrap 5
-
Bài 3: Hệ thống lưới Grid System trong Bootstrap 5
-
Bài 37: Form Validation trong Bootstrap 5
-
Bài 5: Màu sắc trong Bootstrap 5
-
Bài 39: Những kiểu Grid cực nhỏ trong Bootstrap 5
-
Bài 2: Tìm hiểu về Container trong Bootstrap 5
-
Bài 40: Grid nhỏ trong Bootstrap 5
-
Giải đáp những câu hỏi về Bootstrap thường gặp
![❖](https://st.quantrimang.com/photos/avatars/default.png)
![❖](https://st.quantrimang.com/photos/image/2020/06/15/hoc-bootstrap-200-size-24x24-znd.png)
Cũ vẫn chất
-
44 phím tắt hữu dụng trên tất cả trình duyệt
Hôm qua 2 -
Cách sửa lỗi không tải được file lên Google Drive
Hôm qua -
Khắc phục tình trạng các phím chức năng không hoạt động trong Windows 10
Hôm qua -
Stt cho những đêm tâm trạng không ngủ được
Hôm qua -
Hướng dẫn cách kẻ chéo ô trong Excel
2 ngày -
Câu nói hay về người thứ ba, stt về người thứ ba trong tình yêu thâm thúy
Hôm qua -
Hướng dẫn chia nhỏ file nén bằng WinRAR
2 ngày -
C++ Editor Online
Hôm qua -
Cách quản lý mật khẩu đã lưu trên Microsoft Edge: Xem, xóa, sửa, xuất
Hôm qua -
Cách chèn emoji vào ảnh trên iPhone cực đơn giản
Hôm qua