Interspacigo
Bootstrap inkluzivas ampleksan gamon de stenografio-respondemaj marĝenoj kaj kompletigaj utilecaj klasoj por modifi la aspekton de elemento.
Kiel ĝi funkcias
Asignu respondemajn amikajn margin
aŭ padding
valorojn al elemento aŭ subaro de ĝiaj flankoj kun stenografioklasoj. Inkluzivas subtenon por individuaj propraĵoj, ĉiuj propraĵoj, kaj vertikalaj kaj horizontalaj propraĵoj. Klasoj estas konstruitaj de defaŭlta Sass-mapo intervalanta de .25rem
ĝis 3rem
.
Notacio
Interspacaj iloj kiuj validas por ĉiuj rompopunktoj, de xs
ĝis xl
, havas neniun rompopunktomallongigon en ili. Ĉi tio estas ĉar tiuj klasoj estas aplikataj de min-width: 0
kaj supren, kaj tiel ne estas ligitaj per amaskomunikila demando. La ceteraj rompopunktoj tamen inkluzivas mallongpunkton.
La klasoj estas nomitaj uzante la formaton {property}{sides}-{size}
por xs
kaj {property}{sides}-{breakpoint}-{size}
por sm
, md
, lg
, kaj xl
.
Kie posedaĵo estas unu el:
m
- por klasoj kiuj starigismargin
p
- por klasoj kiuj starigispadding
Kie flankoj estas unu el:
t
- por klasoj kiuj starigasmargin-top
aŭpadding-top
b
- por klasoj kiuj starigasmargin-bottom
aŭpadding-bottom
l
- por klasoj kiuj starigasmargin-left
aŭpadding-left
r
- por klasoj kiuj starigasmargin-right
aŭpadding-right
x
- por klasoj kiuj starigas ambaŭ*-left
kaj*-right
y
- por klasoj kiuj starigas ambaŭ*-top
kaj*-bottom
- malplena - por klasoj kiuj starigas a
margin
aŭpadding
sur ĉiuj 4 flankoj de la elemento
Kie grandeco estas unu el:
0
- por klasoj kiuj forigas lamargin
aŭpadding
agordante ĝin al0
1
- (defaŭlte) por klasoj kiuj fiksas lamargin
aŭpadding
al$spacer * .25
2
- (defaŭlte) por klasoj kiuj fiksas lamargin
aŭpadding
al$spacer * .5
3
- (defaŭlte) por klasoj kiuj fiksas lamargin
aŭpadding
al$spacer
4
- (defaŭlte) por klasoj kiuj fiksas lamargin
aŭpadding
al$spacer * 1.5
5
- (defaŭlte) por klasoj kiuj fiksas lamargin
aŭpadding
al$spacer * 3
auto
- por klasoj kiuj agordas lamargin
al aŭtomata
(Vi povas aldoni pliajn grandecojn aldonante enskribojn al la $spacers
Sass-mapo-variablo.)
Ekzemploj
Jen kelkaj reprezentaj ekzemploj de ĉi tiuj klasoj:
.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;
}
Horizontala centrado
Aldone, Bootstrap ankaŭ inkluzivas .mx-auto
klason por horizontale centrado de fiks-larĝa bloknivela enhavo—tio estas, enhavo kiu havas display: block
kaj width
aron—agordante la horizontalajn marĝenojn al auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negativa marĝeno
En CSS, margin
propraĵoj povas utiligi negativajn valorojn ( padding
ne povas). Ekde 4.2, ni aldonis negativajn marĝenservaĵojn por ĉiu ne-nula entjera grandeco listigita supre (ekz., 1
, 2
, 3
, 4
, 5
). Ĉi tiuj utilecoj estas idealaj por agordi kradkolumnkanalojn trans rompopunktoj.
La sintakso estas preskaŭ la sama kiel la defaŭltaj, pozitivaj marĝenaj utilecoj, sed kun aldono de n
antaŭ la petita grandeco. Jen ekzempla klaso kiu estas la malo de .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Jen ekzemplo de personigo de la krado Bootstrap ĉe la meza ( md
) rompopunkto kaj supre. Ni pliigis la .col
remburaĵon per .px-md-5
kaj poste kontraŭagis tion per .mx-md-n5
sur la gepatro .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>