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

పరంజా

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

గ్లోబల్ సెట్టింగ్‌లు

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

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

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

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

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

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

ఈ శైలులను పరంజాలో కనుగొనవచ్చు. less .

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

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

డిఫాల్ట్ గ్రిడ్ సిస్టమ్

ప్రత్యక్ష గ్రిడ్ ఉదాహరణ

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

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

ప్రాథమిక గ్రిడ్ HTML

సరళమైన రెండు నిలువు వరుసల లేఅవుట్ కోసం, aని సృష్టించండి .rowమరియు తగిన సంఖ్యలో .span*నిలువు వరుసలను జోడించండి. ఇది 12-నిలువు వరుసల గ్రిడ్ కాబట్టి, ప్రతి ఒక్కటి .span*ఆ 12 నిలువు వరుసల సంఖ్యను కలిగి ఉంటుంది మరియు ప్రతి అడ్డు వరుసకు (లేదా పేరెంట్‌లోని నిలువు వరుసల సంఖ్య) ఎల్లప్పుడూ 12 వరకు జోడించాలి.

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

.span4ఈ ఉదాహరణను బట్టి , మనకు .span812 మొత్తం నిలువు వరుసలు మరియు పూర్తి అడ్డు వరుసలు ఉన్నాయి.

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

.offset*తరగతులను ఉపయోగించి నిలువు వరుసలను ఎడమవైపుకు తరలించండి . ప్రతి తరగతి నిలువు వరుస యొక్క ఎడమ మార్జిన్‌ను మొత్తం నిలువు వరుస ద్వారా పెంచుతుంది. ఉదాహరణకు, నాలుగు నిలువు వరుసలపై .offset4కదులుతుంది ..span4

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

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

డిఫాల్ట్ గ్రిడ్‌తో మీ కంటెంట్‌ను నెస్ట్ చేయడానికి, ఇప్పటికే ఉన్న నిలువు వరుసలో కొత్త .rowమరియు నిలువు వరుసల సెట్‌ను జోడించండి . నెస్టెడ్ అడ్డు వరుసలు దాని పేరెంట్ యొక్క నిలువు వరుసల సంఖ్యను జోడించే నిలువు వరుసల సమితిని కలిగి ఉండాలి..span*.span*

ఉదాహరణ

ఇక్కడ రెండు సమూహ .span4నిలువు వరుసలు a లోపల ఉంచబడ్డాయి .span8.

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

ఫ్లూయిడ్ గ్రిడ్ వ్యవస్థ

ప్రత్యక్ష ద్రవ గ్రిడ్ ఉదాహరణ

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

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

ప్రాథమిక ద్రవ గ్రిడ్ HTML

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

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

ఫ్లూయిడ్ ఆఫ్‌సెట్టింగ్

ఫిక్స్‌డ్ గ్రిడ్ సిస్టమ్ ఆఫ్‌సెట్టింగ్ మాదిరిగానే పనిచేస్తుంది: .offset*ఇన్ని నిలువు వరుసల ద్వారా ఆఫ్‌సెట్ చేయడానికి ఏదైనా కాలమ్‌కి జోడించండి.

4
4 ఆఫ్‌సెట్ 4
3 ఆఫ్‌సెట్ 3
3 ఆఫ్‌సెట్ 3
6 ఆఫ్‌సెట్ 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </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>

లేఅవుట్లు

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

అవసరమైన వాటితో సాధారణ స్థిర-వెడల్పు (మరియు ఐచ్ఛికంగా ప్రతిస్పందించే) లేఅవుట్‌ను అందిస్తుంది <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>

రెస్పాన్సివ్ డిజైన్

ప్రతిస్పందించే లక్షణాలను ప్రారంభించడం

<head>మీ డాక్యుమెంట్‌లో సరైన మెటా ట్యాగ్ మరియు అదనపు స్టైల్‌షీట్‌ని చేర్చడం ద్వారా మీ ప్రాజెక్ట్‌లో ప్రతిస్పందించే CSSని ఆన్ చేయండి . మీరు అనుకూలీకరించు పేజీ నుండి బూట్‌స్ట్రాప్‌ను సంకలనం చేసినట్లయితే, మీరు మెటా ట్యాగ్‌ని మాత్రమే చేర్చాలి.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "స్టైల్‌షీట్" >

హెడ్ ​​అప్! బూట్‌స్ట్రాప్ ఈ సమయంలో డిఫాల్ట్‌గా ప్రతిస్పందించే లక్షణాలను కలిగి ఉండదు, ఎందుకంటే ప్రతిదీ ప్రతిస్పందించాల్సిన అవసరం లేదు. ఈ లక్షణాన్ని తీసివేయమని డెవలపర్‌లను ప్రోత్సహించే బదులు, అవసరమైన విధంగా దీన్ని ఎనేబుల్ చేయడం ఉత్తమమని మేము భావిస్తున్నాము.

ప్రతిస్పందించే బూట్స్ట్రాప్ గురించి

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

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

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

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

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

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

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

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

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

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

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

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

రెస్పాన్సివ్ యుటిలిటీస్ టెస్ట్ కేస్

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

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

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

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

దాగి ఉంది...

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

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