Зай зай
Bootstrap нь элементийн дүр төрхийг өөрчлөхийн тулд богино хугацааны хариу үйлдэл үзүүлэх өргөн хүрээний маржин, дэвсгэр, завсрын хэрэглээний ангиудыг агуулдаг.
Маржин ба дүүргэлт
Элемент эсвэл түүний талуудын дэд бүлэгт богино хугацааны ангиллаар хариу үйлдэл үзүүлэхэд ээлтэй margin
эсвэл утгыг оноох. padding
Хувь хүний шинж чанар, бүх шинж чанар, босоо болон хэвтээ шинж чанаруудын дэмжлэгийг багтаасан болно. Ангиуд нь өгөгдмөл Sass газрын зургаас эхлэн .25rem
хийгдсэн 3rem
.
CSS Grid layout модулийг ашиглаж байна уу? Gap хэрэгслийг ашиглах талаар бодож үзээрэй .
Тэмдэглэгээ
xs
-аас хүртэлх бүх таслах цэгүүдэд хамаарах завсрын хэрэгслүүдэд xxl
завсарлагааны цэгийн товчлол байхгүй байна. Учир нь эдгээр ангиуд нь эхлээд min-width: 0
ба түүнээс дээш хэрэглэгддэг тул медиа асуулгад холбогддоггүй. Харин үлдсэн таслах цэгүүд нь таслах цэгийн товчлолыг агуулдаг.
{property}{sides}-{size}
Ангиудыг , , , , xs
болон {property}{sides}-{breakpoint}-{size}
гэсэн форматыг ашиглан нэрлэсэн .sm
md
lg
xl
xxl
Өмч нь дараахь зүйлсийн нэг бол:
m
- тогтоосон ангиудадmargin
p
- тогтоосон ангиудадpadding
Хаана талууд нь:
t
- тогтоосон ангиудадmargin-top
эсвэлpadding-top
b
- тогтоосон ангиудадmargin-bottom
эсвэлpadding-bottom
s
- (эхлэх) нь LTRmargin-left
эсвэл RTL - д тохируулагдсан ангиудадpadding-left
margin-right
padding-right
e
- (төгсгөл) LTRmargin-right
эсвэл RTL - д тохируулсан ангиудадpadding-right
margin-left
padding-left
x
*-left
- болон хоёуланг нь тогтоосон ангиудад*-right
y
*-top
- болон хоёуланг нь тогтоосон ангиудад*-bottom
- хоосон - элементийн бүх 4 тал дээр a
margin
эсвэл тогтоосон ангиудадpadding
Хэмжээ нь :
0
margin
- эсвэлpadding
үүнийг тохируулснаар арилгадаг ангиудад0
1
- (анхдагчаар)margin
эсвэлpadding
гэж тохируулсан ангиудад$spacer * .25
2
- (анхдагчаар)margin
эсвэлpadding
гэж тохируулсан ангиудад$spacer * .5
3
- (анхдагчаар)margin
эсвэлpadding
гэж тохируулсан ангиудад$spacer
4
- (анхдагчаар)margin
эсвэлpadding
гэж тохируулсан ангиудад$spacer * 1.5
5
- (анхдагчаар)margin
эсвэлpadding
гэж тохируулсан ангиудад$spacer * 3
auto
margin
- автоматаар тохируулсан ангиудад
$spacers
(Та Sass газрын зургийн хувьсагч руу оруулгууд нэмж өөр хэмжээ нэмж болно .)
Жишээ
Эдгээр ангиудыг төлөөлөх зарим жишээ энд байна:
.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;
}
Хэвтээ төвлөрөл
Нэмж дурдахад Bootstrap нь хэвтээ ирмэгийг тохируулах замаар .mx-auto
тогтмол өргөнтэй блокийн түвшний агуулгыг, өөрөөр хэлбэл байгаа контент display: block
болон багцыг хэвтээ байдлаар төвлөрүүлэх классыг агуулдаг .width
auto
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Сөрөг маржин
CSS-д margin
шинж чанарууд нь сөрөг утгыг ашиглаж padding
болно (үгүй). Эдгээр сөрөг зайг анхдагчаар идэвхгүй болгосон боловч Sass-д тохиргоогоор идэвхжүүлж болно $enable-negative-margins: true
.
Синтакс нь өгөгдмөл, эерэг маржин хэрэгслүүдтэй бараг ижил боловч n
хүссэн хэмжээнээс өмнө нэмсэн. Үүний эсрэг талын жишээ анги энд байна .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Цоорхой
-ийг ашиглах display: grid
үед та gap
эх сүлжээний контейнер дээрх хэрэгслүүдийг ашиглаж болно. Энэ нь тусдаа сүлжээний зүйлд ( display: grid
савны хүүхдүүд) маржин хэрэгслүүдийг нэмэх шаардлагагүй болно. $spacers
Gap хэрэгслүүд нь анхдагч байдлаар хариу үйлдэл үзүүлдэг бөгөөд Sass газрын зураг дээр тулгуурлан манай хэрэгслүүдийн API-ээр үүсгэгддэг .
<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>
Тусламж нь Bootstrap-ийн бүх сүлжээний таслах цэгүүдийн хариу үйлдэл үзүүлэх сонголтууд, мөн $spacers
газрын зургаас ( 0
– 5
) зургаан хэмжээсийг агуулдаг. .gap-auto
-тэй үр дүнтэй адилхан тул хэрэглээний анги байхгүй .gap-0
.
Сасс
Газрын зураг
Зайны хэрэгслүүдийг Sass газрын зургаар зарлаж, дараа нь манай хэрэгслүүдийн API-ээр үүсгэнэ.
$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);
Utilities API
Spacing хэрэгслүүдийг манай хэрэгслүүдийн API-д зарласан scss/_utilities.scss
. API хэрэгслүүдийг хэрхэн ашиглах талаар суралц.
"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
),