Hapësira
Bootstrap përfshin një gamë të gjerë të klasave reaguese të marzhit, mbushjes dhe boshllëqeve për të modifikuar pamjen e një elementi.
Margjina dhe mbushja
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
.
Po përdorni modulin e paraqitjes së rrjetit CSS? Merrni parasysh përdorimin e mjetit të boshllëkut .
Shënimi
Shërbimet e ndarjes që zbatohen për të gjitha pikat e ndërprerjes, nga xs
në xxl
, 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
, xl
dhe xxl
.
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
s
- (fillimi) për klasat që vendosenmargin-left
osepadding-left
në LTR,margin-right
osepadding-right
në RTLe
- (fund) për klasat që vendosenmargin-right
osepadding-right
në LTR,margin-left
osepadding-left
në RTLx
- 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;
}
.ms-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). Këto margjina negative janë çaktivizuar si parazgjedhje , por mund të aktivizohen në Sass duke vendosur $enable-negative-margins: true
.
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;
}
Boshllëk
Kur përdorni display: grid
, mund të përdorni gap
shërbimet në kontejnerin e rrjetit prind. Kjo mund të kursejë nevojën për të shtuar shërbime të marzhit në artikujt individual të rrjetit (fëmijët e një display: grid
kontejneri). Shërbimet Gap janë të përgjegjshme si parazgjedhje dhe krijohen nëpërmjet API-së së shërbimeve tona, bazuar në $spacers
hartën 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>
Mbështetja përfshin opsione të përgjegjshme për të gjitha pikat e ndërprerjes së rrjetit të Bootstrap, si dhe gjashtë madhësi nga $spacers
harta ( 0
– 5
). Nuk ka asnjë .gap-auto
klasë të shërbimeve pasi është efektivisht e njëjtë me .gap-0
.
Sass
Hartat
Shërbimet e ndarjes deklarohen përmes hartës Sass dhe më pas gjenerohen me API-në e shërbimeve tona.
$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);
Utilities API
Shërbimet e ndarjes janë deklaruar në API të shërbimeve tona në scss/_utilities.scss
. Mësoni se si të përdorni API të shërbimeve.
"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
),