కంటైనర్లు
కంటైనర్లు బూట్స్ట్రాప్ యొక్క ప్రాథమిక బిల్డింగ్ బ్లాక్, ఇవి ఇచ్చిన పరికరం లేదా వీక్షణపోర్ట్లో మీ కంటెంట్ను కలిగి ఉంటాయి, ప్యాడ్ చేస్తాయి మరియు సమలేఖనం చేస్తాయి.
వారు ఎలా పని చేస్తారు
బూట్స్ట్రాప్లో కంటైనర్లు అత్యంత ప్రాథమిక లేఅవుట్ మూలకం మరియు మా డిఫాల్ట్ గ్రిడ్ సిస్టమ్ని ఉపయోగిస్తున్నప్పుడు అవసరం . కంటైనర్లు వాటిలోని కంటెంట్ను కలిగి ఉండటానికి, ప్యాడ్ చేయడానికి మరియు (కొన్నిసార్లు) మధ్యలో ఉంచడానికి ఉపయోగించబడతాయి. కంటైనర్లను గూడులో ఉంచవచ్చు , చాలా లేఅవుట్లకు సమూహ కంటైనర్ అవసరం లేదు.
బూట్స్ట్రాప్ మూడు విభిన్న కంటైనర్లతో వస్తుంది:
.container
, ఇదిmax-width
ప్రతి ప్రతిస్పందించే బ్రేక్పాయింట్ వద్ద ఒక సెట్ చేస్తుంది.container-fluid
, ఇదిwidth: 100%
అన్ని బ్రేక్పాయింట్లలో ఉంటుంది.container-{breakpoint}
, ఇది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 విభాగాన్ని చూడండి .