Vùng chứa Bootstrap 4
Hộp đựng
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
.container
cung cấp một thùng chứa có chiều rộng cố định đáp ứng - Lớp
.container-fluid
cung 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 | |
---|---|---|---|---|---|
chiều rộng tối đa | 100% | 540px | 720px | 960px | 1140px |
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ử »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, các vùng chứa có phần đệm bên trái và bên phải là 15px, 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-3
có nghĩa là "thêm phần đệm trên cùng là 16px":
Bạn sẽ tìm hiểu nhiều hơn về khoảng cách các tiện ích trong Chương Tiện ích BS4 của chúng tôi.
Đườ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ụ
Trang Bootstrap đầu tiên của tôi
Vùng chứa này có đường viền và một số phần đệm và lề bổ sung.
Trang Bootstrap đầu tiên của tôi
Vùng chứa này có màu nền tối và văn bản màu trắng cũng như một số phần đệm và lề bổ sung.
Trang Bootstrap đầu tiên của tôi
Vùng chứa này có màu nền xanh lam và văn bản màu trắng cũng như một số phần đệm và lề bổ sung.
<div class="container p-3 my-3 border"></div>
<div class="container
p-3 my-3 bg-dark
text-white"></div>
<div class="container p-3 my-3 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 Màu sắc BS4 và Chương Tiện ích BS4 của chúng tôi.
Vùng chứa đáp ứng
Bạn cũng có thể sử dụng các lớp .container-sm|md|lg|xl
để tạo các vùng chứa đáp ứng.
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 |
---|---|---|---|---|---|
.container-sm | 100% | 540px | 720px | 960px | 1140px |
.container-md | 100% | 100% | 720px | 960px | 1140px |
.container-lg | 100% | 100% | 100% | 960px | 1140px |
.container-xl | 100% | 100% | 100% | 100% | 1140px |
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>
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 4.
W3.CSS nhỏ hơn, nhanh hơn và dễ sử dụng hơn.
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.