అంతరం

మూలకం యొక్క రూపాన్ని సవరించడానికి బూట్‌స్ట్రాప్ విస్తృత శ్రేణి షార్ట్‌హ్యాండ్ రెస్పాన్సివ్ మార్జిన్ మరియు పాడింగ్ యుటిలిటీ క్లాస్‌లను కలిగి ఉంటుంది.

అది ఎలా పని చేస్తుంది

సంక్షిప్తలిపి తరగతులతో ఒక మూలకం లేదా దాని భుజాల ఉపసమితికి ప్రతిస్పందన-స్నేహపూర్వక marginలేదా విలువలను కేటాయించండి. paddingవ్యక్తిగత లక్షణాలు, అన్ని లక్షణాలు మరియు నిలువు మరియు క్షితిజ సమాంతర లక్షణాలకు మద్దతును కలిగి ఉంటుంది. .25remనుండి వరకు ఉండే డిఫాల్ట్ సాస్ మ్యాప్ నుండి తరగతులు నిర్మించబడ్డాయి 3rem.

సంజ్ఞామానం

అన్ని బ్రేక్‌పాయింట్‌లకు వర్తించే స్పేసింగ్ యుటిలిటీలు, నుండి xsవరకు xl, వాటిలో బ్రేక్‌పాయింట్ సంక్షిప్తీకరణ లేదు. ఎందుకంటే ఆ తరగతులు నుండి min-width: 0మరియు పైకి వర్తింపజేయబడతాయి మరియు మీడియా ప్రశ్నకు కట్టుబడి ఉండవు. అయితే, మిగిలిన బ్రేక్‌పాయింట్‌లలో బ్రేక్‌పాయింట్ సంక్షిప్తీకరణ ఉంటుంది.

{property}{sides}-{size}కోసం xsమరియు {property}{sides}-{breakpoint}-{size}కోసం ఫార్మాట్ ఉపయోగించి తరగతులకు పేరు పెట్టారు sm, md, lg, మరియు xl.

ఇక్కడ ఆస్తి ఒకటి:

• 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మరియు widthసెట్-ని అడ్డంగా కేంద్రీకరించడానికి ఒక తరగతిని కూడా కలిగి ఉంటుంది auto.

<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>