చరిత్ర

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

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

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

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

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

• తాజా సఫారి
• తాజా Google Chrome
• Firefox 4+
• ఇంటర్నెట్ ఎక్స్‌ప్లోరర్ 7+

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

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

• అన్ని ఒరిజినల్ .లెస్ ఫైల్‌లు
• CSS పూర్తిగా కంపైల్ చేయబడింది మరియు కనిష్టీకరించబడింది
• పూర్తి స్టైల్‌గైడ్ డాక్యుమెంటేషన్
• ఉదాహరణ పేజీ టెంప్లేట్ (మరిన్ని త్వరలో వస్తాయి)

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

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

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

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

<div class = "row" > 
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns"  >
    ...
  </div>
</div>

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

ఏదైనా సైట్ లేదా పేజీ కోసం ప్రాథమిక 940px వెడల్పు, కేంద్రీకృత కంటైనర్ లేఅవుట్.

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

ద్రవ లేఅవుట్

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

<బాడీ>
  <div class = "container-fluid" > 
    <div class = "సైడ్‌బార్" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

శీర్షికలు మరియు కాపీ

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

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

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

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

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

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

<blockquote> <p> <small>

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

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

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

డా. జూలియస్ హిబ్బర్ట్

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

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

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

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

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

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

వివరణdl

వివరణ జాబితాలు

నిబంధనలను నిర్వచించడానికి వివరణ జాబితా సరైనది.

యూయిస్మోడ్

వెస్టిబులమ్ ఐడి లిగులా పోర్టా ఫెలిస్ యూయిస్మోడ్ సెంపర్ ఎగెట్ లాసినియా ఒడియో సెమ్ నెక్ ఎలిట్.

డోనెక్ ఐడి ఎలిట్ నాన్ మై పోర్టా గ్రావిడా ఎట్ ఎగెట్ మెటస్.

Malesuada పోర్టా

ఎటియామ్ పోర్టా సెమ్ మలేసువాడా మాగ్నా మోల్లిస్ యూయిస్మోడ్.

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

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

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

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

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

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

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

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

<table class = "common-table" > 
  ...
</table>

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

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

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

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

<table class = "common-table zebra-striped" > 
...
</table>

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

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

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

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<స్క్రిప్ట్ > 
  $ ( ఫంక్షన్ () { 
    $ ( "టేబుల్#సార్ట్ టేబుల్ ఉదాహరణ" ). టేబుల్‌సార్టర్ ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "common-table zebra-striped" > 
  ...
</table>

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

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

ఉదాహరణ రూపం లెజెండ్

X-పెద్ద ఇన్‌పుట్

ఎంచుకోండి

1 2 3 4 5

ఎంచుకోండి

1 2 3 4 5

సవరించలేని ఇన్‌పుట్

ఇక్కడ కొంత విలువ

డిసేబుల్ ఇన్‌పుట్

X-పెద్ద ఇన్‌పుట్

సహాయ వచనం యొక్క చిన్న స్నిప్పెట్

ఉదాహరణ రూపం లెజెండ్

సిద్ధం చేసిన వచనం

@

ముందస్తు చెక్‌బాక్స్

జోడించబడిన చెక్‌బాక్స్

ఫైల్ ఇన్‌పుట్

ఉదాహరణ రూపం లెజెండ్

ఎంపికల జాబితా

• ఎంపిక ఒకటి ఇది మరియు అది-ఇది ఎందుకు గొప్పదో చేర్చండి
• ఎంపిక రెండు కూడా తనిఖీ చేయవచ్చు మరియు ఫారమ్ ఫలితాల్లో చేర్చబడుతుంది
• ఎంపిక మూడు చేయవచ్చు-అవును, మీరు ఊహించినది-కూడా తనిఖీ చేయబడి, ఫారమ్ ఫలితాల్లో చేర్చబడుతుంది
• ఎంపిక నాలుగు నిలిపివేయబడినందున దాన్ని తనిఖీ చేయడం సాధ్యపడదు.

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

తేదీ పరిధి

కు అన్ని సమయాలు పసిఫిక్ ప్రామాణిక సమయం (GMT -08:00)గా చూపబడతాయి.

టెక్స్టారియా

అవసరమైతే ఎగువ ఫీల్డ్‌ను వివరించడానికి సహాయ వచనాన్ని బ్లాక్ చేయండి.

ఎంపికల జాబితా

• ఎంపిక ఒకటి ఇది మరియు అది-ఇది ఎందుకు గొప్పదో చేర్చండి
• ఎంపిక రెండు కూడా తనిఖీ చేయవచ్చు మరియు ఫారమ్ ఫలితాల్లో చేర్చబడుతుంది

మార్పులను ఊంచు  రద్దు చేయండి

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

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

ఉదాహరణ రూపం లెజెండ్

X-పెద్ద ఇన్‌పుట్

ఎంచుకోండి

1 2 3 4 5

ఉదాహరణ రూపం లెజెండ్

X-పెద్ద ఇన్‌పుట్

సహాయ వచనం యొక్క చిన్న స్నిప్పెట్

ఎంపికల జాబితా

• ఎంపిక ఒకటి ఇది మరియు అది-ఇది ఎందుకు గొప్పదో చేర్చండి
• ఎంపిక రెండు కూడా తనిఖీ చేయవచ్చు మరియు ఫారమ్ ఫలితాల్లో చేర్చబడుతుంది

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

మార్పులను ఊంచు  రద్దు చేయండి

బటన్లు

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

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

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

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

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

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

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

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

లింకులు

బటన్లు

అది ఏమిటి

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

అనుకూలీకరించదగినది

లోపల ఉన్న అన్ని అంశాలు మరియు మొత్తం టాప్‌బార్ కూడా ఐచ్ఛికం. మీరు లోగో/పేరు, nav, శోధన మరియు సెకండరీ nav లేదా ఏదైనా కలయికను చేర్చడాన్ని ఎంచుకోవచ్చు.

డ్రాప్‌డౌన్‌లు చేర్చబడ్డాయి

ప్రధాన నావిగేషన్‌లో భాగంగా, మీ నావికి డ్రాప్‌డౌన్‌లను జోడించే సామర్థ్యాన్ని మేము చేర్చాము. ఇది ఎలా జరిగిందో చూడటానికి ఎగువ (కుడివైపు సమలేఖనం చేయబడింది) ద్వితీయ నావిని తనిఖీ చేయండి.

ట్యాబ్‌లు మరియు మాత్రలు

తో సరళమైన ద్వితీయ నావిగేషన్‌ని సృష్టించండి <ul>. తగిన తరగతిని జోడించడం ద్వారా ట్యాబ్‌లు లేదా మాత్రల మధ్య మారండి.

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

• హోమ్
• ప్రొఫైల్
• సందేశాలు
• సెట్టింగ్‌లు
• సంప్రదించండి

<ul class = "tabs" > 
  <li class = "యాక్టివ్" ><a href = "#" > హోమ్ </a></li>  
  <li><a href = "#" > ప్రొఫైల్ </a></li> 
  <li><a href = "#" > సందేశాలు </a></li> 
  <li><a href = "#" > సెట్టింగ్‌లు </a></li> 
  <li><a href = "#" > సంప్రదించండి </a></li> 
</ul>

• హోమ్
• ప్రొఫైల్
• సందేశాలు
• సెట్టింగ్‌లు
• సంప్రదించండి

<ul class = "మాత్రలు" > 
  <li class = "యాక్టివ్" ><a href = "#" > హోమ్ </a></li>  
  <li><a href = "#" > ప్రొఫైల్ </a></li> 
  <li><a href = "#" > సందేశాలు </a></li> 
  <li><a href = "#" > సెట్టింగ్‌లు </a></li> 
  <li><a href = "#" > సంప్రదించండి </a></li> 
</ul>

పేజినేషన్

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

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← మునుపటి </a></li>  
    <li class = "యాక్టివ్" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "తదుపరి" ><a href = "#" > తదుపరి → </a></li>  
  </ul>
</div>

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

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

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

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

మోడల్స్

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

సాధన చిట్కాలు

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

Popovers

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

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

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

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

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

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

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

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

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

రంగు వేరియబుల్స్

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

// లింకులు
@linkColor : #8b59c2;         
@linkColorHover :     డార్క్ ( @linkColor , 10 ); 
 
// గ్రేస్
@నలుపు : #000;             
@గ్రేడార్క్ :           కాంతివంతం ( @బ్లాక్ , 25 %); 
@బూడిద రంగు :               కాంతివంతం ( @నలుపు , 50 %); 
@గ్రేలైట్ :          కాంతివంతం ( @బ్లాక్ , 70 %); 
@grayLighter :        కాంతివంతం ( @బ్లాక్ , 90 %); 
@తెలుపు : #fff;             
 
// యాస రంగులు
@నీలం : # 08b5fb ;              
@ఆకుపచ్చ : # 46a546 ;             
@ఎరుపు : # 9d261d ;               
@పసుపు : # ffc40d ;            
@ఆరెంజ్ : # f89406 ;            
@పింక్ : # c3325f ;              
@పర్పుల్ : # 7a43b6 ;            
 
// బేస్లైన్
@బేస్లైన్ : 20px ;          

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

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

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

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

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

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

#ఫాంట్ {
  . షార్ట్‌హ్యాండ్ ( @బరువు : సాధారణం , @ పరిమాణం : 14px , @lineHeight : 20px ) {     
    font - size : @size ; 
    ఫాంట్ - బరువు : @ బరువు ; 
    లైన్ - ఎత్తు : @lineHeight ; 
  }
  . sans - serif ( @బరువు : సాధారణం , @ పరిమాణం : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - size : @size ; 
    ఫాంట్ - బరువు : @ బరువు ; 
    లైన్ - ఎత్తు : @lineHeight ; 
  }
  . serif ( @బరువు : సాధారణం , @ పరిమాణం : 14px , @lineHeight : 20px ) {     
    ఫాంట్ - కుటుంబం : "జార్జియా" , టైమ్స్ న్యూ రోమన్ , టైమ్స్ , సాన్స్ - సెరిఫ్ ;     
    font - size : @size ; 
    ఫాంట్ - బరువు : @ బరువు ; 
    లైన్ - ఎత్తు : @lineHeight ; 
  }
  . మోనోస్పేస్ ( @బరువు : సాధారణం , @ పరిమాణం : 12px , @lineHeight : 20px ) {     
    ఫాంట్ - కుటుంబం : "మొనాకో" , కొరియర్ న్యూ , మోనోస్పేస్ ;   
    font - size : @size ; 
    ఫాంట్ - బరువు : @ బరువు ; 
    లైన్ - ఎత్తు : @lineHeight ; 
  }
}

ప్రవణతలు

#ప్రవణత {
  . క్షితిజసమాంతర ( @startColor : #555, @endColor: #333) { 
    నేపథ్య రంగు : @endColor ; _ 
    నేపథ్య - పునరావృతం : పునరావృతం - x ;
    నేపథ్యం - చిత్రం : - khtml - ప్రవణత ( రేఖీయ , ఎడమ ఎగువ , కుడి ఎగువ , నుండి ( @startColor ), వరకు ( @endColor )); // కాంకరర్   
    నేపథ్యం - చిత్రం : - moz - లీనియర్ - గ్రేడియంట్ ( ఎడమవైపు , @startColor , @endColor ); // FF 3.6+    
    నేపథ్యం - చిత్రం : - ms - లీనియర్ - గ్రేడియంట్ ( ఎడమవైపు , @startColor , @endColor ); // IE10    
    బ్యాక్ గ్రౌండ్ - ఇమేజ్ : - వెబ్‌కిట్ - గ్రేడియంట్ ( లీనియర్ , లెఫ్ట్ టాప్ , రైట్ టాప్ , కలర్ - స్టాప్ ( 0 %, @ స్టార్ట్ కలర్ ), కలర్ - స్టాప్ ( 100 %, @ ఎండ్ కలర్ )); // Safari 4+, Chrome 2+    
    నేపథ్యం - చిత్రం : - వెబ్‌కిట్ - లీనియర్ - గ్రేడియంట్ ( ఎడమవైపు , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    నేపథ్యం - చిత్రం : - o - లీనియర్ - గ్రేడియంట్ ( ఎడమవైపు , @startColor , @endColor ); // Opera 11.10    
    - ms - వడపోత : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    వడపోత : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    నేపథ్యం - చిత్రం : లీనియర్ - గ్రేడియంట్ ( ఎడమవైపు , @startColor , @endColor ); // లే స్టాండర్డ్   
  }
  . నిలువు ( @startColor : #555, @endColor: #333) { 
    నేపథ్య రంగు : @endColor ; _ 
    నేపథ్య - పునరావృతం : పునరావృతం - x ;
    నేపథ్యం - చిత్రం : - khtml - ప్రవణత ( రేఖీయ , ఎడమ ఎగువ , ఎడమ దిగువ , నుండి ( @startColor ), వరకు ( @endColor )); // కాంకరర్   
    నేపథ్యం - చిత్రం : - moz - సరళ - ప్రవణత ( @startColor , @endColor ); // FF 3.6+   
    నేపథ్యం - చిత్రం : - ms - లీనియర్ - గ్రేడియంట్ ( @startColor , @endColor ); // IE10   
    బ్యాక్ గ్రౌండ్ - ఇమేజ్ : - వెబ్‌కిట్ - గ్రేడియంట్ ( లీనియర్ , లెఫ్ట్ టాప్ , లెఫ్ట్ బాటమ్ , కలర్ - స్టాప్ ( 0 %, @ స్టార్ట్ కలర్ ), కలర్ - స్టాప్ ( 100 %, @ ఎండ్ కలర్ )); // Safari 4+, Chrome 2+    
    నేపథ్యం - చిత్రం : - వెబ్‌కిట్ - లీనియర్ - గ్రేడియంట్ ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    నేపథ్యం - చిత్రం : - o - లీనియర్ - గ్రేడియంట్ ( @startColor , @endColor ); // Opera 11.10   
    - ms - వడపోత : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    వడపోత : ఇ (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    నేపథ్యం - చిత్రం : లీనియర్ - గ్రేడియంట్ ( @startColor , @endColor ); // ప్రమాణం  
  }
  . దిశాత్మకం ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . నిలువు - మూడు - రంగులు ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

కార్యకలాపాలు మరియు గ్రిడ్ వ్యవస్థ

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

// గ్రిడిట్యూడ్
@గ్రిడ్ కాలమ్‌లు : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// గ్రిడ్ సిస్టమ్
. కంటైనర్ {
  వెడల్పు : @siteWidth ; 
  మార్జిన్ : 0 ఆటో ;  
  . clearfix ();
}
. నిలువు వరుసలు ( @columnSpan : 1 ) {  
  ప్రదర్శన : ఇన్లైన్ ; 
  ఫ్లోట్ : ఎడమ ;
  వెడల్పు : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  మార్జిన్ - ఎడమ : @gridGutterWidth ; 
  &: మొదటి - బిడ్డ {
    మార్జిన్ - ఎడమ : 0 ; 
  }
}
. ఆఫ్‌సెట్ ( @columnOffset : 1 ) {  
  మార్జిన్ - ఎడమవైపు : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! ముఖ్యమైన ;          
}