పైన
వదిలేశారు
కుడి
క్రింద
బూట్స్ట్రాప్

బూట్స్ట్రాప్, Twitter నుండి

బూట్‌స్ట్రాప్ అనేది Twitter నుండి వెబ్‌అప్‌లు మరియు సైట్‌ల అభివృద్ధిని కిక్‌స్టార్ట్ చేయడానికి రూపొందించబడిన టూల్‌కిట్.
ఇది టైపోగ్రఫీ, ఫారమ్‌లు, బటన్‌లు, టేబుల్‌లు, గ్రిడ్‌లు, నావిగేషన్ మరియు మరిన్నింటి కోసం బేస్ CSS మరియు HTMLని కలిగి ఉంటుంది.

తానే చెప్పుకునే హెచ్చరిక: బూట్‌స్ట్రాప్ తక్కువతో నిర్మించబడింది మరియు ఆధునిక బ్రౌజర్‌లను దృష్టిలో ఉంచుకుని గేట్ వెలుపల పని చేసేలా రూపొందించబడింది.

CSSని హాట్‌లింక్ చేయండి

వేగవంతమైన మరియు సులభమైన ప్రారంభం కోసం, ఈ స్నిప్పెట్‌ని మీ వెబ్‌పేజీలోకి కాపీ చేయండి.

దీన్ని తక్కువతో ఉపయోగించండి

తక్కువ వాడే అభిమాని? ఫర్వాలేదు, రెపోను క్లోన్ చేసి, ఈ పంక్తులను జోడించండి:

GitHub పై ఫోర్క్

Githubలో అధికారిక బూట్‌స్ట్రాప్ రెపోతో డౌన్‌లోడ్, ఫోర్క్, పుల్, ఫైల్ సమస్యలు మరియు మరిన్ని.

GitHubలో బూట్‌స్ట్రాప్ »

ప్రస్తుతం v1.3.0

బూట్‌స్ట్రాప్ బ్రీఫ్ హిస్టరీ, బ్రౌజర్ సపోర్ట్ మరియు మరిన్నింటి గురించి

చరిత్ర

ట్విట్టర్‌లోని ఇంజనీర్లు చారిత్రాత్మకంగా ఫ్రంట్-ఎండ్ అవసరాలను తీర్చడానికి తమకు తెలిసిన ఏదైనా లైబ్రరీని ఉపయోగించారు. అందించిన సవాళ్లకు సమాధానంగా బూట్‌స్ట్రాప్ ప్రారంభమైంది. చాలా మంది అద్భుతమైన వ్యక్తుల సహాయంతో, బూట్‌స్ట్రాప్ గణనీయంగా పెరిగింది.

dev.twitter.com లో మరింత చదవండి ›

బ్రౌజర్ మద్దతు

Chrome, Safari, Internet Explorer మరియు Firefox వంటి ప్రధాన ఆధునిక బ్రౌజర్‌లలో బూట్‌స్ట్రాప్ పరీక్షించబడింది మరియు మద్దతు ఇస్తుంది.

Chrome, Safari, Internet Explorer మరియు Firefoxలో పరీక్షించబడింది మరియు మద్దతు ఉంది
  • తాజా సఫారి
  • తాజా Google Chrome
  • Firefox 4+
  • ఇంటర్నెట్ ఎక్స్‌ప్లోరర్ 7+
  • ఒపేరా 11

ఏమి చేర్చబడింది

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

త్వరిత-ప్రారంభ ఉదాహరణలు

కొన్ని శీఘ్ర టెంప్లేట్‌లు కావాలా? మేము కలిసి ఉంచిన ఈ ప్రాథమిక ఉదాహరణలను చూడండి:

  • హీరో యూనిట్‌తో సరళమైన మూడు నిలువు వరుసల లేఅవుట్
  • స్టాటిక్ సైడ్‌బార్‌తో ఫ్లూయిడ్ లేఅవుట్
  • యాప్‌ల కోసం సరళమైన హ్యాంగింగ్ కంటైనర్

గ్రిడ్ సిస్టమ్ ప్రామాణిక 940pxని రాక్ చేయండి లేదా మీ స్వంతంగా రోల్ చేయండి

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

బూట్‌స్ట్రాప్‌లో భాగంగా అందించబడిన డిఫాల్ట్ గ్రిడ్ సిస్టమ్ 940px వెడల్పు 16-నిలువు వరుస గ్రిడ్. ఇది జనాదరణ పొందిన 960 గ్రిడ్ సిస్టమ్ యొక్క రుచి, కానీ ఎడమ మరియు కుడి వైపులా అదనపు మార్జిన్/ప్యాడింగ్ లేకుండా.

ఉదాహరణ గ్రిడ్ మార్కప్

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

  1. <div class = "row" > 
  2.   <div class = "span6" > 
  3.     ...
  4.   </div>
  5.   <div class = "span10" > 
  6.     ...
  7.   </div>
  8. </div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
1/3
1/3
1/3
1/3
2/3
4
6
6
8
8
5
11
16

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

4
8 ఆఫ్‌సెట్ 4
1/3 ఆఫ్‌సెట్ 2/3సె
4 ఆఫ్‌సెట్ 4
4 ఆఫ్‌సెట్ 4
5 ఆఫ్‌సెట్ 3
5 ఆఫ్‌సెట్ 3
10 ఆఫ్‌సెట్ 6

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

మీరు ఇప్పటికే ఉన్న నిలువు వరుసలో సృష్టించడం ద్వారా మీ కంటెంట్‌ను గూడు .rowకట్టుకోండి.

సమూహ నిలువు వరుసల ఉదాహరణ

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

మీ స్వంత గ్రిడ్‌ను రోల్ చేయండి

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

గ్రిడ్ లోపల

గ్రిడ్ సిస్టమ్‌ను సవరించడానికి అవసరమైన వేరియబుల్స్ ప్రస్తుతం అన్నీ ఉన్నాయి preboot.less.

వేరియబుల్ డిఫాల్ట్ విలువ వివరణ
@gridColumns 16 గ్రిడ్‌లోని నిలువు వరుసల సంఖ్య
@gridColumnWidth 40px గ్రిడ్‌లోని ప్రతి నిలువు వరుస వెడల్పు
@gridGutterWidth 20px ప్రతి నిలువు వరుస మధ్య ప్రతికూల ఖాళీ
@siteWidth అన్ని నిలువు వరుసలు మరియు గట్టర్‌ల గణన మొత్తం నిలువు వరుసలు మరియు గట్టర్‌ల సంఖ్యను లెక్కించడానికి మరియు .fixed-container()మిక్సిన్ వెడల్పును సెట్ చేయడానికి మేము కొన్ని ప్రాథమిక మ్యాచ్‌లను ఉపయోగిస్తాము.

ఇప్పుడు అనుకూలీకరించడానికి

గ్రిడ్‌ను సవరించడం అంటే మూడు @grid-*వేరియబుల్‌లను మార్చడం మరియు తక్కువ ఫైల్‌లను తిరిగి కంపైల్ చేయడం.

బూట్‌స్ట్రాప్ 24 నిలువు వరుసలతో కూడిన గ్రిడ్ సిస్టమ్‌ను నిర్వహించడానికి అమర్చబడి ఉంటుంది; డిఫాల్ట్ కేవలం 16. మీ గ్రిడ్ వేరియబుల్స్ 24-నిలువు వరుసల గ్రిడ్‌కు ఎలా అనుకూలీకరించబడతాయో ఇక్కడ ఉంది.

  1. @గ్రిడ్ కాలమ్‌లు : 24 ;       
  2. @gridColumnWidth : 20px ;   
  3. @gridGutterWidth : 20px ;

మళ్లీ కంపైల్ చేసిన తర్వాత, మీరు సెట్ చేయబడతారు!

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

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

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

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

ద్రవ లేఅవుట్

కనిష్ట మరియు గరిష్ట వెడల్పులు మరియు ఎడమవైపు సైడ్‌బార్‌తో ప్రత్యామ్నాయ, సౌకర్యవంతమైన ఫ్లూయిడ్ పేజీ నిర్మాణం. యాప్‌లు మరియు డాక్స్ కోసం చాలా బాగుంది.

  1. <బాడీ>
  2.   <div class = "container-fluid" > 
  3.     <div class = "సైడ్‌బార్" > 
  4.       ...
  5.     </div>
  6.     <div class = "content" > 
  7.       ...
  8.     </div>
  9.   </div>
  10. </body>

టైపోగ్రఫీ శీర్షికలు, పేరాలు, జాబితాలు మరియు ఇతర ఇన్‌లైన్ రకం అంశాలు

శీర్షికలు & కాపీ

మీ వెబ్‌పేజీలను రూపొందించడానికి ప్రామాణిక టైపోగ్రాఫిక్ సోపానక్రమం.

మొత్తం టైపోగ్రాఫిక్ గ్రిడ్ మా preboot.less ఫైల్‌లోని రెండు తక్కువ వేరియబుల్స్‌పై ఆధారపడి ఉంటుంది: @basefontమరియు @baseline. మొదటిది అంతటా ఉపయోగించే బేస్ ఫాంట్-పరిమాణం మరియు రెండవది బేస్ లైన్-ఎత్తు.

మేము ఆ వేరియబుల్స్ మరియు కొంత గణితాన్ని ఉపయోగిస్తాము, మా అన్ని రకాలైన మార్జిన్‌లు, ప్యాడింగ్‌లు మరియు లైన్-ఎత్తులు మరియు మరిన్నింటిని సృష్టించడానికి.

h1. హెడ్డింగ్ 1

h2. హెడ్డింగ్ 2

h3. శీర్షిక 3

h4. హెడ్డింగ్ 4

h5. హెడ్డింగ్ 5
h6. శీర్షిక 6

ఉదాహరణ పేరా

నుల్లమ్ క్విస్ రిసస్ ఎగెట్ ఉర్నా మొల్లిస్ ఓర్నారే వెల్ యూ లియో. కమ్ సోసిస్ నాటోక్ పెనాటిబస్ మరియు మాగ్నిస్ డిస్ పార్ట్యురియెంట్ మాంటెస్, నాస్కేటర్ రిడిక్యులస్ మస్. Nullam id dolor id nibh ultricies వాహనాలు ut id elit.

ఉదాహరణ శీర్షికలో ఉపశీర్షిక ఉంది...

ఇతర. అంశాలు

ఉద్ఘాటన, చిరునామాలు & సంక్షిప్తీకరణలను ఉపయోగించడం

<strong> <em> <address> <abbr>

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

ఒక పదం లేదా పదబంధం దాని చుట్టుపక్కల ఉన్న కాపీకి సంబంధించి అదనపు ప్రాముఖ్యత లేదా ప్రాముఖ్యతను సూచించడానికి ఉద్ఘాటన ట్యాగ్‌లు ( <strong>మరియు ) ఉపయోగించాలి. ప్రాముఖ్యత మరియు ఒత్తిడి ప్రాధాన్యత కోసం <em>ఉపయోగించండి .<strong><em>

ఒక పేరాలో ఉద్ఘాటన

ఫ్యూస్ డాపిబస్ , టెల్లస్ ఎసి కర్సస్ కమోడో , టార్టర్ మౌరిస్ కాండిమెంటమ్ నిబ్ , యుట్ ఫెర్మెంటమ్ మాసా జస్టో సిట్ అమెట్ రిసస్. మెసెనాస్ ఫౌసిబస్ మోలిస్ ఇంటర్‌డమ్. నుల్లా విటే ఎలిట్ లిబెరో, ఎ ఫారెట్రా ఆగ్.

గమనిక:<b> HTML5లో ఉపయోగించడం మరియు ట్యాగ్‌లు చేయడం ఇప్పటికీ ఫర్వాలేదు <i>మరియు వాటిని వరుసగా బోల్డ్ మరియు ఇటాలిక్ స్టైల్ చేయాల్సిన అవసరం లేదు (అయితే ఎక్కువ సెమాంటిక్ ఎలిమెంట్ ఉంటే, దాన్ని ఉపయోగించండి). <b>అదనపు ప్రాముఖ్యతను తెలియజేయకుండా పదాలు లేదా పదబంధాలను హైలైట్ చేయడానికి ఉద్దేశించబడింది, అయితే <i>ఇది ఎక్కువగా వాయిస్, సాంకేతిక పదాలు మొదలైన వాటి కోసం.

చిరునామాలు

మూలకం దాని <address>సమీప పూర్వీకుల సంప్రదింపు సమాచారం కోసం లేదా మొత్తం పని కోసం ఉపయోగించబడుతుంది. దీన్ని ఎలా ఉపయోగించవచ్చో ఇక్కడ రెండు ఉదాహరణలు ఉన్నాయి:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
పూర్తి పేరు
[email protected]

గమనిక: కంటెంట్‌ను సరిగ్గా రూపొందించడానికి ప్రతి పంక్తిని <address>తప్పనిసరిగా లైన్-బ్రేక్ ( <br />)తో ముగించాలి లేదా బ్లాక్-లెవల్ ట్యాగ్‌తో (ఉదా, ) చుట్టి ఉండాలి .<p>

సంక్షిప్తాలు

సంక్షిప్తాలు మరియు ఎక్రోనింస్ కోసం, <abbr>ట్యాగ్‌ని ఉపయోగించండి ( HTML5<acronym> లో నిలిపివేయబడింది ). ట్యాగ్‌లో షార్ట్‌హ్యాండ్ ఫారమ్‌ను ఉంచండి మరియు పూర్తి పేరు కోసం శీర్షికను సెట్ చేయండి.

బ్లాక్‌కోట్‌లు

<blockquote> <p> <small>

ఎలా కోట్ చేయాలి

బ్లాక్‌కోట్‌ను చేర్చడానికి, <blockquote>చుట్టుముట్టండి <p>మరియు <small>ట్యాగ్‌లు చేయండి. మీ మూలాన్ని ఉదహరించడానికి మూలకాన్ని ఉపయోగించండి మరియు మీరు దాని ముందు <small>ఎమ్ డాష్‌ని పొందుతారు .&mdash;

లోరెమ్ ఇప్సమ్ డోలర్ సిట్ అమెట్, కాన్సెక్టెచర్ అడిపిసింగ్ ఎలిట్. పూర్ణాంకం పోస్యూరే ఎరట్ ఎ యాంటె వెనెనటిస్ డాపిబస్ పోస్యూరె వెలిట్ ఆల్కేట్.

డా. జూలియస్ హిబ్బర్ట్ 
  1. <blockquote>
  2.   <p> లోరెమ్ ఇప్సమ్ డోలర్ సిట్ అమెట్, కాన్సెక్టెచర్ అడిపిస్సింగ్ ఎలిట్. పూర్ణాంకం పోస్యూరే ఎరట్ ఎ యాంటె వెనెనటిస్ డాపిబస్ పోస్యూరె వెలిట్ ఆల్కేట్. </p>
  3.   <small> డా. జూలియస్ హిబ్బర్ట్ </small>
  4. </blockquote>

జాబితాలు

ఆర్డర్ చేయబడలేదు<ul>

  • లోరెమ్ ఇప్సమ్ డోలర్ సిట్ అమెట్
  • కాన్సెక్టెచర్ అడిపిస్సింగ్ ఎలిట్
  • మాసా వద్ద పూర్ణాంకం మోలెస్టీ లోరెమ్
  • ప్రీటియమ్ నిస్ల్ అలిక్వెట్‌లో సులభతరం
  • నుల్ల వొలుత్పట్ అలికం వెలిట్
    • ఫాసెల్లస్ ఇయాక్యులిస్ నెక్యూ
    • పురస్ సోడల్స్ అల్ట్రిసీస్
    • వెస్టిబులం లారీట్ పోర్టిటర్ సెమ్
    • Ac tristique libero volutpat వద్ద
  • ఫౌసిబస్ పోర్టా లాకస్ ఫ్రింగిల్లా వెల్
  • ఏనేన్ సిట్ ఇప్పుడు ఇప్పుడు ఉంది
  • ఈగెట్ పోర్టిటర్ లోరెం

శైలి లేని<ul.unstyled>

  • లోరెమ్ ఇప్సమ్ డోలర్ సిట్ అమెట్
  • కాన్సెక్టెచర్ అడిపిస్సింగ్ ఎలిట్
  • మాసా వద్ద పూర్ణాంకం మోలెస్టీ లోరెమ్
  • ప్రీటియమ్ నిస్ల్ అలిక్వెట్‌లో సులభతరం
  • నుల్ల వొలుత్పట్ అలికం వెలిట్
    • ఫాసెల్లస్ ఇయాక్యులిస్ నెక్యూ
    • పురస్ సోడల్స్ అల్ట్రిసీస్
    • వెస్టిబులం లారీట్ పోర్టిటర్ సెమ్
    • Ac tristique libero volutpat వద్ద
  • ఫౌసిబస్ పోర్టా లాకస్ ఫ్రింగిల్లా వెల్
  • ఏనేన్ సిట్ ఇప్పుడు ఇప్పుడు ఉంది
  • ఈగెట్ పోర్టిటర్ లోరెం

ఆదేశించారు<ol>

  1. లోరెమ్ ఇప్సమ్ డోలర్ సిట్ అమెట్
  2. కాన్సెక్టెచర్ అడిపిస్సింగ్ ఎలిట్
  3. మాసా వద్ద పూర్ణాంకం మోలెస్టీ లోరెమ్
  4. ప్రీటియమ్ నిస్ల్ అలిక్వెట్‌లో సులభతరం
  5. నుల్ల వొలుత్పట్ అలికం వెలిట్
  6. ఫౌసిబస్ పోర్టా లాకస్ ఫ్రింగిల్లా వెల్
  7. ఏనేన్ సిట్ ఇప్పుడు ఇప్పుడు ఉంది
  8. ఈగెట్ పోర్టిటర్ లోరెం

వివరణdl

వివరణ జాబితాలు
నిబంధనలను నిర్వచించడానికి వివరణ జాబితా సరైనది.
యూయిస్మోడ్
వెస్టిబులమ్ ఐడి లిగులా పోర్టా ఫెలిస్ యూయిస్మోడ్ సెంపర్ ఎగెట్ లాసినియా ఒడియో సెమ్ నెక్ ఎలిట్.
డోనెక్ ఐడి ఎలిట్ నాన్ మై పోర్టా గ్రావిడా ఎట్ ఎగెట్ మెటస్.
Malesuada పోర్టా
ఎటియామ్ పోర్టా సెమ్ మలేసువాడా మాగ్నా మోల్లిస్ యూయిస్మోడ్.

కోడ్

<code> <pre>

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

కోడ్‌ని ప్రదర్శిస్తోంది

కోడ్, బ్లాక్‌లు లేదా ఇన్‌లైన్ స్నిప్పెట్‌లు, సరైన ట్యాగ్‌లో చుట్టడం ద్వారా శైలితో ప్రదర్శించబడతాయి. బహుళ పంక్తులలో విస్తరించి ఉన్న కోడ్ బ్లాక్‌ల కోసం, <pre>మూలకాన్ని ఉపయోగించండి. ఇన్లైన్ కోడ్ కోసం, <code>మూలకాన్ని ఉపయోగించండి.

మూలకం ఫలితం
<code> ఇలాంటి టెక్స్ట్ లైన్‌లో, మీ చుట్టబడిన కోడ్ ఈ >html<మూలకం వలె కనిపిస్తుంది.
<pre> 
<div>
  <h1>శీర్షిక</h1>
  <p>ఇక్కడే ఏదో ఉంది...</p>
</div>

గమనిక: ట్యాగ్‌లలో కోడ్‌ను preవీలైనంత ఎడమవైపుకు దగ్గరగా ఉండేలా చూసుకోండి; ఇది అన్ని ట్యాబ్‌లను రెండర్ చేస్తుంది.
<pre class="prettyprint">

google-code-prettify లైబ్రరీని ఉపయోగించి, మీ కోడ్ బ్లాక్‌లు కొద్దిగా భిన్నమైన దృశ్య శైలిని మరియు ఆటోమేటిక్ సింటాక్స్ హైలైట్‌ని పొందుతాయి.

<div> <h1> శీర్షిక </h1> <p> ఇక్కడే ఏదో ఉంది... </p> </div>

google-code-prettifyని డౌన్‌లోడ్ చేయండి మరియు ఎలా ఉపయోగించాలో రీడ్‌మీని వీక్షించండి.

ఇన్లైన్ లేబుల్స్

<span class="label">

మీ బాడీ టెక్స్ట్‌లోని ఏదైనా పదబంధానికి శ్రద్ధ వహించండి లేదా ఫ్లాగ్ చేయండి.

ఏదైనా లేబుల్ చేయండి

ఆ ఫాన్సీ కొత్తవాటిలో ఒకటి ఎప్పుడైనా కావాలి ! లేదా కోడ్ వ్రాసేటప్పుడు ముఖ్యమైన జెండాలు? బాగా, ఇప్పుడు మీరు వాటిని కలిగి ఉన్నారు. డిఫాల్ట్‌గా చేర్చబడినవి ఇక్కడ ఉన్నాయి:

లేబుల్ ఫలితం
<span class="label">Default</span> డిఫాల్ట్
<span class="label success">New</span> కొత్తది
<span class="label warning">Warning</span> హెచ్చరిక
<span class="label important">Important</span> ముఖ్యమైనది
<span class="label notice">Notice</span> గమనించండి

మీడియా చిత్రాలు మరియు వీడియోలను ప్రదర్శిస్తోంది

మీడియా గ్రిడ్

తక్కువ HTML ఫుట్‌ప్రింట్ మరియు కనిష్ట స్టైల్స్ ఉన్న పేజీలలో విభిన్న పరిమాణాల సూక్ష్మచిత్రాలను ప్రదర్శించండి.

ఉదాహరణ సూక్ష్మచిత్రాలు

లో థంబ్‌నెయిల్‌లు .media-gridఏ పరిమాణంలో అయినా ఉండవచ్చు, కానీ అవి నేరుగా అంతర్నిర్మిత బూట్‌స్ట్రాప్ గ్రిడ్ సిస్టమ్‌కు మ్యాప్ చేయబడినప్పుడు ఉత్తమంగా పని చేస్తాయి. 90, 210 మరియు 330 వంటి చిత్ర వెడల్పులు కొన్ని పిక్సెల్‌ల ప్యాడింగ్‌తో కలిపి .span2, .span4, మరియు .span6నిలువు వరుస పరిమాణాలకు సమానంగా ఉంటాయి.

పెద్దది

మధ్యస్థం

చిన్నది

వాటిని కోడింగ్ చేస్తోంది

మీడియా గ్రిడ్‌లు ఉపయోగించడం సులభం మరియు మార్కప్ వైపు చాలా సులభం. వాటి కొలతలు పూర్తిగా చేర్చబడిన చిత్రాల పరిమాణంపై ఆధారపడి ఉంటాయి.

  1. <ul class = "media-grid" > 
  2.   <li>
  3.     <a href = "#" > 
  4.       <img class = "థంబ్‌నెయిల్" src = "https://placehold.it/330x230" alt = "" >   
  5.     </a>
  6.   </li>
  7.   <li>
  8.     <a href = "#" > 
  9.       <img class = "థంబ్‌నెయిల్" src = "https://placehold.it/330x230" alt = "" >   
  10.     </a>
  11.   </li>
  12. </ul>

పట్టికల కోసం, మీరు ఊహించిన పట్టిక డేటా

బిల్డింగ్ టేబుల్స్

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

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

<thead>సోపానక్రమం <thead>> <tr>> ఉండే విధంగా ఎల్లప్పుడూ మీ నిలువు వరుస శీర్షికలను చుట్టండి <th>.

నిలువు వరుస హెడర్‌ల మాదిరిగానే, మీ పట్టిక యొక్క మొత్తం కంటెంట్‌ను ఒక లో చుట్టి ఉండాలి <tbody>కాబట్టి మీ సోపానక్రమం <tbody>> <tr>> <td>.

ఉదాహరణ: డిఫాల్ట్ పట్టిక శైలులు

చదవడానికి మరియు నిర్మాణాన్ని నిర్వహించడానికి అవసరమైన సరిహద్దులతో మాత్రమే అన్ని పట్టికలు స్వయంచాలకంగా స్టైల్ చేయబడతాయి. అదనపు తరగతులు లేదా లక్షణాలను జోడించాల్సిన అవసరం లేదు.

# మొదటి పేరు చివరి పేరు భాష
1 కొన్ని ఒకటి ఆంగ్ల
2 జో సిక్స్ ప్యాక్ ఆంగ్ల
3 స్తు డెంట్ కోడ్ 
  1. <పట్టిక>
  2.   ...
  3. </table>

ఉదాహరణ: జీబ్రా-చారలు

జీబ్రా-స్ట్రిపింగ్‌ని జోడించడం ద్వారా మీ టేబుల్‌లతో కొంచెం ఫ్యాన్సీని పొందండి—కేవలం .zebra-stripedతరగతిని జోడించండి.

# మొదటి పేరు చివరి పేరు భాష
1 కొన్ని ఒకటి ఆంగ్ల
2 జో సిక్స్ ప్యాక్ ఆంగ్ల
3 స్తు డెంట్ కోడ్

గమనిక: జీబ్రా-స్ట్రిపింగ్ అనేది IE8 మరియు దిగువన ఉన్న పాత బ్రౌజర్‌లకు అందుబాటులో లేని ప్రగతిశీల మెరుగుదల.

  1. <table class = "zebra-striped" > 
  2. ...
  3. </table>

ఉదాహరణ: జీబ్రా-చారల w/ TableSorter.js

మునుపటి ఉదాహరణను తీసుకుంటే, మేము j క్వెరీ మరియు టేబుల్‌సార్టర్ ప్లగ్ఇన్ ద్వారా సార్టింగ్ కార్యాచరణను అందించడం ద్వారా మా పట్టికల ఉపయోగాన్ని మెరుగుపరుస్తాము . క్రమాన్ని మార్చడానికి ఏదైనా నిలువు వరుస హెడర్‌పై క్లిక్ చేయండి.

# మొదటి పేరు చివరి పేరు భాష
2 జో సిక్స్ ప్యాక్ ఆంగ్ల
3 స్తు డెంట్ కోడ్
1 మీ ఒకటి ఆంగ్ల 
  1. <script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
  2. <స్క్రిప్ట్ > 
  3.   $ ( ఫంక్షన్ () { 
  4.     $ ( "టేబుల్#సార్ట్ టేబుల్ ఉదాహరణ" ). టేబుల్‌సార్టర్ ({ sortList : [[ 1 , 0 ]] });  
  5.   });
  6. </script>
  7. <table class = "zebra-striped" > 
  8.   ...
  9. </table>

రూపాలు

డిఫాల్ట్ శైలులు

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

ఉదాహరణ రూపం లెజెండ్
ఇక్కడ కొంత విలువ
సహాయ వచనం యొక్క చిన్న స్నిప్పెట్
ఉదాహరణ రూపం లెజెండ్
@
ఉదాహరణ రూపం లెజెండ్
గమనిక: లేబుల్‌లు చాలా పెద్ద క్లిక్ ఏరియాలు మరియు మరింత ఉపయోగపడే ఫారమ్ కోసం అన్ని ఎంపికలను చుట్టుముట్టాయి.
కు అన్ని సమయాలు పసిఫిక్ ప్రామాణిక సమయం (GMT -08:00)గా చూపబడతాయి.
అవసరమైతే ఎగువ ఫీల్డ్‌ను వివరించడానికి సహాయ వచనాన్ని బ్లాక్ చేయండి.
 

పేర్చబడిన రూపాలు

మీ ఫారమ్ యొక్క HTMLకి జోడించండి .form-stackedమరియు మీరు వారి ఫీల్డ్‌ల ఎడమ వైపుకు బదులుగా వాటి పైన లేబుల్‌లను కలిగి ఉంటారు. మీ ఫారమ్‌లు చిన్నవిగా ఉన్నట్లయితే లేదా మీరు భారీ ఫారమ్‌ల కోసం ఇన్‌పుట్‌ల యొక్క రెండు నిలువు వరుసలను కలిగి ఉంటే ఇది బాగా పని చేస్తుంది.

ఉదాహరణ రూపం లెజెండ్
ఉదాహరణ రూపం లెజెండ్
సహాయ వచనం యొక్క చిన్న స్నిప్పెట్
గమనిక: లేబుల్‌లు చాలా పెద్ద క్లిక్ ఏరియాలు మరియు మరింత ఉపయోగపడే ఫారమ్ కోసం అన్ని ఎంపికలను చుట్టుముట్టాయి.
 

ఫారమ్ ఫీల్డ్ పరిమాణాలు

మీ మార్కప్‌కు కొన్ని తరగతులను జోడించడం ద్వారా ఏదైనా ఫారమ్ input, selectలేదా వెడల్పును అనుకూలీకరించండి.textarea

v1.3.0 నాటికి, మేము ఫారమ్ ఎలిమెంట్స్ కోసం గ్రిడ్-ఆధారిత సైజింగ్ క్లాస్‌లను జోడించాము. దయచేసి ఇప్పటికే ఉన్న .mini, .small, మొదలైన తరగతులపై వీటిని ఉపయోగించండి.

బటన్లు

కన్వెన్షన్‌గా, బటన్‌లు చర్యల కోసం ఉపయోగించబడతాయి, అయితే వస్తువుల కోసం లింక్‌లు ఉపయోగించబడతాయి. ఉదాహరణకు, "డౌన్‌లోడ్" బటన్ కావచ్చు మరియు "ఇటీవలి కార్యాచరణ" లింక్ కావచ్చు.

అన్ని బటన్‌లు లేత బూడిద రంగు శైలికి డిఫాల్ట్‌గా ఉంటాయి, అయితే విభిన్న రంగుల స్టైల్‌ల కోసం అనేక ఫంక్షనల్ తరగతులను వర్తింపజేయవచ్చు. ఈ తరగతులలో నీలం .primaryతరగతి, లేత-నీలం .infoతరగతి, ఆకుపచ్చ .successతరగతి మరియు ఎరుపు .dangerతరగతి ఉన్నాయి.

ఉదాహరణ బటన్లు

బటన్ శైలులు దరఖాస్తుతో దేనికైనా .btnవర్తించవచ్చు. సాధారణంగా మీరు వీటిని <a>, <button>, మరియు ఎంపికకు మాత్రమే వర్తింపజేయాలి<input> ఎలిమెంట్స్‌కు మాత్రమే వర్తింపజేయాలి. ఇది ఎలా కనిపిస్తుందో ఇక్కడ ఉంది:

       

ప్రత్యామ్నాయ పరిమాణాలు

పెద్ద లేదా చిన్న బటన్‌లను ఇష్టపడుతున్నారా? దీన్ని కలిగి ఉండండి!

ప్రాథమిక చర్య చర్య
ప్రాథమిక చర్య చర్య

వికలాంగ స్థితి

సక్రియంగా లేని బటన్‌ల కోసం లేదా ఒక కారణం లేదా మరొక కారణంగా యాప్ ద్వారా నిలిపివేయబడిన బటన్‌ల కోసం, నిలిపివేయబడిన స్థితిని ఉపయోగించండి. అది .disabledలింక్‌లు మరియు మూలకాల :disabledకోసం .<button>

లింకులు

ప్రాథమిక చర్య చర్య

బటన్లు

 

విజయం, హెచ్చరిక మరియు ఎర్రర్ సందేశాలు లేదా హెచ్చరికల కోసం అలర్ట్‌లు & ఎర్రర్‌ల స్టైల్స్

ప్రాథమిక హెచ్చరికలు

.alert-message

ఒక చర్య యొక్క వైఫల్యం, సాధ్యం వైఫల్యం లేదా విజయాన్ని హైలైట్ చేయడానికి ఒక-లైన్ సందేశాలు. ఫారమ్‌లకు ప్రత్యేకంగా ఉపయోగపడుతుంది.

జావాస్క్రిప్ట్ పొందండి »

×

పవిత్ర గ్వాకామోల్! ఉత్తమంగా తనిఖీ చేయండి, మీరు చాలా బాగా కనిపించడం లేదు.

×

ఓహ్ స్నాప్! ఇది మరియు దానిని మార్చండి మరియు మళ్లీ ప్రయత్నించండి.

×

బాగా చేసారు! మీరు ఈ హెచ్చరిక సందేశాన్ని విజయవంతంగా చదివారు.

×

హెడ్ ​​అప్! ఇది మీ దృష్టికి అవసరమైన హెచ్చరిక, కానీ ఇది ఇంకా పెద్ద ప్రాధాన్యత ఇవ్వలేదు.

ఉదాహరణ కోడ్

  1. <div class = "అలర్ట్-మెసేజ్ హెచ్చరిక" > 
  2.   <a class = "close" href = "#" > × </a>  
  3.   <p><strong> పవిత్ర గ్వాకామోల్! </strong> మీరే ఉత్తమంగా తనిఖీ చేయండి, మీరు చాలా బాగా కనిపించడం లేదు. </p>
  4. </div>

సందేశాలను నిరోధించండి

.alert-message.block-message

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

జావాస్క్రిప్ట్ పొందండి »

×

పవిత్ర గ్వాకామోల్! ఇదొక హెచ్చరిక! ఉత్తమంగా తనిఖీ చేయండి, మీరు చాలా బాగా కనిపించడం లేదు. నుల్లా విటే ఎలిట్ లిబెరో, ఎ ఫారెట్రా ఆగ్. ప్రసెంట్ కమోడో కర్సస్ మాగ్నా, వెల్ స్కెలెరిస్క్ నిస్ల్ కన్సెక్టెచర్ ఎట్.

ఈ చర్య తీసుకోండి లేదా ఇలా చేయండి
×

ఓహ్ స్నాప్! మీకు లోపం వచ్చింది! ఇది మరియు దానిని మార్చండి మరియు మళ్లీ ప్రయత్నించండి.

  • డ్యూయిస్ మోలిస్ నాన్ కమోడో లక్టస్
  • నిసి ఎరత్ పోర్టిటర్ లిగులా
  • ఎగెట్ లాసినియా ఒడియో సెమ్ నెక్ ఎలిట్
ఈ చర్య తీసుకోండి లేదా ఇలా చేయండి
×

బాగా చేసారు! మీరు ఈ హెచ్చరిక సందేశాన్ని విజయవంతంగా చదివారు. కమ్ సోసిస్ నాటోక్ పెనాటిబస్ మరియు మాగ్నిస్ డిస్ పార్ట్యురియెంట్ మాంటెస్, నాస్కేటర్ రిడిక్యులస్ మస్. మెసెనాస్ ఫౌసిబస్ మోలిస్ ఇంటర్‌డమ్.

ఈ చర్య తీసుకోండి లేదా ఇలా చేయండి
×

హెడ్ ​​అప్! ఇది మీ దృష్టికి అవసరమైన హెచ్చరిక, కానీ ఇది ఇంకా పెద్ద ప్రాధాన్యత ఇవ్వలేదు.

ఈ చర్య తీసుకోండి లేదా ఇలా చేయండి

ఉదాహరణ కోడ్

  1. <div class = "alert-message block-message warning" > 
  2.   <a class = "close" href = "#" > × </a>  
  3.   <p><strong> పవిత్ర గ్వాకామోల్! ఇదొక హెచ్చరిక! </strong> మీరే ఉత్తమంగా తనిఖీ చేయండి, మీరు చాలా బాగా కనిపించడం లేదు. నుల్లా విటే ఎలిట్ లిబెరో, ఎ ఫారెట్రా ఆగ్. ప్రసెంట్ కమోడో కర్సస్ మాగ్నా, వెల్ స్కెలెరిస్క్ నిస్ల్ కన్సెక్టెచర్ ఎట్. </p>
  4.   <div class = "alert-actions" > 
  5.     <a class = "btn small" href = "#" > ఈ చర్య తీసుకోండి </a> <a class = "btn small" href = "#" > లేదా ఇలా చేయండి </a>     
  6.   </div>
  7. </div>

మోడల్‌లు, టూల్‌టిప్‌లు మరియు పాప్‌ఓవర్‌లలో కంటెంట్‌ని ప్రదర్శించడం కోసం Popovers భాగాలు

మోడల్స్

మోడల్‌లు-డైలాగ్‌లు లేదా లైట్‌బాక్స్‌లు-నేపథ్య సందర్భాన్ని నిర్వహించడం ముఖ్యం అయిన సందర్భాల్లో సందర్భోచిత చర్యలకు గొప్పవి.

జావాస్క్రిప్ట్ పొందండి »

×

మోడల్ హెడ్డింగ్

ఒక చక్కటి శరీరం...

ప్రాథమిక సెకండరీ

ఉపకరణ చిట్కాలు

గందరగోళంలో ఉన్న వినియోగదారుకు సహాయం చేయడానికి మరియు వారిని సరైన దిశలో చూపడానికి ట్విప్సీలు చాలా ఉపయోగకరంగా ఉంటాయి.

జావాస్క్రిప్ట్ పొందండి »

లోరెం ఇప్సమ్ డోలార్ సిట్ అమెట్ ఇల్లో ఎర్రర్ ఇప్సమ్ వెరిటాటిస్ లేదా ఇస్టే పెర్స్పిసియాటిస్ ఇస్ట్ వాల్యూప్టాస్ నాటస్ ఇల్లో క్వసి ఒడిట్ లేదా నేటస్ కాన్సెప్ట్ కాన్సెప్ట్ కాన్సెక్యూన్ట్యువల్, లేదా నేటస్ ఇల్లో వోల్యుప్టేమ్ ఒడిట్ పర్స్పిసియాటిస్ టామ్ డోలోరోమ్టాంటియం.వోలుప్టాస్డిక్ట ఈక్ బీటే అపెరియమ్ యుట్ ఎనిమ్ వాల్యుప్టేటెమ్ ఎక్స్ప్లికాబో ఎక్స్ప్లికాబో, వాల్యూప్టాస్ క్వియా ఓడిట్ ఫుజిట్ అక్సాంటియం టోటమ్ టోటమ్ ఆర్కిటెక్టో ఎక్స్ప్లికాబో సిట్ క్వాసి ఫ్యూగిట్ ఫ్యూగిట్, టోటమ్ డోలోరెంక్యూ ఉండే సన్ట్ సెడ్ డిక్టా వాల్యుప్టేస్ క్వామ్యుట్ వాల్యూప్టేస్ క్వామ్యుట్ వాల్యూప్టేస్ క్వొమోఅప్టాస్ క్వామ్యుట్ వాల్యుప్టేస్ క్వామ్యుట్ వాల్యుప్టేస్ క్వెస్టమ్ క్వొమోగ్విట్ క్వొల్యూట్ క్వొల్యుప్టాస్ .

Popovers

లేఅవుట్‌ను ప్రభావితం చేయకుండా పేజీకి సబ్‌టెక్స్ట్ సమాచారాన్ని అందించడానికి పాపోవర్‌లను ఉపయోగించండి.

జావాస్క్రిప్ట్ పొందండి »

పాప్ ఓవర్ టైటిల్

ఎటియామ్ పోర్టా సెమ్ మలేసువాడా మాగ్నా మోల్లిస్ యూయిస్మోడ్. మెసెనాస్ ఫౌసిబస్ మోలిస్ ఇంటర్‌డమ్. మోర్బి లియో రిసస్, పోర్టా ఎసి కన్సెక్టెచర్ ఎసి, వెస్టిబులం ఎట్ ఎరోస్.

బూట్‌స్ట్రాప్‌తో జావాస్క్రిప్ట్‌ని ఉపయోగించడం మీరు ప్రారంభించడానికి ప్లగిన్‌ల సూచిక

మొదలు అవుతున్న

బూట్‌స్ట్రాప్ లైబ్రరీతో జావాస్క్రిప్ట్‌ని సమగ్రపరచడం చాలా సులభం. దిగువన మేము బేసిక్స్‌ని పరిశీలిస్తాము మరియు మీరు ప్రారంభించడానికి కొన్ని అద్భుతమైన ప్లగిన్‌లను మీకు అందిస్తాము!

జావాస్క్రిప్ట్ పత్రాలను వీక్షించండి »

ఏమి చేర్చబడింది

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

ఫైల్ వివరణ
bootstrap-modal.js మా మోడల్ ప్లగ్ఇన్ సాంప్రదాయ మోడల్ JS ప్లగ్ఇన్‌లో చాలా స్లిమ్ టేక్! ట్విట్టర్‌లో మాకు అవసరమైన బేర్ ఫంక్షనాలిటీని మాత్రమే చేర్చడానికి మేము ప్రత్యేక శ్రద్ధ తీసుకున్నాము.
bootstrap-alerts.js హెచ్చరిక ప్లగ్ఇన్ అనేది హెచ్చరికలకు దగ్గరి కార్యాచరణను జోడించడానికి ఒక అతి చిన్న తరగతి.
bootstrap-dropdown.js ఈ ప్లగ్ఇన్ బూట్‌స్ట్రాప్ టాప్‌బార్ లేదా ట్యాబ్డ్ నావిగేషన్‌లకు డ్రాప్‌డౌన్ ఇంటరాక్షన్‌ని జోడించడం కోసం.
bootstrap-scrollspy.js ScrollSpy ప్లగ్ఇన్ బూట్‌స్ట్రాప్ టాప్‌బార్‌కు స్క్రోల్ పొజిషన్ ఆధారంగా ఆటో అప్‌డేటింగ్ navని జోడించడం.
bootstrap-tabs.js ఈ ప్లగ్ఇన్ స్థానిక కంటెంట్ ద్వారా సైక్లింగ్ కోసం శీఘ్ర, డైనమిక్ ట్యాబ్ మరియు పిల్ కార్యాచరణను జోడిస్తుంది.
bootstrap-twipsy.js జాసన్ ఫ్రేమ్ రాసిన అద్భుతమైన jQuery.tipsy ప్లగ్ఇన్ ఆధారంగా; twipsy అనేది నవీకరించబడిన సంస్కరణ, ఇది చిత్రాలపై ఆధారపడదు, యానిమేషన్‌ల కోసం css3ని మరియు స్థానిక శీర్షిక నిల్వ కోసం డేటా-లక్షణాలను ఉపయోగిస్తుంది!
bootstrap-popover.js పాప్‌ఓవర్ ప్లగ్ఇన్ మీ అప్లికేషన్‌కు పాపోవర్‌లను జోడించడం కోసం సరళమైన ఇంటర్‌ఫేస్‌ను అందిస్తుంది. ఇది boostrap-twipsy.js ప్లగ్‌ఇన్‌ను విస్తరిస్తుంది, కాబట్టి మీ ప్రాజెక్ట్‌లో పాప్‌ఓవర్‌లను చేర్చేటప్పుడు ఆ ఫైల్‌ను తప్పకుండా పట్టుకోండి!

జావాస్క్రిప్ట్ అవసరమా?

లేదు! బూట్‌స్ట్రాప్ మొదటి మరియు అన్నిటికంటే CSS లైబ్రరీగా రూపొందించబడింది. ఈ జావాస్క్రిప్ట్ చేర్చబడిన శైలుల పైన ప్రాథమిక ఇంటరాక్టివ్ లేయర్‌ను అందిస్తుంది.

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

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

వేరియబుల్స్, మిక్సిన్‌లు మరియు ఫంక్షన్‌లతో మీ CSS ని తక్కువ సూపర్‌ఛార్జ్‌తో బూట్‌స్ట్రాప్ ఉపయోగించడం

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

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

దీన్ని ఎలా వాడాలి

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

  1. <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
  2. <script src = "js/less-1.1.3.min.js" ></script>

.js పరిష్కారం అనుభూతి చెందలేదా? మీరు మీ కోడ్‌ని అమలు చేసినప్పుడు కంపైల్ చేయడానికి తక్కువ Mac యాప్‌ని ప్రయత్నించండి లేదా Node.jsని ఉపయోగించండి .

ఏమి చేర్చబడింది

బూట్‌స్ట్రాప్‌లో భాగంగా Twitter బూట్‌స్ట్రాప్‌లో చేర్చబడిన కొన్ని ముఖ్యాంశాలు ఇక్కడ ఉన్నాయి. డౌన్‌లోడ్ చేయడానికి మరియు మరింత తెలుసుకోవడానికి బూట్‌స్ట్రాప్ వెబ్‌సైట్ లేదా గితుబ్ ప్రాజెక్ట్ పేజీకి వెళ్లండి.

వేరియబుల్స్

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

  1. // లింకులు
  2. @linkColor : #8b59c2;         
  3. @linkColorHover :     డార్క్ ( @linkColor , 10 ); 
  4.  
  5. // గ్రేస్
  6. @నలుపు : #000;             
  7. @గ్రేడార్క్ :           కాంతివంతం ( @బ్లాక్ , 25 %); 
  8. @బూడిద రంగు :               కాంతివంతం ( @నలుపు , 50 %); 
  9. @గ్రేలైట్ :          కాంతివంతం ( @బ్లాక్ , 70 %); 
  10. @grayLighter :        కాంతివంతం ( @బ్లాక్ , 90 %); 
  11. @తెలుపు : #fff;             
  12.  
  13. // యాస రంగులు
  14. @నీలం : # 08b5fb ;              
  15. @ఆకుపచ్చ : # 46a546 ;             
  16. @ఎరుపు : # 9d261d ;               
  17. @పసుపు : # ffc40d ;            
  18. @ఆరెంజ్ : # f89406 ;            
  19. @పింక్ : # c3325f ;              
  20. @పర్పుల్ : # 7a43b6 ;            
  21.  
  22. // బేస్‌లైన్ గ్రిడ్
  23. @basefont : 13px ;          
  24. @బేస్లైన్ : 18px ;

వ్యాఖ్యానిస్తున్నారు

/* ... */CSS యొక్క సాధారణ సింటాక్స్‌తో పాటు వ్యాఖ్యానించే మరొక శైలిని కూడా తక్కువ అందిస్తుంది .

  1. // ఇది ఒక వ్యాఖ్య
  2. /* ఇది కూడా వ్యాఖ్యే */

వాజూను మిక్స్ చేస్తుంది

మిక్సిన్‌లు ప్రాథమికంగా CSS కోసం కలిగి ఉంటాయి లేదా పాక్షికంగా ఉంటాయి, ఇది కోడ్ బ్లాక్‌ను ఒకటిగా కలపడానికి మిమ్మల్ని అనుమతిస్తుంది. వంటి వెండర్ ప్రిఫిక్స్డ్ ప్రాపర్టీలకు అవి గొప్పవిbox-shadow, క్రాస్-బ్రౌజర్ గ్రేడియంట్లు, ఫాంట్ స్టాక్‌లు మరియు మరిన్నింటిబూట్‌స్ట్రాప్‌తో చేర్చబడిన మిక్సిన్‌ల నమూనా క్రింద ఉంది.

ఫాంట్ స్టాక్‌లు

  1. #ఫాంట్ {
  2.   . షార్ట్‌హ్యాండ్ ( @బరువు : సాధారణం , @ పరిమాణం : 14px , @lineHeight : 20px ) {     
  3.     font - size : @size ; 
  4.     ఫాంట్ - బరువు : @ బరువు ; 
  5.     లైన్ - ఎత్తు : @lineHeight ; 
  6.   }
  7.   . sans - serif ( @బరువు : సాధారణం , @ పరిమాణం : 14px , @lineHeight : 20px ) {     
  8.     font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
  9.     font - size : @size ; 
  10.     ఫాంట్ - బరువు : @ బరువు ; 
  11.     లైన్ - ఎత్తు : @lineHeight ; 
  12.   }
  13.   ...
  14. }

ప్రవణతలు

  1. #ప్రవణత {
  2.   ...
  3.   . నిలువు ( @startColor : #555, @endColor: #333) { 
  4.     నేపథ్య రంగు : @endColor ; _ 
  5.     నేపథ్య - పునరావృతం : పునరావృతం - x ;
  6.     నేపథ్యం - చిత్రం : - khtml - ప్రవణత ( రేఖీయ , ఎడమ ఎగువ , ఎడమ దిగువ , నుండి ( @startColor ), వరకు ( @endColor )); // కాంకరర్   
  7.     నేపథ్యం - చిత్రం : - moz - సరళ - ప్రవణత ( @startColor , @endColor ); // FF 3.6+   
  8.     నేపథ్యం - చిత్రం : - ms - లీనియర్ - గ్రేడియంట్ ( @startColor , @endColor ); // IE10   
  9.     బ్యాక్ గ్రౌండ్ - ఇమేజ్ : - వెబ్‌కిట్ - గ్రేడియంట్ ( లీనియర్ , లెఫ్ట్ టాప్ , లెఫ్ట్ బాటమ్ , కలర్ - స్టాప్ ( 0 %, @ స్టార్ట్ కలర్ ), కలర్ - స్టాప్ ( 100 %, @ ఎండ్ కలర్ )); // Safari 4+, Chrome 2+    
  10.     నేపథ్యం - చిత్రం : - వెబ్‌కిట్ - లీనియర్ - గ్రేడియంట్ ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
  11.     నేపథ్యం - చిత్రం : - o - లీనియర్ - గ్రేడియంట్ ( @startColor , @endColor ); // Opera 11.10   
  12.     నేపథ్యం - చిత్రం : లీనియర్ - గ్రేడియంట్ ( @startColor , @endColor ); // ప్రమాణం  
  13.   }
  14.   ...
  15. }

కార్యకలాపాలు

ఫాన్సీ పొందండి మరియు దిగువన ఉన్నటువంటి సౌకర్యవంతమైన మరియు శక్తివంతమైన మిక్సిన్‌లను రూపొందించడానికి కొంత గణితాన్ని చేయండి.

  1. // గ్రిడిట్యూడ్
  2. @గ్రిడ్ కాలమ్‌లు : 16 ;       
  3. @gridColumnWidth : 40px ;   
  4. @gridGutterWidth : 20px ;   
  5. @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
  6.  
  7. // కొన్ని నిలువు వరుసలను రూపొందించండి
  8. . నిలువు వరుసలు ( @columnSpan : 1 ) {  
  9.   వెడల్పు : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  10. }

తక్కువ కంపైల్ చేస్తోంది

/lib/ లో ఫైల్‌లను సవరించిన తర్వాత .less, బూట్‌స్ట్రాప్-*.*.*.css మరియు బూట్‌స్ట్రాప్-*.*.*.min.css ఫైల్‌లను రీజెనరేట్ చేయడానికి మీరు వాటిని మళ్లీ కంపైల్ చేయాలి. మీరు GitHubకి పుల్ అభ్యర్థనను సమర్పిస్తున్నట్లయితే, మీరు ఎల్లప్పుడూ తిరిగి కంపైల్ చేయాలి.

కంపైల్ చేయడానికి మార్గాలు

పద్ధతి దశలు
మేక్‌ఫైల్‌తో నోడ్

కింది ఆదేశాన్ని అమలు చేయడం ద్వారా తక్కువ కమాండ్ లైన్ కంపైలర్‌ను npmతో ఇన్‌స్టాల్ చేయండి:

$ npm ఇన్స్టాల్ lessc

ఇన్‌స్టాల్ చేసిన తర్వాత makeమీ బూట్‌స్ట్రాప్ డైరెక్టరీ యొక్క రూట్ నుండి అమలు చేయండి మరియు మీరు అంతా సిద్ధంగా ఉన్నారు.

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

తాజా Les.jsని డౌన్‌లోడ్ చేయండి మరియు దానికి మార్గాన్ని (మరియు బూట్‌స్ట్రాప్) చేర్చండి head.

  1. <link rel = "stylesheet/less" href = "/path/to/bootstrap.less" >  
  2. <script src = "/path/to/less.js" ></script>

.less ఫైల్‌లను మళ్లీ కంపైల్ చేయడానికి, వాటిని సేవ్ చేసి, మీ పేజీని మళ్లీ లోడ్ చేయండి. Less.js వాటిని కంపైల్ చేస్తుంది మరియు వాటిని స్థానిక నిల్వలో నిల్వ చేస్తుంది.
కమాండ్ లైన్

మీరు ఇప్పటికే తక్కువ కమాండ్ లైన్ సాధనాన్ని ఇన్‌స్టాల్ చేసి ఉంటే, కింది ఆదేశాన్ని అమలు చేయండి:

$lessc ./lib/bootstrap.less > bootstrap.css

--compressమీరు కొన్ని బైట్‌లను సేవ్ చేయడానికి ప్రయత్నిస్తున్నట్లయితే, ఆ ఆదేశంలో చేర్చాలని నిర్ధారించుకోండి !
తక్కువ Mac యాప్

అనధికారిక Mac యాప్ .less ఫైల్‌ల డైరెక్టరీలను చూస్తుంది మరియు చూసిన .less ఫైల్‌ని ప్రతి సేవ్ చేసిన తర్వాత కోడ్‌ను స్థానిక ఫైల్‌లకు కంపైల్ చేస్తుంది.

మీరు కావాలనుకుంటే, ఆటోమేటిక్ మినిఫైయింగ్ కోసం యాప్‌లో ప్రాధాన్యతలను టోగుల్ చేయవచ్చు మరియు కంపైల్ చేసిన ఫైల్‌లు ఏ డైరెక్టరీలో ముగుస్తాయి.