కంటైనర్లు

వారు ఎలా పని చేస్తారు

బూట్‌స్ట్రాప్‌లో కంటైనర్‌లు అత్యంత ప్రాథమిక లేఅవుట్ మూలకం మరియు మా డిఫాల్ట్ గ్రిడ్ సిస్టమ్‌ని ఉపయోగిస్తున్నప్పుడు అవసరం . కంటైనర్‌లు వాటిలోని కంటెంట్‌ను కలిగి ఉండటానికి, ప్యాడ్ చేయడానికి మరియు (కొన్నిసార్లు) మధ్యలో ఉంచడానికి ఉపయోగించబడతాయి. కంటైనర్‌లను గూడులో ఉంచవచ్చు , చాలా లేఅవుట్‌లకు సమూహ కంటైనర్ అవసరం లేదు.

బూట్‌స్ట్రాప్ మూడు విభిన్న కంటైనర్‌లతో వస్తుంది:

• .container, ఇది max-widthప్రతి ప్రతిస్పందించే బ్రేక్‌పాయింట్ వద్ద ఒక సెట్ చేస్తుంది
• .container-{breakpoint}, ఇది width: 100%పేర్కొన్న బ్రేక్ పాయింట్ వరకు ఉంటుంది
• .container-fluid, ఇది width: 100%అన్ని బ్రేక్‌పాయింట్‌లలో ఉంటుంది

దిగువ పట్టిక ప్రతి కంటైనర్ max-widthఅసలు .containerమరియు .container-fluidప్రతి బ్రేక్‌పాయింట్‌తో ఎలా పోలుస్తుందో వివరిస్తుంది.

వాటిని చర్యలో చూడండి మరియు వాటిని మా గ్రిడ్ ఉదాహరణలో సరిపోల్చండి .

డిఫాల్ట్ కంటైనర్

మా డిఫాల్ట్ .containerక్లాస్ ప్రతిస్పందించే, స్థిర-వెడల్పు కంటైనర్, అంటే max-widthప్రతి బ్రేక్‌పాయింట్ వద్ద దాని మార్పులు.

<div class="container">
  <!-- Content here -->
</div>

ప్రతిస్పందించే కంటైనర్లు

ప్రతిస్పందించే కంటైనర్‌లు పేర్కొన్న బ్రేక్‌పాయింట్ చేరుకునే వరకు 100% వెడల్పు ఉన్న తరగతిని పేర్కొనడానికి మిమ్మల్ని అనుమతిస్తాయి, ఆ తర్వాత మేము max-widthప్రతి అధిక బ్రేక్‌పాయింట్‌లకు sని వర్తింపజేస్తాము. ఉదాహరణకు, బ్రేక్‌పాయింట్ చేరుకునే .container-smవరకు ప్రారంభించడానికి 100% వెడల్పు smఉంటుంది, ఇక్కడ అది md, lg, xl, మరియు తో స్కేల్ అప్ అవుతుంది xxl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

ద్రవ కంటైనర్లు

.container-fluidవీక్షణపోర్ట్ యొక్క మొత్తం వెడల్పును విస్తరించి, పూర్తి వెడల్పు కంటైనర్ కోసం ఉపయోగించండి .

<div class="container-fluid">
  ...
</div>

సాస్

పైన చూపిన విధంగా, మీరు కోరుకున్న లేఅవుట్‌లను రూపొందించడంలో మీకు సహాయపడటానికి బూట్‌స్ట్రాప్ ముందే నిర్వచించబడిన కంటైనర్ తరగతుల శ్రేణిని రూపొందిస్తుంది. మీరు ఈ ముందే నిర్వచించబడిన కంటైనర్ తరగతులకు శక్తినిచ్చే Sass మ్యాప్‌ను (లో కనుగొనబడింది _variables.scss) సవరించడం ద్వారా అనుకూలీకరించవచ్చు:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

సాస్‌ను అనుకూలీకరించడంతో పాటు, మీరు మా సాస్ మిక్సిన్‌తో మీ స్వంత కంటైనర్‌లను కూడా సృష్టించవచ్చు.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

మా Sass మ్యాప్‌లు మరియు వేరియబుల్‌లను ఎలా సవరించాలనే దానిపై మరింత సమాచారం మరియు ఉదాహరణల కోసం, దయచేసి గ్రిడ్ డాక్యుమెంటేషన్ యొక్క Sass విభాగాన్ని చూడండి .