පරතරය
මූලද්රව්යයක පෙනුම වෙනස් කිරීම සඳහා බූට්ස්ට්රැප් හි පුළුල් පරාසයක කෙටිකතා ප්රතිචාර ආන්තිකය, පිරවුම් සහ පරතරය උපයෝගිතා පන්ති ඇතුළත් වේ.
ආන්තිකය සහ පිරවුම
කෙටිකතා පන්ති සමඟ මූලද්රව්යයකට හෝ එහි පැතිවල උප කුලකයකට ප්රතිචාරාත්මක-හිතකාමී margin
හෝ අගයන් පවරන්න. padding
තනි ගුණාංග, සියලු ගුණාංග සහ සිරස් සහ තිරස් ගුණාංග සඳහා සහාය ඇතුළත් වේ. .25rem
සිට දක්වා විහිදෙන පෙරනිමි Sass සිතියමකින් පන්ති ගොඩනගා ඇත 3rem
.
CSS ජාල පිරිසැලසුම් මොඩියුලය භාවිතා කරන්නේද? පරතරය උපයෝගීතාව භාවිතා කිරීම සලකා බලන්න .
අංකනය
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
- (ආරම්භය) සකසනmargin-left
හෝpadding-left
LTR හි,margin-right
හෝpadding-right
RTL හි පන්ති සඳහාe
- (අවසානය) සකසන ලදmargin-right
හෝpadding-right
LTR හි,margin-left
හෝpadding-left
RTL හි පන්ති සඳහා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;
}
පරතරය
භාවිතා කරන විට display: grid
, ඔබට gap
මව් ජාල කන්ටේනරයේ උපයෝගිතා භාවිතා කළ හැකිය. මෙය තනි ජාල අයිතම (බහාලක දරුවන්) වෙත ආන්තික උපයෝගිතා එකතු කිරීම ඉතිරි කර ගත හැක display: grid
. ගැප් උපයෝගිතා පෙරනිමියෙන් ප්රතිචාර දක්වන අතර, $spacers
සාස් සිතියම මත පදනම්ව අපගේ උපයෝගිතා 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 සිතියම හරහා ප්රකාශ කර පසුව අපගේ උපයෝගිතා 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);
උපයෝගිතා 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
),