బూస్ట్రాప్ 5 గ్రిడ్: అధికారక సాంకేతిక పరికరాలు
- ముందు పేజీ BS5 గ్రిడ్ Large
- తరువాత పేజీ BS5 గ్రిడ్ XXL
ఎక్స్ట్రా లార్జ్ పరికరాల గ్రాడ్ ప్రిసంప్లే
ఎక్స్ట్రా స్మాల్ | స్మాల్ | మీడియం | లార్జ్ | ఎక్స్ట్రా లార్జ్ | XXL | |
---|---|---|---|---|---|---|
క్లాస్ ప్రిఫిక్స్ | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
తెర వెడల్పు | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
మునుపటి చాప్టర్లో, చిన్న, మధ్యతరహా మరియు పెద్ద పరికరాలకు అనువుగా ఉన్న క్లాస్లను కలిగించిన గ్రాడ్ ప్రిసంప్లే చూపించాము. మేము రెండు div (నిలువుగా ఉండే పరికరాలు) వాడి, చిన్న పరికరాలపై 25%/75% విభజనను చేసి, మధ్యతరహా పరికరాలపై 50%/50% విభజనను చేసి, పెద్ద పరికరాలపై 33%/66% విభజనను చేసాము:
<div class="col-sm-3 col-md-6 col-lg-4">....</div> <div class="col-sm-9 col-md-6 col-lg-8">....</div>
కానీ xlarge పరికరాలపై, 20% / 80% విభజనను కలిగించగలిగిన డిజైన్ మంచిది కావచ్చు.
పెద్ద పరికరాలను అర్థం చేసుకుని, తెర వెడల్పు పై ఉన్న పరికరాలను అర్థం చేసుకుని అధికం చేస్తాము: 1200 పిక్సెల్స్ మరియు అధికం。
xlarge పరికరాలకు, మేము ఉపయోగించాలి చేస్తాము: .col-xl-*
కేతగిరీ:
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div> <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>
చిన్న పరికరాలపై 25%/75% విభజనను కలిగించగలదు, మధ్యతరహా పరికరాలపై 50%/50% విభజనను కలిగించగలదు, పెద్ద పరికరాలపై 33%/66% విభజనను కలిగించగలదు మరియు xlarge మరియు xxlarge పరికరాలపై 20%/80% విభజనను కలిగించగలదు. చిన్నతరహా పరికరాలపై, ఇది స్వయంచాలకంగా స్టాక్ అవుతుంది (100%):
ఉదాహరణ
<div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2"> <p>ప్రపంచ ప్రకృతి ఫండ్ (WWF), 1961 ఏప్రిల్ 29 న స్థాపించబడింది, దాని ప్రతీకం ఒక పరిశీలన చేసిన పరికరం ఉంది ...</p> </div> <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10"> <p>1980 సంవత్సరంలో, WWF ఆధికారికంగా చైనాకు వచ్చి, చైనా ప్రభుత్వం ఆహ్వానించినప్పుడు, పరిశీలన చేసిన పరికరాలు మరియు వారి నివాసాలను రక్షించడానికి పని చేసింది ...</p> </div> </div> </div>
ముందుకు చూపించుము:మొత్తం ఎల్లప్పుడూ 12 గా ఉంచాలి.
మాత్రమే XLarge ఉపయోగించబడింది
దిగువ ఉదాహరణలో, మేము కేవలం .col-xl-6
క్లాస్ (కాకుండా) .col-lg-*
,.col-md-*
మరియు/లేదా .col-sm-*
()). ఇది అరుదైన పరికరాలు మరియు xxlarge పరికరాలు 50%/50% విభజించబడతాయి. కానీ, పెద్ద, మధ్యతరహా, చిన్న మరియు అధిక పరిమాణం పరికరాలు వర్గంగా పునఃక్రమీకరించబడతాయి (100% వెడల్పం):
ఉదాహరణ
<div class="container-fluid"> <div class="row"> <div class="col-xl-6"> <p>ప్రపంచ ప్రకృతి ఫండ్ (WWF), 1961 ఏప్రిల్ 29 న స్థాపించబడింది, దాని ప్రతీకం ఒక పరిశీలన చేసిన పరికరం ఉంది ...</p> </div> <div class="col-xl-6"> <p>1980 సంవత్సరంలో, WWF ఆధికారికంగా చైనాకు వచ్చి, చైనా ప్రభుత్వం ఆహ్వానించినప్పుడు, పరిశీలన చేసిన పరికరాలు మరియు వారి నివాసాలను రక్షించడానికి పని చేసింది ...</p> </div> </div> </div>
స్వయంచాలక లేఆఉట్ నిలువులు
Bootstrap 5 లో, అన్ని పరికరాలకు సమానమైన వెడల్పం కలిగిన నిలువులు సృష్టించడానికి ఒక సరళమైన పద్ధతి ఉంది: కేవలం .col-xl-*
సంఖ్యలను తొలగించి, మాత్రమే col మెటాక్స్ లో ఉపయోగించండి .col-xl
క్లాస్. Bootstrap ఎంత నిలువులు ఉన్నాయి అని గుర్తిస్తుంది, మరియు ప్రతి నిలువుకు సమానమైన వెడల్పం పొందుతాయి.
ప్రదర్శన పరిమాణంకనీసం 1200pxఅని కలిపి పునఃక్రమీకరించబడతాయి:
<!-- రెండు నిలువులు: అధిక పొడవు పరికరాలలో 50% వెడల్పం --> <div class="row"> <div class="col-xl">1 of 2</div> <div class="col-xl">2 of 2</div> </div> <!-- నాలుగు నిలువులు: అధిక పొడవు పరికరాలలో 25% వెడల్పం --> <div class="row"> <div class="col-xl">1 of 4</div> <div class="col-xl">2 of 4</div> <div class="col-xl">3 of 4</div> <div class="col-xl">4 of 4</div> </div>
- ముందు పేజీ BS5 గ్రిడ్ Large
- తరువాత పేజీ BS5 గ్రిడ్ XXL