Bootstrap 5 గ్రిడ్: పెద్ద పరికరాలు

కోర్సు సిఫారసులు:

లార్జ్ పరికరం గ్రిడ్ ఉదాహరణ ఎక్స్ట్రా స్మాల్ స్మాల్ మీడియం లార్జ్ ఎక్స్ట్రా లార్జ్
XXL వర్గం ప్రత్యేకింపు .col- .col-sm- .col-md- .col-lg- .col-xl-
.col-xxl- స్క్రీన్ వెడితం <576px >=768px >=992px >=1200px >=1400px

గత చాప్టర్లో, మేము చిన్న మరియు మధ్యతరహా పరికరాలకు అనువుగా ఉన్న గ్రిడ్ ఉదాహరణను ప్రదర్శించాము. మేము రెండు div (గమనాలు) వాడి, చిన్న పరికరంపై 25%/75% విభజనను చేశాము, మధ్యతరహా పరికరంపై 50%/50% విభజనను చేశాము:

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

కానీ పెద్ద పరికరంపై, 33% / 66% విభజన డిజైన్ మంచిది కావచ్చు.

పెద్ద పరికరం అనేది స్క్రీన్ వెడితం992 పిక్సెల్స్ నుండి 1199 పిక్సెల్స్ వరకు。

పెద్ద పరికరానికి, మేము ఉపయోగించాలి .col-lg-* వర్గం:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

చిన్న పరికరంపై, మీరు ఉపయోగించాలి -sm- యూనిట్లు. మధ్యతరహా పరికరంపై, మీరు ఉపయోగించాలి -md- యూనిట్లు. పెద్ద పరికరంపై, మీరు ఉపయోగించాలి -lg- యూనిట్లు.

దిగువ ఉదాహరణ 25%/75% ను చిన్న పరికరాలపై విభజిస్తుంది, మధ్యతరహా పరికరాలపై 50%/50% ను విభజిస్తుంది, పెద్ద, xlarge మరియు xxlarge పరికరాలపై 33%/66% ను విభజిస్తుంది. చిన్న పరికరంపై, ఇది స్వయంచాలకంగా స్టాక్ అవుతుంది (100%):

ఉదాహరణ

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4">
      <p>ప్రపంచ ప్రకృతి ఫండ్ (WWF), 1961 ఏప్రిల్ 29 న స్థాపించబడింది, దాని ప్రతిమ ఒక పరిశ్రమించే పాము ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8">
      <p>1980 సంవత్సరంలో, WWF చైనాకు ఆధికారికంగా వచ్చింది, చైనా ప్రభుత్వం ఆహ్వానించింది పర్వతారోహణి పరిరక్షణ పనులు ప్రారంభించడానికి ...</p>
    </div>
  </div>
</div>

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

注意：确保总和等于或小于 12（不需要使用所有 12 个可用列）：

లార్జ్ మాత్రమే నిర్దేశించాము

ఈ ఉదాహరణలో మేము కేవలం .col-lg-6 క్లాస్ లో ఉన్నాయి (కానీ కాపీరైట్ లేదు): .col-md-* మరియు/లేదా .col-sm-*()). ఇది లార్జ్, ఎక్స్‌లార్జ్ మరియు ఎక్స్‌క్స్‌లార్జ్ పరికరాలు 50%/50% చేరుకుంటాయి. కానీ, మిడియం, స్మాల్ మరియు సూపర్ స్మాల్ పరికరాలకు వాటిని నాలుగుగా పెరుగుతాయి (100% వెడల్పు):

ఉదాహరణ

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <p>ప్రపంచ ప్రకృతి ఫండ్ (WWF), 1961 ఏప్రిల్ 29 న స్థాపించబడింది, దాని ప్రతిమ ఒక పరిశ్రమించే పాము ...</p>
    </div>
    <div class="col-lg-6">
      <p>1980 సంవత్సరంలో, WWF చైనాకు ఆధికారికంగా వచ్చింది, చైనా ప్రభుత్వం ఆహ్వానించింది పర్వతారోహణి పరిరక్షణ పనులు ప్రారంభించడానికి ...</p>
    </div>
  </div>
</div>

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

ఆటోమేటిక్ లేఆఉట్ నిలువులు

బ్రాస్క్రాప్ట్ 5 లో, అన్ని పరికరాలకు సమానమైన వెడల్పు కలిగిన నిలువులు సృష్టించడానికి ఒక సరళమైన పద్ధతి ఉంది: కేవలం ఈ కి నుండి ప్రారంభించండి .col-lg-* సంఖ్యలను తొలగించి, మరియు మాత్రమే col అంశం పై ఉపయోగించండి .col-lg క్లాస్. బ్రాస్క్రాప్ట్ ఎంపికచేస్తుంది ఎన్ని నిలువులు ఉన్నాయి, మరియు ప్రతి నిలువుకు సమానమైన వెడల్పు పొందుతాయి.

ఇది పెద్ద పెరిమీటర్ గల ప్రదర్శకంకంటే తక్కువ 992pxమరియు నిలువులు హోరిజంటల్లో పెరుగుతాయి:

<!-- రెండు నిలువులు: పెద్ద పరికరాలపై 50% వెడల్పు -->
<div class="row">
  <div class="col-lg">1 of 2</div>
  <div class="col-lg">2 of 2</div>
</div>
<!-- నాలుగు నిలువులు: పెద్ద పరికరాలపై 25% వెడల్పు -->
<div class="row">
  <div class="col-lg">1 of 4</div>
  <div class="col-lg">2 of 4</div>
  <div class="col-lg">3 of 4</div>
  <div class="col-lg">4 of 4</div>
</div>

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