బూట్స్ట్రాప్ ప్రతిస్పందించే 12-కాలమ్ గ్రిడ్లో నిర్మించబడింది. మేము ఆ సిస్టమ్ ఆధారంగా స్థిర మరియు ద్రవ-వెడల్పు లేఅవుట్లను కూడా చేర్చాము.
బూట్స్ట్రాప్లో భాగంగా అందించబడిన డిఫాల్ట్ గ్రిడ్ సిస్టమ్ 940px-వెడల్పు, 12-నిలువు వరుస గ్రిడ్ .
ఇది వివిధ పరికరాలు మరియు రిజల్యూషన్ల కోసం నాలుగు ప్రతిస్పందించే వైవిధ్యాలను కలిగి ఉంది: ఫోన్, టాబ్లెట్ పోర్ట్రెయిట్, టేబుల్ ల్యాండ్స్కేప్ మరియు చిన్న డెస్క్టాప్లు మరియు పెద్ద వైడ్ స్క్రీన్ డెస్క్టాప్లు.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
ఇక్కడ చూపినట్లుగా, ప్రాథమిక లేఅవుట్ను రెండు "నిలువు వరుసలతో" సృష్టించవచ్చు, ప్రతి ఒక్కటి మా గ్రిడ్ సిస్టమ్లో భాగంగా మేము నిర్వచించిన 12 పునాది నిలువు వరుసల సంఖ్యను కలిగి ఉంటుంది.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
బూట్స్ట్రాప్లోని స్టాటిక్ (నాన్-ఫ్లూయిడ్) గ్రిడ్ సిస్టమ్తో, గూడు కట్టడం సులభం. మీ కంటెంట్ను నెస్ట్ చేయడానికి, ఇప్పటికే ఉన్న నిలువు వరుసలో కొత్త .row
మరియు నిలువు వరుసల సెట్ను జోడించండి ..span*
.span*
- <div class = "row" >
- <div class = "span12" >
- నిలువు వరుస 1వ స్థాయి
- <div class = "row" >
- <div class = "span6" > లెవెల్ 2 </div>
- <div class = "span6" > లెవెల్ 2 </div>
- </div>
- </div>
- </div>
వేరియబుల్ | డిఫాల్ట్ విలువ | వివరణ |
---|---|---|
@gridColumns |
12 | నిలువు వరుసల సంఖ్య |
@gridColumnWidth |
60px | ప్రతి నిలువు వరుస వెడల్పు |
@gridGutterWidth |
20px | నిలువు వరుసల మధ్య ప్రతికూల ఖాళీ |
@siteWidth |
అన్ని నిలువు వరుసలు మరియు గట్టర్ల గణన మొత్తం | .container-fixed() మిక్సిన్ వెడల్పును సెట్ చేయడానికి నిలువు వరుసలు మరియు గట్టర్ల సంఖ్యను గణిస్తుంది |
పైన డాక్యుమెంట్ చేయబడిన డిఫాల్ట్ 940px గ్రిడ్ సిస్టమ్ను అనుకూలీకరించడానికి కొన్ని వేరియబుల్స్ బూట్స్ట్రాప్లో నిర్మించబడ్డాయి. గ్రిడ్ కోసం అన్ని వేరియబుల్స్ వేరియబుల్స్లో నిల్వ చేయబడతాయి.less.
గ్రిడ్ను సవరించడం అంటే మూడు @grid*
వేరియబుల్స్ని మార్చడం మరియు బూట్స్ట్రాప్ని మళ్లీ కంపైల్ చేయడం. గ్రిడ్ వేరియబుల్స్ను వేరియబుల్స్.లెస్లో మార్చండి మరియు రీకంపైల్ చేయడానికి డాక్యుమెంట్ చేయబడిన నాలుగు మార్గాలలో ఒకదాన్ని ఉపయోగించండి . మీరు మరిన్ని నిలువు వరుసలను జోడిస్తున్నట్లయితే, grid.lessలో ఉన్న వాటి కోసం CSSని జోడించాలని నిర్ధారించుకోండి.
గ్రిడ్ యొక్క అనుకూలీకరణ డిఫాల్ట్ స్థాయి, 940px గ్రిడ్లో మాత్రమే పని చేస్తుంది. బూట్స్ట్రాప్ యొక్క ప్రతిస్పందించే అంశాలను నిర్వహించడానికి, మీరు responsive.lessలో గ్రిడ్లను అనుకూలీకరించవలసి ఉంటుంది.
డిఫాల్ట్ మరియు సరళమైన 940px-వెడల్పు, ఏదైనా వెబ్సైట్ లేదా పేజీ కోసం కేంద్రీకృత లేఅవుట్ అందించబడుతుంది <div class="container">
.
- <బాడీ>
- <div class = "కంటైనర్" >
- ...
- </div>
- </body>
<div class="container-fluid">
అనువైన పేజీ నిర్మాణం, కనిష్ట మరియు గరిష్ట వెడల్పులు మరియు ఎడమవైపు సైడ్బార్ను అందిస్తుంది. ఇది యాప్లు మరియు డాక్స్ కోసం చాలా బాగుంది.
- <div class = "container-fluid" >
- <div class = "row-fluid" >
- <div class = "span2" >
- <!--సైడ్బార్ కంటెంట్-->
- </div>
- <div class = "span10" >
- <!--శరీర కంటెంట్-->
- </div>
- </div>
- </div>
విభిన్న పరికరాలు మరియు స్క్రీన్ రిజల్యూషన్లలో మీ ప్రాజెక్ట్లను మరింత సముచితంగా చేయడంలో సహాయపడటానికి బూట్స్ట్రాప్ కొన్ని మీడియా ప్రశ్నలకు మద్దతు ఇస్తుంది. చేర్చబడినవి ఇక్కడ ఉన్నాయి:
లేబుల్ | లేఅవుట్ వెడల్పు | కాలమ్ వెడల్పు | గట్టర్ వెడల్పు |
---|---|---|---|
స్మార్ట్ఫోన్లు | 480px మరియు అంతకంటే తక్కువ | ద్రవ నిలువు వరుసలు, స్థిర వెడల్పులు లేవు | |
పోర్ట్రెయిట్ టాబ్లెట్లు | 480px నుండి 768px | ద్రవ నిలువు వరుసలు, స్థిర వెడల్పులు లేవు | |
ల్యాండ్స్కేప్ టాబ్లెట్లు | 768px నుండి 940px | 44px | 20px |
డిఫాల్ట్ | 940px మరియు అంతకంటే ఎక్కువ | 60px | 20px |
పెద్ద ప్రదర్శన | 1210px మరియు అంతకంటే ఎక్కువ | 70px | 30px |
మీడియా ప్రశ్నలు అనేక షరతుల ఆధారంగా అనుకూల CSSని అనుమతిస్తాయి-నిష్పత్తులు, వెడల్పులు, ప్రదర్శన రకం మొదలైనవి-కానీ సాధారణంగా min-width
మరియు చుట్టూ దృష్టి పెడుతుంది max-width
.
బూట్స్ట్రాప్ ఈ మీడియా ప్రశ్నలను స్వయంచాలకంగా చేర్చదు, కానీ వాటిని అర్థం చేసుకోవడం మరియు జోడించడం చాలా సులభం మరియు కనీస సెటప్ అవసరం. బూట్స్ట్రాప్ యొక్క ప్రతిస్పందించే లక్షణాలను చేర్చడానికి మీకు కొన్ని ఎంపికలు ఉన్నాయి:
ఎందుకు చేర్చకూడదు? నిజం చెప్పాలంటే ప్రతిదానికీ స్పందించాల్సిన అవసరం లేదు. ఈ ఫీచర్ని తీసివేయమని డెవలపర్లను ప్రోత్సహించే బదులు, దీన్ని ఎనేబుల్ చేయడం ఉత్తమం.
- // ల్యాండ్స్కేప్ ఫోన్లు మరియు డౌన్
- @మీడియా ( గరిష్టంగా - వెడల్పు : 480px ) { ... }
- // పోర్ట్రెయిట్ టాబ్లెట్కి ల్యాండ్స్కేప్ ఫోన్
- @మీడియా ( గరిష్టంగా - వెడల్పు : 768px ) { ... }
- // ల్యాండ్స్కేప్ మరియు డెస్క్టాప్కు పోర్ట్రెయిట్ టాబ్లెట్
- @మీడియా ( నిమి - వెడల్పు : 768px ) మరియు ( గరిష్టంగా - వెడల్పు : 940px ) { ... }
- // పెద్ద డెస్క్టాప్
- @మీడియా ( నిమి - వెడల్పు : 1200px ) { .. }