Bài 39: Những kiểu Grid cực nhỏ trong Bootstrap 5
Ở những bài học Bootstrap 5 trước, chúng ta đã tìm hiểu về những kiểu hệ thống lưới Grid cơ bản. Ở bài này, hãy cùng Quantrimang.com đi sâu hơn vào những kiểu Grid cực nhỏ trong Bootstrap nhé!
Ví dụ kiểu bảng dạng lưới cực nhỏ
Ví dụ trên một bố cục đơn giản với hai cột và bạn muốn chia tỉ lệ 25%/75% trên tất cả thiết bị. Hãy thêm class sau vào hai cột:
<div class="col-3">....</div>
<div class="col-9">....</div>
Code cơ bản như sau:
<div class="container-fluid">
<div class="row">
<div class="col-3 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-9 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Ví dụ trên web Quantrimang.com:
<!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 cực nhỏ (Tự động bố cục)</h1>
<p>Ví dụ sau sẽ chia màn hình theo tỷ lệ 25%/75% trên tất cả thiết bị.</p>
<div class="container-fluid">
<div class="row">
<div class="col-3 bg-primary text-white p-3">
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-9 bg-dark text-white p-3">
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>
Lưu ý: Đảm bảo số lượng thêm vào tối đa tới 12 hoặc ít hơn. Bạn không cần phải dùng tất cả 12 cột có sẵn:
Đối với tỷ lệ phân chia 33.3%/66.6%, bạn sẽ dùng .col-4
và .col-8
. Nếu chia 50%/50%, bạn sẽ dùng .col-6
và .col-6
.
Code mẫu:
<!-- 33.3%/66.6% split -->
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-8 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 50%/50% split -->
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-6 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Ví dụ trên web:
<!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 cực nhỏ</h1>
<p>Ví dụ sau sẽ cho kết quả chia màn hình theo tỷ lệ 33.3%/66.6% trên tất cả thiết bị.</p>
<p>Chỉnh lại kích thước cửa sổ trình duyệt để thấy hiệu ứng.</p>
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-primary text-white p-3">
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-8 bg-dark text-white p-3">
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>
<br>
<p>Ví dụ sau chia màn hình 50/50 trên mọi thiết bị.</p>
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-primary text-white p-3">
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-6 bg-dark text-white p-3">
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>
Cột bố cục tự động
Trong Bootstrap 5, bạn 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ố khỏi .col*
và chỉ dùng class .col
trên một số cụ thể của các phần tử col. Bootstrap sẽ xác định số lượng cột hiện có và từng cột sẽ có cùng chiều rộng:
<!-- Two columns: 50% width-->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four columns: 25% width-->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
Ví dụ trên web:
<!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">
<div class="container-fluid">
<div class="row">
<div class="col bg-primary text-white p-3">Cột 1/2</div>
<div class="col bg-dark text-white p-3">Cột 2/2</div>
</div>
</div>
<br>
<div class="container-fluid">
<div class="row">
<div class="col bg-primary text-white p-3">Cột 1/4</div>
<div class="col bg-dark text-white p-3">Cột 2/4</div>
<div class="col bg-primary text-white p-3">Cột 3/4</div>
<div class="col bg-dark text-white p-3">Cột 4/4</div>
</div>
</div>
</div>
</body>
</html>
Trên đây là những kiểu lưới Grid cực nhỏ trong Bootstrap 5. Hi vọng bài viết giúp bạn hiểu hơn về Grid khi dùng Bootstrap.
Bạn nên đọc
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
-
Giải đáp những câu hỏi về Bootstrap thường gặp
-
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
-
Tổng hợp bài tập về Bootstrap 5
-
Cách dùng Bootstrap với HTML
-
Bài 2: Tìm hiểu về Container trong Bootstrap 5
-
Bài 37: Form Validation trong Bootstrap 5
-
Bài 10: Button trong Bootstrap 5
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Cách tải và cập nhật driver Bluetooth cho Windows 10
Hôm qua -
8 bước khắc phục sự cố mất âm thanh trong Windows
Hôm qua 2 -
6 phần mềm chỉnh sửa ảnh miễn phí tốt nhất trên máy tính
Hôm qua 3 -
Tổng hợp các cách bật Bluetooth trên Windows 10/8/7
Hôm qua -
Một số cách sửa lỗi Start Menu trên Windows 10 ngừng hoạt động
Hôm qua 5 -
Khắc phục sự cố không thể chạy được file .exe
Hôm qua 4 -
Cách vô hiệu hóa Facebook nhưng vẫn dùng Messenger
Hôm qua -
Cách hiện đuôi file, xem phần mở rộng file trên Windows 11/10/7/8
Hôm qua -
Những câu nói hay về tình anh em xã hội, stt về tình anh em kết nghĩa càng đọc càng thấm
Hôm qua -
Các cách căn giữa ô trong bảng trên Word
Hôm qua 1