బేస్ CSS

పరంజా పైన, తాజా, స్థిరమైన రూపాన్ని మరియు అనుభూతిని అందించడానికి ప్రాథమిక HTML అంశాలు స్టైల్ చేయబడ్డాయి మరియు విస్తరించదగిన తరగతులతో మెరుగుపరచబడ్డాయి.

హెడ్డింగ్‌లు & బాడీ కాపీ

టైపోగ్రాఫిక్ స్కేల్

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

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

ఉదాహరణ శరీర వచనం

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

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

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

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

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

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

h3. శీర్షిక 3

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

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

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

మూలకం వాడుక ఐచ్ఛికం
<strong> ముఖ్యమైన టెక్స్ట్ స్నిప్పెట్‌ను నొక్కి చెప్పడం కోసం ఏదీ లేదు
<em> ఒత్తిడితో కూడిన వచన స్నిప్పెట్‌ను నొక్కి చెప్పడం కోసం ఏదీ లేదు
<abbr> విస్తరించిన సంస్కరణను హోవర్‌లో చూపడానికి సంక్షిప్తాలు మరియు ఎక్రోనింలను చుట్టేస్తుంది

విస్తరించిన వచనం కోసం ఐచ్ఛిక titleలక్షణాన్ని చేర్చండి

.initialismపెద్ద సంక్షిప్తాల కోసం తరగతిని ఉపయోగించండి .
<address> దాని సమీప పూర్వీకులు లేదా మొత్తం పని సంస్థ కోసం సంప్రదింపు సమాచారం కోసం అన్ని పంక్తులను ముగించడం ద్వారా ఫార్మాటింగ్‌ను సంరక్షించండి<br>

ఉద్ఘాటనను ఉపయోగించడం

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

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

ఉదాహరణ చిరునామాలు

<address>ట్యాగ్‌ని ఎలా ఉపయోగించవచ్చో ఇక్కడ రెండు ఉదాహరణలు ఉన్నాయి :

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

ఉదాహరణ సంక్షిప్తాలు

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

initialismకొంచెం చిన్న వచన పరిమాణాన్ని ఇవ్వడం ద్వారా టైపోగ్రాఫిక్ సామరస్యాన్ని పెంచడానికి తరగతిని సంక్షిప్తీకరణకు జోడించండి .

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

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

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

మూలకం వాడుక ఐచ్ఛికం
<blockquote> మరొక మూలం నుండి కంటెంట్‌ను కోట్ చేయడానికి బ్లాక్-లెవల్ ఎలిమెంట్

citeమూలం URL కోసం లక్షణాన్ని జోడించండి

ఫ్లోటెడ్ ఎంపికల కోసం ఉపయోగించండి .pull-leftమరియు తరగతులు.pull-right
<small> వినియోగదారు-ఫేసింగ్ అనులేఖనాన్ని జోడించడానికి ఐచ్ఛిక మూలకం, సాధారణంగా పని శీర్షికతో రచయిత <cite>మూలం యొక్క శీర్షిక లేదా పేరు చుట్టూ ఉంచండి

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

<small>మీ మూలాన్ని ఉదహరించడానికి ఐచ్ఛిక మూలకాన్ని చేర్చండి మరియు &mdash;స్టైలింగ్ ప్రయోజనాల కోసం మీరు దాని ముందు ఎమ్ డాష్‌ని పొందుతారు.

  1. <blockquote>
  2. <p> లోరెమ్ ఇప్సమ్ డోలర్ సిట్ అమెట్, కన్సెక్టెచర్ అడిపిస్సింగ్ ఎలిట్. పూర్ణాంకం ముందు వెనెనటిస్ ఉంది. </p>
  3. <small> ఎవరో ప్రముఖుడు </small>
  4. </blockquote>

ఉదాహరణ బ్లాక్‌కోట్‌లు

డిఫాల్ట్ బ్లాక్‌కోట్‌లు ఇలా స్టైల్ చేయబడ్డాయి:

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

బాడీ ఆఫ్ వర్క్‌లో పేరుగాంచిన వ్యక్తి

మీ బ్లాక్‌కోట్‌ను కుడివైపుకి ఫ్లోట్ చేయడానికి, జోడించండి class="pull-right":

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

బాడీ ఆఫ్ వర్క్‌లో పేరుగాంచిన వ్యక్తి

జాబితాలు

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

<ul>

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

శైలి లేని

<ul class="unstyled">

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

ఆదేశించారు

<ol>

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

వివరణ

<dl>

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

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

<dl class="dl-horizontal">

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

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

లైన్ లో

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

  1. ఉదాహరణకు , < code > సెక్షన్ </ code > ఇన్‌లైన్‌గా చుట్టబడి ఉండాలి .

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

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

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

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

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

Google Prettify

మెరుగుపరచబడిన రెండరింగ్ కోసం ఒకే <pre>మూలకాన్ని తీసుకోండి మరియు రెండు ఐచ్ఛిక తరగతులను జోడించండి.

  1. <p> ఇక్కడ నమూనా వచనం... </p>
  1. <pre class = "pretyprint
  2. లైనమ్స్" >
  3. <p>నమూనా వచనం ఇక్కడ...</p>
  4. </pre>

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

టేబుల్ మార్కప్

ట్యాగ్ చేయండి వివరణ
<table> పట్టిక ఆకృతిలో డేటాను ప్రదర్శించడం కోసం చుట్టే మూలకం
<thead> <tr>పట్టిక నిలువు వరుసలను లేబుల్ చేయడానికి పట్టిక శీర్షిక వరుసలు ( ) కోసం కంటైనర్ మూలకం
<tbody> <tr>టేబుల్ బాడీలో టేబుల్ వరుసలు ( ) కోసం కంటైనర్ ఎలిమెంట్
<tr> ఒకే అడ్డు వరుసలో కనిపించే టేబుల్ సెల్స్ ( <td>లేదా ) సెట్ కోసం కంటైనర్ ఎలిమెంట్<th>
<td> డిఫాల్ట్ టేబుల్ సెల్
<th> నిలువు వరుస (లేదా అడ్డు వరుస, స్కోప్ మరియు ప్లేస్‌మెంట్ ఆధారంగా) లేబుల్‌ల కోసం ప్రత్యేక టేబుల్ సెల్
తప్పనిసరిగా a లోపల ఉపయోగించాలి<thead>
<caption> పట్టికలో ఉన్న వాటి యొక్క వివరణ లేదా సారాంశం, ముఖ్యంగా స్క్రీన్ రీడర్‌లకు ఉపయోగకరంగా ఉంటుంది
  1. <పట్టిక>
  2. <thead>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

పట్టిక ఎంపికలు

పేరు తరగతి వివరణ
డిఫాల్ట్ ఏదీ లేదు శైలులు లేవు, నిలువు వరుసలు మరియు అడ్డు వరుసలు మాత్రమే
ప్రాథమిక .table అడ్డు వరుసల మధ్య క్షితిజ సమాంతర రేఖలు మాత్రమే
సరిహద్దులు .table-bordered మూలలను రౌండ్ చేస్తుంది మరియు బయటి అంచుని జోడిస్తుంది
జీబ్రా-గీత .table-striped బేసి వరుసలకు (1, 3, 5, మొదలైనవి) లేత బూడిద రంగు నేపథ్య రంగును జోడిస్తుంది
ఘనీభవించినది .table-condensed tdఅన్ని మరియు thమూలకాలలో 8px నుండి 4px వరకు నిలువు ప్యాడింగ్‌ను సగానికి తగ్గిస్తుంది

ఉదాహరణ పట్టికలు

1. డిఫాల్ట్ పట్టిక శైలులు

పట్టికలు స్వయంచాలకంగా రీడబిలిటీని నిర్ధారించడానికి మరియు నిర్మాణాన్ని నిర్వహించడానికి కొన్ని సరిహద్దులతో స్వయంచాలకంగా స్టైల్ చేయబడతాయి. 2.0తో, .tableతరగతి అవసరం.

  1. <టేబుల్ క్లాస్ = "టేబుల్" >
  2. </table>
# మొదటి పేరు చివరి పేరు వినియోగదారు పేరు
1 మార్క్ ఒట్టో @mdo
2 జాకబ్ తోర్న్టన్ @కొవ్వు
3 లారీ పక్షి @ట్విట్టర్

2. చారల పట్టిక

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

గమనిక: చారల పట్టికలు :nth-childCSS ఎంపిక సాధనాన్ని ఉపయోగిస్తాయి మరియు IE7-IE8లో అందుబాటులో లేవు.

  1. <టేబుల్ క్లాస్ = "టేబుల్-స్ట్రిప్డ్" >
  2. </table>
# మొదటి పేరు చివరి పేరు వినియోగదారు పేరు
1 మార్క్ ఒట్టో @mdo
2 జాకబ్ తోర్న్టన్ @కొవ్వు
3 లారీ పక్షి @ట్విట్టర్

3. సరిహద్దు పట్టిక

సౌందర్య ప్రయోజనాల కోసం మొత్తం టేబుల్ చుట్టూ సరిహద్దులను మరియు గుండ్రని మూలలను జోడించండి.

  1. <table class = "టేబుల్-బోర్డర్డ్" >
  2. </table>
# మొదటి పేరు చివరి పేరు వినియోగదారు పేరు
1 మార్క్ ఒట్టో @mdo
మార్క్ ఒట్టో @getbootstrap
2 జాకబ్ తోర్న్టన్ @కొవ్వు
3 లారీ ది బర్డ్ @ట్విట్టర్

4. ఘనీకృత పట్టిక

.table-condensedటేబుల్ సెల్ పాడింగ్‌ను సగానికి (8px నుండి 4px వరకు) కట్ చేయడానికి తరగతిని జోడించడం ద్వారా మీ టేబుల్‌లను మరింత కాంపాక్ట్ చేయండి .

  1. <table class = "టేబుల్-కండెన్స్డ్" >
  2. </table>
# మొదటి పేరు చివరి పేరు వినియోగదారు పేరు
1 మార్క్ ఒట్టో @mdo
2 జాకబ్ తోర్న్టన్ @కొవ్వు
3 లారీ ది బర్డ్ @ట్విట్టర్

5. వాటన్నింటినీ కలపండి!

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

  1. <table class = "టేబుల్-స్ట్రిప్డ్ టేబుల్-బోర్డర్డ్ టేబుల్-కండెన్స్డ్" >
  2. ...
  3. </table>
పూర్తి పేరు
# మొదటి పేరు చివరి పేరు వినియోగదారు పేరు
1 మార్క్ ఒట్టో @mdo
2 జాకబ్ తోర్న్టన్ @కొవ్వు
3 లారీ ది బర్డ్ @ట్విట్టర్

సౌకర్యవంతమైన HTML మరియు CSS

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

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

నాలుగు లేఅవుట్లు చేర్చబడ్డాయి

బూట్‌స్ట్రాప్ నాలుగు రకాల ఫారమ్ లేఅవుట్‌లకు మద్దతుతో వస్తుంది:

  • నిలువు (డిఫాల్ట్)
  • వెతకండి
  • లైన్ లో
  • అడ్డంగా

వివిధ రకాల ఫారమ్ లేఅవుట్‌లకు మార్కప్ చేయడానికి కొన్ని మార్పులు అవసరం, కానీ నియంత్రణలు అలాగే ఉంటాయి మరియు ప్రవర్తిస్తాయి.

నియంత్రణ రాష్ట్రాలు మరియు మరిన్ని

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

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

నాలుగు రకాల రూపాలు

బూట్‌స్ట్రాప్ సాధారణ వెబ్ ఫారమ్‌ల యొక్క నాలుగు శైలుల కోసం సాధారణ మార్కప్ మరియు శైలులను అందిస్తుంది.

పేరు తరగతి వివరణ
నిలువు (డిఫాల్ట్) .form-vertical (అవసరం లేదు) నియంత్రణలపై పేర్చబడిన, ఎడమకు సమలేఖనం చేయబడిన లేబుల్‌లు
లైన్ లో .form-inline కాంపాక్ట్ శైలి కోసం ఎడమకు సమలేఖనం చేయబడిన లేబుల్ మరియు ఇన్‌లైన్-బ్లాక్ నియంత్రణలు
వెతకండి .form-search సాధారణ శోధన సౌందర్యం కోసం అదనపు గుండ్రని టెక్స్ట్ ఇన్‌పుట్
అడ్డంగా .form-horizontal నియంత్రణల వలె అదే లైన్‌లో ఎడమ, కుడి-సమలేఖనం చేయబడిన లేబుల్‌లను ఫ్లోట్ చేయండి

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

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

అదనపు మార్కప్ లేకుండా స్మార్ట్ మరియు తేలికపాటి డిఫాల్ట్‌లు.

ఉదాహరణ బ్లాక్-లెవల్ సహాయ వచనం ఇక్కడ.

  1. <form class = "బాగా" >
  2. <label> లేబుల్ పేరు </label>
  3. <input type = "text" class = "span3" placeholder = "ఏదైనా టైప్ చేయండి..." >
  4. <span class = "help-block" > ఉదాహరణ బ్లాక్-లెవల్ సహాయ వచనం ఇక్కడ. </span>
  5. <లేబుల్ క్లాస్ = "చెక్‌బాక్స్" >
  6. <input type = "checkbox" > నన్ను తనిఖీ చేయండి
  7. </label>
  8. <button type = "submit" class = "btn" > Submit </button>
  9. </form>

శోధన రూపం

.form-searchఫారమ్‌కు మరియు .search-queryకు జోడించండి input.

  1. <form class = "బాగా ఫారమ్-శోధన" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Search </button>
  4. </form>

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

.form-inlineఫారమ్ నియంత్రణల యొక్క నిలువు అమరిక మరియు అంతరాన్ని చక్కగా జోడించండి .

  1. <form class = "బాగా ఫారమ్-ఇన్‌లైన్" >
  2. <input type = "text" class = "input-small" placeholder = "Email" >
  3. <input type = "password" class = "input-small" placeholder = "Password" >
  4. <లేబుల్ క్లాస్ = "చెక్‌బాక్స్" >
  5. <input type = "checkbox" > నన్ను గుర్తుంచుకో
  6. </label>
  7. <button type = "submit" class = "btn" > సైన్ ఇన్ </button>
  8. </form>

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

మేము మద్దతిచ్చే అన్ని డిఫాల్ట్ ఫారమ్ నియంత్రణలు కుడివైపున చూపబడ్డాయి. బుల్లెట్ జాబితా ఇక్కడ ఉంది:

  • టెక్స్ట్ ఇన్‌పుట్‌లు (టెక్స్ట్, పాస్‌వర్డ్, ఇమెయిల్ మొదలైనవి)
  • చెక్బాక్స్
  • రేడియో
  • ఎంచుకోండి
  • బహుళ ఎంపిక
  • ఫైల్ ఇన్‌పుట్
  • వచన ప్రాంతం

ఫ్రీఫార్మ్ టెక్స్ట్‌తో పాటు, ఏదైనా HTML5 టెక్స్ట్-ఆధారిత ఇన్‌పుట్ అలా కనిపిస్తుంది.

ఉదాహరణ మార్కప్

ఎగువ ఉదాహరణ ఫారమ్ లేఅవుట్‌ను బట్టి, మొదటి ఇన్‌పుట్ మరియు నియంత్రణ సమూహంతో అనుబంధించబడిన మార్కప్ ఇక్కడ ఉంది. ది .control-group, .control-label, మరియు .controlsతరగతులు అన్నీ స్టైలింగ్ కోసం అవసరం.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> లెజెండ్ టెక్స్ట్ </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > టెక్స్ట్ ఇన్‌పుట్ </label>
  6. <div class = "నియంత్రణలు" >
  7. <ఇన్‌పుట్ రకం = "టెక్స్ట్" క్లాస్ = "ఇన్‌పుట్-xlarge" id = "input01" >
  8. <p class = "help-block" > సహాయక వచనం </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

ఫారమ్ నియంత్రణ రాష్ట్రాలు

బూట్‌స్ట్రాప్ బ్రౌజర్-మద్దతు ఉన్న ఫోకస్డ్ మరియు స్టేట్‌ల కోసం శైలులను కలిగి ఉంటుంది disabled. మేము డిఫాల్ట్ వెబ్‌కిట్‌ను తీసివేసి, దాని స్థానంలో outlineఒక కోసం వర్తింపజేస్తాము .box-shadow:focus


ఫారమ్ ధ్రువీకరణ

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

  1. <ఫీల్డ్ సెట్
  2. class = "కంట్రోల్-గ్రూప్ ఎర్రర్" >
  3. </fieldset>
ఇక్కడ కొంత విలువ
ఏదో తప్పు జరిగి ఉండవచ్చు
దయచేసి లోపాన్ని సరి చేయండి
అయ్యో!
అయ్యో!

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

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

ఇన్‌పుట్ సమూహాలు—అనుబంధించిన లేదా ముందుగా పెంపొందించిన వచనంతో—మీ ఇన్‌పుట్‌లకు మరింత సందర్భాన్ని అందించడానికి సులభమైన మార్గాన్ని అందిస్తాయి. ట్విట్టర్ యూజర్‌నేమ్‌ల కోసం @ సైన్ లేదా ఫైనాన్స్ కోసం $ వంటి గొప్ప ఉదాహరణలు ఉన్నాయి.


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

v1.4 వరకు, చెక్‌బాక్స్‌లు మరియు రేడియోలను పేర్చడానికి బూట్‌స్ట్రాప్‌కి వాటి చుట్టూ అదనపు మార్కప్ అవసరం. <label class="checkbox">ఇప్పుడు, మూటగట్టిన దానిని పునరావృతం చేయడం ఒక సాధారణ విషయం <input type="checkbox">.

ఇన్‌లైన్ చెక్‌బాక్స్‌లు మరియు రేడియోలకు కూడా మద్దతు ఉంది. .inlineదేనికైనా జోడించండి .checkboxలేదా .radioమీరు పూర్తి చేసారు.


ఇన్‌లైన్ ఫారమ్‌లు మరియు అనుబంధం/ముందస్తు

.add-onఇన్‌లైన్ ఫారమ్‌లో ప్రిపెండ్ లేదా అపెండ్ ఇన్‌పుట్‌లను ఉపయోగించడానికి, ఖాళీలు లేకుండా inputఒకే లైన్‌లో ఉంచాలని నిర్ధారించుకోండి .


ఫారమ్ సహాయ వచనం

మీ ఫారమ్ ఇన్‌పుట్‌ల కోసం సహాయ వచనాన్ని జోడించడానికి, ఇన్‌లైన్ సహాయ వచనాన్ని చేర్చండి లేదా ఇన్‌పుట్ మూలకం తర్వాత <span class="help-inline">సహాయ టెక్స్ట్ బ్లాక్‌ను చేర్చండి.<p class="help-block">

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

మీరు గ్రిడ్‌కు మ్యాప్ చేయని, ప్రతిస్పందించే CSS శైలులకు అనుగుణంగా లేదా వివిధ రకాల నియంత్రణలకు (ఉదా, inputvs. select) ఖాతాకు సంబంధించిన స్టాటిక్ క్లాస్‌లను కూడా ఉపయోగించవచ్చు.

@

ఇక్కడ కొన్ని సహాయ వచనం ఉంది

.00
ఇక్కడ మరింత సహాయ వచనం ఉంది
$ .00

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

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

చర్యల కోసం బటన్లు

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

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

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

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

బహుళ పరిమాణాలు

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


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

డిసేబుల్ బటన్‌ల కోసం, .disabledలింక్‌లకు క్లాస్ మరియు ఎలిమెంట్స్ disabledకోసం అట్రిబ్యూట్ జోడించండి.<button>

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

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

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

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

లింక్
  1. <a class = "btn" href = "" > లింక్ </a>
  2. <button class = "btn" type = "submit" >
  3. బటన్
  4. </button>
  5. <ఇన్‌పుట్ క్లాస్ = "btn" రకం = "బటన్"
  6. విలువ = "ఇన్‌పుట్" >
  7. <ఇన్‌పుట్ క్లాస్ = "btn" రకం = "సమర్పించు"
  8. విలువ = "సమర్పించు" >

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

  • ఐకాన్-గ్లాస్
  • చిహ్నం-సంగీతం
  • చిహ్నం-శోధన
  • చిహ్నం-కవరు
  • చిహ్నం-హృదయం
  • చిహ్నం-నక్షత్రం
  • చిహ్నం-నక్షత్రం-ఖాళీ
  • చిహ్నం-వినియోగదారు
  • చిహ్నం-చిత్రం
  • చిహ్నం-వ-పెద్ద
  • చిహ్నం-వ
  • చిహ్నం-వ-జాబితా
  • చిహ్నం-సరే
  • చిహ్నం-తొలగించు
  • 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
  • చిహ్నం-చేతి-కుడివైపు
  • చిహ్నం-చేతి-ఎడమ
  • ఐకాన్-హ్యాండ్-అప్
  • చిహ్నం-హ్యాండ్-డౌన్
  • చిహ్నం-వృత్తం-బాణం-కుడివైపు
  • చిహ్నం-వృత్తం-బాణం-ఎడమ
  • చిహ్నం-వృత్తం-బాణం-పైకి
  • చిహ్నం-వృత్తం-బాణం-దిగువ
  • ఐకాన్-గ్లోబ్
  • చిహ్నం-రెంచ్
  • చిహ్నం-పనులు
  • చిహ్నం-వడపోత
  • చిహ్నం-బ్రీఫ్కేస్
  • చిహ్నం-పూర్తి స్క్రీన్

స్ప్రైట్‌గా నిర్మించబడింది

ప్రతి చిహ్నాన్ని అదనపు అభ్యర్థనగా మార్చడానికి బదులుగా, మేము వాటిని స్ప్రైట్‌గా కంపైల్ చేసాము—ఒక ఫైల్‌లోని చిత్రాల సమూహంతో చిత్రాలను ఉంచడానికి CSSని ఉపయోగిస్తుంది background-position. మేము Twitter.comలో ఉపయోగించే అదే పద్ధతి మరియు ఇది మాకు బాగా పనిచేసింది.

అన్ని చిహ్నాల తరగతులు .icon-మా ఇతర భాగాల మాదిరిగానే సరైన నేమ్‌స్పేసింగ్ మరియు స్కోపింగ్ కోసం ప్రిఫిక్స్ చేయబడ్డాయి. ఇది ఇతర సాధనాలతో విభేదాలను నివారించడానికి సహాయపడుతుంది.

మేము ఇక్కడ డాక్స్‌లో లింక్ మరియు క్రెడిట్‌ను అందించేంత వరకు మా ఓపెన్-సోర్స్ టూల్‌కిట్‌లో సెట్ చేసిన హాఫ్లింగ్స్‌ను ఉపయోగించడానికి Glyphicons మాకు అనుమతినిచ్చింది. దయచేసి మీ ప్రాజెక్ట్‌లలో కూడా అదే పని చేయడాన్ని పరిగణించండి.

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

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

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

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

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

మీ చిహ్నాల కోసం ఎంచుకోవడానికి 140 తరగతులు ఉన్నాయి. సరైన తరగతులతో ట్యాగ్‌ని జోడించి <i>, మీరు సెట్ చేసారు. మీరు పూర్తి జాబితాను sprites.less లో లేదా ఇక్కడే ఈ పత్రంలో కనుగొనవచ్చు.

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

కేసులు వాడండి

చిహ్నాలు గొప్పవి, కానీ వాటిని ఎక్కడ ఉపయోగించాలి? ఇక్కడ కొన్ని ఆలోచనలు ఉన్నాయి:

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

ముఖ్యంగా, మీరు ట్యాగ్‌ని ఎక్కడైనా ఉంచవచ్చు <i>, మీరు చిహ్నాన్ని ఉంచవచ్చు.

ఉదాహరణలు

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