بوشلۇق
Bootstrap ئېلېمېنتنىڭ سىرتقى كۆرۈنۈشىنى ئۆزگەرتىش ئۈچۈن كەڭ دائىرىلىك قىسقا ئىنكاس قايتۇرۇش پەرقى ، تاختا ۋە بوشلۇق ئىشلىتىش سىنىپلىرىنى ئۆز ئىچىگە ئالىدۇ.
Margin and padding
ئىنكاسچان دوستانە margin
ياكى padding
قىممەتنى ئېلېمېنت ياكى ئۇنىڭ بىر قىسمىغا قىسقا دەرسلىك بىلەن تەقسىم قىلىڭ. يەككە خۇسۇسىيەت ، بارلىق خۇسۇسىيەت ۋە تىك ۋە توغرىسىغا خاسلىقنى قوللاشنى ئۆز ئىچىگە ئالىدۇ. دەرسلەر سۈكۈتتىكى Sass خەرىتىسىدىن تارتىپ ياسالغان .25rem
.3rem
CSS Grid ئورۇنلاشتۇرۇش مودۇلىنى ئىشلىتىۋاتامسىز؟ بوشلۇقتىن پايدىلىنىشنى ئويلىشىش .
ئىزاھات
xs
بارلىق بۆسۈش نۇقتىلىرىغا ماس كېلىدىغان بوشلۇق ئەسلىھەلىرىدە xxl
ئۇلاردا بۆسۈش قىسقارتىلمىسى يوق. چۈنكى ئۇ دەرسلەر يۇقىرى-تۆۋەن قوللىنىلىدۇ min-width: 0
، شۇڭا تاراتقۇلارنىڭ سوئالى بىلەن باغلانمايدۇ. قالغان بۆسۈش نۇقتىلىرى بولسا بۆسۈش قىسقارتىلمىسىنى ئۆز ئىچىگە ئالىدۇ.
دەرسلەر ، ۋە ، ، ، ۋە ئۈچۈن فورماتنى ئىشلىتىپ {property}{sides}-{size}
ئاتالغان .xs
{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
xxl
مال -مۈلۈكنىڭ بىرى:
m
- تەڭشەلگەن دەرسلەر ئۈچۈنmargin
p
- تەڭشەلگەن دەرسلەر ئۈچۈنpadding
تەرەپلەر بولسا :
t
- بەلگىلەيدىغانmargin-top
ياكىpadding-top
b
- بەلگىلەيدىغانmargin-bottom
ياكىpadding-bottom
s
- ( LTR) ياكى RTL داmargin-left
تەسىس قىلىنغان دەرسلەر ئۈچۈنpadding-left
margin-right
padding-right
e
- (ئاخىرى) LTR ياكى RTL داmargin-right
بەلگىلەنگەن دەرسلەر ئۈچۈنpadding-right
margin-left
padding-left
x
*-left
- ھەر ئىككىسىنى بەلگىلەيدىغان دەرسلەر ئۈچۈن*-right
y
*-top
- ھەر ئىككىسىنى بەلگىلەيدىغان دەرسلەر ئۈچۈن*-bottom
- قۇرۇق - ئېلېمېنتنىڭ 4 تەرىپىگە
margin
ياكى ھەممىسىنى بەلگىلەيدىغان دەرسلەر ئۈچۈنpadding
چوڭلۇقى بىر بولسا:
0
margin
- ياكىpadding
ئۇنى تەڭشەيدىغان دەرسلەر ئۈچۈن0
1
- (سۈكۈتتىكى ھالەتتە)margin
ياكى بەلگىلەيدىغان دەرسلەرpadding
ئۈچۈن$spacer * .25
2
- (سۈكۈتتىكى ھالەتتە)margin
ياكى بەلگىلەيدىغان دەرسلەرpadding
ئۈچۈن$spacer * .5
3
- (سۈكۈتتىكى ھالەتتە)margin
ياكى بەلگىلەيدىغان دەرسلەرpadding
ئۈچۈن$spacer
4
- (سۈكۈتتىكى ھالەتتە)margin
ياكى بەلگىلەيدىغان دەرسلەرpadding
ئۈچۈن$spacer * 1.5
5
- (سۈكۈتتىكى ھالەتتە)margin
ياكى بەلگىلەيدىغان دەرسلەرpadding
ئۈچۈن$spacer * 3
auto
margin
- ئاپتوماتىك بەلگىلەيدىغان دەرسلەر ئۈچۈن
$spacers
( Sass خەرىتە ئۆزگەرگۈچى مىقدارغا تۈر قوشۇش ئارقىلىق تېخىمۇ چوڭ رازمېر قوشالايسىز .)
مىساللار
بۇ دەرسلەرنىڭ بىر قىسىم ۋەكىللىك مىساللىرى:
.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;
}
توغرىسىغا توغرىلاش
بۇنىڭدىن باشقا ، Bootstrap يەنە گورىزونتال گىرۋەكنى توغرىلاش ئارقىلىق .mx-auto
توغرىسىغا مەركەزلىك مۇقىم كەڭلىكتىكى توسۇلۇش دەرىجىسىدىكى مەزمۇننى يەنى مەزمۇن display: block
ۋە بىر width
يۈرۈش مەزمۇننى ئۆز ئىچىگە ئالىدۇ auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
سەلبىي پەرقى
CSS دە ، margin
خاسلىق مەنپىي قىممەتنى ئىشلىتەلەيدۇ ( padding
قىلالمايدۇ). بۇ سەلبىي گىرۋەكلەر سۈكۈتتىكى ھالەتتە چەكلەنگەن ، ئەمما تەڭشەش ئارقىلىق Sass دا قوزغىتىشقا بولىدۇ $enable-negative-margins: true
.
گرامماتىكىسى سۈكۈتتىكى ، مۇسبەت پايدا نىسبىتى بىلەن ئاساسەن ئوخشاش ، ئەمما n
تەلەپ قىلىنغان چوڭلۇقتىن بۇرۇن قوشۇلىدۇ. بۇنىڭ ئەكسىچە بىر مىسال سىنىپى .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Gap
ئىشلەتكەندە ئانا تور قاچىسىدىكى ئاممىۋى ئەسلىھەلەردىن display: grid
پايدىلانسىڭىز بولىدۇ . بۇ يەككە تور تۈرلىرىگە ( قاچىنىڭ gap
بالىلىرى) غا قوشۇمچە ئىقتىدار قوشۇشقا تېجەپ قالالايدۇ . display: grid
بوشلۇق ئەسلىھەلىرى سۈكۈتتىكى ھالەتتە ئىنكاس قايتۇرىدۇ ، $spacers
Sass خەرىتىسىنى ئاساس قىلىپ ، بىزنىڭ API API ئارقىلىق ھاسىل بولىدۇ.
<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>
قوللاش Bootstrap نىڭ بارلىق تور بۆلەكلىرىنىڭ ئىنكاس قايتۇرۇش تاللانمىلىرىنى ، شۇنداقلا $spacers
خەرىتە ( 0
- 5
) دىن ئالتە چوڭلۇقنى ئۆز ئىچىگە ئالىدۇ. .gap-auto
ئۈنۈملۈك بولغانغا ئوخشاش ھېچقانداق دەرسلىك سىنىپى يوق .gap-0
.
Sass
خەرىتە
بوشلۇق ئەسلىھەلىرى Sass خەرىتىسى ئارقىلىق ئېلان قىلىنىدۇ ، ئاندىن بىزنىڭ 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
بوشلۇق ئەسلىھەلىرى بىزنىڭ API دىكى ئاممىۋى مۇلازىمەتلىرىمىزدە ئېلان قىلىندى scss/_utilities.scss
. 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
),