Фосила
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
- (оғоз) барои синфҳое, ки дар 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
- холӣ - барои синфҳое, ки
margin
дарpadding
ҳама 4 тарафи элемент муқаррар карда шудаанд
Дар куҷо андоза яке аз:
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
контейнер) сарфа кунад. Утилитҳои Gap ба таври нобаёнӣ ҷавобгӯ мебошанд ва тавассути API утилитаҳои мо дар асоси $spacers
харитаи 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>
Дастгирӣ имконоти посухгӯиро барои ҳамаи нуқтаҳои шабакаи 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);
API Utilities
Утилитҳои фосилавӣ дар 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
),