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:
Horizontala centrado
Additionally, Bootstrap also includes an .mx-auto
class for horizontally centering fixed-width block level content—that is, content that has display: block
and a width
set—by setting the horizontal margins to auto
.
Negative margin
In CSS, margin
properties can utilize negative values (padding
cannot). As of 4.2, we’ve added negative margin utilities for every non-zero integer size listed above (e.g., 1
, 2
, 3
, 4
, 5
). These utilities are ideal for customizing grid column gutters across breakpoints.
The syntax is nearly the same as the default, positive margin utilities, but with the addition of n
before the requested size. Here’s an example class that’s the opposite of .mt-1
:
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
.