khoảng cách
Bootstrap bao gồm một loạt các lớp tiện ích margin, padding và gap đáp ứng tốc độ nhanh để sửa đổi diện mạo của một phần tử.
Ký quỹ và phần đệm
Gán các giá trị margin
hoặc thân thiện với padding
đáp ứng cho một phần tử hoặc một tập hợp con các mặt của nó bằng các lớp tốc ký. Bao gồm hỗ trợ cho các thuộc tính riêng lẻ, tất cả các thuộc tính và các thuộc tính dọc và ngang. Các lớp được xây dựng từ một bản đồ Sass mặc định khác nhau, từ .25rem
đến 3rem
.
Sử dụng mô-đun bố cục Lưới CSS? Cân nhắc sử dụng tiện ích khoảng trống .
Ký hiệu
Các tiện ích giãn cách áp dụng cho tất cả các điểm ngắt, từ xs
đến xxl
, không có chữ viết tắt điểm ngắt trong chúng. Điều này là do các lớp đó được áp dụng từ min-width: 0
trở lên và do đó không bị ràng buộc bởi một truy vấn phương tiện. Tuy nhiên, các điểm ngắt còn lại bao gồm chữ viết tắt của điểm ngắt.
Các lớp được đặt tên bằng cách sử dụng định dạng {property}{sides}-{size}
for xs
và {property}{sides}-{breakpoint}-{size}
for sm
,, md
và lg
.xl
xxl
Trường hợp tài sản là một trong:
m
- đối với các lớp đã thiết lậpmargin
p
- đối với các lớp đã thiết lậppadding
Trong đó các bên là một trong:
t
- cho các lớp thiết lậpmargin-top
hoặcpadding-top
b
- cho các lớp thiết lậpmargin-bottom
hoặcpadding-bottom
s
- (bắt đầu) cho các lớp thiết lậpmargin-left
hoặcpadding-left
trong LTR,margin-right
hoặcpadding-right
trong RTLe
- (kết thúc) cho các lớp đặtmargin-right
hoặcpadding-right
trong LTR,margin-left
hoặcpadding-left
trong RTLx
- cho các lớp đặt cả*-left
và*-right
y
- cho các lớp đặt cả*-top
và*-bottom
- trống - cho các lớp đặt a
margin
hoặcpadding
trên cả 4 cạnh của phần tử
Trong đó kích thước là một trong:
0
- đối với các lớp loại bỏmargin
hoặcpadding
bằng cách đặt nó thành0
1
- (theo mặc định) cho các lớp đặtmargin
hoặcpadding
$spacer * .25
2
- (theo mặc định) cho các lớp đặtmargin
hoặcpadding
$spacer * .5
3
- (theo mặc định) cho các lớp đặtmargin
hoặcpadding
$spacer
4
- (theo mặc định) cho các lớp đặtmargin
hoặcpadding
$spacer * 1.5
5
- (theo mặc định) cho các lớp đặtmargin
hoặcpadding
$spacer * 3
auto
- đối với các lớp đặt thànhmargin
tự động
(Bạn có thể thêm nhiều kích thước hơn bằng cách thêm các mục nhập vào $spacers
biến bản đồ Sass.)
Các ví dụ
Dưới đây là một số ví dụ tiêu biểu về các lớp này:
.mt-0 {
margin-top: 0 !important;
}
.ms-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
Căn giữa theo chiều ngang
Ngoài ra, Bootstrap cũng bao gồm một .mx-auto
lớp để căn giữa theo chiều ngang nội dung cấp độ khối có chiều rộng cố định — nghĩa là, nội dung có display: block
và một width
tập hợp — bằng cách đặt các lề ngang thành auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Lợi nhuận âm
Trong CSS, margin
các thuộc tính có thể sử dụng các giá trị âm ( padding
không thể). Các lề âm này bị tắt theo mặc định , nhưng có thể được bật trong Sass bằng cách cài đặt $enable-negative-margins: true
.
Cú pháp gần giống với các tiện ích ký quỹ dương, mặc định, nhưng có thêm vào n
trước kích thước được yêu cầu. Đây là một ví dụ về lớp đối lập với .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Khoảng cách
Khi sử dụng display: grid
, bạn có thể tận dụng các gap
tiện ích trên vùng chứa lưới cha. Điều này có thể tiết kiệm việc phải thêm các tiện ích lề vào các mục lưới riêng lẻ (con của một vùng display: grid
chứa). Các tiện ích Gap đáp ứng theo mặc định và được tạo thông qua API tiện ích của chúng tôi, dựa trên $spacers
bản đồ Sass.
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
Hỗ trợ bao gồm các tùy chọn đáp ứng cho tất cả các điểm ngắt lưới của Bootstrap, cũng như sáu kích thước từ $spacers
bản đồ ( 0
- 5
). Không có .gap-auto
lớp tiện ích vì nó có hiệu quả như .gap-0
.
Sass
Bản đồ
Các tiện ích khoảng cách được khai báo thông qua bản đồ Sass và sau đó được tạo bằng API tiện ích của chúng tôi.
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
API tiện ích
Các tiện ích khoảng cách được khai báo trong API tiện ích của chúng tôi trong scss/_utilities.scss
. Tìm hiểu cách sử dụng API tiện ích.
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),