బూట్స్ట్రాప్ గ్రిడ్ ఉదాహరణలు

ప్రాథమిక గ్రిడ్ లేఅవుట్‌లు బూట్‌స్ట్రాప్ గ్రిడ్ సిస్టమ్‌లో నిర్మించడం గురించి మీకు బాగా తెలుసు.

ఐదు గ్రిడ్ టైర్లు

బూట్‌స్ట్రాప్ గ్రిడ్ సిస్టమ్‌కు ఐదు శ్రేణులు ఉన్నాయి, మేము సపోర్ట్ చేసే ప్రతి పరికరానికి ఒకటి. ప్రతి శ్రేణి కనిష్ట వీక్షణపోర్ట్ పరిమాణంతో ప్రారంభమవుతుంది మరియు ఓవర్‌రైడ్ చేయకపోతే స్వయంచాలకంగా పెద్ద పరికరాలకు వర్తిస్తుంది.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

మూడు సమాన నిలువు వరుసలు

మూడు సమాన-వెడల్పు నిలువు వరుసలను డెస్క్‌టాప్‌ల వద్ద ప్రారంభించి పెద్ద డెస్క్‌టాప్‌లకు స్కేలింగ్ చేయండి . మొబైల్ పరికరాలు, టాబ్లెట్‌లు మరియు దిగువన, నిలువు వరుసలు స్వయంచాలకంగా పేర్చబడతాయి.

.col-md-4
.col-md-4
.col-md-4

మూడు అసమాన నిలువు వరుసలు

డెస్క్‌టాప్‌ల నుండి మూడు నిలువు వరుసలను పొందండి మరియు వివిధ వెడల్పుల పెద్ద డెస్క్‌టాప్‌లకు స్కేలింగ్ చేయండి. గుర్తుంచుకోండి, గ్రిడ్ నిలువు వరుసలు ఒకే క్షితిజ సమాంతర బ్లాక్ కోసం పన్నెండు వరకు జోడించాలి. అంతకంటే ఎక్కువ, మరియు వ్యూపోర్ట్‌తో సంబంధం లేకుండా నిలువు వరుసలు పేర్చడం ప్రారంభిస్తాయి.

.col-md-3
.col-md-6
.col-md-3

రెండు నిలువు వరుసలు

డెస్క్‌టాప్‌ల వద్ద ప్రారంభించి, పెద్ద డెస్క్‌టాప్‌లకు స్కేలింగ్ చేయడం ద్వారా రెండు నిలువు వరుసలను పొందండి .

.col-md-8
.col-md-4

పూర్తి వెడల్పు, ఒకే నిలువు వరుస

పూర్తి-వెడల్పు మూలకాల కోసం గ్రిడ్ తరగతులు అవసరం లేదు.


రెండు సమూహ నిలువు వరుసలతో రెండు నిలువు వరుసలు

డాక్యుమెంటేషన్ ప్రకారం, గూడు కట్టడం సులభం-ఇప్పటికే ఉన్న నిలువు వరుసలో నిలువు వరుసలను ఉంచండి. ఇది మీకు డెస్క్‌టాప్‌ల నుండి రెండు నిలువు వరుసలను అందిస్తుంది మరియు పెద్ద డెస్క్‌టాప్‌లకు స్కేలింగ్ చేస్తుంది , పెద్ద నిలువు వరుసలో మరో రెండు (సమాన వెడల్పులు) ఉంటాయి.

మొబైల్ పరికర పరిమాణాలు, టాబ్లెట్‌లు మరియు క్రిందికి, ఈ నిలువు వరుసలు మరియు వాటి సమూహ నిలువు వరుసలు పేర్చబడి ఉంటాయి.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

మిశ్రమం: మొబైల్ మరియు డెస్క్‌టాప్

బూట్‌స్ట్రాప్ v4 గ్రిడ్ సిస్టమ్ ఐదు అంచెల తరగతులను కలిగి ఉంది: xs (అదనపు చిన్నది), sm (చిన్నది), md (మధ్యస్థం), lg (పెద్దది) మరియు xl (అదనపు పెద్దది). మీరు మరింత డైనమిక్ మరియు ఫ్లెక్సిబుల్ లేఅవుట్‌లను రూపొందించడానికి దాదాపుగా ఈ తరగతుల కలయికను ఉపయోగించవచ్చు.

తరగతుల యొక్క ప్రతి శ్రేణి స్కేల్ అప్ అవుతుంది, అంటే మీరు xs మరియు sm కోసం ఒకే వెడల్పులను సెట్ చేయాలని ప్లాన్ చేస్తే, మీరు xsని మాత్రమే పేర్కొనాలి.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

మిశ్రమంగా: మొబైల్, టాబ్లెట్ మరియు డెస్క్‌టాప్

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4