Espaciamiento
Bootstrap huk hatun llimp'i taquigrafía kutichiq margen, relleno, chaymanta gap yanapakuy clasekuna huk elementopa rikchayninta tikranapaq.
Margen y acolchado
Huk elementoman utaq huk subconjunto de sus lados kaqman clases de taquigrafía kaqwan kutichiy-amigo margin
utaq chanikunata churay. padding
Sapa propiedades kaqpaq, tukuy propiedades kaqpaq, chaymanta sayaq chaymanta horizontal kaqpaq yanapakuykunata churan. Clases huk ñawpaqmanta Sass mapamanta ruwasqa kanku .25rem
chaymanta 3rem
.
CSS Grid churana módulo llamk'achispa? Yuyaykuy gap utilidad nisqawan yanapachikuyta .
Notación
Espaciamiento yanapakuykuna llapa p'akiy puntokunaman,mantamanta , xs
mana xxl
p'akiy abreviaturayuqchu chaykunapi. Kayqa chay clasekuna min-width: 0
chaymanta wichayman churasqa kasqanrayku, chaymanta chayhina mana huk willay mast'ariq tapuywan watasqa kasqankurayku. Puchuq rakikunapim ichaqa huk pakiypa pisichasqa rimaynin kachkan.
Clases sutichasqa kanku formato {property}{sides}-{size}
para xs
y {property}{sides}-{breakpoint}-{size}
para sm
, md
, lg
, xl
, y xxl
.
Maypichus propiedad nisqaqa hukninmi:
m
- para clases que establecenmargin
p
- para clases que establecenpadding
Maypi ladokuna hukninmi:
t
- para clases que establecenmargin-top
opadding-top
b
- para clases que establecenmargin-bottom
opadding-bottom
s
- (qallarinapaq) clasekuna churanapaqmargin-left
utaqpadding-left
LTR kaqpi,margin-right
utaqpadding-right
RTL kaqpie
- (tukuy) clasekuna churanapaqmargin-right
utaqpadding-right
LTR kaqpi,margin-left
utaqpadding-left
RTL kaqpix
- para clases que establecen ambos*-left
y*-right
y
- para clases que establecen ambos*-top
y*-bottom
- ch'usaq - huk
margin
ichapadding
elementopa lliw 4 ladonkunapi churaq clasekunapaq
Maypichus sayayninqa hukninmi:
0
- para clases que eliminan elmargin
opadding
chayta churaspa0
1
- (ñawpaqmanta) chaymargin
utaqpadding
nisqaman churaq clasekunapaq$spacer * .25
2
- (ñawpaqmanta) chaymargin
utaqpadding
nisqaman churaq clasekunapaq$spacer * .5
3
- (ñawpaqmanta) chaymargin
utaqpadding
nisqaman churaq clasekunapaq$spacer
4
- (ñawpaqmanta) chaymargin
utaqpadding
nisqaman churaq clasekunapaq$spacer * 1.5
5
- (ñawpaqmanta) chaymargin
utaqpadding
nisqaman churaq clasekunapaq$spacer * 3
auto
- para clases que establecen elmargin
a auto
$spacers
(Aswan sayaykunata yapayta atinki Sass mapa tikraqman qillqakunata yapaspa ).
Ejemplos
Kaypi wakin representativo ejemplokuna kay clasekunamanta:
.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;
}
Chawpichay horizontal
Chaymanta, Bootstrap huk .mx-auto
clasetapas churan horizontalmente chawpichaypaq takyasqa-ancho bloque nivel contenidota —chayqa, contenido kaqta display: block
chaymanta huk width
huñu— horizontal margenkunata churaspa auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Margen negativo nisqa
CSS kaqpi, margin
propiedades mana allin chanikunata llamk'achiyta atin ( padding
mana atinchu). Kay mana allin margenkuna ñawpaqmanta mana llamk'achisqa kachkan , ichataq Sass kaqpi atichiyta atikunman churaspa $enable-negative-margins: true
.
Sintaxis yaqa kaqlla ñawpaqmanta, allin margen yanapakuykunawan, ichaqa yapasqawan n
manaraq mañasqa sayayniyuq. Kaypi huk ejemplo clase kachkan chaymi contrario kay .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Kiti
, llamk'achkaspa , tayta llika waqaychanapi yanapakuykunata display: grid
llamk'achiyta atikunki . Kayqa sapa llika imakunaman (huk waqaychanapa gap
wawankunaman) margen yanapakuykunata yapanaykimanta qullqita waqaychayta atin . display: grid
Gap yanapakuykuna ñawpaqmanta kutichiq kanku, chaymanta yanapakuyniyku API kaqnintakama ruwasqa, $spacers
Sass mapa kaqpi.
<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>
Yanapakuyqa kutichiq akllanakuna llapa Bootstrap kaqpa llika p'akiyninpaq, chaymanta suqta sayayniyuq $spacers
mapamanta ( 0
– 5
). Mana kanchu .gap-auto
utilidad clase hina efectivamente kaqlla .gap-0
.
Sass
Mapas
Espaciamiento yanapakuykuna Sass mapa kaqnintakama willasqa chaymanta chaymanta API yanapakuyniykuwan ruwasqa.
$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);
API de Utilidades nisqa
Espaciamiento yanapakuykuna yanapakuyniyku API kaqpi willasqa kachkanku scss/_utilities.scss
. Yachay imayna ruwanakuna API llamk'achiyta.
"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
),