Chúng ta cần ôn lại container class, container-fluid class và row class trước khi tiếp tục.
Lưu ý là chúng ta có thể tra cứu mọi thứ của Bootstrap 5 khi truy cập Bootstrap 5 Docs.Container: Theo mặc định, container có left và right padding là 15px, không có top và bottom padding và được fix sẵn độ rộng tùy theo độ phân giải của màn hình, thẻ này sẽ bọc ngoài hầu hết tất cả các thẻ div về sau.
Container-fluid: Có độ rộng full màn hình, padding sang hai bên là 15px, không có top và bottom padding. Thẻ này sẽ bọc ngoài hầu hết tất cả các thẻ div về sau.
Row: Là thành phần cơ bản của hệ thống lưới (Grid System), tạo điều kiện thuận lợi cho việc tạo các nhóm cột theo chiều ngang. Thẻ này sẽ có Margin số âm: -15px nếu bạn muốn thẻ nào đó sát vào bên lề hai bên, bạn chỉ cần đặt container bọc ngoài thẻ Row là thẻ trong đó sẽ nằm đúng lề.
Cú pháp của row class
<div class="row">
<!-- Column elements go here -->
</div>
Bây giờ chúng ta sẽ thảo luận về Grid trong Bootstrap mà theo ý kiến cá nhân là "phân đoạn" tương đối khó hiểu của Bootstrap. Đại khái chúng ta sẽ thảo luận về một cơ chế, một hệ thống nhằm giúp chúng ta bố cục một trang web dưới góc nhìn webpage như một tấm lưới với các ô lưới to nhỏ khác nhau. Chúng ta sẽ "khoanh vùng" các ô lưới theo ý đồ "sáng tác" của chúng ta trước. Sau đó sẽ "thả" nội dung như text, image... vào các ô tương ứng.
Bootstrap 5 Grid System
Hệ thống lưới của Bootstrap cho phép tối đa 12 cột trên toàn trang.
Nếu bạn không muốn sử dụng tất cả 12 cột riêng lẻ, bạn có thể nhóm các cột lại với nhau để tạo các cột rộng hơn.
Grid System có khả năng responsive và các cột sẽ tự động sắp xếp lại tùy thuộc vào kích thước màn hình.
Grid Classes
Bootstrap 5 Grid System có sáu lớp:
.col- (thiết bị cực nhỏ - chiều rộng màn hình nhỏ hơn 576px)
.col-sm- (thiết bị nhỏ - chiều rộng màn hình bằng hoặc lớn hơn 576px)
.col-md- (thiết bị trung bình - chiều rộng màn hình bằng hoặc lớn hơn 768px)
.col-lg- (thiết bị lớn - chiều rộng màn hình bằng hoặc lớn hơn 992px)
.col-xl- (thiết bị cực lớn - chiều rộng màn hình bằng hoặc lớn hơn 1200px)
.col-xxl- (thiết bị cực lớn - chiều rộng màn hình bằng hoặc lớn hơn 1400px)
Cú pháp:
<div class="col-[breakpoint]-[width] [other-classes]">
...
</div>
Trong đó:
breakpoint: là tên của điểm dừng, chẳng hạn như sm, md, lg, xl hoặc xxl.
width: số cột mà phần tử sẽ chiếm tại điểm dừng đã chỉ định.
other-classes: Biểu thị bất kỳ lớp nào khác mà bạn muốn thêm vào phần tử.
Tới đây đã bắt đầu "rối tinh" lên rồi, chúng ta sẽ cần một ví dụ.
- Điều kiện thứ nhất để chúng ta có thể thật sự hiểu ví dụ này đó là phải được thực hành trên máy tính bàn.
- Điều kiện thứ hai là bạn phải biết cách di chuyển trình duyệt và sau đó điều chỉnh chiều ngang để thấy hiệu quả của ví dụ.
Để di chuyển một trình duyệt bất kỳ, bạn có thể đễ dàng dùng chuột kéo và thả, tuy nhiên nếu bạn không quen, bạn có thể làm như sau:
Bấm Windows Key + Shift sau đó Left Arrow/Right Arrow (Bạn có thể bấm mũi tên phải hay trái đều được)
Sau đó, khi trình duyệt đã tạm thời bị đẩy về trái hoặc phải (tùy vào việc bạn bấm mũi tên nào)
Bạn để nguyên hiện trạng như vậy và truy cập vào OnlineGDB.
Bây giờ chúng ta đã có thể làm ví dụ. Khi muốn thay đổi chiều ngang để "mục sở thị" hiệu quả của Bootstrap, chúng ta chỉ cần để trỏ chuột vào rìa bên trái (như trong hình trên, nếu ngược lại thì sẽ là rìa bên phải) và kéo về bên trái. Nếu muốn trở về "nguyên trạng", chúng ta chỉ cần bấm vào hình vuông trên góc phải
Chúng ta bắt đầu "thí nghiệm" của chúng ta:
- Bấm vào hình vuông cho trình duyệt trở về nguyên trạng.
- Đây là mã HTML đơn giản, nhập vào OnlineGDB
<!DOCTYPE html>
<html lang="en">
<head>
<title>Đất Việt Lập Trình</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>Ví dụ Bootstrap 5 Grid System </h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card bg-primary">
<div class="card-body">
<h5 class="card-title">Column 1</h5>
<p class="card-text">Nội dung nằm trong cột 1.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card bg-secondary">
<div class="card-body">
<h5 class="card-title">Column 2</h5>
<p class="card-text">Nội dung nằm trong cột 2.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="card bg-info">
<div class="card-body">
<h5 class="card-title ">Column 3</h5>
<p class="card-text ">Nội dung nằm trong cột 3.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Bấm Run để thực thi, lúc này mà hình đang ở trạng thái bình thường
Di chuyển trình duyệt (Bấm Windows Key + Shift sau đó Left Arrow/Right Arrow), sau đó từ từ mở rộng ra cho đến lúc cả 3 cột trên một hàng giống hình trên
Sau đó chúng ta sẽ từ từ thu hẹp chiều ngang lại cho đến khi chúng ta thấy tương tự như hình dưới đây.
Tiếp tục thu hẹp chiều ngang cho dến khi thấy tương tự như sau
Hy vọng rằng "lò mò" tới đây chúng ta đã "lờ mờ" hiểu ra những gì "phía sau màn hình".
Nhìn lại nhân tố quan trọng nhất:
<div class="col-lg-4 col-md-6 col-sm-12">
Dịch ra "tiếng Việt" thì khái là:
- Thẻ <div> này theo kiểu col class.
- Nếu xem trên màn hình lớn (lg) thì mỗi cột sẽ được nhóm lại từ 4 cột (4/12)
- Nếu xem trên màn hình trung bình (md) thì mỗi cột sẽ được nhóm lại từ 6 cột (6/12).
- Nếu xem trên màn hình nhỏ (sm) thì mỗi cột sẽ được nhóm lại từ tất cả 12 cột (12/12). Tức là chiếm trọn bề ngang màn hình.
Khi chúng ta coi bình thường, tương tự như khi ta coi trên máy tính bàn, ta thấy 3 cột cùng một hàng vì mỗi cột chiếm 4 vị trí và thoải mái ở đó, không ai chèn ép ai.
Khi chúng ta thu hẹp lại, tương tự như khi ta coi trên một tablet, đến breakpoint màn hình trung bình (md) thì Bootstrap sẽ "responsive" và các cột sẽ tự động sắp xếp lại theo kích thước màn hình trung bình. Hai cột sẽ chia nhau mỗi cột một nửa (6/12), cột còn lại trải dài tự động vì tính thẩm mỹ.
Nếu tiếp tục thu hẹp, tương tự khi ta coi trên điện thoại, đến breakpoint màn
hình nhỏ (sm) thì Bootstrap sẽ "responsive" và các cột sẽ tự động
sắp xếp lại theo kích thước màn hình nhỏ. Lúc này 3 cột chồng lên nhau, mỗi cột chiếm trọn 12/12.
Không có nhận xét nào:
Đăng nhận xét