Addaan fageenyaa
Bootstrap bifa elementii tokkoo fooyyessuuf gitaalee faayidaa margina, padding, fi qaawwa deebii gabaabaa bal'aa of keessatti qabata.
Margin fi padding
Deebii-michuu margin
ykn padding
gatiiwwan elementii ykn tuuta xiqqaa cinaacha isaa gita gabaabaa waliin ramadi. Deeggarsa qabeentota dhuunfaa, qabeentota hunda, fi qabeentota dhaabbataa fi qajeelaa of keessatti qabata. Gitoota kaartaa Sass durtii irraa hanga .25rem
hanga 3rem
.
Moojulii haalata CSS Grid fayyadamuu? Faayidaa qaawwa fayyadamuu yaadaa .
Nootashinii
Faayidaaleen addaan baasuu kanneen tuqaawwan ciccituu hunda irratti raawwatiinsa qaban, irraa xs
gara xxl
, gabaabduu tuqaawwan ciccituu isaan keessaa hin qaban. Sababni isaas, gitawwan sun irraa min-width: 0
fi ol hojii irra waan oolan, kanaaf gaaffii miidiyaatiin waan hin hidhamneef. Qabxiileen cabbii hafan garuu gabaabduu qabxii cabbii of keessatti qabatu.
Gitoota akkaataa , , , , fi {property}{sides}-{size}
tiif xs
fi {property}{sides}-{breakpoint}-{size}
tiif fayyadamuun moggaafamu .sm
md
lg
xl
xxl
Bakka qabeenyi keessaa tokko ta’etti:
m
- dareewwan saaganiifmargin
p
- dareewwan saaganiifpadding
Bakka sides keessaa tokko ta'etti:
t
- dareewwanmargin-top
ykn kaa'aniifpadding-top
b
- dareewwanmargin-bottom
ykn kaa'aniifpadding-bottom
s
- (jalqaba) gitaalee saaganiifmargin-left
yknpadding-left
LTR keessatti,margin-right
yknpadding-right
RTL keessattie
- (dhuma) gitaalee saaganiifmargin-right
yknpadding-right
LTR keessatti,margin-left
yknpadding-left
RTL keessattix
- daree lamaanuu*-left
fi*-right
y
- daree lamaanuu*-top
fi*-bottom
- duwwaa - gitaalee a
margin
yknpadding
gama 4 hunda elementii irratti saaganiif
Bakka guddinni tokko ta'etti:
0
margin
- dareewwan yknpadding
gara saaguun dhabamsiisaniif0
1
- (durtiidhaan) gitaaleemargin
yknpadding
gara saaganiif$spacer * .25
2
- (durtiidhaan) gitaaleemargin
yknpadding
gara saaganiif$spacer * .5
3
- (durtiidhaan) gitaaleemargin
yknpadding
gara saaganiif$spacer
4
- (durtiidhaan) gitaaleemargin
yknpadding
gara saaganiif$spacer * 1.5
5
- (durtiidhaan) gitaaleemargin
yknpadding
gara saaganiif$spacer * 3
auto
- gitaaleemargin
gara autotti saaganiif
$spacers
(Galtee jijjiiramaa kaartaa Sass irratti dabaluudhaan hammangaa dabalataa dabaluu dandeessa .)
Fakkeenyaaf
Fakkeenyonni bakka bu’oota gita kanaa tokko tokko kunooti:
.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;
}
Giddugaleessa gochuu horizontal ta’uu
Dabalataan, Bootstrap akkasumas .mx-auto
gita qabiyyee sadarkaa uggura bal'ina dhaabbataa qajeelaa giddu galeessa gochuuf-jechuunis, qabiyyee qabuu display: block
fi width
tuuta-margaa qajeelaa gara auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Margiin negaatiivii ta’e
CSS keessatti, margin
qabeentota gatiiwwan negaatiivii fayyadamuu padding
danda'u ( hin danda'amu). Marginoonni negaatiivii kun durtiidhan hanqifamu , garuu Sass keessatti qindaa'uun dandeessisuun ni danda'ama $enable-negative-margins: true
.
Gingilchaan faayidaalee margina durtii, pozaatiivii wajjin wal fakkaata jechuun ni danda'ama, garuu n
hammangaa gaafatame dura dabaluu wajjin. Kunoo gita fakkeenyaa kan faallaa .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Qaawwaa
Yeroo , fayyadamtu qabduu tarjaa warraa irratti display: grid
fayyadamuu dandeessa . Kunis wanta tarjaa dhuunfaa (ijoollee qabduu) gap
irratti faayidaa margina dabaluu qusachuu danda'a . display: grid
Faayidaaleen qaawwaa durtiidhaan deebii kennu, fi karaa API faayidaa keenyaa, $spacers
kaartaa Sass irratti hundaa'uun uumamu.
<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>
Deeggarsi filannoowwan deebii kennan qabxiiwwan cabsuu giiridii Bootstrap hundaaf, akkasumas safara ja'a $spacers
kaartaa irraa ( 0
– 5
) of keessatti qabata. .gap-auto
Bu'a qabeessa ta'ee wajjin tokko waan ta'eef gita faayidaa hin jiru .gap-0
.
Sass jedhama
Kaartaa
Faayidaaleen addaan fageenyaa karaa kaartaa Sass labsamanii sana booda API faayidaa keenyaatiin uumamu.
$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 faayidaa
Faayidaaleen addaan fageenyaa API faayidaa keenya keessatti labsamu bara scss/_utilities.scss
. Akkaataa API faayilii itti fayyadamtu baradhu.
"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
),