Source

Фосила

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 py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>