Фосила
Bootstrap доираи васеи маржаи стенографияи ҷавобӣ ва синфҳои утилитаҳои пуркунии пурборро барои тағир додани намуди элемент дар бар мегирад.
Он чӣ гуна кор мекунад
margin
Ба як унсур ё padding
зермаҷмӯи паҳлӯҳои он бо синфҳои стенограммавӣ арзишҳои мувофиқ таъин кунед . Дастгирии хосиятҳои инфиродӣ, ҳама хосиятҳо ва амудӣ ва уфуқиро дар бар мегирад. Синфҳо аз харитаи пешфарзии Sass сохта шудаанд, ки .25rem
аз 3rem
.
Нота
Утилитҳои фосилавӣ, ки ба ҳама нуқтаҳои қатъшавӣ, аз xs
то xl
, дахл доранд, дар онҳо ихтисораи нуқта надоранд. Сабаб дар он аст, ки ин синфҳо аз min-width: 0
ва боло татбиқ карда мешаванд ва аз ин рӯ бо дархости медиа баста намешаванд. Бо вуҷуди ин, нуқтаҳои қатъшавии боқимонда ихтисораи нуқтаи қатъиро дар бар мегиранд.
Синфҳо бо истифода аз формат {property}{sides}-{size}
барои xs
ва {property}{sides}-{breakpoint}-{size}
барои sm
, md
, lg
, ва xl
номида мешаванд.
Дар куҷо моликият яке аз:
m
- барои синфҳои муқарраршудаmargin
p
- барои синфҳои муқарраршудаpadding
Дар куҷо ҷонибҳо яке аз:
t
- барои синфҳое, ки муқаррарmargin-top
мекунанд ёpadding-top
b
- барои синфҳое, ки муқаррарmargin-bottom
мекунанд ёpadding-bottom
l
- барои синфҳое, ки муқаррарmargin-left
мекунанд ёpadding-left
r
- барои синфҳое, ки муқаррарmargin-right
мекунанд ёpadding-right
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;
}
.ml-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
наметавонад). Аз 4.2, мо барои ҳар як андозаи бутуни дар боло номбаршуда (масалан, 1
, 2
, 3
, 4
, 5
) утилитаҳои маржаи манфӣ илова кардем. Ин утилитҳо барои танзими ҷӯйборҳои сутуни шабакавӣ дар нуқтаҳои рахна беҳтаринанд.
Синтаксис тақрибан бо утилитаҳои пешфарз, маржаи мусбат якхела аст, аммо бо иловаи n
пеш аз андозаи дархостшуда. Дар ин ҷо як синфи намунае ҳаст, ки баръакси он аст .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Ин аст мисоли танзим кардани шабакаи Bootstrap дар нуқтаи миёна ( md
) ва болотар. Мо .col
пуркуниро бо волидайн зиёд кардем .px-md-5
ва сипас ба он муқобилат кардем ..mx-md-n5
.row
<div class="row mx-md-n5">
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>