Vùng chứa Bootstrap 5
Vùng chứa Bootstrap 5
Bạn đã học từ chương trước rằng Bootstrap yêu cầu một phần tử chứa để bao bọc nội dung trang web.
Các vùng chứa được sử dụng để đệm nội dung bên trong chúng và có sẵn hai lớp vùng chứa:
- Lớp
.containercung cấp một thùng chứa có chiều rộng cố định đáp ứng - Lớp
.container-fluidcung cấp một thùng chứa có chiều rộng đầy đủ , trải rộng trên toàn bộ chiều rộng của khung nhìn
Thùng cố định
Sử dụng lớp .container để tạo vùng chứa có chiều rộng cố định, đáp ứng.
Lưu ý rằng chiều rộng của nó ( max-width ) sẽ thay đổi trên các kích thước màn hình khác nhau:
| Rất nhỏ <576px | Bé nhỏ ≥576px | Trung bình ≥768px | Lớn ≥992px | Cực lớn ≥1200px | XXL ≥1400px | |
|---|---|---|---|---|---|---|
| chiều rộng tối đa | 100% | 540px | 720px | 960px | 1140px | 1320px |
Mở ví dụ bên dưới và thay đổi kích thước cửa sổ trình duyệt để thấy rằng chiều rộng vùng chứa sẽ thay đổi tại các điểm dừng khác nhau:
Ví dụ
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div> Hãy tự mình thử »Điểm dừng XXL ( ≥1400px) là điểm mới trong Bootstrap 5, trong khi điểm dừng lớn nhất trong Bootstrap 4 là Cực lớn ( ≥1200px).
Thùng chứa chất lỏng
Sử dụng lớp .container-fluid để tạo vùng chứa có chiều rộng đầy đủ, vùng chứa này sẽ luôn trải rộng trên toàn bộ chiều rộng của màn hình ( width luôn là 100% ):
Ví dụ
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div> Hãy tự mình thử » Đệm container
Theo mặc định, vùng chứa có phần đệm bên trái và bên phải, không có phần đệm trên cùng hoặc dưới cùng. Vì vậy, chúng ta thường sử dụng các tiện ích về khoảng cách , chẳng hạn như phần đệm thêm và lề để khiến chúng trông đẹp hơn. Ví dụ: .pt-5 có nghĩa là "thêm phần đệm lớn ở trên cùng ":
Đường viền và màu vùng chứa
Các tiện ích khác như đường viền, màu sắc cũng thường được sử dụng cùng với container:
Ví dụ
<div class="container p-5 my-5 border"></div>
<div class="container
p-5 my-5 bg-dark
text-white"></div>
<div class="container p-5 my-5 bg-primary
text-white"></div> Hãy tự mình thử »Bạn sẽ tìm hiểu nhiều hơn về màu sắc và các tiện ích đường viền trong chương sau.
Vùng chứa đáp ứng
Bạn cũng có thể sử dụng các lớp .container-sm|md|lg|xl để xác định thời điểm vùng chứa sẽ phản hồi.
max-width của vùng chứa sẽ thay đổi trên các kích thước/khung nhìn màn hình khác nhau:
| Lớp học | Rất nhỏ <576px | Bé nhỏ ≥576px | Trung bình ≥768px | Lớn ≥992px | Cực lớn ≥1200px | XXL ≥1400px |
|---|---|---|---|---|---|---|
.container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
Ví dụ
<div class="container-sm">.container-sm</div>
<div
class="container-md">.container-md</div>
<div
class="container-lg">.container-lg</div>
<div
class="container-xl">.container-xl</div>
<div
class="container-xxl">.container-xxl</div> Hãy tự mình thử »Bạn có biết không?
W3.CSS là một sự thay thế tuyệt vời cho Bootstrap 5.
Nếu bạn muốn tìm hiểu W3.CSS, hãy truy cập Hướng dẫn W3.CSS của chúng tôi.
