Bootstrap 5 网格实例
- ముందు పేజీ BS5 గ్రిడ్ XXL
- తరువాత పేజీ BS5 బేసిక్ ట్యాంప్లేట్
మేము బ్రౌసర్ 5 గ్రిడ్ లేఆఉట్ ఉదాహరణలను కూడా కూర్చుకున్నాము.
మూడు సమానమైన నిలువులు
ప్రత్యేకమైన ఎంతో మెటీరియల్స్ పై ఉపయోగించండి .col క్లాస్, Bootstrap ఎంతో మెటీరియల్స్ ఉన్నా గుర్తిస్తుంది (మరియు సమానమైన నిలువులు సృష్టిస్తుంది). ఈ ఉదాహరణలో, మూడు col మెటీరియల్స్ వాటిని ఉపయోగించాము, ప్రతి మెటీరియల్ యొక్క వెడల్పన 33.33% ఉంటుంది.
ప్రత్యామ్నాయం
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
నంబర్లను ఉపయోగించిన మూడు సమానమైన నిలువులు
మీరు నంబర్లను ఉపయోగించి నిలువు వెడల్పనను నియంత్రించవచ్చు. మొత్తం 12 కంటే తక్కువగా ఉండాలి (అన్ని 12 లబ్ధించిన నిలువులను ఉపయోగించకూడదు):
ప్రత్యామ్నాయం
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
మూడు విపరీతమైన నిలువులు
విపరీతమైన నిలువులు సృష్టించడానికి, మీరు సంఖ్యలను ఉపయోగించవలసివుంది. ఈ ఉదాహరణలో, 25%/50%/25% విభజన సృష్టించబడుతుంది:
ప్రత్యామ్నాయం
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
నిలువు వెడల్పన సెట్ చేయండి
అయితే, ఒక నిలువు వెడల్పన మాత్రమే సరిపోతుంది, మరియు చుట్టూ స్థానికంగా అదనం కలిగించబడుతుంది. ఈ ఉదాహరణలో, 25%/50%/25% విభజన సృష్టించబడుతుంది:
ప్రత్యామ్నాయం
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
మరిన్ని సమానమైన నిలువులు
ప్రత్యామ్నాయం
<!-- రెండు సమానమైన నిలువులు --> <div class="row"> <div class="col">1 ఆఫ్ 2</div> <div class="col">2 ఆఫ్ 2</div> </div> <!-- నాలుగు సమానమైన నిలువులు --> <div class="row"> <div class="col">1 ఆఫ్ 4</div> <div class="col">2 ఆఫ్ 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <!-- ఆరు సమానమైన నిలువులు --> <div class="row"> <div class="col">1 ఆఫ్ 6</div> <div class="col">2 ఆఫ్ 6</div> <div class="col">3 ఆఫ్ 6</div> <div class="col">4 ఆఫ్ 6</div> <div class="col">5 ఆఫ్ 6</div> <div class="col">6 ఆఫ్ 6</div> </div>
Row Cols
మీరు కూడా ఉపయోగించవచ్చు .row-cols-* క్లాస్ నియంత్రణ పరిమితి పరిపక్వంగా పరిమితికి సమీపంలో ఉండాలి (ఎంతో నిలువులు ఉన్నా):
ప్రత్యామ్నాయం
<div class="row row-cols-1"> <div class="col">1 ఆఫ్ 2</div> <div class="col">2 ఆఫ్ 2</div> </div> <div class="row row-cols-2"> <div class="col">1 ఆఫ్ 4</div> <div class="col">2 ఆఫ్ 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <div class="row row-cols-3"> <div class="col">1 ఆఫ్ 6</div> <div class="col">2 ఆఫ్ 6</div> <div class="col">3 ఆఫ్ 6</div> <div class="col">4 ఆఫ్ 6</div> <div class="col">5 ఆఫ్ 6</div> <div class="col">6 ఆఫ్ 6</div> </div>
మరిన్ని విపరీతమైన నిలువులు
ప్రత్యామ్నాయం
<!-- రెండు విపరీతమైన నిలువులు --> <div class="row"> <div class="col-8">1 ఆఫ్ 2</div> <div class="col-4">2 ఆఫ్ 2</div> </div> <!-- నాలుగు వేర్వేరు కలనాలు --> <div class="row"> <div class="col-2">1 of 4</div> <div class="col-2">2 of 4</div> <div class="col-2">3 of 4</div> <div class="col-6">4 of 4</div> </div> <!-- రెండు కలనాల వెడల్పాలను సెట్ చేయడం --> <div class="row"> <div class="col-4">1 of 4</div> <div class="col-6">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div>
అనుచ్ఛద్రంగా ఉండడం
ఒక కలనం మరొక కలనానికి అప్పటికే పెద్దది ఉంటే (టెక్స్ట్ లేదా CSS ఎత్తు కారణంగా), మిగతా అనుచ్ఛద్రంగా ఉంటుంది:
ప్రత్యామ్నాయం
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
నిర్మించబడిన కలనం
ఒక ఉదాహరణ ఈ విధంగా కలన సంరచనను సృష్టించాలి: ఒక కలనంలో మరొక కలనం ఉంటుంది:
ప్రత్యామ్నాయం
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
ప్రతిస్పందక క్లాసులు
Bootstrap 5 గ్రిడ్ సిస్టమ్లో ఐదు క్లాసులు ఉన్నాయి:
.col-(చిన్న పరికరం - స్క్రీన్ వెడల్పం 576పిక్సెల్స్ కంటే తక్కువ ఉంటే ప్రతిస్పందకం ఉంటుంది).col-sm-(చిన్న పరికరం - స్క్రీన్ వెడల్పం 576పిక్సెల్స్ కంటే ఎక్కువ ఉంటే ప్రతిస్పందకం ఉంటుంది).col-md-(మధ్యతరహా పరికరం - స్క్రీన్ వెడల్పం 768 పిక్సెల్స్ కంటే ఎక్కువ ఉంటే ప్రతిస్పందకం ఉంటుంది).col-lg-(పెద్ద పరికరం - స్క్రీన్ వెడల్పం 992 పిక్సెల్స్ కంటే ఎక్కువ ఉంటే ప్రతిస్పందకం ఉంటుంది).col-xl-(స్క్రీన్ వెడల్పం 1200px కంటే ఎక్కువ ఉంటే ప్రతిస్పందకం ఉంటుంది).col-xxl-(స్క్రీన్ వెడల్పం 1400px కంటే ఎక్కువ ఉంటే ప్రతిస్పందకం ఉంటుంది)
పైన క్లాసులను కలపడం ద్వారా మరింత డైనమిక్ మరియు స్వల్పమైన సంరచనను సృష్టించవచ్చు.
హిందూ పద్ధతి:ప్రతి క్లాసు ప్రపంచంలో సమానంగా పెంచబడుతుంది, కాబట్టి మీరు మాత్రమే సెట్ చేయాలి: sm మరియు md అదే వెడల్పం సెట్ చేసినట్లయితే, మీరు మాత్రమే సెట్ చేయాలి: sm。
అనుచ్ఛద్రంగా మారడం
ఒక ఉదాహరణ ఈ విధంగా కలన సంరచనను సృష్టించాలి: దాని మొదటి దశలో చిన్న పరికరాలపై అనుచ్ఛద్రంగా ఉంటుంది, అప్పటికే పెద్ద పరికరాలపై (sm, md, lg మరియు xl) అనుచ్ఛద్రంగా ఉంటుంది:
ప్రత్యామ్నాయం
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
మిక్స్ అండ్ మ్యాచ్
ప్రత్యామ్నాయం
<!-- చిన్న పరికరాలపై 50%/50% విభజన, పెద్ద పరికరాలపై 75%/25% విభజన --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- చిన్న, చిన్న పరికరాల, మధ్యతరహా పరికరాలపై 58%/42% విభజన, పెద్ద మరియు అధిక పెద్ద పరికరాలపై 66.3%/33.3% విభజన --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- చిన్న పరికరాలపై 25%/75% విభజన, మధ్యతరహా పరికరాలపై 50%/50% విభజన, పెద్ద మరియు అధిక పెద్ద పరికరాలపై 33%/66% విభజన. చిన్న పరికరాలపై స్వయంచాలకంగా స్టాక్ అవుతుంది (100%) --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
గుద్దలేని
కలన్ల మధ్య అంతరాన్ని మార్చడానికి ఉపయోగించండి ఏదైనా .g-1|2|3|4|5 క్లాస్ (.g-4 అది డిఫాల్ట్ విలువ ఉంది).
గుద్దను పూర్తిగా తొలగించడానికి ఉపయోగించండి .g-0అని
ప్రత్యామ్నాయం
<div class="row g-0">
- ముందు పేజీ BS5 గ్రిడ్ XXL
- తరువాత పేజీ BS5 బేసిక్ ట్యాంప్లేట్
