Hộp đựng
Vùng chứa là một khối xây dựng cơ bản của Bootstrap chứa, đệm và sắp xếp nội dung của bạn trong một thiết bị hoặc chế độ xem nhất định.
Cách chúng hoạt động
Vùng chứa là phần tử bố cục cơ bản nhất trong Bootstrap và được yêu cầu khi sử dụng hệ thống lưới mặc định của chúng tôi . Các vùng chứa được sử dụng để chứa, đệm và (đôi khi) căn giữa nội dung bên trong chúng. Trong khi các vùng chứa có thể được lồng vào nhau, hầu hết các bố cục không yêu cầu vùng chứa lồng nhau.
Bootstrap đi kèm với ba vùng chứa khác nhau:
.container
, đặt mộtmax-width
tại mỗi điểm ngắt đáp ứng.container-fluid
, đó làwidth: 100%
tất cả các điểm ngắt.container-{breakpoint}
,width: 100%
cho đến khi điểm ngắt được chỉ định
Bảng dưới đây minh họa cách mỗi vùng chứa max-width
so sánh với bản gốc .container
và .container-fluid
trên mỗi điểm ngắt.
Xem chúng hoạt động và so sánh chúng trong ví dụ Grid của chúng tôi .
Cực nhỏ <576px |
Nhỏ ≥576px |
Trung bình ≥768px |
Lớn ≥992px |
X-Large ≥1200px |
XX-Lớn ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.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 |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Vùng chứa mặc định
Lớp mặc định của chúng tôi .container
là một vùng chứa đáp ứng, có chiều rộng cố định, có nghĩa là các max-width
thay đổi của nó tại mỗi điểm ngắt.
<div class="container">
<!-- Content here -->
</div>
Vùng chứa đáp ứng
Vùng chứa đáp ứng cho phép bạn chỉ định một lớp có độ rộng 100% cho đến khi đạt đến điểm ngắt được chỉ định, sau đó chúng tôi áp dụng max-width
s cho từng điểm ngắt cao hơn. Ví dụ: .container-sm
rộng 100% để bắt đầu cho đến khi sm
đạt đến điểm ngắt, nơi nó sẽ mở rộng quy mô với md
, lg
và xl
.xxl
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Thùng chứa chất lỏng
Sử dụng .container-fluid
cho vùng chứa có chiều rộng đầy đủ, kéo dài toàn bộ chiều rộng của chế độ xem.
<div class="container-fluid">
...
</div>
Sass
Như được hiển thị ở trên, Bootstrap tạo ra một loạt các lớp vùng chứa được xác định trước để giúp bạn xây dựng các bố cục mà bạn mong muốn. Bạn có thể tùy chỉnh các lớp vùng chứa được xác định trước này bằng cách sửa đổi bản đồ Sass (được tìm thấy trong _variables.scss
) cung cấp năng lượng cho chúng:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Ngoài việc tùy chỉnh Sass, bạn cũng có thể tạo các thùng chứa của riêng mình với Sass mixin của chúng tôi.
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
Để biết thêm thông tin và ví dụ về cách sửa đổi bản đồ và biến Sass của chúng tôi, vui lòng tham khảo phần Sass của tài liệu Grid .