Hapësira

Bootstrap përfshin një gamë të gjerë të klasave të përdorimit të marzhit dhe mbushjes për të modifikuar pamjen e një elementi.

Si punon

Cakto vlera marginose paddingvlera të përshtatshme për një element ose një nëngrup të anëve të tij me klasa stenografi. Përfshin mbështetje për pronat individuale, të gjitha pronat dhe vetitë vertikale dhe horizontale. Klasat janë ndërtuar nga një hartë e paracaktuar Sass që varion nga .25remnë 3rem.

Shënimi

Shërbimet e ndarjes që zbatohen për të gjitha pikat e ndërprerjes, nga xsnë xl, nuk kanë asnjë shkurtim të pikës së ndërprerjes në to. Kjo është për shkak se ato klasa aplikohen nga min-width: 0dhe lart, dhe kështu nuk janë të lidhura nga një pyetje mediatike. Megjithatë, pikat e mbetura të ndërprerjes përfshijnë një shkurtim të pikës së ndërprerjes.

Klasat emërtohen duke përdorur formatin {property}{sides}-{size}për xsdhe {property}{sides}-{breakpoint}-{size}për sm, md, lg, dhe xl.

Ku prona është një nga:

m- për klasat që vendosenmargin
p- për klasat që vendosenpadding

Ku anët është një nga:

t- për klasat që vendosin margin-toposepadding-top
b- për klasat që vendosin margin-bottomosepadding-bottom
l- për klasat që vendosin margin-leftosepadding-left
r- për klasat që vendosin margin-rightosepadding-right
x- për klasat që vendosin të dyja *-leftdhe*-right
y- për klasat që vendosin të dyja *-topdhe*-bottom
bosh - për klasat që vendosin një marginose paddingnë të katër anët e elementit

Ku madhësia është një nga:

0- për klasat që eliminojnë marginose paddingduke e vendosur atë në0
1- (si parazgjedhje) për klasat që vendosin marginose paddingnë$spacer * .25
2- (si parazgjedhje) për klasat që vendosin marginose paddingnë$spacer * .5
3- (si parazgjedhje) për klasat që vendosin marginose paddingnë$spacer
4- (si parazgjedhje) për klasat që vendosin marginose paddingnë$spacer * 1.5
5- (si parazgjedhje) për klasat që vendosin marginose paddingnë$spacer * 3
auto- për klasat që vendosin marginnë auto

(Mund të shtoni më shumë madhësi duke shtuar hyrje në $spacersvariablin e hartës Sass.)

Shembuj

Këtu janë disa shembuj përfaqësues të këtyre klasave:

.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;
}

Përqendrimi horizontal

Për më tepër, Bootstrap përfshin gjithashtu një .mx-autoklasë për përqendrimin horizontalisht të përmbajtjes së nivelit të bllokut me gjerësi fikse - domethënë përmbajtjen që ka display: blockdhe një widthgrup - duke vendosur margjinat horizontale në auto.

Element i përqendruar

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Marzhi negativ

Në CSS, marginvetitë mund të përdorin vlera negative ( paddingnuk mund). Që nga 4.2, ne kemi shtuar shërbime të marzhit negativ për çdo madhësi të plotë jozero të renditur më sipër (p.sh., 1, 2, 3, 4, 5). Këto shërbime janë ideale për personalizimin e ulluqeve të kolonave të rrjetit nëpër pikat e ndërprerjes.

Sintaksa është pothuajse e njëjtë me shërbimet e paracaktuara, me diferencë pozitive, por me shtimin e nmadhësisë së kërkuar përpara. Këtu është një klasë shembull që është e kundërta e .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Ja një shembull i personalizimit të rrjetit Bootstrap në pikën e ndërprerjes mesatare ( md) dhe më lart. Ne kemi rritur .colmbushjen me .px-md-5dhe më pas e kemi kundërshtuar atë me .mx-md-n5në prind .row.

Mbushje e personalizuar e kolonës

<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>