Umwanya
Bootstrap ikubiyemo intera nini ya shorthand yitabiriye margin, padding, hamwe nicyiciro cyingirakamaro kugirango uhindure ikintu kigaragara.
Margin na padi
Shinga igisubizo-cyiza margin
cyangwa padding
indangagaciro kubintu cyangwa igice cyimpande zacyo hamwe namasomo magufi. Harimo inkunga kubintu byihariye, ibintu byose, hamwe na vertical na horizontal. Amasomo yubatswe kuva ikarita ya Sass isanzwe kuva .25rem
kuri 3rem
.
Ukoresheje uburyo bwa CSS Grid module? Tekereza gukoresha icyuho cyingirakamaro .
Icyitonderwa
Umwanya utanga ibikoresho bikoreshwa mubice byose, kuva xs
kuri xxl
, nta magambo ahinnye muri byo. Ibi ni ukubera ko ayo masomo akoreshwa kuva min-width: 0
hejuru no hejuru, bityo ntagengwa nikibazo cyitangazamakuru. Ibice bisigaye, ariko, birimo amagambo ahinnye.
Amasomo yitiriwe akoresheje imiterere {property}{sides}-{size}
ya xs
na {property}{sides}-{breakpoint}-{size}
,,,, na sm
.md
lg
xl
xxl
Aho umutungo ari umwe muri:
m
- ku masomo yashizehomargin
p
- ku masomo yashizehopadding
Aho impande ari imwe muri:
t
- ku masomo ashyirahomargin-top
cyangwapadding-top
b
- ku masomo ashyirahomargin-bottom
cyangwapadding-bottom
s
- (tangira) kumasomo ashyirahomargin-left
cyangwapadding-left
muri LTR,margin-right
cyangwapadding-right
muri RTLe
- (iherezo) kumasomo ashyirahomargin-right
cyangwapadding-right
muri LTR,margin-left
cyangwapadding-left
muri RTLx
- kumasomo ashyiraho byombi*-left
na*-right
y
- kumasomo ashyiraho byombi*-top
na*-bottom
- ubusa - kumasomo ashyiraho a
margin
cyangwapadding
kumpande 4 zose yibintu
Aho ingano ari imwe muri:
0
- kumasomo akurahomargin
cyangwa cyangwapadding
kuyashyiraho0
1
- (Mburabuzi) kumasomo ashyirahomargin
cyangwapadding
kuri$spacer * .25
2
- (Mburabuzi) kumasomo ashyirahomargin
cyangwapadding
kuri$spacer * .5
3
- (Mburabuzi) kumasomo ashyirahomargin
cyangwapadding
kuri$spacer
4
- (Mburabuzi) kumasomo ashyirahomargin
cyangwapadding
kuri$spacer * 1.5
5
- (Mburabuzi) kumasomo ashyirahomargin
cyangwapadding
kuri$spacer * 3
auto
- kumasomo ashyirahomargin
imodoka
(Urashobora kongeramo ubunini wongeyeho ibyanditswe kuri $spacers
Sass ikarita ihinduka.)
Ingero
Dore ingero zimwe zihagarariye aya masomo:
.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;
}
Gutambika kuri horizontal
Byongeye kandi, Bootstrap ikubiyemo kandi .mx-auto
icyiciro cyo gutambukiranya hagati yubugari bwagutse buringaniye-ni ukuvuga ibirimo bifite display: block
hamwe width
nugushiraho - mugushiraho impande zombi auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Inyungu mbi
Muri CSS, margin
imitungo irashobora gukoresha indangagaciro mbi ( padding
ntishobora). Izi ntera mbi zahagaritswe byanze bikunze , ariko zirashobora gukoreshwa muri Sass mugushiraho $enable-negative-margins: true
.
Igishushanyo ni kimwe nkibisanzwe, byiza margin yingirakamaro, ariko hamwe ninyongera n
mbere yubunini bwasabwe. Dore urugero rwicyiciro gihabanye na .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Icyuho
Mugihe ukoresheje display: grid
, urashobora gukoresha gap
ibikoresho byingirakamaro kuri kontineri yababyeyi. Ibi birashobora kuzigama mugomba kongeramo ibikorwa byingirakamaro kubintu bya gride (abana ba display: grid
kontineri). Ibikoresho byingirakamaro birasubizwa byanze bikunze, kandi byakozwe binyuze mubikorwa byacu API, bishingiye ku $spacers
ikarita ya 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>
Inkunga ikubiyemo amahitamo yitabiriye ibintu byose bya Bootstrap ya gride yacitse, kimwe nubunini butandatu uhereye ku $spacers
ikarita ( 0
- 5
). Nta .gap-auto
byiciro byingirakamaro nkuko bigenda neza nkibyo .gap-0
.
Sass
Ikarita
Umwanya utanga serivisi utangazwa ukoresheje ikarita ya Sass hanyuma ukabyara hamwe nibikorwa byacu API.
$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);
Ibikorwa API
Umwanya utanga serivisi watangajwe mubikorwa byacu API muri scss/_utilities.scss
. Wige gukoresha ibikoresho API.
"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
),