இடைவெளி

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

எப்படி இது செயல்படுகிறது

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

குறிப்பு

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

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

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

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

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

• t- அமைக்கும் வகுப்புகளுக்கு margin-topஅல்லதுpadding-top
• b- அமைக்கும் வகுப்புகளுக்கு margin-bottomஅல்லதுpadding-bottom
• l- அமைக்கும் வகுப்புகளுக்கு margin-leftஅல்லதுpadding-left
• r- அமைக்கும் வகுப்புகளுக்கு margin-rightஅல்லதுpadding-right
• 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;
}

.ml-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முடியாது). 4.2 வரை, மேலே பட்டியலிடப்பட்டுள்ள பூஜ்ஜியம் அல்லாத ஒவ்வொரு முழு எண் அளவிற்கும் எதிர்மறை விளிம்பு பயன்பாடுகளைச் சேர்த்துள்ளோம் (எ.கா., 1, 2, 3, 4, 5). பிரேக் பாயிண்ட்கள் முழுவதும் கிரிட் நெடுவரிசை கால்வாய்களைத் தனிப்பயனாக்க இந்த பயன்பாடுகள் சிறந்தவை.

தொடரியல் இயல்புநிலை, நேர்மறை விளிம்பு பயன்பாடுகளைப் போலவே இருக்கும், ஆனால் nகோரப்பட்ட அளவிற்கு முன் கூடுதலாக உள்ளது. இதற்கு நேர்மாறான ஒரு எடுத்துக்காட்டு வகுப்பு இங்கே .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

mdநடுத்தர ( ) பிரேக் பாயிண்ட் மற்றும் அதற்கு மேல் உள்ள பூட்ஸ்டார்ப் கட்டத்தை தனிப்பயனாக்குவதற்கான உதாரணம் இங்கே . நாங்கள் .colபேடிங்கை அதிகப்படுத்தியுள்ளோம், பின்னர் அதை பெற்றோர் மீது .px-md-5எதிர்க்கிறோம் ..mx-md-n5.row

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>