పరంజా పైన, తాజా, స్థిరమైన రూపాన్ని మరియు అనుభూతిని అందించడానికి ప్రాథమిక HTML అంశాలు స్టైల్ చేయబడ్డాయి మరియు విస్తరించదగిన తరగతులతో మెరుగుపరచబడ్డాయి.
మొత్తం టైపోగ్రాఫిక్ గ్రిడ్ మా వేరియబుల్స్.లెస్ ఫైల్‌లోని రెండు తక్కువ వేరియబుల్స్‌పై ఆధారపడి ఉంటుంది: @baseFontSizeమరియు @baseLineHeight. మొదటిది అంతటా ఉపయోగించే బేస్ ఫాంట్-పరిమాణం మరియు రెండవది బేస్ లైన్-ఎత్తు.
మేము ఆ వేరియబుల్స్ మరియు కొంత గణితాన్ని ఉపయోగిస్తాము, మా అన్ని రకాలైన మార్జిన్‌లు, ప్యాడింగ్‌లు మరియు లైన్-ఎత్తులు మరియు మరిన్నింటిని సృష్టించడానికి.
నుల్లమ్ క్విస్ రిసస్ ఎగెట్ ఉర్నా మొల్లిస్ ఓర్నారే వెల్ యూ లియో. కమ్ సోసిస్ నాటోక్ పెనాటిబస్ మరియు మాగ్నిస్ డిస్ పార్ట్యురియెంట్ మోంటెస్, నాస్కేటర్ రిడిక్యులస్ మస్. Nullam id dolor id nibh ultricies వాహనాలు.
జోడించడం ద్వారా పేరాను ప్రత్యేకంగా కనిపించేలా చేయండి .lead.
వివామస్ సాగిటిస్ లాకస్ వెల్ ఆగ్ లారీట్ రుట్రం ఫౌసిబస్ డోలర్ ఆక్టర్. డ్యూయిస్ మోలిస్, నాన్ కమోడో లక్టస్.
| మూలకం | వాడుక | ఐచ్ఛికం |
|---|---|---|
<strong> |
ముఖ్యమైన టెక్స్ట్ స్నిప్పెట్‌ను నొక్కి చెప్పడం కోసం | ఏదీ లేదు |
<em> |
ఒత్తిడితో కూడిన వచన స్నిప్పెట్‌ను నొక్కి చెప్పడం కోసం | ఏదీ లేదు |
<abbr> |
విస్తరించిన సంస్కరణను హోవర్‌లో చూపడానికి సంక్షిప్తాలు మరియు ఎక్రోనింలను చుట్టేస్తుంది | విస్తరించిన వచనం కోసం ఐచ్ఛిక .initialismపెద్ద సంక్షిప్తాల కోసం తరగతిని ఉపయోగించండి . |
<address> |
దాని సమీప పూర్వీకులు లేదా మొత్తం పని సంస్థ కోసం సంప్రదింపు సమాచారం కోసం | అన్ని పంక్తులను ముగించడం ద్వారా ఫార్మాటింగ్‌ను సంరక్షించండి<br> |
ఫ్యూస్ డాపిబస్ , టెల్లస్ ఎసి కర్సస్ కమోడో , టార్టర్ మౌరిస్ కాండిమెంటమ్ నిబ్ , యుట్ ఫెర్మెంటమ్ మాసా జస్టో సిట్ అమెట్ రిసస్. మెసెనాస్ ఫౌసిబస్ మోలిస్ ఇంటర్‌డమ్. నుల్లా విటే ఎలిట్ లిబెరో, ఎ ఫారెట్రా ఆగ్.
గమనిక: HTML5లో ఉపయోగించడానికి సంకోచించకండి <b>, <i>కానీ వాటి వినియోగం కొద్దిగా మారింది. వాయిస్, సాంకేతిక పదాలు మొదలైన వాటికి <b>అదనపు ప్రాముఖ్యత లేకుండా పదాలు లేదా పదబంధాలను హైలైట్ చేయడానికి ఉద్దేశించబడింది .<i>
<address>ట్యాగ్‌ని ఎలా ఉపయోగించవచ్చో ఇక్కడ రెండు ఉదాహరణలు ఉన్నాయి :
అట్రిబ్యూట్‌తో కూడిన సంక్షిప్తాలు titleతేలికపాటి చుక్కల దిగువ అంచుని మరియు హోవర్‌లో హెల్ప్ కర్సర్‌ను కలిగి ఉంటాయి. ఇది హోవర్‌లో ఏదైనా చూపబడుతుందనే అదనపు సూచనను వినియోగదారులకు అందిస్తుంది.
initialismకొంచెం చిన్న వచన పరిమాణాన్ని ఇవ్వడం ద్వారా టైపోగ్రాఫిక్ సామరస్యాన్ని పెంచడానికి తరగతిని సంక్షిప్తీకరణకు జోడించండి .
స్లైస్డ్ బ్రెడ్ నుండి HTML ఉత్తమమైనది.
లక్షణం అనే పదం యొక్క సంక్షిప్తీకరణ attr .
| మూలకం | వాడుక | ఐచ్ఛికం |
|---|---|---|
<blockquote> |
మరొక మూలం నుండి కంటెంట్‌ను కోట్ చేయడానికి బ్లాక్-లెవల్ ఎలిమెంట్ |
.pull-leftమరియు తరగతులు.pull-right |
<small> |
వినియోగదారు-ఫేసింగ్ అనులేఖనాన్ని జోడించడానికి ఐచ్ఛిక మూలకం, సాధారణంగా పని శీర్షికతో రచయిత | <cite>మూలం యొక్క శీర్షిక లేదా పేరు చుట్టూ ఉంచండి |
బ్లాక్‌కోట్‌ని చేర్చడానికి , కోట్‌గా <blockquote>ఏదైనా HTML చుట్టూ చుట్టండి. సూటి కోట్‌ల కోసం మేము ఒక సిఫార్సు చేస్తున్నాము <p>.
<small>మీ మూలాన్ని ఉదహరించడానికి ఐచ్ఛిక మూలకాన్ని చేర్చండి మరియు —స్టైలింగ్ ప్రయోజనాల కోసం మీరు దాని ముందు ఎమ్ డాష్‌ని పొందుతారు.
- <blockquote>
- <p> లోరెమ్ ఇప్సమ్ డోలర్ సిట్ అమెట్, కన్సెక్టెచర్ అడిపిస్సింగ్ ఎలిట్. పూర్ణాంకం ముందు వెనెనటిస్ ఉంది. </p>
- <small> ఎవరో ప్రముఖుడు </small>
- </blockquote>
డిఫాల్ట్ బ్లాక్‌కోట్‌లు ఇలా స్టైల్ చేయబడ్డాయి:
లోరెమ్ ఇప్సమ్ డోలర్ సిట్ అమెట్, కాన్సెక్టెచర్ అడిపిసింగ్ ఎలిట్. పూర్ణాంకం ముందు వెనెనటిస్ ఉంది.
బాడీ ఆఫ్ వర్క్‌లో పేరుగాంచిన వ్యక్తి
మీ బ్లాక్‌కోట్‌ను కుడివైపుకి ఫ్లోట్ చేయడానికి, జోడించండి class="pull-right":
లోరెమ్ ఇప్సమ్ డోలర్ సిట్ అమెట్, కాన్సెక్టెచర్ అడిపిసింగ్ ఎలిట్. పూర్ణాంకం ముందు వెనెనటిస్ ఉంది.
బాడీ ఆఫ్ వర్క్‌లో పేరుగాంచిన వ్యక్తి
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
హెడ్ అప్! క్షితిజసమాంతర వివరణ జాబితాలు ఎడమ కాలమ్ పరిష్కారానికి సరిపోయేంత పొడవుగా ఉన్న పదాలను కుదించాయి text-overflow. ఇరుకైన వీక్షణపోర్ట్‌లలో, అవి డిఫాల్ట్ పేర్చబడిన లేఅవుట్‌కి మారుతాయి.
తో కోడ్ యొక్క ఇన్లైన్ స్నిప్పెట్‌లను చుట్టండి <code>.
- ఉదాహరణకు , < code > సెక్షన్ </ code > ఇన్‌లైన్‌గా చుట్టబడి ఉండాలి .
<pre>కోడ్ యొక్క బహుళ లైన్ల కోసం ఉపయోగించండి . సరైన రెండరింగ్ కోసం కోడ్‌లోని ఏదైనా యాంగిల్ బ్రాకెట్‌లను తప్పించుకోవాలని నిర్ధారించుకోండి.
<p>నమూనా వచనం ఇక్కడ...</p>
- <ముందు>
- <p>నమూనా వచనం ఇక్కడ...</p>
- </pre>
గమనిక: ట్యాగ్‌లలో కోడ్‌ను <pre>వీలైనంత ఎడమవైపుకు దగ్గరగా ఉండేలా చూసుకోండి; ఇది అన్ని ట్యాబ్‌లను రెండర్ చేస్తుంది.
.pre-scrollableమీరు గరిష్టంగా 350px ఎత్తును సెట్ చేసే తరగతిని ఐచ్ఛికంగా జోడించవచ్చు మరియు y-యాక్సిస్ స్క్రోల్‌బార్‌ను అందిస్తుంది.
మెరుగుపరచబడిన రెండరింగ్ కోసం ఒకే <pre>మూలకాన్ని తీసుకోండి మరియు రెండు ఐచ్ఛిక తరగతులను జోడించండి.
- <p> ఇక్కడ నమూనా వచనం... </p>
- <pre class = "pretyprint
- లైనమ్స్" >
- <p>నమూనా వచనం ఇక్కడ...</p>
- </pre>
google-code-prettifyని డౌన్‌లోడ్ చేయండి మరియు ఎలా ఉపయోగించాలో రీడ్‌మీని వీక్షించండి.
| ట్యాగ్ చేయండి | వివరణ |
|---|---|
<table> |
పట్టిక ఆకృతిలో డేటాను ప్రదర్శించడం కోసం చుట్టే మూలకం |
<thead> |
<tr>పట్టిక నిలువు వరుసలను లేబుల్ చేయడానికి పట్టిక శీర్షిక వరుసలు ( ) కోసం కంటైనర్ మూలకం |
<tbody> |
<tr>టేబుల్ బాడీలో టేబుల్ వరుసలు ( ) కోసం కంటైనర్ ఎలిమెంట్ |
<tr> |
ఒకే అడ్డు వరుసలో కనిపించే టేబుల్ సెల్స్ ( <td>లేదా ) సెట్ కోసం కంటైనర్ ఎలిమెంట్<th> |
<td> |
డిఫాల్ట్ టేబుల్ సెల్ |
<th> |
నిలువు వరుస (లేదా అడ్డు వరుస, స్కోప్ మరియు ప్లేస్‌మెంట్ ఆధారంగా) లేబుల్‌ల కోసం ప్రత్యేక టేబుల్ సెల్ తప్పనిసరిగా a లోపల ఉపయోగించాలి <thead> |
<caption> |
పట్టికలో ఉన్న వాటి యొక్క వివరణ లేదా సారాంశం, ముఖ్యంగా స్క్రీన్ రీడర్‌లకు ఉపయోగకరంగా ఉంటుంది |
- <పట్టిక>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| పేరు | తరగతి | వివరణ |
|---|---|---|
| డిఫాల్ట్ | ఏదీ లేదు | శైలులు లేవు, నిలువు వరుసలు మరియు అడ్డు వరుసలు మాత్రమే |
| ప్రాథమిక | .table |
అడ్డు వరుసల మధ్య క్షితిజ సమాంతర రేఖలు మాత్రమే |
| సరిహద్దులు | .table-bordered |
మూలలను రౌండ్ చేస్తుంది మరియు బయటి అంచుని జోడిస్తుంది |
| జీబ్రా-గీత | .table-striped |
బేసి వరుసలకు (1, 3, 5, మొదలైనవి) లేత బూడిద రంగు నేపథ్య రంగును జోడిస్తుంది |
| ఘనీభవించినది | .table-condensed |
tdఅన్ని మరియు thమూలకాలలో 8px నుండి 4px వరకు నిలువు ప్యాడింగ్‌ను సగానికి తగ్గిస్తుంది |
పట్టికలు స్వయంచాలకంగా రీడబిలిటీని నిర్ధారించడానికి మరియు నిర్మాణాన్ని నిర్వహించడానికి కొన్ని సరిహద్దులతో స్వయంచాలకంగా స్టైల్ చేయబడతాయి. 2.0తో, .tableతరగతి అవసరం.
- <టేబుల్ క్లాస్ = "టేబుల్" >
- …
- </table>
| # | మొదటి పేరు | చివరి పేరు | వినియోగదారు పేరు |
|---|---|---|---|
| 1 | మార్క్ | ఒట్టో | @mdo |
| 2 | జాకబ్ | తోర్న్టన్ | @కొవ్వు |
| 3 | లారీ | పక్షి | @ట్విట్టర్ |
జీబ్రా-స్ట్రిపింగ్‌ని జోడించడం ద్వారా మీ టేబుల్‌లతో కొంచెం ఫ్యాన్సీని పొందండి—కేవలం .table-stripedతరగతిని జోడించండి.
గమనిక: చారల పట్టికలు :nth-childCSS ఎంపిక సాధనాన్ని ఉపయోగిస్తాయి మరియు IE7-IE8లో అందుబాటులో లేవు.
- <టేబుల్ క్లాస్ = "టేబుల్-స్ట్రిప్డ్" >
- …
- </table>
| # | మొదటి పేరు | చివరి పేరు | వినియోగదారు పేరు |
|---|---|---|---|
| 1 | మార్క్ | ఒట్టో | @mdo |
| 2 | జాకబ్ | తోర్న్టన్ | @కొవ్వు |
| 3 | లారీ | పక్షి | @ట్విట్టర్ |
సౌందర్య ప్రయోజనాల కోసం మొత్తం టేబుల్ చుట్టూ సరిహద్దులను మరియు గుండ్రని మూలలను జోడించండి.
- <table class = "టేబుల్-బోర్డర్డ్" >
- …
- </table>
| # | మొదటి పేరు | చివరి పేరు | వినియోగదారు పేరు |
|---|---|---|---|
| 1 | మార్క్ | ఒట్టో | @mdo |
| మార్క్ | ఒట్టో | @getbootstrap | |
| 2 | జాకబ్ | తోర్న్టన్ | @కొవ్వు |
| 3 | లారీ ది బర్డ్ | @ట్విట్టర్ | |
.table-condensedటేబుల్ సెల్ పాడింగ్‌ను సగానికి (8px నుండి 4px వరకు) కట్ చేయడానికి తరగతిని జోడించడం ద్వారా మీ టేబుల్‌లను మరింత కాంపాక్ట్ చేయండి .
- <table class = "టేబుల్-కండెన్స్డ్" >
- …
- </table>
| # | మొదటి పేరు | చివరి పేరు | వినియోగదారు పేరు |
|---|---|---|---|
| 1 | మార్క్ | ఒట్టో | @mdo |
| 2 | జాకబ్ | తోర్న్టన్ | @కొవ్వు |
| 3 | లారీ ది బర్డ్ | @ట్విట్టర్ | |
అందుబాటులో ఉన్న ఏవైనా తరగతులను ఉపయోగించడం ద్వారా విభిన్న రూపాలను సాధించడానికి టేబుల్ క్లాస్‌లలో దేనినైనా కలపడానికి సంకోచించకండి.
- <table class = "టేబుల్-స్ట్రిప్డ్ టేబుల్-బోర్డర్డ్ టేబుల్-కండెన్స్డ్" >
- ...
- </table>
| పూర్తి పేరు | |||
|---|---|---|---|
| # | మొదటి పేరు | చివరి పేరు | వినియోగదారు పేరు |
| 1 | మార్క్ | ఒట్టో | @mdo |
| 2 | జాకబ్ | తోర్న్టన్ | @కొవ్వు |
| 3 | లారీ ది బర్డ్ | @ట్విట్టర్ | |
బూట్‌స్ట్రాప్‌లోని ఫారమ్‌ల గురించిన ఉత్తమమైన అంశం ఏమిటంటే, మీ అన్ని ఇన్‌పుట్‌లు మరియు నియంత్రణలు మీరు వాటిని మీ మార్కప్‌లో ఎలా నిర్మించినప్పటికీ అద్భుతంగా కనిపిస్తాయి. నిరుపయోగమైన HTML అవసరం లేదు, కానీ మేము అవసరమైన వారికి నమూనాలను అందిస్తాము.
సులభమైన స్టైలింగ్ మరియు ఈవెంట్ బైండింగ్ కోసం మరింత సంక్లిష్టమైన లేఅవుట్లు క్లుప్తమైన మరియు స్కేలబుల్ క్లాస్‌లతో వస్తాయి, కాబట్టి మీరు అడుగడుగునా కవర్ చేయబడతారు.
బూట్స్ట్రాప్ నాలుగు రకాల ఫారమ్ లేఅవుట్‌లకు మద్దతుతో వస్తుంది:
వివిధ రకాల ఫారమ్ లేఅవుట్‌లకు మార్కప్ చేయడానికి కొన్ని మార్పులు అవసరం, కానీ నియంత్రణలు అలాగే ఉంటాయి మరియు ప్రవర్తిస్తాయి.
బూట్స్ట్రాప్ ఫారమ్‌లు ఇన్పుట్, టెక్స్ట్‌ఏరియా వంటి అన్ని బేస్ ఫారమ్ నియంత్రణల కోసం శైలులను కలిగి ఉంటాయి మరియు మీరు ఆశించే ఎంపికను కలిగి ఉంటాయి. కానీ ఇది అనుబంధిత మరియు ముందుగా అందించిన ఇన్‌పుట్‌లు మరియు చెక్‌బాక్స్‌ల జాబితాలకు మద్దతు వంటి అనేక అనుకూల భాగాలతో కూడా వస్తుంది.
ప్రతి రకమైన ఫారమ్ నియంత్రణ కోసం లోపం, హెచ్చరిక మరియు విజయం వంటి రాష్ట్రాలు చేర్చబడ్డాయి. డిసేబుల్ కంట్రోల్స్ కోసం స్టైల్స్ కూడా చేర్చబడ్డాయి.
బూట్స్ట్రాప్ సాధారణ వెబ్ ఫారమ్‌ల యొక్క నాలుగు శైలుల కోసం సాధారణ మార్కప్ మరియు శైలులను అందిస్తుంది.
| పేరు | తరగతి | వివరణ |
|---|---|---|
| నిలువు (డిఫాల్ట్) | .form-vertical (అవసరం లేదు) |
నియంత్రణలపై పేర్చబడిన, ఎడమకు సమలేఖనం చేయబడిన లేబుల్‌లు |
| లైన్ లో | .form-inline |
కాంపాక్ట్ శైలి కోసం ఎడమకు సమలేఖనం చేయబడిన లేబుల్ మరియు ఇన్లైన్-బ్లాక్ నియంత్రణలు |
| వెతకండి | .form-search |
సాధారణ శోధన సౌందర్యం కోసం అదనపు గుండ్రని టెక్స్ట్ ఇన్పుట్ |
| అడ్డంగా | .form-horizontal |
నియంత్రణల వలె అదే లైన్‌లో ఎడమ, కుడి-సమలేఖనం చేయబడిన లేబుల్‌లను ఫ్లోట్ చేయండి |
అదనపు మార్కప్ లేకుండా స్మార్ట్ మరియు తేలికపాటి డిఫాల్ట్‌లు.
- <form class = "బాగా" >
- <label> లేబుల్ పేరు </label>
- <input type = "text" class = "span3" placeholder = "ఏదైనా టైప్ చేయండి..." >
- <span class = "help-block" > ఉదాహరణ బ్లాక్-లెవల్ సహాయ వచనం ఇక్కడ. </span>
- <లేబుల్ క్లాస్ = "చెక్బాక్స్" >
- <input type = "checkbox" > నన్ను తనిఖీ చేయండి
- </label>
- <button type = "submit" class = "btn" > Submit </button>
- </form>
.form-searchఫారమ్‌కు మరియు .search-queryకు జోడించండి input.
- <form class = "బాగా ఫారమ్-శోధన" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Search </button>
- </form>
.form-inlineఫారమ్ నియంత్రణల యొక్క నిలువు అమరిక మరియు అంతరాన్ని చక్కగా జోడించండి .
- <form class = "బాగా ఫారమ్-ఇన్లైన్" >
- <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>
మేము మద్దతిచ్చే అన్ని డిఫాల్ట్ ఫారమ్ నియంత్రణలు కుడివైపున చూపబడ్డాయి. బుల్లెట్ జాబితా ఇక్కడ ఉంది:
ఎగువ ఉదాహరణ ఫారమ్ లేఅవుట్‌ను బట్టి, మొదటి ఇన్పుట్ మరియు నియంత్రణ సమూహంతో అనుబంధించబడిన మార్కప్ ఇక్కడ ఉంది. ది .control-group, .control-label, మరియు .controlsతరగతులు అన్నీ స్టైలింగ్ కోసం అవసరం.
- <form class = "form-horizontal" >
- <fieldset>
- <legend> లెజెండ్ టెక్స్ట్ </legend>
- <div class = "control-group" >
- <label class = "control-label" for = "input01" > టెక్స్ట్ ఇన్పుట్ </label>
- <div class = "నియంత్రణలు" >
- <ఇన్పుట్ రకం = "టెక్స్ట్" క్లాస్ = "ఇన్పుట్-xlarge" id = "input01" >
- <p class = "help-block" > సహాయక వచనం </p>
- </div>
- </div>
- </fieldset>
- </form>
బూట్స్ట్రాప్ బ్రౌజర్-మద్దతు ఉన్న ఫోకస్డ్ మరియు స్టేట్‌ల కోసం శైలులను కలిగి ఉంటుంది disabled. మేము డిఫాల్ట్ వెబ్‌కిట్‌ను తీసివేసి, దాని స్థానంలో outlineఒక కోసం వర్తింపజేస్తాము .box-shadow:focus
ఇది లోపాలు, హెచ్చరికలు మరియు విజయానికి సంబంధించిన ధ్రువీకరణ శైలులను కూడా కలిగి ఉంటుంది. ఉపయోగించడానికి, చుట్టూ ఉన్న వాటికి ఎర్రర్ క్లాస్‌ని జోడించండి .control-group.
- <ఫీల్డ్ సెట్
- class = "కంట్రోల్-గ్రూప్ ఎర్రర్" >
- …
- </fieldset>
ఇన్పుట్ సమూహాలు—అనుబంధించిన లేదా ముందుగా పెంపొందించిన వచనంతో—మీ ఇన్‌పుట్‌లకు మరింత సందర్భాన్ని అందించడానికి సులభమైన మార్గాన్ని అందిస్తాయి. ట్విట్టర్ యూజర్‌నేమ్‌ల కోసం @ సైన్ లేదా ఫైనాన్స్ కోసం $ వంటి గొప్ప ఉదాహరణలు ఉన్నాయి.
v1.4 వరకు, చెక్‌బాక్స్‌లు మరియు రేడియోలను పేర్చడానికి బూట్‌స్ట్రాప్‌కి వాటి చుట్టూ అదనపు మార్కప్ అవసరం. <label class="checkbox">ఇప్పుడు, మూటగట్టిన దానిని పునరావృతం చేయడం ఒక సాధారణ విషయం <input type="checkbox">.
ఇన్లైన్ చెక్‌బాక్స్‌లు మరియు రేడియోలకు కూడా మద్దతు ఉంది. .inlineదేనికైనా జోడించండి .checkboxలేదా .radioమీరు పూర్తి చేసారు.
.add-onఇన్లైన్ ఫారమ్‌లో ప్రిపెండ్ లేదా అపెండ్ ఇన్‌పుట్‌లను ఉపయోగించడానికి, ఖాళీలు లేకుండా inputఒకే లైన్‌లో ఉంచాలని నిర్ధారించుకోండి .
మీ ఫారమ్ ఇన్‌పుట్‌ల కోసం సహాయ వచనాన్ని జోడించడానికి, ఇన్లైన్ సహాయ వచనాన్ని చేర్చండి లేదా ఇన్పుట్ మూలకం తర్వాత <span class="help-inline">సహాయ టెక్స్ట్ బ్లాక్‌ను చేర్చండి.<p class="help-block">
ప్రతి చిహ్నాన్ని అదనపు అభ్యర్థనగా మార్చడానికి బదులుగా, మేము వాటిని స్ప్రైట్‌గా కంపైల్ చేసాము—ఒక ఫైల్‌లోని చిత్రాల సమూహంతో చిత్రాలను ఉంచడానికి CSSని ఉపయోగిస్తుంది background-position. మేము Twitter.comలో ఉపయోగించే అదే పద్ధతి మరియు ఇది మాకు బాగా పనిచేసింది.
అన్ని చిహ్నాల తరగతులు .icon-మా ఇతర భాగాల మాదిరిగానే సరైన నేమ్‌స్పేసింగ్ మరియు స్కోపింగ్ కోసం ప్రిఫిక్స్ చేయబడ్డాయి. ఇది ఇతర సాధనాలతో విభేదాలను నివారించడానికి సహాయపడుతుంది.
మేము ఇక్కడ డాక్స్‌లో లింక్ మరియు క్రెడిట్‌ను అందించేంత వరకు మా ఓపెన్-సోర్స్ టూల్‌కిట్‌లో సెట్ చేసిన హాఫ్లింగ్స్‌ను ఉపయోగించడానికి Glyphicons మాకు అనుమతినిచ్చింది. దయచేసి మీ ప్రాజెక్ట్‌లలో కూడా అదే పని చేయడాన్ని పరిగణించండి.
బూట్స్ట్రాప్ <i>అన్ని చిహ్నాల కోసం ట్యాగ్‌ని ఉపయోగిస్తుంది, కానీ వాటికి కేస్ క్లాస్ లేదు-షేర్డ్ ప్రిఫిక్స్ మాత్రమే. ఉపయోగించడానికి, కింది కోడ్‌ను ఎక్కడైనా ఉంచండి:
- <i class = "icon-search" ></i>
విలోమ (తెలుపు) చిహ్నాల కోసం శైలులు కూడా అందుబాటులో ఉన్నాయి, ఒక అదనపు తరగతితో సిద్ధంగా ఉన్నాయి:
- <i class = "icon-search icon-white" ></i>
మీ చిహ్నాల కోసం ఎంచుకోవడానికి 140 తరగతులు ఉన్నాయి. సరైన తరగతులతో ట్యాగ్‌ని జోడించి <i>, మీరు సెట్ చేసారు. మీరు పూర్తి జాబితాను sprites.less లో లేదా ఇక్కడే ఈ పత్రంలో కనుగొనవచ్చు.
హెడ్ అప్! బటన్లు లేదా nav లింక్‌లలో వలె టెక్స్ట్ స్ట్రింగ్‌లను ఉపయోగిస్తున్నప్పుడు, <i>సరైన స్పేసింగ్ కోసం ట్యాగ్ తర్వాత ఖాళీని వదిలివేయాలని నిర్ధారించుకోండి.
చిహ్నాలు గొప్పవి, కానీ వాటిని ఎక్కడ ఉపయోగించాలి? ఇక్కడ కొన్ని ఆలోచనలు ఉన్నాయి:
ముఖ్యంగా, మీరు ట్యాగ్‌ని ఎక్కడైనా ఉంచవచ్చు <i>, మీరు చిహ్నాన్ని ఉంచవచ్చు.
టూల్‌బార్, నావిగేషన్ లేదా ముందుగా రూపొందించిన ఫారమ్ ఇన్‌పుట్‌ల కోసం బటన్లు, బటన్ సమూహాలలో వాటిని ఉపయోగించండి.