అంతరం
మూలకం యొక్క రూపాన్ని సవరించడానికి బూట్స్ట్రాప్ విస్తృత శ్రేణి షార్ట్హ్యాండ్ రెస్పాన్సివ్ మార్జిన్, పాడింగ్ మరియు గ్యాప్ యుటిలిటీ క్లాస్లను కలిగి ఉంటుంది.
మార్జిన్ మరియు పాడింగ్
సంక్షిప్తలిపి తరగతులతో ఒక మూలకం లేదా దాని భుజాల ఉపసమితికి ప్రతిస్పందన-స్నేహపూర్వక 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
పేరెంట్ గ్రిడ్ కంటైనర్లోని యుటిలిటీలను ఉపయోగించుకోవచ్చు. display: grid
ఇది వ్యక్తిగత గ్రిడ్ ఐటెమ్లకు ( కంటైనర్లోని పిల్లలు) మార్జిన్ యుటిలిటీలను జోడించడాన్ని ఆదా చేస్తుంది . గ్యాప్ యుటిలిటీలు డిఫాల్ట్గా ప్రతిస్పందిస్తాయి మరియు $spacers
సాస్ మ్యాప్ ఆధారంగా మా యుటిలిటీస్ API ద్వారా ఉత్పత్తి చేయబడతాయి.
<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
),