బూట్స్ట్రాప్ గ్రిడ్ ఉదాహరణలు
ప్రాథమిక గ్రిడ్ లేఅవుట్‌లు బూట్స్ట్రాప్ గ్రిడ్ సిస్టమ్‌లో బిల్డింగ్ చేయడం గురించి మీకు బాగా తెలుసు.
ఈ ఉదాహరణలలో .themed-grid-colకొంత థీమింగ్‌ని జోడించడానికి నిలువు వరుసలకు క్లాస్ జోడించబడింది. ఇది డిఫాల్ట్‌గా బూట్‌స్ట్రాప్‌లో అందుబాటులో ఉండే తరగతి కాదు.
ఐదు గ్రిడ్ టైర్లు
బూట్స్ట్రాప్ గ్రిడ్ సిస్టమ్‌కు ఐదు శ్రేణులు ఉన్నాయి, మేము సపోర్ట్ చేసే ప్రతి పరికరానికి ఒకటి. ప్రతి శ్రేణి కనిష్ట వీక్షణపోర్ట్ పరిమాణంతో ప్రారంభమవుతుంది మరియు ఓవర్‌రైడ్ చేయకపోతే స్వయంచాలకంగా పెద్ద పరికరాలకు వర్తిస్తుంది.
మూడు సమాన నిలువు వరుసలు
మూడు సమాన-వెడల్పు నిలువు వరుసలను డెస్క్‌టాప్‌ల వద్ద ప్రారంభించి పెద్ద డెస్క్‌టాప్‌లకు స్కేలింగ్ చేయండి . మొబైల్ పరికరాలు, టాబ్లెట్‌లు మరియు దిగువన, నిలువు వరుసలు స్వయంచాలకంగా పేర్చబడతాయి.
మూడు సమాన నిలువు వరుసల ప్రత్యామ్నాయం
తరగతులను ఉపయోగించడం ద్వారా .row-cols-*, మీరు సమాన నిలువు వరుసలతో సులభంగా గ్రిడ్‌ను సృష్టించవచ్చు.
.colయొక్క బిడ్డ
.row-cols-md-3
.colయొక్క బిడ్డ
.row-cols-md-3
.colయొక్క బిడ్డ
.row-cols-md-3
మూడు అసమాన నిలువు వరుసలు
డెస్క్‌టాప్‌ల నుండి మూడు నిలువు వరుసలను పొందండి మరియు వివిధ వెడల్పుల పెద్ద డెస్క్‌టాప్‌లకు స్కేలింగ్ చేయండి. గుర్తుంచుకోండి, గ్రిడ్ నిలువు వరుసలు ఒకే క్షితిజ సమాంతర బ్లాక్ కోసం పన్నెండు వరకు జోడించాలి. అంతకంటే ఎక్కువ, మరియు వ్యూపోర్ట్‌తో సంబంధం లేకుండా నిలువు వరుసలు పేర్చడం ప్రారంభిస్తాయి.
రెండు నిలువు వరుసలు
డెస్క్‌టాప్‌ల వద్ద ప్రారంభించి, పెద్ద డెస్క్‌టాప్‌లకు స్కేలింగ్ చేయడం ద్వారా రెండు నిలువు వరుసలను పొందండి .
పూర్తి వెడల్పు, ఒకే నిలువు వరుస
పూర్తి-వెడల్పు మూలకాల కోసం గ్రిడ్ తరగతులు అవసరం లేదు.
రెండు సమూహ నిలువు వరుసలతో రెండు నిలువు వరుసలు
డాక్యుమెంటేషన్ ప్రకారం, గూడు కట్టడం సులభం-ఇప్పటికే ఉన్న నిలువు వరుసలో నిలువు వరుసలను ఉంచండి. ఇది మీకు డెస్క్‌టాప్‌ల నుండి రెండు నిలువు వరుసలను అందిస్తుంది మరియు పెద్ద డెస్క్‌టాప్‌లకు స్కేలింగ్ చేస్తుంది , పెద్ద నిలువు వరుసలో మరో రెండు (సమాన వెడల్పులు) ఉంటాయి.
మొబైల్ పరికర పరిమాణాలు, టాబ్లెట్‌లు మరియు క్రిందికి, ఈ నిలువు వరుసలు మరియు వాటి సమూహ నిలువు వరుసలు పేర్చబడి ఉంటాయి.
మిశ్రమం: మొబైల్ మరియు డెస్క్‌టాప్
బూట్స్ట్రాప్ v5 గ్రిడ్ సిస్టమ్ ఆరు శ్రేణుల తరగతులను కలిగి ఉంది: xs (అదనపు చిన్నది, ఈ తరగతి ఇన్‌ఫిక్స్ ఉపయోగించబడదు), sm (చిన్న), md (మధ్యస్థ), lg (పెద్ద), xl (x-పెద్ద) మరియు xxl (xx - పెద్దది). మీరు మరింత డైనమిక్ మరియు ఫ్లెక్సిబుల్ లేఅవుట్‌లను రూపొందించడానికి దాదాపుగా ఈ తరగతుల కలయికను ఉపయోగించవచ్చు.
క్లాస్‌ల యొక్క ప్రతి శ్రేణి పెరుగుతుంది, అంటే మీరు md, lg, xl మరియు xxl కోసం ఒకే వెడల్పులను సెట్ చేయడానికి ప్లాన్ చేస్తే, మీరు mdని మాత్రమే పేర్కొనాలి.
మిశ్రమంగా: మొబైల్, టాబ్లెట్ మరియు డెస్క్‌టాప్
గట్టర్స్
తరగతులతో, క్షితిజ సమాంతర గట్టర్లను .gx-*సర్దుబాటు చేయవచ్చు.
.col.gx-4గట్టర్లతో
_
.col.gx-4గట్టర్లతో
_
.col.gx-4గట్టర్లతో
_
.col.gx-4గట్టర్లతో
_
.col.gx-4గట్టర్లతో
_
.col.gx-4గట్టర్లతో
_
.gy-*నిలువు గట్టర్లను నియంత్రించడానికి తరగతులను ఉపయోగించండి .
.col.gy-4గట్టర్లతో
_
.col.gy-4గట్టర్లతో
_
.col.gy-4గట్టర్లతో
_
.col.gy-4గట్టర్లతో
_
.col.gy-4గట్టర్లతో
_
.col.gy-4గట్టర్లతో
_
తరగతులతో, రెండు దిశలలోని గట్టర్లను .g-*సర్దుబాటు చేయవచ్చు.
.col.g-3గట్టర్లతో
_
.col.g-3గట్టర్లతో
_
.col.g-3గట్టర్లతో
_
.col.g-3గట్టర్లతో
_
.col.g-3గట్టర్లతో
_
.col.g-3గట్టర్లతో
_
కంటైనర్లు
బూట్స్ట్రాప్ v4.4లో జోడించిన అదనపు తరగతులు నిర్దిష్ట బ్రేక్‌పాయింట్ వరకు 100% వెడల్పు ఉన్న కంటైనర్‌లను అనుమతిస్తాయి. v5 కొత్త xxlబ్రేక్‌పాయింట్‌ని జోడిస్తుంది.