Kala dheeraynta
Bootstrap waxa ku jira tiro balaadhan oo ah margin jawaab-gaaban, suuf, iyo fasalada utility gap si wax looga beddelo muuqaalka shay.
Margin iyo suufka
U qoondee saaxiibtinimo-saaxiibtinimo margin
ama padding
qiyamka shay ama qayb ka mid ah dhinacyadiisa oo leh fasalo gaaban. Waxaa ku jira taageerada guryaha gaarka ah, dhammaan guryaha, iyo kuwa toosan iyo kuwa jiifka ah. Fasallada waxaa laga dhisay khariidadda Sass ee caadiga ah oo u dhaxaysa .25rem
ilaa 3rem
.
Isticmaalka qaabka qaabaynta Grid ee CSS? Tixgeli isticmaalka farqiga utility .
Ogaysiis
Kala dheeraynta yutiilitida ee khuseeya dhammaan meelaha jabinta, laga bilaabo xs
ilaa xxl
, kuma jiraan wax soo gaabin ah. Tani waa sababta oo ah fasalladaas waxaa laga dalbadaa min-width: 0
kor iyo kor, sidaas darteed kuma xirna su'aal warbaahineed. Dhibcaha soo haray, si kastaba ha ahaatee, waxaa ku jira soo gaabinta barta jabinta.
{property}{sides}-{size}
Fasallada waxaa lagu magacaabay qaabka xs
iyo {property}{sides}-{breakpoint}-{size}
, sm
, md
, lg
, xl
iyo xxl
.
Halka hantidu ka mid tahay:
m
- fasallada dhigaymargin
p
- fasallada dhigaypadding
Halka dhinacyadu ay ka mid yihiin:
t
- fasallada dhigaymargin-top
amapadding-top
b
- fasallada dhigaymargin-bottom
amapadding-bottom
s
- (bilow) fasallada dhigaymargin-left
amapadding-left
ku jira LTR,margin-right
amapadding-right
RTLe
- (dhammaadka) ee fasallada dhigaymargin-right
amapadding-right
ku jira LTR,margin-left
amapadding-left
RTLx
- fasallada dhigay labada*-left
iyo*-right
y
- fasallada dhigay labada*-top
iyo*-bottom
- maran - fasallada dhigay a
margin
amapadding
dhammaan 4 dhinac ee curiyaha
Halka cabbirku yahay mid ka mid ah:
0
- fasallada baabi'iyamargin
amapadding
dejinaya0
1
- (sida caadiga ah) ee fasallada dejiyamargin
amapadding
ku dhejiya$spacer * .25
2
- (sida caadiga ah) ee fasallada dejiyamargin
amapadding
ku dhejiya$spacer * .5
3
- (sida caadiga ah) ee fasallada dejiyamargin
amapadding
ku dhejiya$spacer
4
- (sida caadiga ah) ee fasallada dejiyamargin
amapadding
ku dhejiya$spacer * 1.5
5
- (sida caadiga ah) ee fasallada dejiyamargin
amapadding
ku dhejiya$spacer * 3
auto
- fasallada u dejinayamargin
auto
(Waxaad ku dari kartaa cabbirro badan adiga oo ku daraya gelinta $spacers
doorsoomiyaha khariidada Sass.)
Tusaalooyinka
Waa kuwan qaar ka mid ah tusaalayaal matala fasalladan:
.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;
}
Horizontal centering
Intaa waxaa dheer, Bootstrap sidoo kale waxaa ku jira .mx-auto
fasal si toos ah u dhexeya nuxurka heerka block ballac go'an-taasi waxa uu ka kooban yahay display: block
iyo width
go'an-adiga oo dejinaya soohdimaha tooska ah auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Margin xun
CSS gudaheeda, margin
guryaha waxay isticmaali karaan qiimayaal taban ( padding
ma karaan). Marginsyada taban waa la naafo si caadi ah , laakiin waxaa lagu awoodsiin karaa Sass iyadoo la dejinayo $enable-negative-margins: true
.
Syntax-ku wuxuu ku dhow yahay inuu la mid yahay kan caadiga ah, yutiilitiyada margin togan, laakiin marka lagu daro ka n
hor cabbirka la codsaday. Waa kan tusaale tusaale ka soo horjeeda .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Farqiga
Markaad isticmaalayso display: grid
, waxaad isticmaali kartaa gap
yutiilitida weelka grid waalidka. Tani waxay badbaadin kartaa inaad ku darto yutiilitida margin alaabta sharoobada ah (carruurta display: grid
weel). Gap utilities waa kuwo si caadi ah uga jawaaba, waxaana lagu soo saaraa adeegyadayada API, oo ku salaysan $spacers
khariidadda 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>
Taageerada waxaa ku jira xulashooyin jawaab celin ah oo loogu talagalay dhammaan Bootstrap's gunnada goynta, iyo sidoo kale lix cabbir ee $spacers
khariidada ( 0
- 5
). Ma jiro .gap-auto
fasalka utility maadaama uu si wax ku ool ah ula mid yahay .gap-0
.
Sass
Maab
Utility-ka fogeynta waxaa lagu caddeeyaa khariidadda Sass ka dibna waxaa lagu soo saaray adeegyadayada 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);
Utilities API
Utility-ka fogeynta waxaa lagu caddeeyey adeegyadayada API gudaha scss/_utilities.scss
. Baro sida loo isticmaalo API utilities.
"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
),