బూస్ట్రాప్ 5 గ్రిడ్: అధికారక సాంకేతిక పరికరాలు

ఎక్స్ట్రా లార్జ్ పరికరాల గ్రాడ్ ప్రిసంప్లే

ఎక్స్ట్రా స్మాల్ స్మాల్ మీడియం లార్జ్ ఎక్స్ట్రా లార్జ్ 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>

స్వయంగా ప్రయత్నించండి