ప్రధాన కంటెంట్‌కు దాటవేయండి డాక్స్ నావిగేషన్‌కు దాటవేయండి
Check
in English

కంటైనర్లు

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

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

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

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

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

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

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

చాలా చిన్న
<576px
చిన్నది
≥576px
మధ్యస్థం
≥768px
పెద్దది
≥992px
X-పెద్దది
≥1200px
XX-పెద్దది
≥1400px
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

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

మా డిఫాల్ట్ .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 విభాగాన్ని చూడండి .