అంతరం
బూట్స్ట్రాప్ ఒక మూలకం యొక్క రూపాన్ని సవరించడానికి షార్ట్హ్యాండ్ రెస్పాన్సివ్ మార్జిన్ మరియు పాడింగ్ యుటిలిటీ క్లాస్ల విస్తృత శ్రేణిని కలిగి ఉంటుంది.
అది ఎలా పని చేస్తుంది
సంక్షిప్తలిపి తరగతులతో ఒక మూలకం లేదా దాని భుజాల ఉపసమితికి ప్రతిస్పందన-స్నేహపూర్వక 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
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;
}
.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>