இடைவெளி
பூட்ஸ்டார்ப்பில் ஒரு உறுப்பின் தோற்றத்தை மாற்றுவதற்கு சுருக்கெழுத்து பதிலளிக்கக்கூடிய விளிம்பு, திணிப்பு மற்றும் இடைவெளி பயன்பாட்டு வகுப்புகள் ஆகியவை அடங்கும்.
விளிம்பு மற்றும் திணிப்பு
சுருக்கெழுத்து வகுப்புகளுடன் ஒரு உறுப்பு அல்லது அதன் பக்கங்களின் துணைக்குழுவிற்கு பதிலளிக்கக்கூடிய நட்பு margin
அல்லது மதிப்புகளை ஒதுக்கவும். padding
தனிப்பட்ட பண்புகள், அனைத்து பண்புகள் மற்றும் செங்குத்து மற்றும் கிடைமட்ட பண்புகளுக்கான ஆதரவை உள்ளடக்கியது. வகுப்புகள் வரையிலான இயல்புநிலை சாஸ் வரைபடத்தில் இருந்து .25rem
கட்டமைக்கப்படுகின்றன 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
margin
வெற்று - தனிமத்தின்padding
அனைத்து 4 பக்கங்களிலும் அமைக்கும் வகுப்புகளுக்கு
அளவு இதில் ஒன்று:
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;
}
கிடைமட்ட மையம்
கூடுதலாக, பூட்ஸ்டார்ப்பில் .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
குழந்தைகள்) விளிம்புப் பயன்பாடுகளைச் சேர்ப்பதில் இது சேமிக்கப்படும் . இடைவெளி பயன்பாடுகள் இயல்பாகவே பதிலளிக்கக்கூடியவை, மேலும் அவை Sass வரைபடத்தின் display: grid
அடிப்படையில் எங்கள் பயன்பாடுகள் API மூலம் உருவாக்கப்படுகின்றன .$spacers
<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>
ஆதரவில் பூட்ஸ்டார்ப்பின் அனைத்து கிரிட் பிரேக் பாயிண்டுகளுக்கும் பதிலளிக்கக்கூடிய விருப்பங்கள் மற்றும் $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
),