Аралық
Bootstrap элементтің көрінісін өзгерту үшін стенографиялық жауап беретін маржаның, толтырудың және бос орынның қызметтік сыныптарының кең ауқымын қамтиды.
Маржа және толтыру
Стенографиялық сыныптары бар элементке немесе оның жақтарының ішкі жиынына жауап беретін қолайлы margin
немесе мәндерді тағайындаңыз. padding
Жеке сипаттарды, барлық сипаттарды және тік және көлденең сипаттарды қолдауды қамтиды. Сыныптар әдепкі Sass картасынан бастап жасалады .25rem
.3rem
CSS Grid орналасу модулін пайдалану керек пе? 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
margin-left
- (бастау) немесеpadding-left
LTR-деmargin-right
немесеpadding-right
RTL - де орнатылған сыныптар үшінe
- (соңы) LTR немесе RTL-margin-right
де орнатылған сыныптар үшін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
балалары) маржа утилиталарын қосу қажеттілігін үнемдей алады . Gap утилиталары әдепкі бойынша жауап береді және Sass картасына display: grid
негізделген API утилиталары арқылы жасалады .$spacers
<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
Аралық утилиталар біздің 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
),