శీర్షికలు

అన్ని HTML శీర్షికలు అందుబాటులో ఉన్నాయి <h1>.<h6>

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

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

h3. శీర్షిక 3

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

h5. హెడ్డింగ్ 5

h6. శీర్షిక 6

బాడీ కాపీ

బూట్‌స్ట్రాప్ యొక్క గ్లోబల్ డిఫాల్ట్ 20pxfont-size తో 14pxline-height . ఇది అన్ని పేరాగ్రాఫ్‌లకు వర్తించబడుతుంది . అదనంగా, (పేరాగ్రాఫ్‌లు) వాటి పంక్తి-ఎత్తులో సగం దిగువ మార్జిన్‌ను పొందుతాయి (డిఫాల్ట్‌గా 10px).<body><p>

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

కమ్ సోసిస్ నాటోక్ పెనాటిబస్ మరియు మాగ్నిస్ డిస్ పార్ట్యురియెంట్ మాంటెస్, నాస్కేటర్ రిడిక్యులస్ మస్. డోనెక్ ఉల్లమ్‌కార్పర్ నుల్లా నాన్ మెటస్ ఆక్టర్ ఫ్రింగిల్లా. డ్యూయిస్ మోల్లిస్, ఈస్ట్ నాన్ కమోడో లూక్టస్, నిసి ఎరట్ పోర్టిటర్ లిగులా, ఎగెట్ లాసినియా ఒడియో సెమ్ నెక్ ఎలిట్. డోనెక్ ఉల్లమ్‌కార్పర్ నుల్లా నాన్ మెటస్ ఆక్టర్ ఫ్రింగిల్లా.

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

<p> ... </p>

లీడ్ బాడీ కాపీ

జోడించడం ద్వారా పేరాను ప్రత్యేకంగా కనిపించేలా చేయండి .lead.

వివామస్ సాగిటిస్ లాకస్ వెల్ ఆగ్ లారీట్ రూట్రం ఫౌసిబస్ డోలర్ ఆక్టర్. డ్యూయిస్ మోలిస్, నాన్ కమోడో లక్టస్.

<p class = "lead" > ... </p>

తక్కువతో నిర్మించారు

టైపోగ్రాఫిక్ స్కేల్ వేరియబుల్స్‌లో రెండు తక్కువ వేరియబుల్స్‌పై ఆధారపడి ఉంటుంది. less : @baseFontSizeమరియు @baseLineHeight. మొదటిది అంతటా ఉపయోగించే బేస్ ఫాంట్-పరిమాణం మరియు రెండవది బేస్ లైన్-ఎత్తు. మేము ఆ వేరియబుల్స్ మరియు కొన్ని సాధారణ గణితాన్ని ఉపయోగించి మా అన్ని రకాలైన మార్జిన్‌లు, ప్యాడింగ్‌లు మరియు లైన్-ఎత్తులు మరియు మరిన్నింటిని సృష్టించాము. వాటిని అనుకూలీకరించండి మరియు బూట్‌స్ట్రాప్ అనుకూలిస్తుంది.

ఉద్ఘాటన

తేలికైన స్టైల్‌లతో HTML యొక్క డిఫాల్ట్ ఉద్ఘాటన ట్యాగ్‌లను ఉపయోగించుకోండి.

`<small>`

ఇన్‌లైన్ లేదా టెక్స్ట్ బ్లాక్‌లను నొక్కిచెప్పడం కోసం , చిన్న ట్యాగ్‌ని ఉపయోగించండి.

ఈ టెక్స్ట్ లైన్ ఫైన్ ప్రింట్‌గా పరిగణించబడుతుంది.

<p> <small> ఈ టెక్స్ట్ లైన్ ఫైన్ ప్రింట్‌గా పరిగణించబడుతుంది. </small> </p>

బోల్డ్

భారీ ఫాంట్ బరువుతో టెక్స్ట్ యొక్క స్నిప్పెట్‌ను నొక్కి చెప్పడం కోసం.

కింది టెక్స్ట్ స్నిప్పెట్ బోల్డ్ టెక్స్ట్‌గా రెండర్ చేయబడింది .

<strong> బోల్డ్ టెక్స్ట్‌గా రెండర్ చేయబడింది </strong>

ఇటాలిక్స్

ఇటాలిక్‌లతో కూడిన వచన స్నిప్పెట్‌ను నొక్కి చెప్పడం కోసం.

కింది టెక్స్ట్ స్నిప్పెట్ ఇటాలిక్ టెక్స్ట్‌గా రెండర్ చేయబడింది .

<em> ఇటాలిక్ వచనం </em> గా రెండర్ చేయబడింది

హెడ్ అప్!HTML5లో <b>ఉపయోగించడానికి సంకోచించకండి . వాయిస్, సాంకేతిక పదాలు మొదలైన వాటికి అదనపు ప్రాముఖ్యత లేకుండా పదాలు లేదా పదబంధాలను హైలైట్ చేయడానికి ఉద్దేశించబడింది .<i><b><i>

అమరిక తరగతులు

వచన సమలేఖన తరగతులతో భాగాలకు వచనాన్ని సులభంగా మార్చండి.

ఎడమకు సమలేఖనం చేయబడిన వచనం.

వచనం మధ్యకు సమలేఖనం చేయబడింది.

కుడికి సమలేఖనం చేయబడిన వచనం.

<p class = "text-left" > ఎడమకు సమలేఖనం చేయబడిన వచనం. </p> 
<p class = "text-center" > మధ్యకు సమలేఖనం చేయబడిన వచనం. </p> 
<p class = "text-right" > కుడికి సమలేఖనం చేయబడిన వచనం. </p>

ఉద్ఘాటన తరగతులు

కొన్ని ఉద్ఘాటన వినియోగ తరగతులతో రంగు ద్వారా అర్థాన్ని తెలియజేయండి.

ఫ్యూస్ డాపిబస్, టెల్లస్ ఎసి కర్సస్ కమోడో, టార్టర్ మౌరిస్ నిబ్.

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

డోనెక్ ఉల్లమ్‌కార్పర్ నుల్లా నాన్ మెటస్ ఆక్టర్ ఫ్రింగిల్లా.

ఎనేయన్ ఇయు లియో క్వామ్. పెల్లెంటెస్క్ ఓర్నారే సెమ్ లాసినియా క్వామ్ వెనెనటిస్.

డ్యూయిస్ మోలిస్, నాన్ కమోడో లక్టస్, నిసి ఎరట్ పోర్టిటర్ లిగులా.

<p class = "మ్యూట్ చేయబడింది" > ఫ్యూస్ డాపిబస్, టెల్లస్ ఎసి కర్సస్ కమోడో, టార్టర్ మారిస్ నిబ్. </p> 
<p class = "text-warning" > Etiam porta sem malesuada Magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus aactor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. పెల్లెంటెస్క్ ఓర్నారే సెమ్ లాసినియా క్వామ్ వెనెనటిస్. </p> 
<p class = "text-success" > Duis mollis, ఈస్ట్ నాన్ కమోడో లక్టస్, నిసి ఎరట్ పోర్టిటర్ లిగులా. </p>

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

<abbr>హోవర్‌లో విస్తరించిన సంస్కరణను చూపించడానికి సంక్షిప్తాలు మరియు ఎక్రోనింస్ కోసం HTML మూలకం యొక్క శైలీకృత అమలు . లక్షణంతో కూడిన సంక్షిప్తాలు titleతేలికపాటి చుక్కల దిగువ అంచుని మరియు హోవర్‌లో సహాయక కర్సర్‌ను కలిగి ఉంటాయి, ఇది హోవర్‌లో అదనపు సందర్భాన్ని అందిస్తుంది.

`<abbr>`

సంక్షిప్తీకరణ యొక్క లాంగ్ హోవర్‌లో విస్తరించిన వచనం కోసం, titleలక్షణాన్ని చేర్చండి.

లక్షణం అనే పదం యొక్క సంక్షిప్తీకరణ attr .

<abbr title = "attribute" > attr </abbr>

`<abbr class="initialism">`

.initialismకొంచెం చిన్న ఫాంట్-సైజ్ కోసం సంక్షిప్తీకరణకు జోడించండి .

స్లైస్డ్ బ్రెడ్ నుండి HTML ఉత్తమమైనది.

<abbr title = "హైపర్‌టెక్స్ట్ మార్కప్ లాంగ్వేజ్" class = "initialism" > HTML </abbr>

చిరునామాలు

సమీప పూర్వీకులు లేదా మొత్తం పని సంస్థ కోసం సంప్రదింపు సమాచారాన్ని అందించండి.

`<address>`

తో అన్ని పంక్తులను ముగించడం ద్వారా ఫార్మాటింగ్‌ను సంరక్షించండి <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

పూర్తి పేరు
[email protected]

<చిరునామా>
  <strong> Twitter, Inc. </strong><br>
  795 ఫోల్సమ్ ఏవ్, సూట్ 600 <br>
  శాన్ ఫ్రాన్సిస్కో, CA 94107 <br>
  <abbr title = "ఫోన్" > P: </abbr> (123) 456-7890 
</address>
 
<చిరునామా>
  <strong> పూర్తి పేరు </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</address>

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

మీ డాక్యుమెంట్‌లోని మరొక మూలం నుండి కంటెంట్ బ్లాక్‌లను కోట్ చేయడం కోసం.

డిఫాల్ట్ బ్లాక్‌కోట్

కోట్‌గా <blockquote>ఏదైనా HTML చుట్టూ చుట్టండి. సూటి కోట్‌ల కోసం మేము ఒక సిఫార్సు చేస్తున్నాము <p>.

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

<blockquote>
  <p> లోరెమ్ ఇప్సమ్ డోలర్ సిట్ అమెట్, కాన్సెక్టెచర్ అడిపిస్సింగ్ ఎలిట్. పూర్ణాంకం మరియు పూర్వం. </p>
</blockquote>

బ్లాక్‌కోట్ ఎంపికలు

ప్రామాణిక బ్లాక్‌కోట్‌లో సాధారణ వైవిధ్యాల కోసం శైలి మరియు కంటెంట్ మార్పులు.

మూలానికి పేరు పెట్టడం

<small>మూలాన్ని గుర్తించడం కోసం ట్యాగ్‌ని జోడించండి . సోర్స్ వర్క్ పేరును లో వ్రాప్ చేయండి <cite>.

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

<blockquote>
  <p> లోరెమ్ ఇప్సమ్ డోలర్ సిట్ అమెట్, కాన్సెక్టెచర్ అడిపిస్సింగ్ ఎలిట్. పూర్ణాంకం మరియు పూర్వం. </p>
  <small> ఎవరో ప్రసిద్ధి చెందిన <cite title = "మూల శీర్షిక" > మూల శీర్షిక </cite></small> 
</blockquote>

ప్రత్యామ్నాయ ప్రదర్శనలు

.pull-rightఫ్లోటెడ్, కుడి-సమలేఖనం చేసిన బ్లాక్‌కోట్ కోసం ఉపయోగించండి .

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

<blockquote class = "Pul-right" > 
  ...
</blockquote>

జాబితాలు

ఆర్డర్ చేయబడలేదు

ఆర్డర్ స్పష్టంగా పట్టింపు లేని అంశాల జాబితా .

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

<ul>
  <li> ... </li>
</ul>

ఆదేశించారు

ఆర్డర్ స్పష్టంగా ముఖ్యమైన అంశాల జాబితా .

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

<ol>
  <li> ... </li>
</ol>

శైలి లేని

జాబితా ఐటెమ్‌లపై డిఫాల్ట్ list-styleమరియు ఎడమ పాడింగ్‌ను తీసివేయండి (తక్షణమే పిల్లలు మాత్రమే).

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

<ul class = "unstyled" > 
  <li> ... </li>
</ul>

లైన్ లో

అన్ని జాబితా ఐటెమ్‌లను ఒకే లైన్‌లో inline-blockమరియు కొన్ని లైట్ పాడింగ్‌తో ఉంచండి.

లోరెమ్ ఇప్సమ్
ఫాసెల్లస్ ఐకులిస్
నుల్ల వొలుత్పట్

<ul class = "inline" > 
  <li> ... </li>
</ul>

వివరణ

వాటి అనుబంధిత వివరణలతో కూడిన నిబంధనల జాబితా.

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

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

క్షితిజ సమాంతర వివరణ

నిబంధనలు మరియు వివరణలను <dl>వరుసలో పక్కపక్కనే చేయండి.

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

<dl class = "dl-horizontal" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

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

లైన్ లో

తో కోడ్ యొక్క ఇన్‌లైన్ స్నిప్పెట్‌లను చుట్టండి <code>.

ఉదాహరణకు, <section>ఇన్‌లైన్‌గా చుట్టి ఉండాలి.

ఉదాహరణకు , < code > & lt ; విభాగం & gt ; </ code > ఇన్‌లైన్‌గా చుట్టబడి ఉండాలి .

ప్రాథమిక బ్లాక్

<pre>కోడ్ యొక్క బహుళ లైన్ల కోసం ఉపయోగించండి . సరైన రెండరింగ్ కోసం కోడ్‌లోని ఏదైనా యాంగిల్ బ్రాకెట్‌లను తప్పించుకోవాలని నిర్ధారించుకోండి.

<p>నమూనా వచనం ఇక్కడ...</p>

<ముందు>
  <p>నమూనా వచనం ఇక్కడ...</p>
</pre>

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

.pre-scrollableమీరు గరిష్టంగా 350px ఎత్తును సెట్ చేసే తరగతిని ఐచ్ఛికంగా జోడించవచ్చు మరియు y-యాక్సిస్ స్క్రోల్‌బార్‌ను అందిస్తుంది.

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

ప్రాథమిక స్టైలింగ్-లైట్ పాడింగ్ మరియు క్షితిజ సమాంతర డివైడర్‌లు మాత్రమే-బేస్ క్లాస్‌ని .tableదేనికైనా జోడించండి <table>.

#	మొదటి పేరు	చివరి పేరు	వినియోగదారు పేరు
1	మార్క్	ఒట్టో	@mdo
2	జాకబ్	థోర్న్టన్	@కొవ్వు
3	లారీ	పక్షి	@ట్విట్టర్

<టేబుల్ క్లాస్ = "టేబుల్" > 
  …
</table>

ఐచ్ఛిక తరగతులు

కింది తరగతుల్లో దేనినైనా .tableబేస్ క్లాస్‌కి జోడించండి.

`.table-striped`

CSS సెలెక్టర్ (IE7-8లో అందుబాటులో లేదు) <tbody>ద్వారా ఏదైనా టేబుల్ అడ్డు వరుసకు జీబ్రా-స్ట్రిపింగ్‌ని జోడిస్తుంది .:nth-child

#	మొదటి పేరు	చివరి పేరు	వినియోగదారు పేరు
1	మార్క్	ఒట్టో	@mdo
2	జాకబ్	థోర్న్టన్	@కొవ్వు
3	లారీ	పక్షి	@ట్విట్టర్

<టేబుల్ క్లాస్ = "టేబుల్-స్ట్రిప్డ్" > 
  …
</table>

`.table-bordered`

పట్టికకు సరిహద్దులు మరియు గుండ్రని మూలలను జోడించండి.

#	మొదటి పేరు	చివరి పేరు	వినియోగదారు పేరు
1	మార్క్	ఒట్టో	@mdo
1	మార్క్	ఒట్టో	@getbootstrap
2	జాకబ్	థోర్న్టన్	@కొవ్వు
3	లారీ ది బర్డ్		@ట్విట్టర్

<టేబుల్ క్లాస్ = "టేబుల్-బోర్డర్డ్" > 
  …
</table>

`.table-hover`

ఒక లోపల పట్టిక అడ్డు వరుసలలో హోవర్ స్థితిని ప్రారంభించండి <tbody>.

#	మొదటి పేరు	చివరి పేరు	వినియోగదారు పేరు
1	మార్క్	ఒట్టో	@mdo
2	జాకబ్	థోర్న్టన్	@కొవ్వు
3	లారీ ది బర్డ్		@ట్విట్టర్

<table class = "table table-hover" > 
  …
</table>

`.table-condensed`

సెల్ పాడింగ్‌ను సగానికి తగ్గించడం ద్వారా టేబుల్‌లను మరింత కాంపాక్ట్‌గా చేస్తుంది.

#	మొదటి పేరు	చివరి పేరు	వినియోగదారు పేరు
1	మార్క్	ఒట్టో	@mdo
2	జాకబ్	థోర్న్టన్	@కొవ్వు
3	లారీ ది బర్డ్		@ట్విట్టర్

<table class = "టేబుల్-కండెన్స్డ్" > 
  …
</table>

ఐచ్ఛిక వరుస తరగతులు

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

తరగతి	వివరణ
`.success`	విజయవంతమైన లేదా సానుకూల చర్యను సూచిస్తుంది.
`.error`	ప్రమాదకరమైన లేదా సంభావ్య ప్రతికూల చర్యను సూచిస్తుంది.
`.warning`	శ్రద్ధ అవసరమయ్యే హెచ్చరికను సూచిస్తుంది.
`.info`	డిఫాల్ట్ శైలులకు ప్రత్యామ్నాయంగా ఉపయోగించబడుతుంది.

#	ఉత్పత్తి	చెల్లింపు తీసుకోబడింది	స్థితి
1	TB - నెలవారీ	01/04/2012	ఆమోదించబడింది
2	TB - నెలవారీ	02/04/2012	తిరస్కరించబడింది
3	TB - నెలవారీ	03/04/2012	పెండింగ్‌లో ఉంది
4	TB - నెలవారీ	04/04/2012	నిర్ధారించడానికి కాల్ చేయండి

...
  < tr class = "success" >
    <td> 1 < /td>
    <td>TB - నెలవారీ</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>ఆమోదించబడింది</ td >
  </ tr >
...

మద్దతు పట్టిక మార్కప్

మద్దతు ఉన్న పట్టిక HTML మూలకాల జాబితా మరియు వాటిని ఎలా ఉపయోగించాలి.

ట్యాగ్ చేయండి	వివరణ
`<table>`	పట్టిక ఆకృతిలో డేటాను ప్రదర్శించడం కోసం చుట్టే మూలకం
`<thead>`	`<tr>`పట్టిక నిలువు వరుసలను లేబుల్ చే��డానికి పట్టిక శీర్షిక వరుసలు ( ) కోసం కంటైనర్ మూలకం
`<tbody>`	`<tr>`టేబుల్ బాడీలో టేబుల్ వరుసలు ( ) కోసం కంటైనర్ ఎలిమెంట్
`<tr>`	ఒకే అడ్డు వరుసలో కనిపించే టేబుల్ సెల్స్ ( `<td>`లేదా ) సెట్ కోసం కంటైనర్ ఎలిమెంట్`<th>`
`<td>`	డిఫాల్ట్ టేబుల్ సెల్
`<th>`	నిలువు వరుస (లేదా అడ్డు వరుస, స్కోప్ మరియు ప్లేస్‌మెంట్ ఆధారంగా) లేబుల్‌ల కోసం ప్రత్యేక టేబుల్ సెల్
`<caption>`	పట్టికలో ఉన్న వాటి యొక్క వివరణ లేదా సారాంశం, ముఖ్యంగా స్క్రీన్ రీడర్‌లకు ఉపయోగకరంగా ఉంటుంది

<పట్టిక>
  <caption> ... </ caption>
  <thead>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

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

వ్యక్తిగత ఫారమ్ నియంత్రణలు స్టైలింగ్‌ను అందుకుంటాయి, కానీ మార్కప్‌లో అవసరమైన బేస్ క్లాస్ <form>లేదా పెద్ద మార్పులు లేకుండా. ఫారమ్ నియంత్రణల పైన పేర్చబడిన, ఎడమకు సమలేఖనం చేయబడిన లేబుల్‌లలో ఫలితాలు.

<రూపం>
  <fieldset>
    <legend> లెజెండ్ </legend>
    <label> లేబుల్ పేరు </label>
    <ఇన్‌పుట్ రకం = "టెక్స్ట్" ప్లేస్‌హోల్డర్ = "ఏదైనా టైప్ చేయండి..." >  
    <span class = "help-block" > ఉదాహరణ బ్లాక్-లెవల్ సహాయ వచనం ఇక్కడ. </span> 
    <లేబుల్ క్లాస్ = "చెక్‌బాక్స్" > 
      <input type = "checkbox" > నన్ను తనిఖీ చేయండి 
    </label>
    <button type = "submit" class = "btn" > Submit </button>  
  </fieldset>
</form>

ఐచ్ఛిక లేఅవుట్‌లు

సాధారణ వినియోగ కేసుల కోసం బూట్‌స్ట్రాప్‌తో మూడు ఐచ్ఛిక ఫారమ్ లేఅవుట్‌లు ఉన్నాయి.

శోధన రూపం

.form-searchఫారమ్‌కు మరియు .search-queryఅదనపు <input>-రౌండ్డ్ టెక్స్ట్ ఇన్‌పుట్ కోసం జోడించండి .

<form class = "form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Search </button>  
</form>

ఇన్లైన్ ఫారమ్

.form-inlineకాంపాక్ట్ లేఅవుట్ కోసం ఎడమకు సమలేఖనం చేయబడిన లేబుల్‌లు మరియు ఇన్‌లైన్-బ్లాక్ నియంత్రణల కోసం జోడించండి .

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  <లేబుల్ క్లాస్ = "చెక్‌బాక్స్" > 
    <input type = "checkbox" > నన్ను గుర్తుంచుకో 
  </label>
  <button type = "submit" class = "btn" > సైన్ ఇన్ </button>  
</form>

క్షితిజ సమాంతర రూపం

లేబుల్‌లను కుడివైపుకి సమలేఖనం చేసి, వాటిని కంట్రోల్‌ల వలె ఒకే లైన్‌లో కనిపించేలా చేయడానికి వాటిని ఎడమవైపుకి ఫ్లోట్ చేయండి. డిఫాల్ట్ ఫారమ్ నుండి అత్యధిక మార్కప్ మార్పులు అవసరం:

.form-horizontalఫారమ్‌కు జోడించండి
లేబుల్‌లు మరియు నియంత్రణలను వ్రాప్ చేయండి.control-group
.control-labelలేబుల్‌కు జోడించండి
.controlsసరైన అమరిక కోసం ఏదైనా అనుబంధిత నియంత్రణలను చుట్టండి

<form class = "form-horizontal" > 
  <div class = "control-group" > 
    <label class = "control-label" for = "inputEmail" > ఇమెయిల్ </label>  
    <div class = "నియంత్రణలు" > 
      <input type = "text" id = "inputEmail" placeholder = "Email" >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = "control-label" for = "inputPassword" > పాస్‌వర్డ్ </label>  
    <div class = "నియంత్రణలు" > 
      <input type = "password" id = "inputPassword" placeholder = "Password" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "నియంత్రణలు" > 
      <లేబుల్ క్లాస్ = "చెక్‌బాక్స్" > 
        <input type = "checkbox" > నన్ను గుర్తుంచుకో 
      </label>
      <button type = "submit" class = "btn" > సైన్ ఇన్ </button>  
    </div>
  </div>
</form>

మద్దతు గల ఫారమ్ నియంత్రణలు

ఉదాహరణ ఫారమ్ లేఅవుట్‌లో మద్దతు ఇచ్చే ప్రామాణిక ఫారమ్ నియంత్రణల ఉదాహరణలు.

ఇన్‌పుట్‌లు

అత్యంత సాధారణ ఫారమ్ నియంత్రణ, టెక్స్ట్-ఆధారిత ఇన్‌పుట్ ఫీల్డ్‌లు. అన్ని HTML5 రకాలకు మద్దతును కలిగి ఉంటుంది: టెక్స్ట్, పాస్‌వర్డ్, డేట్‌టైమ్, డేట్‌టైమ్-లోకల్, తేదీ, నెల, సమయం, వారం, నంబర్, ఇమెయిల్, url, శోధన, టెల్ మరియు రంగు.

typeఅన్ని సమయాల్లో పేర్కొన్న ఉపయోగం అవసరం .

<input type = "text" placeholder = "Text input" >

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

టెక్స్ట్ యొక్క బహుళ పంక్తులకు మద్దతు ఇచ్చే ఫారమ్ నియంత్రణ. rowsఅవసరమైన విధంగా లక్షణాన్ని మార్చండి .

<textarea row = "3" ></textarea>

చెక్‌బాక్స్‌లు మరియు రేడియోలు

చెక్‌బాక్స్‌లు జాబితాలో ఒకటి లేదా అంతకంటే ఎక్కువ ఎంపికలను ఎంచుకోవడానికి ఉంటాయి, అయితే రేడియోలు అనేకం నుండి ఒక ఎంపికను ఎంచుకోవడానికి ఉంటాయి.

డిఫాల్ట్ (పేర్చబడినది)

<లేబుల్ క్లాస్ = "చెక్‌బాక్స్" > 
  <ఇన్‌పుట్ రకం = "చెక్‌బాక్స్" విలువ = "" >  
  ఎంపిక ఒకటి ఇది మరియు అది-ఇది ఎందుకు గొప్పద�� చేర్చండి
</label>
 
<లేబుల్ క్లాస్ = "రేడియో" > 
  <ఇన్‌పుట్ రకం = "రేడియో" పేరు = "optionsRadios" id = "optionsRadios1" విలువ = "option1" ఎంచుకోబడింది >     
  ఎంపిక ఒకటి ఇది మరియు అది-ఇది ఎందుకు గొప్పదో చేర్చండి
</label>
<లేబుల్ క్లాస్ = "రేడియో" > 
  <ఇన్‌పుట్ రకం = "రేడియో" పేరు = "optionsRadios" id = "optionsRadios2" విలువ = "option2" >    
  ఎంపిక రెండు వేరొకటి కావచ్చు మరియు దానిని ఎంచుకోవడం వలన ఎంపిక ఒకటి ఎంపిక తీసివేయబడుతుంది
</label>

ఇన్‌లైన్ చెక్‌బాక్స్‌లు

.inlineఒకే లైన్‌లో కనిపించే నియంత్రణల కోసం చెక్‌బాక్స్‌లు లేదా రేడియోల శ్రేణికి తరగతిని జోడించండి .

<లేబుల్ క్లాస్ = "చెక్‌బాక్స్ ఇన్‌లైన్" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<లేబుల్ క్లాస్ = "చెక్‌బాక్స్ ఇన్‌లైన్" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</label>
<లేబుల్ క్లాస్ = "చెక్‌బాక్స్ ఇన్‌లైన్" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</label>

ఎంచుకుంటుంది

multiple="multiple"ఒకేసారి బహుళ ఎంపికలను చూపించడానికి డిఫాల్ట్ ఎంపికను ఉపయోగించండి లేదా aని పేర్కొనండి .

<ఎంచుకోండి>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<Select multiple = "multiple" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

ఫారమ్ నియంత్రణలను విస్తరించడం

ఇప్పటికే ఉన్న బ్రౌజర్ నియంత్రణల పైన జోడించడం, బూట్‌స్ట్రాప్ ఇతర ఉపయోగకరమైన ఫారమ్ భాగాలను కలిగి ఉంటుంది.

ముందుగా మరియు జోడించిన ఇన్‌పుట్‌లు

ఏదైనా టెక్స్ట్-ఆధారిత ఇన్‌పుట్‌కు ముందు లేదా తర్వాత టెక్స్ట్ లేదా బటన్‌లను జోడించండి. selectఎలిమెంట్‌లకు ఇక్కడ మద్దతు లేదని గుర్తుంచుకోండి .

డిఫాల్ట్ ఎంపికలు

ఒక ఇన్‌పుట్‌కు వచనాన్ని ముందుగా ఉంచడానికి లేదా జోడించడానికి రెండు తరగతులలో ఒకదానితో ఒక మరియు ఒకదాన్ని చుట్టండి .add-on.input

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

కలిపి

.add-onఇన్‌పుట్‌ను ముందస్తుగా మరియు జోడించడానికి రెండు తరగతులు మరియు రెండు ఉదాహరణలను ఉపయోగించండి .

<div class = "input-prepend input-append" > 
  <span class = "యాడ్-ఆన్" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

వచనానికి బదులుగా బటన్లు

ఒక ఇన్‌పుట్‌కి ఒక బటన్‌ను (లేదా రెండు) అటాచ్ చేయడానికి <span>aని ఉపయోగించండి ..btn

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " type = "text" >   
  <button class = "btn" type = "button" > వెళ్ళండి! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " type = "text" >   
  <button class = "btn" type = "button" > Search </button>  
  <button class = "btn" type = "button" > ఎంపికలు </button>  
</div>

బటన్ డ్రాప్‌డౌన్‌లు

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      చర్య
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      చర్య
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "text" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      చర్య
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " రకం = "టెక్స్ట్" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      చర్య
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
</div>

విభజించబడిన డ్రాప్‌డౌన్ సమూహాలు

<రూపం>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    <ఇన్‌పుట్ రకం = "టెక్స్ట్" > 
  </div>
  <div class = "input-append" > 
    <ఇన్‌పుట్ రకం = "టెక్స్ట్" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

శోధన రూపం

<form class = "form-search" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Search </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Search </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

పరిమాణాన్ని నియంత్రించండి

సంబంధిత పరిమాణ తరగతులను ఉపయోగించండి .input-largeలేదా తరగతులను ఉపయోగించి గ్రిడ్ కాలమ్ పరిమాణాలకు మీ ఇన్‌పుట్‌లను సరిపోల్చండి .span*.

బ్లాక్ స్థాయి ఇన్‌పుట్‌లు

ఏదైనా <input>లేదా <textarea>మూలకం బ్లాక్ స్థాయి మూలకం వలె ప్రవర్తించేలా చేయండి.

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

సాపేక్ష పరిమాణం

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

హెడ్ అప్!భవిష్యత్ సంస్కరణల్లో, మా బటన్ పరిమాణాలకు సరిపోయేలా మేము ఈ సంబంధిత ఇన్‌పుట్ తరగతుల వినియోగాన్ని మారుస్తాము. ఉదాహరణకు, .input-largeఇన్‌పుట్ యొక్క పాడింగ్ మరియు ఫాంట్-పరిమాణాన్ని పెంచుతుంది.

గ్రిడ్ పరిమాణం

గ్రిడ్ నిలువు వరుసల యొక్క అదే పరిమాణాలకు సరిపోలే ఇన్‌పుట్‌ల కోసం ఉపయోగించండి .span1..span12

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</select>

ఒక్కో పంక్తికి బహుళ గ్రిడ్ ఇన్‌పుట్‌ల కోసం, సరైన అంతరం కోసం మాడిఫైయర్ క్లాస్‌ని ఉపయోగించండి.controls-row . ఇది వైట్-స్పేస్‌ను కుదించడానికి ఇన్‌పుట్‌లను ఫ్లోట్ చేస్తుంది, సరైన మార్జిన్‌లను సెట్ చేస్తుంది మరియు ఫ్లోట్‌ను క్లియర్ చేస్తుంది.

<div class = "నియంత్రణలు" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "controls controls-row" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

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

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

<span class = "input-xlarge uneditable-input" > ఇక్కడ కొంత విలువ </span>

ఫారమ్ చర్యలు

చర్యల సమూహంతో (బటన్‌లు) ఫారమ్‌ను ముగించండి. ఒక లోపల ఉంచినప్పుడు .form-actions, బటన్లు స్వయంచాలకంగా ఫారమ్ నియంత్రణలతో వరుసలో ఉండేలా ఇండెంట్ అవుతాయి.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > మార్పులను సేవ్ చేయి </button>  
  <button type = "button" class = "btn" > రద్దు చేయి </button>  
</div>

సహాయ వచనం

ఫారమ్ నియంత్రణల చుట్టూ కనిపించే సహాయ వచనం కోసం ఇన్‌లైన్ మరియు బ్లాక్ స్థాయి మద్దతు.

ఇన్లైన్ సహాయం

<input type = "text" ><span class = "help-inline" > ఇన్‌లైన్ సహాయ వచనం </span>

సహాయాన్ని నిరోధించండి

<input type = "text" ><span class = "help-block" > ఒక కొత్త లైన్‌పైకి విరుచుకుపడే మరియు ఒక లైన్‌కు మించి విస్తరించే హెల్ప్ టెక్స్ట్ యొక్క పొడవైన బ్లాక్. </span>

ఫారమ్ కంట్రోల్ స్టేట్స్

ఫారమ్ నియంత్రణలు మరియు లేబుల్‌లపై ప్రాథమిక అభిప్రాయ స్థితులతో వినియోగదారులు లేదా సందర్శకులకు అభిప్రాయాన్ని అందించండి.

ఇన్‌పుట్ ఫోకస్

మేము కొన్ని ఫారమ్ నియంత్రణలలో డిఫాల్ట్ స్టైల్‌లను తీసివేసి, దాని స్థానంలో outlineఒక కోసం వర్తింపజేస్తాము .box-shadow:focus

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "ఇది కేంద్రీకరించబడింది..." >

చెల్లని ఇన్‌పుట్‌లు

తో డిఫాల్ట్ బ్రౌజర్ కార్యాచరణ ద్వారా శైలి ఇన్‌పుట్‌లు :invalid. aని పేర్కొనండి , ఫీల్డ్ ఐచ్ఛికం కాకపోతే లక్షణాన్ని typeజోడించండి మరియు (వర్తిస్తే) a పేర్కొనండి .requiredpattern

CSS సూడో సెలెక్టర్‌లకు మద్దతు లేని కారణంగా ఇది Internet Explorer 7-9 సంస్కరణల్లో అందుబాటులో లేదు.

<input class = "span3" type = "email" అవసరం >

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

disabledవినియోగదారు ఇన్‌పుట్‌ను నిరోధించడానికి మరియు కొద్దిగా భిన్నమైన రూపాన్ని ట్రిగ్గర్ చేయడానికి ఇన్‌పుట్‌పై లక్షణాన్ని జోడించండి .

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled >

ధ్రువీకరణ పేర్కొంది

బూట్‌స్ట్రాప్ లోపం, హెచ్చరిక, సమాచారం మరియు విజయ సందేశాల కోసం ధ్రువీకరణ శైలులను కలిగి ఉంటుంది. ఉపయోగించడానికి, పరిసర ప్రాంతాలకు తగిన తరగతిని జోడించండి .control-group.

<div class = "కంట్రోల్-గ్రూప్ హెచ్చరిక" > 
  <label class = "control-label" for = "inputWarning" > హెచ్చరికతో ఇన్‌పుట్ </label>  
  <div class = "నియంత్రణలు" > 
    <ఇన్‌పుట్ రకం = "టెక్స్ట్" ఐడి = "ఇన్‌పుట్ వార్నింగ్" >  
    <span class = "help-inline" > ఏదో తప్పు జరిగి ఉండవచ్చు </span> 
  </div>
</div>
 
<div class = "కంట్రోల్-గ్రూప్ ఎర్రర్" > 
  <label class = "control-label" for = "inputError" > లోపంతో ఇన్‌పుట్ </label>  
  <div class = "నియంత్రణలు" > 
    <ఇన్‌పుట్ రకం = "టెక్స్ట్" ఐడి = "ఇన్‌పుట్ ఎర్రర్" >  
    <span class = "help-inline" > దయచేసి లోపాన్ని సరిచేయండి </span> 
  </div>
</div>
 
<div class = "control-group info" > 
  <label class = "control-label" for = "inputInfo" > సమాచారంతో ఇన్‌పుట్ </label>  
  <div class = "నియంత్రణలు" > 
    <ఇన్‌పుట్ రకం = "టెక్స్ట్" ఐడి = "ఇన్‌పుట్ఇన్ఫో" >  
    <span class = "help-inline" > వినియోగదారు పేరు ఇప్పటికే తీసుకోబడింది </span> 
  </div>
</div>
 
<div class = "కంట్రోల్-గ్రూప్ సక్సెస్" > 
  <label class = "control-label" for = "inputSuccess" > విజయంతో ఇన్‌పుట్ </label>  
  <div class = "నియంత్రణలు" > 
    <ఇన్‌పుట్ రకం = "టెక్స్ట్" ఐడి = "ఇన్‌పుట్ సక్సెస్" >  
    <span class = "help-inline" > అయ్యో! </span> 
  </div>
</div>

డిఫాల్ట్ బటన్లు

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

బటన్	class=""	వివరణ
	`btn`	గ్రేడియంట్‌తో ప్రామాణిక బూడిద బటన్
	`btn btn-primary`	అదనపు దృశ్యమాన బరువును అందిస్తుంది మరియు బటన్‌ల సెట్‌లో ప్రాథమిక చర్యను గుర్తిస్తుంది
	`btn btn-info`	డిఫాల్ట్ శైలులకు ప్రత్యామ్నాయంగా ఉపయోగించబడుతుంది
	`btn btn-success`	విజయవంతమైన లేదా సానుకూల చర్యను సూచిస్తుంది
	`btn btn-warning`	ఈ చర్యతో జాగ్రత్త వహించాలని సూచించింది
	`btn btn-danger`	ప్రమాదకరమైన లేదా సంభావ్య ప్రతికూల చర్యను సూచిస్తుంది
	`btn btn-inverse`	ప్రత్యామ్నాయ ముదురు బూడిద బటన్, సెమాంటిక్ చర్య లేదా ఉపయోగంతో ముడిపడి ఉండదు
	`btn btn-link`	బటన్ ప్రవర్తనను కొనసాగిస్తూ లింక్ లాగా కనిపించేలా చేయడం ద్వారా బటన్‌ను డీమ్‌ఫాసైజ్ చేయండి

క్రాస్ బ్రౌజర్ అనుకూలత

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

బటన్ పరిమాణాలు

పెద్ద లేదా చిన్న బటన్‌లను ఇష్టపడుతున్నారా? .btn-large, .btn-small, లేదా .btn-miniఅదనపు పరిమాణాల కోసం జోడించండి .

<p>
  <button class = "btn btn-large btn-primary" type = "button" > పెద్ద బటన్ </button>  
  <button class = "btn btn-large" type = "button" > పెద్ద బటన్ </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > డిఫాల్ట్ బటన్ </button>  
  <button class = "btn" type = "button" > డిఫాల్ట్ బటన్ </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > చిన్న బటన్ </button>  
  <button class = "btn btn-small" type = "button" > చిన్న బటన్ </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > మినీ బటన్ </button>  
  <button class = "btn btn-mini" type = "button" > మినీ బటన్ </button>  
</p>

జోడించడం ద్వారా బ్లాక్ స్థాయి బటన్‌లను సృష్టించండి—తల్లిదండ్రుల పూర్తి వెడల్పులో ఉండేవి— .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > బ్లాక్ స్థాయి బటన్ </button>  
<button class = "btn btn-large btn-block" type = "button" > బ్లాక్ స్థాయి బటన్ </button>

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

బటన్‌లను 50% వెనుకకు మసకబారడం ద్వారా వాటిని అన్‌క్లిక్‌గా కనిపించేలా చేయండి.

యాంకర్ మూలకం

బటన్‌లకు .disabledతరగతిని జోడించండి .<a>

ప్రాథమిక లింక్ లింక్

<a href = "#" class = "btn btn-large btn-primary disabled" > ప్రాథమిక లింక్ </a>  
<a href = "#" class = "btn btn-large disabled" > లింక్ </a>

హెడ్ అప్!మేము .disabledఇక్కడ సాధారణ తరగతి మాదిరిగానే యుటిలిటీ క్లాస్‌గా ఉపయోగిస్తాము .active, కాబట్టి ఉపసర్గ అవసరం లేదు. అలాగే, ఈ తరగతి సౌందర్యానికి మాత్రమే; ఇక్కడ లింక్‌లను నిలిపివేయడానికి మీరు తప్పనిసరిగా కస్టమ్ జావాస్క్రిప్ట్‌ని ఉపయోగించాలి.

బటన్ మూలకం

బటన్‌లకు disabledలక్షణాన్ని జోడించండి .<button>

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > ప్రాథమిక బటన్ </button>   
<button type = "button" class = "btn btn-large" disabled > బటన్ </button>

ఒక తరగతి, బహుళ ట్యాగ్‌లు

ఒక , , లేదా మూలకంపై .btnతరగతిని ఉపయోగించండి .<a><button><input>

<a class = "btn" href = "" > లింక్ </a>  
<button class = "btn" type = "submit" > బటన్ </button>  
<input class = "btn" type = "button" value = "Input" >   
<input class = "btn" type = "submit" value = "Submit" >

ఉత్తమ అభ్యాసంగా, క్రాస్-బ్రౌజర్ రెండరింగ్ సరిపోతుందని నిర్ధారించుకోవడానికి మీ సందర్భానికి సంబంధించిన మూలకాన్ని సరిపోల్చడానికి ప్రయత్నించండి. మీకు ఒక ఉంటే , మీ బటన్ కోసం inputఒక ఉపయోగించండి .<input type="submit">

<img>ఏదైనా ప్రాజెక్ట్‌లో చిత్రాలను సులభంగా స్టైల్ చేయడానికి ఒక మూలకానికి తరగతులను జోడించండి .

<img src = "..." class = "img-rounded" >  
<img src = "..." class = "img-circle" >  
<img src = "..." తరగతి = "img-polaroid" >

హెడ్ అప్! .img-roundedమరియు మద్దతు .img-circleలేని కారణంగా IE7-8లో పని border-radiusచేయవద్దు.

ఐకాన్ గ్లిఫ్స్

140 చిహ్నాలు స్ప్రైట్ రూపంలో, ముదురు బూడిద రంగులో (డిఫాల్ట్) మరియు తెలుపు రంగులో అందుబాటులో ఉన్నాయి, వీటిని Glyphicons అందించింది .

ఐకాన్-గ్లాస్
చిహ్నం-సంగీతం
చిహ్నం-శోధన
చిహ్నం-కవరు
చిహ్నం-హృదయం
చిహ్నం-నక్షత్రం
చిహ్నం-నక్షత్రం-ఖాళీ
చిహ్నం-వినియోగదారు
చిహ్నం-చిత్రం
చిహ్నం-వ-పెద్ద
చిహ్నం-వ
చిహ్నం-వ-జాబితా
చిహ్నం-సరే
చిహ్నం-తొలగించు
icon-zoom-in
చిహ్నం-జూమ్ అవుట్
చిహ్నం-ఆఫ్
చిహ్నం-సిగ్నల్
icon-cog
చిహ్నం-చెత్త
చిహ్నం-హోమ్
icon-file
చిహ్నం-సమయం
ఐకాన్-రోడ్డు
icon-download-alt
చిహ్నం-డౌన్‌లోడ్
చిహ్నం-అప్‌లోడ్
చిహ్నం-ఇన్‌బాక్స్
చిహ్నం-ప్లే-వృత్తం
చిహ్నం-పునరావృతం
చిహ్నం-రిఫ్రెష్
icon-list-alt
చిహ్నం-లాక్
చిహ్నం-జెండా
చిహ్నం-హెడ్‌ఫోన్‌లు
చిహ్నం-వాల్యూమ్-ఆఫ్
చిహ్నం-వాల్యూమ్-డౌన్
చిహ్నం-వాల్యూమ్-అప్
చిహ్నం-qrcode
చిహ్నం-బార్‌కోడ్
చిహ్నం-ట్యాగ్
చిహ్నం-ట్యాగ్‌లు
చిహ్నం-పుస్తకం
చిహ్నం-బుక్‌మార్క్
చిహ్నం-ముద్రణ
చిహ్నం-కెమెరా
చిహ్నం-ఫాంట్
చిహ్నం-బోల్డ్
చిహ్నం-ఇటాలిక్
చిహ్నం-టెక్స్ట్-ఎత్తు
చిహ్నం-టెక్స్ట్-వెడల్పు
చిహ్నం-సమలేఖనం-ఎడమ
చిహ్నం-సమలేఖనం-కేంద్రం
చిహ్నం-సమలేఖనం-కుడివైపు
icon-align-justify
చిహ్నం-జాబితా
చిహ్నం-ఇండెంట్-ఎడమ
చిహ్నం-ఇండెంట్-కుడివైపు
చిహ్నం-ఫేస్‌టైమ్-వీడియో
చిహ్నం-చిత్రం
చిహ్నం-పెన్సిల్
చిహ్నం-మ్యాప్-మార్కర్
చిహ్నం-సర్దుబాటు
icon-tint
చిహ్నం-సవరణ
చిహ్నం-భాగస్వామ్యం
చిహ్నం-చెక్
చిహ్నం-తరలింపు
చిహ్నం-అడుగు-వెనక్కి
చిహ్నం-వేగంగా-వెనుకబడిన
చిహ్నం-వెనుకబడిన
ఐకాన్-ప్లే
చిహ్నం-పాజ్
చిహ్నం-స్టాప్
చిహ్నం-ముందుకు
చిహ్నం-ఫాస్ట్-ఫార్వర్డ్
చిహ్నం-అడుగు-ముందుకు
చిహ్నం-ఎజెక్ట్
చిహ్నం-చెవ్రాన్-ఎడమ
చిహ్నం-చెవ్రాన్-కుడివైపు
icon-plus-sign
చిహ్నం-మైనస్-చిహ్నం
చిహ్నం-తొలగింపు గుర్తు
చిహ్నం-సరే గుర్తు
చిహ్నం-ప్రశ్న-సంకేతం
చిహ్నం-సమాచార చిహ్నం
చిహ్నం-స్క్రీన్‌షాట్
చిహ్నం-తొలగింపు-వృత్తం
చిహ్నం-OK-వృత్తం
చిహ్నం-నిషేధం-వృత్తం
చిహ్నం-బాణం-ఎడమ
చిహ్నం-బాణం-కుడివైపు
చిహ్నం-బాణం-పైకి
చిహ్నం-బాణం-దిగువ
icon-share-alt
చిహ్నం-పరిమాణం-పూర్తి
చిహ్నం-పరిమాణం-చిన్న
చిహ్నం-ప్లస్
చిహ్నం-మైనస్
చిహ్నం-నక్షత్రం
చిహ్నం-ఆశ్చర్య చిహ్నం
చిహ్నం-బహుమతి
చిహ్నం-ఆకు
చిహ్నం-అగ్ని
ఐకాన్-కన్ను తెరవండి
ఐకాన్-కన్ను దగ్గరగా
చిహ్నం-హెచ్చరిక-సంకేతం
చిహ్నం-విమానం
చిహ్నం-క్యాలెండర్
చిహ్నం-యాదృచ్ఛిక
చిహ్నం-వ్యాఖ్య
చిహ్నం-అయస్కాంతం
ఐకాన్-చెవ్రాన్-అప్
ఐకాన్-చెవ్రాన్-డౌన్
చిహ్నం-రీట్వీట్
చిహ్నం-షాపింగ్-కార్ట్
చిహ్నం-ఫోల్డర్-మూసివేయి
చిహ్నం-ఫోల్డర్-ఓపెన్
చిహ్నం-పరిమాణం-నిలువు
icon-resize-horizontal
చిహ్నం-hdd
ఐకాన్-బుల్‌హార్న్
చిహ్నం-బెల్
చిహ్నం-సర్టిఫికేట్
చిహ్నం-థంబ్స్-అప్
icon-thumbs-down
చిహ్నం-చేతి-కుడివైపు
చిహ్నం-చేతి-ఎడమ
చిహ్నం-చేతి-అప్
చిహ్నం-హ్యాండ్-డౌన్
చిహ్నం-వృత్తం-బాణం-కుడివైపు
చిహ్నం-వృత్తం-బాణం-ఎడమ
చిహ్నం-వృత్తం-బాణం-పైకి
చిహ్నం-వృత్తం-బాణం-దిగువ
ఐకాన్-గ్లోబ్
చిహ్నం-రెంచ్
చిహ్నం-పనులు
చిహ్నం-వడపోత
చిహ్నం-బ్రీఫ్కేస్
చిహ్నం-పూర్తి స్క్రీన్

గ్లిఫికాన్స్ అట్రిబ్యూషన్

Glyphicons Halflings సాధారణంగా ఉచితంగా అందుబాటులో ఉండవు, కానీ బూట్‌స్ట్రాప్ మరియు Glyphicons సృష్టికర్తల మధ్య ఏర్పడిన ఏర్పాటు డెవలపర్‌లుగా మీకు ఎటువంటి ఖర్చు లేకుండా దీన్ని సాధ్యం చేసింది. కృతజ్ఞతగా, ఆచరణాత్మకమైనప్పుడల్లా గ్లిఫికాన్‌లకు తిరిగి ఐచ్ఛిక లింక్‌ను చేర్చమని మేము మిమ్మల్ని అడుగుతున్నాము .

ఎలా ఉపయోగించాలి

అన్ని చిహ్నాలకు <i>ఒక ప్రత్యేక తరగతితో కూడిన ట్యాగ్ అవసరం icon-. ఉపయోగించడానికి, కింది కోడ్‌ను ఎక్కడైనా ఉంచండి:

<i class = "icon-search" ></i>

విలోమ (తెలుపు) చిహ్నాల కోసం శైలులు కూడా అందుబాటులో ఉన్నాయి, ఒక అదనపు తరగతితో సిద్ధంగా ఉన్నాయి. మేము ఈ తరగతిని ప్రత్యేకంగా nav మరియు డ్రాప్‌డౌన్ లింక్‌ల కోసం హోవర్ మరియు యాక్టివ్ స్టేట్‌లపై అమలు చేస్తాము.

<i class = "icon-search icon-white" ></i>

హెడ్ అప్!బటన్లు లేదా nav లింక్‌లలో వలె టెక్స్ట్ స్ట్రింగ్‌లను ఉపయోగిస్తున్నప్పుడు, <i>సరైన అంతరం కోసం ట్యాగ్ తర్వాత ఖాళీని వదిలివేయాలని నిర్ధారించుకోండి.

చిహ్నం ఉదాహరణలు

వాటిని టూల్‌బార్, నావిగేషన్ లేదా ముందుగా రూపొందించిన ఫారమ్ ఇన్‌పుట్‌ల కోసం బటన్‌లు, బటన్ సమూహాలలో ఉపయోగించండి.

బటన్లు

బటన్ టూల్‌బార్‌లో బటన్ సమూహం

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

బటన్ సమూహంలో డ్రాప్‌డౌన్

వినియోగదారు

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> వినియోగదారు </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "dropdown-menu" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> సవరించు </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> తొలగించు </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> నిషేధించు </a></li>  
    <li class = "divider" ></li> 
    <li><a href = "#" ><i class = "i" ></i> నిర్వాహకుడిని చేయండి </a></li>  
  </ul>
</div>

బటన్ పరిమాణాలు

నక్షత్రం నక్షత్రం నక్షత్రం

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> నక్షత్రం </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> నక్షత్రం </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> నక్షత్రం </a>

నావిగేషన్

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> హోమ్ </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> లైబ్రరీ </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> అప్లికేషన్లు </a></li>  
  <li><a href = "#" ><i class = "i" ></i> ఇతర </a></li>  
</ul>

ఫారమ్ ఫీల్డ్‌లు

<div class = "control-group" > 
  <label class = "control-label" for = "inputIcon" > ఇమెయిల్ చిరునామా </label>  
  <div class = "నియంత్రణలు" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

టైపోగ్రఫీ

శీర్షికలు

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

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

h3. శీర్షిక 3

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

h5. హెడ్డింగ్ 5

h6. శీర్షిక 6

బాడీ కాపీ

లీడ్ బాడీ కాపీ

తక్కువతో నిర్మించారు

ఉద్ఘాటన

<small>

బోల్డ్

ఇటాలిక్స్

అమరిక తరగతులు

ఉద్ఘాటన తరగతులు

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

<abbr>

<abbr class="initialism">

చిరునామాలు

<address>

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

డిఫాల్ట్ బ్లాక్‌కోట్

బ్లాక్‌కోట్ ఎంపికలు

మూలానికి పేరు పెట్టడం

ప్రత్యామ్నాయ ప్రదర్శనలు

జాబితాలు

ఆర్డర్ చేయబడలేదు

ఆదేశించారు

శైలి లేని

లైన్ లో

వివరణ

క్షితిజ సమాంతర వివరణ

కోడ్

లైన్ లో

ప్రాథమిక బ్లాక్

పట్టికలు

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

ఐచ్ఛిక తరగతులు

.table-striped

.table-bordered

.table-hover

.table-condensed

ఐచ్ఛిక వరుస తరగతులు

మద్దతు పట్టిక మార్కప్

రూపాలు

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

ఐచ్ఛిక లేఅవుట్‌లు

శోధన రూపం

ఇన్లైన్ ఫారమ్

క్షితిజ సమాంతర రూపం

మద్దతు గల ఫారమ్ నియంత్రణలు

ఇన్‌పుట్‌లు

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

చెక్‌బాక్స్‌లు మరియు రేడియోలు

డిఫాల్ట్ (పేర్చబడినది)

ఇన్‌లైన్ చెక్‌బాక్స్‌లు

ఎంచుకుంటుంది

ఫారమ్ నియంత్రణలను విస్తరించడం

ముందుగా మరియు జోడించిన ఇన్‌పుట్‌లు

డిఫాల్ట్ ఎంపికలు

కలిపి

వచనానికి బదులుగా బటన్లు

బటన్ డ్రాప్‌డౌన్‌లు

విభజించబడిన డ్రాప్‌డౌన్ సమూహాలు

శోధన రూపం

పరిమాణాన్ని నియంత్రించండి

బ్లాక్ స్థాయి ఇన్‌పుట్‌లు

సాపేక్ష పరిమాణం

గ్రిడ్ పరిమాణం

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

ఫారమ్ చర్యలు

సహాయ వచనం

ఇన్లైన్ సహాయం

సహాయాన్ని నిరోధించండి

ఫారమ్ కంట్రోల్ స్టేట్స్

ఇన్‌పుట్ ఫోకస్

చెల్లని ఇన్‌పుట్‌లు

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

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`