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ỏ. 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%.
Ở 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>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/[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>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ề Sinitc.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, Sinitc.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 Sinitc.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 Sinitc.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/[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>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ề Sinitc.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, Sinitc.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 Sinitc.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 Sinitc.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/[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>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.
Chủ đề Tương tự
- Tags:
Không có đánh giá nào.
Viết một đánh giá.
Để bình luận vui lòng Đăng nhập tài khoản ! hoặcĐăng ký mới!
S - Tech
Điện máy
Khoa học
Cuộc sống
Ô tô, Xe máy
Tiện ích
Công nghệ
Video
