Bootstrap 4 Container
Hộp đựng
Bạn đã biết 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.
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 vùng chứa có chiều rộng cố định đáp ứng - Lớp
.container-fluidcung cấp một vùng chứa có chiều rộng đầy đủ , mở rộng toàn bộ chiều rộng của khung nhìn
Vùng chứa cố định
Sử dụng .containerlớp để tạo một vùng chứa đáp ứng, có chiều rộng cố định.
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:
|
Cực nhỏ <576px |
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 ngắt khác nhau:
Thí dụ
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Bình chứa chất lỏng
Sử dụng .container-fluidlớp để tạo vùng chứa có chiều rộng đầy đủ, vùng chứa sẽ luôn kéo dài toàn bộ chiều rộng của màn hình ( widthluôn là 100%):
Thí dụ
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Đệ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 15px, không có phần đệm trên cùng hoặc dưới cùng. Do đó, chúng tôi thường sử dụng các tiện ích giãn cách , chẳng hạn như đệm và lề bổ sung để làm cho chúng trông đẹp hơn. Ví dụ: .pt-3có nghĩa là "thêm phần đệm trên cùng 16px":
Thí dụ
<div class="container pt-3"></div>
Bạn sẽ tìm hiểu thêm về các tiện ích giãn cách, trong Chương Tiện ích BS4 của chúng tôi .
Đường viền và màu sắc vùng chứa
Các tiện ích khác, chẳng hạn như đường viền và màu sắc, cũng thường được sử dụng cùng với các thùng chứa:
Thí 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 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 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>
Bạn sẽ tìm hiểu thêm về màu sắc và các tiện ích đường viền, trong Chương Màu 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 .container-sm|md|lg|xllớp để tạo các vùng chứa đáp ứng.
Vùng max-widthchứa sẽ thay đổi trên các kích thước màn hình / chế độ xem khác nhau:
| Lớp học |
Cực nhỏ <576px |
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 |
Thí 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>
Bạn có biết không?
W3.CSS là một giải pháp 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 đi tới Hướng dẫn về W3.CSS của chúng tôi .