అంతరం

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

ఈ పేజీలో

మార్జిన్ మరియు పాడింగ్

సంక్షిప్తలిపి తరగతులతో ఒక మూలకం లేదా దాని భుజాల ఉపసమితికి ప్రతిస్పందన-స్నేహపూర్వక 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మరియు 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 ద్వారా ఉత్పత్తి చేయబడతాయి.

గ్రిడ్ అంశం 1

గ్రిడ్ అంశం 2

గ్రిడ్ అంశం 3

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