బూట్స్ట్రాప్ 5 గ్రిడ్ సిస్టమ్

గ్రిడ్ సిస్టమ్

Bootstrap గ్రిడ్ సిస్టమ్ ఫ్లెక్స్బాక్స్ పై ఆధారపడి ఉంటుంది, పేజీలో అత్యధికంగా 12 కాలమ్స్ అనుమతిస్తుంది.

మీరు అన్ని 12 కాలమ్స్ కొరకు ఉపయోగించకుండా, మీరు అవి కలపడం ద్వారా ప్రకటించబడిన వెడల్పు కాలమ్స్ సృష్టించవచ్చు:

గ్రిడ్ సిస్టమ్ అనుకూలించుకునే వేగంతో ఉంటుంది, కాలమ్స్ స్క్రీన్ పైకి పెద్దదిగా పునఃవ్యవస్థీకరించబడతాయి.

మొత్తం సమానంగా లేదా తక్కువగా 12 ఉంచండి (అన్ని 12 అవుట్ కాలమ్స్ ని వాడకం అవసరం లేదు).

గ్రిడ్ క్లాస్

Bootstrap 5 గ్రిడ్ సిస్టమ్ ముప్పు క్లాస్లను అందిస్తుంది:

  • .col- (సూక్ష్మ డివైస్ - స్క్రీన్ వెడల్పు 576px కంటే తక్కువ)
  • .col-sm- (ఎక్స్ట్రా స్మాల్ డివైస్ - స్క్రీన్ వెడల్పు 576px కంటే తక్కువ)
  • .col-md- (స్మాల్ డివైస్ - స్క్రీన్ వెడల్పు 768px కంటే ఎక్కువ లేదా సమానం)
  • .col-lg- (మెడియం డివైస్ - స్క్రీన్ వెడల్పు 992px కంటే ఎక్కువ లేదా సమానం)
  • .col-xl- (ఎక్స్ట్రా లార్జ్ డివైస్ - స్క్రీన్ వెడల్పు 1200px కంటే ఎక్కువ లేదా సమానం)
  • .col-xxl- (లార్జ్ డివైస్ - స్క్రీన్ వెడల్పు 1400px కంటే ఎక్కువ లేదా సమానం)

పైన క్లాస్లను కలపడం ద్వారా మరింత డైనమిక్ మరియు ఫ్లెక్సిబుల్ లేఆఉట్ సృష్టించవచ్చు.

సూచన:ప్రతి క్లాస్ నిర్ధారిత పరిమాణంతో పెద్దదిగా ఉంటుంది, కాబట్టి మీరు sm మరియు md కు సమానమైన వెడల్పు కోరుకుంటే, మీరు కేవలం sm ని నిర్ధారించాలి.

Bootstrap 5 గ్రిడ్ బేసిక్ స్ట్రక్చర్

ఇక్కడ Bootstrap 5 గ్రిడ్ బేసిక్ స్ట్రక్చర్ ఉంది:

亲自试一试

第一个例子：创建一行（

）。然后，添加所需数量的列（带有 .col-*-* 类的标签）。第一颗星 (*) 代表响应度：sm、md、lg、xl 或 xxl，而第二颗星代表一个数字，每行加起来应为 12。

రెండవ ఉదాహరణ: ప్రతి క్లాస్ కు లేదా సంకేతాలు కు లేదా క్లాస్ టాగు కు లేదు col ఒక సంఖ్యను జోడించకుండా, బ్రౌసర్ అమార్ట్ ప్రాసెస్ చేయడం ద్వారా సమాన వెడల్పు కోల్స్ సృష్టించడానికి ఒక సంఖ్యను జోడించండి "col" అంశం = ప్రతి కోల్ యొక్క 50% వెడల్పు, మరియు మూడు కోల్స్ = ప్రతి కోల్ యొక్క 33.33% వెడల్పు. నాలుగు కోల్స్ = 25% వెడల్పు మొదలుకొంటుంది. మీరు కూడా ఉపయోగించవచ్చు .col-sm|md|lg|xl|xxl కోల్స్ రెస్పాన్సివ్ చేస్తుంది.

గ్రిడ్ ఆప్షన్స్

ఈ పట్టిక బ్రౌసర్ పరిమాణాల వివిధ అంచెల్లో Bootstrap 5 గ్రిడ్ సిస్టమ్ ఎలా పని చేస్తుంది యొక్క సమాహారాన్ని ప్రస్తుతిస్తుంది:

సూపర్ స్మాల్ (<576px) స్మాల్ (>=576px) మెడియమ్ (>=768px) మెగా (>=992px) హుజ్జర్ (>=1200px) సూపర్ హుజ్జర్ (>=1400px)
క్లాస్ ప్రొఫైల్ .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
గ్రిడ్ ప్రవర్తన ఎల్లప్పుడూ హోరిజన్టల్ బ్రేక్పాయిన్ పైన హోరిజన్టల్ గా క్రిందకు కూల్చుకుంటుంది బ్రేక్పాయిన్ పైన హోరిజన్టల్ గా క్రిందకు కూల్చుకుంటుంది బ్రేక్పాయిన్ పైన హోరిజన్టల్ గా క్రిందకు కూల్చుకుంటుంది బ్రేక్పాయిన్ పైన హోరిజన్టల్ గా క్రిందకు కూల్చుకుంటుంది బ్రేక్పాయిన్ పైన హోరిజన్టల్ గా క్రిందకు కూల్చుకుంటుంది
కంటైనర్ వెడల్పు నానీ (ఆటో) 540px 720px 960px 1140px 1320px
అనువర్తనం కోసం మొబైల్ వెర్టికల్ మొబైల్ హోరిజన్టల్ టాబ్లెట్ లాప్టాప్ లాప్టాప్ మరియు డెస్క్టాప్ లాప్టాప్ మరియు డెస్క్టాప్
కోల్ నంబర్ 12 12 12 12 12 12
గట్టర్ వెడల్పు 1.5రెమ్ (కోల్ ప్రతి వైపు .75రెమ్) 1.5రెమ్ (కోల్ ప్రతి వైపు .75రెమ్) 1.5రెమ్ (కోల్ ప్రతి వైపు .75రెమ్) 1.5రెమ్ (కోల్ ప్రతి వైపు .75రెమ్) 1.5రెమ్ (కోల్ ప్రతి వైపు .75రెమ్) 1.5రెమ్ (కోల్ ప్రతి వైపు .75రెమ్)
నిరంతరం పొందిన అవును అవును అవును అవును అవును అవును
ఆఫ్ సెట్ అవును అవును అవును అవును అవును అవును
కోల్ యార్డరింగ్ అవును అవును అవును అవును అవును అవును