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 margin
ose padding
vlera 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 .25rem
në 3rem
.
Shënimi
Shërbimet e ndarjes që zbatohen për të gjitha pikat e ndërprerjes, nga xs
në 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: 0
dhe 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 xs
dhe {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ë vendosinmargin-top
osepadding-top
b
- për klasat që vendosinmargin-bottom
osepadding-bottom
l
- për klasat që vendosinmargin-left
osepadding-left
r
- për klasat që vendosinmargin-right
osepadding-right
x
- për klasat që vendosin të dyja*-left
dhe*-right
y
- për klasat që vendosin të dyja*-top
dhe*-bottom
- bosh - për klasat që vendosin një
margin
osepadding
në të katër anët e elementit
Ku madhësia është një nga:
0
- për klasat që eliminojnëmargin
osepadding
duke e vendosur atë në0
1
- (si parazgjedhje) për klasat që vendosinmargin
osepadding
në$spacer * .25
2
- (si parazgjedhje) për klasat që vendosinmargin
osepadding
në$spacer * .5
3
- (si parazgjedhje) për klasat që vendosinmargin
osepadding
në$spacer
4
- (si parazgjedhje) për klasat që vendosinmargin
osepadding
në$spacer * 1.5
5
- (si parazgjedhje) për klasat që vendosinmargin
osepadding
në$spacer * 3
auto
- për klasat që vendosinmargin
në auto
(Mund të shtoni më shumë madhësi duke shtuar hyrje në $spacers
variablin 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-auto
klasë për përqendrimin horizontalisht të përmbajtjes së nivelit të bllokut me gjerësi fikse - domethënë përmbajtjen që ka display: block
dhe një width
grup - duke vendosur margjinat horizontale në auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Marzhi negativ
Në CSS, margin
vetitë mund të përdorin vlera negative ( padding
nuk 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 n
madhë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 .col
mbushjen me .px-md-5
dhe më pas e kemi kundërshtuar atë me .mx-md-n5
në prind .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>