బూట్స్ట్రాప్

పరంజా

బూట్‌స్ట్రాప్ ప్రతిస్పందించే 12-కాలమ్ గ్రిడ్‌లో నిర్మించబడింది. మేము ఆ సిస్టమ్ ఆధారంగా స్థిర మరియు ద్రవ-వెడల్పు లేఅవుట్‌లను కూడా చేర్చాము.

CSS రీసెట్, టైపోగ్రఫీ మరియు లింక్‌ల కోసం గ్లోబల్ స్టైల్స్

HTML5 డాక్టిప్ అవసరం

బూట్‌స్ట్రాప్ HTML5 డాక్టైప్‌ని ఉపయోగించాల్సిన HTML మూలకాలు మరియు CSS లక్షణాలను ఉపయోగించుకుంటుంది. మీ ప్రాజెక్ట్‌లోని ప్రతి బూట్‌స్ట్రాప్డ్ పేజీ ప్రారంభంలో దీన్ని చేర్చాలని నిర్ధారించుకోండి.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

టైపోగ్రఫీ మరియు లింకులు

scaffolding.less ఫైల్‌లో, మేము ప్రాథమిక గ్లోబల్ డిస్‌ప్లే, టైపోగ్రఫీ మరియు లింక్ స్టైల్‌లను సెట్ చేస్తాము . ప్రత్యేకంగా, మేము:

  • శరీరంపై మార్జిన్ తొలగించండి
  • background-color: white;న సెట్body
  • మా టైపోగ్రఫీ బేస్‌గా @baseFontFamily, @baseFontSize, మరియు లక్షణాలను ఉపయోగించండి@baseLineHeight
  • దీని ద్వారా గ్లోబల్ లింక్ రంగును సెట్ చేయండి @linkColorమరియు లింక్ అండర్‌లైన్‌లను మాత్రమే వర్తింపజేయండి:hover

సాధారణీకరణ ద్వారా రీసెట్ చేయండి

బూట్‌స్ట్రాప్ 2 నాటికి, సాంప్రదాయ CSS రీసెట్ Normalize.css నుండి మూలకాలను ఉపయోగించుకునేలా అభివృద్ధి చేయబడింది , ఇది HTML5 బాయిలర్‌ప్లేట్‌కు శక్తినిచ్చే నికోలస్ గల్లఘర్ ప్రాజెక్ట్ .

కొత్త రీసెట్ ఇప్పటికీ reset.less లో కనుగొనబడుతుంది , కానీ సంక్షిప్తత మరియు ఖచ్చితత్వం కోసం అనేక అంశాలతో తీసివేయబడింది.

డిఫాల్ట్ గ్రిడ్ సిస్టమ్ ప్రతిస్పందించే ట్విస్ట్‌తో 12 నిలువు వరుసలు

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

బూట్‌స్ట్రాప్‌లో అందించబడిన డిఫాల్ట్ గ్రిడ్ సిస్టమ్ 724px, 940px (ప్రతిస్పందించే CSS లేకుండా డిఫాల్ట్) మరియు 1170px వెడల్పులలో అందించబడే 12 నిలువు వరుసలను ఉపయోగిస్తుంది. 767px వీక్షణపోర్ట్‌ల క్రింద, నిలువు వరుసలు ద్రవంగా మారి నిలువుగా పేర్చబడి ఉంటాయి.

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

ఇక్కడ చూపినట్లుగా, ప్రాథమిక లేఅవుట్‌ను రెండు "నిలువు వరుసలు"తో సృష్టించవచ్చు, ప్రతి ఒక్కటి మా గ్రిడ్ సిస్టమ్‌లో భాగంగా మేము నిర్వచించిన 12 పునాది నిలువు వరుసల సంఖ్యను కలిగి ఉంటుంది.


నిలువు వరుసలను ఆఫ్‌సెట్ చేస్తోంది

4
4 ఆఫ్‌సెట్ 4
3 ఆఫ్‌సెట్ 3
3 ఆఫ్‌సెట్ 3
8 ఆఫ్‌సెట్ 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

గూడు నిలువు వరుసలు

బూట్‌స్ట్రాప్‌లోని స్టాటిక్ (నాన్-ఫ్లూయిడ్) గ్రిడ్ సిస్టమ్‌తో, గూడు కట్టడం సులభం. మీ కంటెంట్‌ను నెస్ట్ చేయడానికి, ఇప్పటికే ఉన్న నిలువు వరుసలో కొత్త .rowమరియు నిలువు వరుసల సెట్‌ను జోడించండి ..span*.span*

ఉదాహరణ

నెస్టెడ్ అడ్డు వరుసలు దాని పేరెంట్ యొక్క నిలువు వరుసల సంఖ్యను జోడించే నిలువు వరుసల సమితిని కలిగి ఉండాలి. ఉదాహరణకు, రెండు సమూహ .span3నిలువు వరుసలను a లోపల ఉంచాలి .span6.

నిలువు వరుస 1వ స్థాయి
స్థాయి 2
స్థాయి 2 
  1. <div class = "row" > 
  2.   <div class = "span6" > 
  3.     స్థాయి 1 నిలువు వరుస
  4.     <div class = "row" > 
  5.       <div class = "span3" > లెవెల్ 2 </div> 
  6.       <div class = "span3" > లెవెల్ 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

ఫ్లూయిడ్ గ్రిడ్ సిస్టమ్ 12 ప్రతిస్పందించే, శాతం-ఆధారిత నిలువు వరుసలు

ద్రవ నిలువు వరుసలు

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

శాతాలు, పిక్సెల్‌లు కాదు

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

ద్రవ వరుసలు

.rowకు మార్చడం ద్వారా ఏదైనా అడ్డు వరుసను ద్రవంగా చేయండి .row-fluid. నిలువు వరుసలు సరిగ్గా అలాగే ఉంటాయి, స్థిర మరియు ద్రవ లేఅవుట్‌ల మధ్య తిప్పడం చాలా సూటిగా ఉంటుంది.

మార్కప్

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

ద్రవ గూడు

ఫ్లూయిడ్ గ్రిడ్‌లతో గూడు కట్టడం కొంచెం భిన్నంగా ఉంటుంది: సమూహ నిలువు వరుసల సంఖ్య పేరెంట్‌తో సరిపోలాల్సిన అవసరం లేదు. బదులుగా, మీ నిలువు వరుసలు ప్రతి స్థాయిలో రీసెట్ చేయబడతాయి ఎందుకంటే ప్రతి అడ్డు వరుస పేరెంట్ నిలువు వరుసలో 100% పడుతుంది.

ద్రవం 12
ద్రవం 6
ద్రవం 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     నిలువు వరుస 1వ స్థాయి
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > లెవెల్ 2 </div> 
  6.       <div class = "span6" > లెవెల్ 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

గ్రిడ్ అనుకూలీకరణ

వేరియబుల్ డిఫాల్ట్ విలువ వివరణ
@gridColumns 12 నిలువు వరుసల సంఖ్య
@gridColumnWidth 60px ప్రతి నిలువు వరుస వెడల్పు
@gridGutterWidth 20px నిలువు వరుసల మధ్య ప్రతికూల ఖాళీ

తక్కువలో వేరియబుల్స్

పైన డాక్యుమెంట్ చేయబడిన డిఫాల్ట్ 940px గ్రిడ్ సిస్టమ్‌ను అనుకూలీకరించడానికి కొన్ని వేరియబుల్స్ బూట్‌స్ట్రాప్‌లో నిర్మించబడ్డాయి. గ్రిడ్ కోసం అన్ని వేరియబుల్స్ వేరియబుల్స్‌లో నిల్వ చేయబడతాయి.less.

ఎలా అనుకూలీకరించాలి

గ్రిడ్‌ను సవరించడం అంటే మూడు @grid*వేరియబుల్స్‌ని మార్చడం మరియు బూట్‌స్ట్రాప్‌ని మళ్లీ కంపైల్ చేయడం. గ్రిడ్ వేరియబుల్స్‌ను వేరియబుల్స్.లెస్‌లో మార్చండి మరియు రీకంపైల్ చేయడానికి డాక్యుమెంట్ చేయబడిన నాలుగు మార్గాలలో ఒకదాన్ని ఉపయోగించండి . మీరు మరిన్ని నిలువు వరుసలను జోడిస్తున్నట్లయితే, grid.lessలో ఉన్న వాటి కోసం CSSని జోడించాలని నిర్ధారించుకోండి.

ప్రతిస్పందిస్తూ ఉండటం

గ్రిడ్ యొక్క అనుకూలీకరణ డిఫాల్ట్ స్థాయి, 940px గ్రిడ్‌లో మాత్రమే పని చేస్తుంది. బూట్‌స్ట్రాప్ యొక్క ప్రతిస్పందించే అంశాలను నిర్వహించడానికి, మీరు responsive.lessలో గ్రిడ్‌లను అనుకూలీకరించవలసి ఉంటుంది.

వెబ్‌పేజీలను సృష్టించడానికి లేఅవుట్‌లు ప్రాథమిక టెంప్లేట్‌లు

స్థిర లేఅవుట్

డిఫాల్ట్ మరియు సరళమైన 940px-వెడల్పు, ఏదైనా వెబ్‌సైట్ లేదా పేజీ కోసం కేంద్రీకృత లేఅవుట్ అందించబడుతుంది <div class="container">.

  1. <బాడీ>
  2.   <div class = "కంటైనర్" > 
  3.     ...
  4.   </div>
  5. </body>

ద్రవ లేఅవుట్

<div class="container-fluid">అనువైన పేజీ నిర్మాణం, కనిష్ట మరియు గరిష్ట వెడల్పులు మరియు ఎడమవైపు సైడ్‌బార్‌ను అందిస్తుంది. ఇది యాప్‌లు మ���ియు డాక్స్ కోసం చాలా బాగుంది.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--సైడ్‌బార్ కంటెంట్-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--శరీర కంటెంట్-->
  8.     </div>
  9.   </div>
  10. </div>

వివిధ పరికరాలు మరియు రిజల్యూషన్‌ల కోసం ప్రతిస్పందించే డిజైన్ మీడియా ప్రశ్నలు

ప్రతిస్పందించే పరికరాలు

వాళ్ళు ఏమి చేస్తారు

మీడియా ప్రశ్నలు అనేక షరతుల ఆధారంగా అనుకూల CSSని అనుమతిస్తాయి-నిష్పత్తులు, వెడల్పులు, ప్రదర్శన రకం మొదలైనవి-కానీ సాధారణంగా min-widthమరియు చుట్టూ దృష్టి పెడుతుంది max-width.

  • మా గ్రిడ్‌లో నిలువు వరుస వెడల్పును సవరించండి
  • అవసరమైన చోట ఫ్లోట్‌కు బదులుగా మూలకాలను స్టాక్ చేయండి
  • పరికరాలకు మరింత సముచితంగా ఉండేలా శీర్షికలు మరియు వచనాన్ని పునఃపరిమాణం చేయండి

మీడియా ప్రశ్నలను బాధ్యతాయుతంగా మరియు మీ మొబైల్ ప్రేక్షకులకు ప్రారంభంలో మాత్రమే ఉపయోగించండి. పెద్ద ప్రాజెక్ట్‌ల కోసం, మీడియా ప్రశ్నల లేయర్‌లను కాకుండా అంకితమైన కోడ్ బేస్‌లను పరిగణించండి.

మద్దతు ఉన్న పరికరాలు

విభిన్న పరికరాలు మరియు స్క్రీన్ రిజల్యూషన్‌లలో మీ ప్రాజెక్ట్‌లను మరింత సముచితంగా చేయడంలో సహాయపడటానికి బూట్‌స్ట్రాప్ ఒకే ఫైల్‌లోని కొన్ని మీడియా ప్రశ్నలకు మద్దతు ఇస్తుంది. చేర్చబడినవి ఇక్కడ ఉన్నాయి:

లేబుల్ లేఅవుట్ వెడల్పు కాలమ్ వెడల్పు గట్టర్ వెడల్పు
స్మార్ట్ఫోన్లు 480px మరియు అంతకంటే తక్కువ ద్రవ నిలువు వరుసలు, స్థిర వెడల్పులు లేవు
స్మార్ట్‌ఫోన్‌లు టాబ్లెట్‌లు 767px మరియు అంతకంటే తక్కువ ద్రవ నిలువు వరుసలు, స్థిర వెడల్పులు లేవు
పోర్ట్రెయిట్ టాబ్లెట్లు 768px మరియు అంతకంటే ఎక్కువ 42px 20px
డిఫాల్ట్ 980px మరియు అంతకంటే ఎక్కువ 60px 20px
పెద్ద ప్రదర్శన 1200px మరియు అంతకంటే ఎక్కువ 70px 30px

మెటా ట్యాగ్ అవసరం

పరికరాలు ప్రతిస్పందించే పేజీలను సరిగ్గా ప్రదర్శిస్తాయని నిర్ధారించుకోవడానికి, వీక్షణపోర్ట్ మెటా ట్యాగ్‌ని చేర్చండి.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

మీడియా ప్రశ్నలను ఉపయోగించడం

బూట్‌స్ట్రాప్ ఈ మీడియా ప్రశ్నలను స్వయంచాలకంగా చేర్చదు, కానీ వాటిని అర్థం చేసుకోవడం మరియు జోడించడం చాలా సులభం మరియు కనీస సెటప్ అవసరం. బూట్‌స్ట్రాప్ యొక్క ప్రతిస్పందించే లక్షణాలను చేర్చడానికి మీకు కొన్ని ఎంపికలు ఉన్నాయి:

  1. సంకలనం చేయబడిన ప్రతిస్పందించే సంస్కరణను ఉపయోగించండి, bootstrap-responsive.css
  2. @import "responsive.less"ని జోడించి, బూట్‌స్ట్రాప్‌ని మళ్లీ కంపైల్ చేయండి
  3. responsive.lessని ప్రత్యేక ఫైల్‌గా సవరించండి మరియు తిరిగి కంపైల్ చేయండి

ఎందుకు చేర్చకూడదు? నిజం చెప్పాలంటే ప్రతిదానికీ స్పందించాల్సిన అవసరం లేదు. ఈ ఫీచర్‌ని తీసివేయమని డెవలపర్‌లను ప్రోత్సహించే బదులు, దీన్ని ఎనేబుల్ చేయడం ఉత్తమం.

  1.   /* ల్యాండ్‌స్కేప్ ఫోన్‌లు మరియు డౌన్ */
  2.   @మీడియా ( గరిష్టంగా - వెడల్పు : 480px ) { ... }     
  3.  
  4.   /* ల్యాండ్‌స్కేప్ ఫోన్ నుండి పోర్ట్రెయిట్ టాబ్లెట్ */
  5.   @మీడియా ( గరిష్టంగా - వెడల్పు : 767px ) { ... }     
  6.  
  7.   /* ల్యాండ్‌స్కేప్ మరియు డెస్క్‌టాప్ నుండి పోర్ట్రెయిట్ టాబ్లెట్ */
  8.   @మీడియా ( నిమి - వెడల్పు : 768px ) మరియు ( గరిష్టంగా - వెడల్పు : 979px ) { ... }        
  9.  
  10.   /* పెద్ద డెస్క్‌టాప్ */
  11.   @మీడియా ( నిమి - వెడల్పు : 1200px ) { ... }

రెస్పాన్సివ్ యుటిలిటీ తరగతులు

ఏమిటి అవి

వేగవంతమైన మొబైల్-స్నేహపూర్వక అభివృద్ధి కోసం, పరికరం ద్వారా కంటెంట్‌ను చూపించడానికి మరియు దాచడానికి ఈ ప్రాథమిక యుటిలిటీ తరగతులను ఉపయోగించండి.

ఎప్పుడు ఉపయోగించాలి

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

ఉదాహరణకు, మీరు <select>మొబైల్ లేఅవుట్‌లలో nav కోసం ఒక మూలకాన్ని చూపవచ్చు, కానీ టాబ్లెట్‌లు లేదా డెస్క్‌టాప్‌లలో కాదు.

మద్దతు తరగతులు

మేము మద్దతిచ్చే తరగతుల పట్టిక మరియు ఇచ్చిన మీడియా ప్రశ్న లేఅవుట్‌పై వాటి ప్రభావం (పరికరం ద్వారా లేబుల్ చేయబడింది) ఇక్కడ చూపబడింది. వాటిని కనుగొనవచ్చు responsive.less.

తరగతి ఫోన్లు480px మరియు అంతకంటే తక్కువ మాత్రలు767px మరియు అంతకంటే తక్కువ డెస్క్‌టాప్‌లు768px మరియు అంతకంటే ఎక్కువ
.visible-phone కనిపించే
.visible-tablet కనిపించే
.visible-desktop కనిపించే
.hidden-phone కనిపించే కనిపించే
.hidden-tablet కనిపించే కనిపించే
.hidden-desktop కనిపించే కనిపించే

పరీక్ష కేసు

పై తరగతులను పరీక్షించడానికి మీ బ్రౌజర్ పరిమాణాన్ని మార్చండి లేదా విభిన్న పరికరాలలో లోడ్ చేయండి.

ఇందులో కనిపిస్తుంది...

మీ ప్రస్తుత వీక్షణపోర్ట్‌లో క్లాస్ కనిపిస్తుందని ఆకుపచ్చ చెక్‌మార్క్‌లు సూచిస్తున్నాయి.

  • ఫోన్✔ ఫోన్
  • టాబ్లెట్✔ టాబ్లెట్
  • డెస్క్‌టాప్✔ డెస్క్‌టాప్

దాగి ఉంది...

ఇక్కడ, మీ ప్రస్తుత వీక్షణపోర్ట్‌లో తరగతి దాచబడిందని ఆకుపచ్చ చెక్‌మార్క్‌లు సూచిస్తున్నాయి.

  • ఫోన్✔ ఫోన్
  • టాబ్లెట్✔ టాబ్లెట్
  • డెస్క్‌టాప్✔ డెస్క్‌టాప్