Bài 38: Hệ thống Grid từ xếp chồng tới nằm ngang trong Bootstrap 5
Hệ thống Grid trong Bootstrap 5 khá đa dạng. Ở bài học này, chúng ta sẽ tập trung vào hai cách sắp xếp Grid thông dụng nhất trong Bootstrap 5 nhé!
Giờ hãy cùng nhau tạo một hệ thống lưới Grid cơ bản, bắt đầu từ xếp chồng trên các thiết bị nhỏ, trước khi chuyển thành dàn ngang trên thiết bị lớn hơn.
Ví dụ bên dưới hiện một bố cục hai cột “xếp chồng tới nằm ngang”. Điều đó có nghĩa nó sẽ chia đôi màn hình trên tất cả kích cỡ màn hình, ngoại trừ màn hình quá nhỏ. Trong trường hợp đó, nó sẽ tự động xếp chồng (100%).
Code cơ bản:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
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">
<h1>Ví dụ về Grid</h1>
<p>Ví dụ này minh họa tỷ lệ phân chia 50%/50% trên các thiết bị nhỏ, vừa, lớn, xlarge và xxlarge. Trên các thiết bị cực nhỏ, nó sẽ xếp chồng lên nhau (100% chiều rộng)..</p>
<p>Chỉnh lại kích thước cửa sổ trình duyệt để thấy sự khác biệt.</p>
<div class="row">
<div class="col-sm-6 bg-primary text-white p-3">
Quantrimang...
</div>
<div class="col-sm-6 bg-dark text-white p-3">
Downloadvn...
</div>
</div>
</div>
</body>
</html>
Mẹo: Các số trong class .col-sm-*
cho biết số lượng cột nên gộp (trong số 12). Do đó, .col-sm-1
gộp 1 cột, .col-sm-4
gộp 4 cột, .col-sm-6
gộp 6 cột…
Lưu ý: Đảm bảo tổng số thêm vào tối đa chỉ tới 12. Bạn không cần phải dùng tất cả 12 cột có sẵn.
Mẹo: Bạn có thể chuyển bất kỳ bố cục full-width thành bố cục fixed-width responsive (chiều rộng cố định), bằng cách thay đổi class .container-fluid
sang .container
. Ví dụ:
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Tự động bố cục cột
Bootstrap 5 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ố từ .col-size-*
và chỉ dùng class .col-size
trên một số các phần tử col nhất định. Bootstrap sẽ xác định số lượng cột hiện có. Mỗi cột đều có cùng chiều rộng. Class size (sm, md…) xác định thời điểm cột phải phản hồi. Code mẫu:
<!-- Two columns: 50% width on all screens, except for extra small (100% width) -->
<div class="row">
<div class="col-sm">1 of 2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3 of 4</div>
<div class="col-sm">4 of 4</div>
</div>
1 of 2
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><strong>Hai cột</strong>: chiều rộng 50% trên mọi màn hình, ngoại trừ cực nhỏ (100% chiều rộng trên màn hình có chiều rộng nhỏ hơn <strong>576px</strong>)</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm bg-primary text-white p-3">1 of 2</div>
<div class="col-sm bg-dark text-white p-3">2 of 2</div>
</div>
</div>
<br>
<p><strong>Bốn cột</strong>: 25% chiều rộng trên mọi màn hình, except for extra small ngoại trừ cực nhỏ (100% chiều rộng trên màn hình có chiều rộng nhỏ hơn <strong>576px</strong>)</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm bg-primary text-white p-3">1 of 4</div>
<div class="col-sm bg-dark text-white p-3">2 of 4</div>
<div class="col-sm bg-primary text-white p-3">3 of 4</div>
<div class="col-sm bg-dark text-white p-3">4 of 4</div>
</div>
</div>
</div>
</body>
</html>
Hệ thống Grid rất quan trọng khi phát triển web. Bạn sẽ có nhiều kiểu chỉnh Grid khác nhau khi sử dụng Bootstrap 5. Trên đây là hai ví dụ tạo Grid đơn giản và có thể áp dụng trên mọi web, ứng dụng. Hi vọng bài viết hữu ích với các bạn.
Bạn nên đọc
-
Bài 11: Button Group trong Bootstrap 5
-
Tổng hợp bài tập về Bootstrap 5
-
Bài 2: Tìm hiểu về Container trong Bootstrap 5
-
Cách tùy biến Bootstrap với Sass
-
Giải đáp những câu hỏi về Bootstrap thường gặp
-
Bài 7: Ảnh trong Bootstrap 5
-
Bài 10: Button trong Bootstrap 5
-
Bài 4: Typography trong Bootstrap 5
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
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
-
Code Murder Mystery 2 mới nhất và cách nhập
Hôm qua 9 -
10+ công cụ gỡ cài đặt phần mềm miễn phí tốt nhất
Hôm qua -
Thống kê tin nhắn Facebook xem ai nhắn tin nhiều nhất trên Facebook
Hôm qua 1 -
Code Jujutsu Sorcerer mới nhất, đổi full gems, vé triệu hồi
Hôm qua -
Code Huyết Ảnh Song Sinh mới nhất và cách nhập code
Hôm qua -
Cách xóa chữ trên ảnh bằng Photoshop
Hôm qua 1 -
Cách hạn chế bạn bè trên Facebook xem bài đăng của bạn
Hôm qua -
3 cách đơn giản để reset thiết lập BIOS
Hôm qua -
Những câu nói hay về thời gian, stt về thời gian hay và ý nghĩa
Hôm qua 1 -
Cách chèn dấu tích vào trong Word
Hôm qua