Аралыгы
Bootstrap элементтин көрүнүшүн өзгөртүү үчүн стенографиялык жооп берүүчү маржа, толтуруу жана боштук пайдалуу класстарынын кеңири спектрин камтыйт.
Маржа жана толтуруу
Стенограмма класстары менен элементке же анын тараптарынын бир бөлүгүнө жооп берүүчү margin
же баалуулуктарды дайындаңыз . padding
Жеке касиеттерди, бардык касиеттерди жана вертикалдык жана горизонталдык касиеттерди колдоону камтыйт. Класстар демейки Sass картасынан .25rem
түзүлөт 3rem
.
CSS Grid жайгашуу модулун колдонуп жатасызбы? боштук утилитасын колдонууну карап көрүңүз .
Белгилөө
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
- (старт) коюлган класстар үчүнmargin-left
жеpadding-left
LTRде,margin-right
жеpadding-right
RTLдеe
- (аягы) белгиленген класстар үчүнmargin-right
жеpadding-right
LTRде,margin-left
жеpadding-left
RTLдеx
*-left
- жана экөөнү тең койгон класстар үчүн*-right
y
*-top
- жана экөөнү тең койгон класстар үчүн*-bottom
- blank - элементтин бардык 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;
}
Gap
Колдонуу учурунда , сиз ата-эне тор контейнериндеги утилиталарды display: grid
колдоно аласыз . Бул жеке тор элементтерине ( контейнердин gap
балдары) маржа утилиталарын кошуудан үнөмдөөгө болот . display: grid
Gap утилиталары демейки боюнча жооп берет жана $spacers
Sass картасынын негизинде биздин API 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
Карталар
Spacing утилиталары 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
),