இடைவெளி

பூட்ஸ்டார்ப்பில் ஒரு உறுப்பின் தோற்றத்தை மாற்றுவதற்கு சுருக்கெழுத்து பதிலளிக்கக்கூடிய விளிம்பு, திணிப்பு மற்றும் இடைவெளி பயன்பாட்டு வகுப்புகள் ஆகியவை அடங்கும்.

இந்தப் பக்கத்தில்

விளிம்பு மற்றும் திணிப்பு

சுருக்கெழுத்து வகுப்புகளுடன் ஒரு உறுப்பு அல்லது அதன் பக்கங்களின் துணைக்குழுவிற்கு பதிலளிக்கக்கூடிய நட்பு marginஅல்லது மதிப்புகளை ஒதுக்கவும். paddingதனிப்பட்ட பண்புகள், அனைத்து பண்புகள் மற்றும் செங்குத்து மற்றும் கிடைமட்ட பண்புகளுக்கான ஆதரவை உள்ளடக்கியது. வகுப்புகள் வரையிலான இயல்புநிலை சாஸ் வரைபடத்தில் இருந்து .25remகட்டமைக்கப்படுகின்றன 3rem.

CSS கிரிட் தளவமைப்பு தொகுதியைப் பயன்படுத்துகிறீர்களா? அதற்கு பதிலாக இடைவெளி பயன்பாட்டைப் பயன்படுத்துவதைக் கவனியுங்கள் .

குறிப்பு

அனைத்து பிரேக்பாயிண்ட்களுக்கும் பொருந்தும் இடைவெளி பயன்பாடுகள், முதல் xsவரை xxl, அவற்றில் பிரேக்பாயிண்ட் சுருக்கம் இல்லை. ஏனென்றால், அந்த வகுப்புகள் முதல் min-width: 0மற்றும் அதற்கு மேல் பயன்படுத்தப்படுகின்றன, இதனால் ஊடக வினவலுக்குக் கட்டுப்படாது. எவ்வாறாயினும், மீதமுள்ள பிரேக் பாயிண்ட்களில் பிரேக் பாயிண்ட் சுருக்கமும் அடங்கும்.

வகுப்புகள் , , , மற்றும் , மற்றும் க்கான வடிவமைப்பைப் {property}{sides}-{size}பயன்படுத்தி பெயரிடப்பட்டுள்ளன .xs{property}{sides}-{breakpoint}-{size}smmdlgxlxxl

சொத்து இதில் ஒன்று:

m- அமைக்கும் வகுப்புகளுக்குmargin
p- அமைக்கும் வகுப்புகளுக்குpadding

பக்கங்கள் இதில் ஒன்று:

t- அமைக்கும் வகுப்புகளுக்கு margin-topஅல்லதுpadding-top
b- அமைக்கும் வகுப்புகளுக்கு margin-bottomஅல்லதுpadding-bottom
s- (தொடக்கம்) அமைக்கும் margin-leftஅல்லது padding-leftLTR இல் margin-rightஅல்லது padding-rightRTL இல் உள்ள வகுப்புகளுக்கு
e- (முடிவு) அமைக்கும் margin-rightஅல்லது padding-rightLTR இல் margin-leftஅல்லது padding-leftRTL இல் உள்ள வகுப்புகளுக்கு
x- இரண்டையும் அமைக்கும் வகுப்புகளுக்கு *-leftமற்றும்*-right
y- இரண்டையும் அமைக்கும் வகுப்புகளுக்கு *-topமற்றும்*-bottom
marginவெற்று - தனிமத்தின் paddingஅனைத்து 4 பக்கங்களிலும் அமைக்கும் வகுப்புகளுக்கு

அளவு இதில் ஒன்று:

0- அகற்றும் marginஅல்லது paddingஅதை அமைப்பதன் மூலம் வகுப்புகளுக்கு0
1margin- (இயல்புநிலையாக) அல்லது அமைக்கும் paddingவகுப்புகளுக்கு$spacer * .25
2margin- (இயல்புநிலையாக) அல்லது அமைக்கும் paddingவகுப்புகளுக்கு$spacer * .5
3margin- (இயல்புநிலையாக) அல்லது அமைக்கும் paddingவகுப்புகளுக்கு$spacer
4margin- (இயல்புநிலையாக) அல்லது அமைக்கும் paddingவகுப்புகளுக்கு$spacer * 1.5
5margin- (இயல்புநிலையாக) அல்லது அமைக்கும் paddingவகுப்புகளுக்கு$spacer * 3
automargin- ஆட்டோவாக அமைக்கும் வகுப்புகளுக்கு

$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மற்றும் ஒரு தொகுப்பையும் உள்ளடக்கியது .widthauto

மையப்படுத்தப்பட்ட உறுப்பு

<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

கட்டம் உருப்படி 1

கட்டம் உருப்படி 2

கட்டம் உருப்படி 3

html

<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,
);

பயன்பாடுகள் 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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),