टाइपोग्राफिक पैमाना पर बा

पूरा टाइपोग्राफिक ग्रिड हमनी के variables.less फाइल में दू गो Less चर पर आधारित बा: @baseFontSizeआ @baseLineHeight. पहिला बेस फॉन्ट-साइज के पूरा में इस्तेमाल कइल गइल बा आ दूसरा बेस लाइन-हाईट बा।

हमनी के ओह चर के इस्तेमाल करेनी जा, आ कुछ गणित के, अपना सगरी टाइप आ अउरी बहुत कुछ के मार्जिन, पैडिंग, आ लाइन-हाइट बनावे खातिर.

उदाहरण के देह पाठ के बारे में बतावल गइल बा

नुल्लम क्विस रिसुस एगेट उर्ना मोलिस ऑर्नरे वेल ईउ लियो। सह सोसाइटिस नाटोक पेनाटिबस एट मैग्निस डिस प्रसव मोंटेस, नास्केटर रिडिकुलस मस। नुल्लम आईडी डोलोर आईडी निभ उल्ट्रिसीस वेहिकुला उत आईडी अभिजात वर्ग।

विवामस सैजिटिस लैकस वेल औग लाओरीट रुट्रम फौसिबस डोलोर नीलामी। डुइस मोलिस, एस्ट नॉन कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला, एगेट लैसिनिया ओडियो सेम नेसी एलिट। डोनेक सेड ओडियो दुई के बा।

जोर देबे के प्रयोग करत बानी

फ्यूसे दापिबस , टेलस एसी कर्सस कोमोडो , टॉर्टोर मौरिस कंडिमेंटम निभ , उत फर्मेन्टम मासा जस्टो बइठ अमेट रिसुस। मेसेनास फौसिबस मोलिस इंटरडम के नाम से जानल जाला। नुल्ला विटा एलिट लिबेरो, एगो फारेट्रा औग।

नोट: बेझिझक इस्तेमाल करीं <b>आ <i>एचटीएमएल 5 में, बाकिर ओह लोग के इस्तेमाल में तनी बदलाव आइल बा. <b>के मतलब होला शब्द भा वाक्यांश के बिना कवनो अतिरिक्त महत्व के उजागर कइल जबकि <i>ई अधिकतर आवाज, तकनीकी शब्द वगैरह खातिर होला.

उदाहरण के पता दिहल जाव

<address>टैग के इस्तेमाल कइसे कइल जा सके ला एकर दू गो उदाहरण दिहल गइल बा:

उदाहरण संक्षिप्त रूप के रूप में दिहल गइल बा

संक्षिप्त रूप सभ के स्टाइल बड़का पाठ आ हल्का बिंदीदार नीचे वाला सीमा के साथ कइल गइल बा। इनहन में होवर पर हेल्प कर्सर भी होला एह से यूजर लोग के लगे एक्स्ट्रा इंडिकेशन होला कि होवर पर कुछ देखावल जाई।

एचटीएमएल कटा रोटी के बाद से सबसे बढ़िया चीज बा।

विशेषता शब्द के एगो संक्षिप्त रूप ह attr .

ब्लॉककोट शामिल करे खातिर <blockquote>कवनो भी एचटीएमएल के कोट के रूप में लपेट लीं। सीधा उद्धरण खातिर हमनी के एगो <p>.

अपना स्रोत के हवाला देबे खातिर एगो वैकल्पिक तत्व शामिल करीं आ स्टाइलिंग के मकसद से एकरा से पहिले <small>रउरा के एगो एम डैश मिल जाई .—

<ब्लॉककोट> के बा
  <p> लोरेम इप्सम डोलोर बइठल अमेट, कॉन्सेक्टेटर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एराट एगो एंटी वेनेनेटिस। </p>के बा
  <छोट> केहू मशहूर </small>
</blockquote> के बा

डिफ़ॉल्ट ब्लॉककोट सभ के एह तरीका से स्टाइल कइल जाला:

लोरेम इप्सम डोलोर बइठल अमेट, कॉन्सेक्टेटर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एराट एगो एंटी वेनेनेटिस।

बॉडी ऑफ वर्क में केहू मशहूर बा

आपन ब्लॉककोट के दाहिने ओर फ्लोट करे खातिर, जोड़ीं class="pull-right":

लोरेम इप्सम डोलोर बइठल अमेट, कॉन्सेक्टेटर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एराट एगो एंटी वेनेनेटिस।

बॉडी ऑफ वर्क में केहू मशहूर बा

बिना क्रम के बा

<ul>

• लोरेम इप्सम डोलोर बइठल अमेट
• कॉन्सेक्टेटर एडिपिसिंग एलिट के बा
• मासा में पूर्णांक मोलेस्टी लोरेम के बा
• प्रीटियम निस्ल एलिकेट में फैसिलिसिस के बारे में बतावल गइल बा
• नुल्ला वोलुतपत एलिक्वाम वेलिट के बा
  • फेसेलस इअकुलिस नेके के नाम से जानल जाला
  • पुरुष सोडलेस अल्ट्रिसीज के बा
  • वेस्टिबुलम लाओरीत पोर्टिटोर सेम के बा
  • एसी ट्रिस्टिक लिबेरो वोलुटपट पर बा
• फौसिबस पोर्टा लैकस फ्रिंगिला वेल के बा
• एनियन बइठल अमेट एरात ननक
• एगेट पोर्टिटोर लोरेम के बा

अनस्टाइल कइल गइल बा

<ul class="unstyled">

• लोरेम इप्सम डोलोर बइठल अमेट
• कॉन्सेक्टेटर एडिपिसिंग एलिट के बा
• मासा में पूर्णांक मोलेस्टी लोरेम के बा
• प्रीटियम निस्ल एलिकेट में फैसिलिसिस के बारे में बतावल गइल बा
• नुल्ला वोलुतपत एलिक्वाम वेलिट के बा
  • फेसेलस इअकुलिस नेके के नाम से जानल जाला
  • पुरुष सोडलेस अल्ट्रिसीज के बा
  • वेस्टिबुलम लाओरीत पोर्टिटोर सेम के बा
  • एसी ट्रिस्टिक लिबेरो वोलुटपट पर बा
• फौसिबस पोर्टा लैकस फ्रिंगिला वेल के बा
• एनियन बइठल अमेट एरात ननक
• एगेट पोर्टिटोर लोरेम के बा

आदेश दिहल गइल बा

<ol>

1. लोरेम इप्सम डोलोर बइठल अमेट
2. कॉन्सेक्टेटर एडिपिसिंग एलिट के बा
3. मासा में पूर्णांक मोलेस्टी लोरेम के बा
4. प्रीटियम निस्ल एलिकेट में फैसिलिसिस के बारे में बतावल गइल बा
5. नुल्ला वोलुतपत एलिक्वाम वेलिट के बा
6. फौसिबस पोर्टा लैकस फ्रिंगिला वेल के बा
7. एनियन बइठल अमेट एरात ननक
8. एगेट पोर्टिटोर लोरेम के बा

बिबरन

<dl>

विवरण के सूची दिहल गइल बा

शब्दन के परिभाषित करे खातिर एगो विवरण सूची एकदम सही बा।

यूइसमोड के नाम से जानल जाला

वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस यूइसमोड सेम्पर एगेट लैसिनिया ओडियो सेम नेसी एलिट।

डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस।

मलेसुआडा पोर्टा के बा

एटियम पोर्टा सेम मालेसुआडा मैग्ना मोलिस यूइसमोड के नाम से जानल जाला।

इनलाइन के बा

कोड के इनलाइन स्निपेट के के साथ लपेटीं <code>।

जइसे कि <code> सेक्शन </ code > के इनलाइन के रूप में लपेटल जाव .  

बेसिक ब्लॉक के बा

<pre>कोड के कई लाइन खातिर इस्तेमाल करीं । सही रेंडरिंग खातिर कोड में कवनो एंगल ब्रैकेट से जरूर बचल जाव.

<p>इहाँ के नमूना पाठ...</p>

<पूर्व> के बा
  <p>इहाँ के नमूना पाठ...</p>
</pre> के बा

नोट:<pre> टैग सभ के भीतर कोड के बाईं ओर के जेतना नजदीक हो सके ओतना नजदीक जरूर रखीं ; इ सभ टैब के रेंडर क दिही।

रउआँ वैकल्पिक रूप से .pre-scrollableक्लास जोड़ सकत बानी जे 350px के मैक्स-हाईट सेट करी आ y-अक्ष स्क्रॉलबार उपलब्ध करावे ला।

गूगल प्रीटिफाई कइले बानी

एकही <pre>तत्व के लीं आ बढ़ावल रेंडरिंग खातिर दू गो वैकल्पिक क्लास जोड़ीं।

<p> इहाँ पाठ के नमूना बा... </p>

<pre class = "सुन्दर छाप बा ।" 
     लिनम" > के बा
  <p>इहाँ के नमूना पाठ...</p>
</pre> के बा

google-code-prettify डाउनलोड करीं आ एकर इस्तेमाल करे के तरीका खातिर रीडमी देखीं.

<टेबल> के बा
  <सिर> के बा
    <tr> के बा
      <th> ... </th> के बा
      <th> ... </th> के बा
    </tr>के बा
  </thead> के बा
  <tbody> के बा
    <tr> के बा
      <td> ... </td> के बा
      <td> ... </td> के बा
    </tr>के बा
  </tbody> के बा
</table> के बा

टेबल सभ के खाली कुछ सीमा सभ के साथ स्वचालित रूप से स्टाइल कइल जाला ताकि पठनीयता सुनिश्चित कइल जा सके आ संरचना के बनावे रखल जा सके। 2.0 के साथ, .tableक्लास के जरूरत बा।

<टेबल क्लास = "टेबल" > के बा 
  ...
</table> के बा

ज़ेबरा-स्ट्राइपिंग जोड़ के अपना टेबल के साथ तनी फैंसी बनाईं-बस .table-stripedक्लास जोड़ीं।

नोट: धारीदार टेबल सभ में :nth-childCSS चयनकर्ता के इस्तेमाल होला आ ई IE7-IE8 में उपलब्ध नइखे।

<तालिका वर्ग = "तालिका तालिका-धारीदार" > 
  ...
</table> के बा

सौंदर्य के उद्देश्य से पूरा टेबल के चारों ओर सीमा अवुरी गोल कोना जोड़ल जाए।

<table class = "टेबल टेबल-सीमा वाला" > 
  ...
</table> के बा

.table-condensedटेबल सेल पैडिंग के आधा में काट के (8px से 4px तक) क्लास जोड़ के आपन टेबल सभ के अउरी कॉम्पैक्ट बनाईं ।

<तालिका वर्ग = "तालिका तालिका-घनीभूत" > 
  ...
</table> के बा

उपलब्ध कवनो क्लास के उपयोग करके अलग-अलग लुक हासिल करे खातिर टेबल क्लास में से कवनो एक के मिला के बेझिझक महसूस करीं।

<table class = "टेबल तालिका-धारीदार तालिका-सीमा वाला तालिका-घनीभूत" > 
  ...
</table> के बा

लचीला एचटीएमएल आ सीएसएस बा

बूटस्ट्रैप में फॉर्म के बारे में सबसे बढ़िया बात इ बा कि आपके सभ इनपुट अवुरी कंट्रोल बहुत बढ़िया लागता चाहे आप अपना मार्कअप में एकरा के कईसे बनाईं। कवनो फालतू एचटीएमएल के जरूरत नइखे बाकिर हमनी का ओह लोग खातिर पैटर्न देत बानी जा जेकरा एकर जरूरत बा.

अउरी जटिल लेआउट सभ में आसान स्टाइलिंग आ इवेंट बाइंडिंग खातिर संक्षिप्त आ स्केल करे लायक क्लास सभ के साथ आवे ला, एह से हर स्टेप पर रउआँ के कवर कइल जाला।

चार गो लेआउट शामिल बा

बूटस्ट्रैप चार तरह के फॉर्म लेआउट खातिर सपोर्ट के संगे आवेला:

• ऊर्ध्वाधर (डिफ़ॉल्ट) के बा।
• तलाशी
• इनलाइन के बा
• क्षैतिज

अलग-अलग किसिम के फॉर्म लेआउट सभ में मार्कअप खातिर कुछ बदलाव के जरूरत होला, बाकी खुद नियंत्रण सभ एकही नियर रहे लें आ व्यवहार करे लें।

नियंत्रण राज्य आ अउरी बहुत कुछ

बूटस्ट्रैप के फॉर्म में सभ बेस फॉर्म कंट्रोल जइसे कि इनपुट, टेक्स्टएरिया, आ चयन खातिर स्टाइल शामिल बा जवना के रउरा उमेद करीं. लेकिन एकरा में कई गो कस्टम कंपोनेंट भी बा जइसे कि एपेंडेड आ प्रीपेंड इनपुट आ चेकबॉक्स सभ के लिस्ट खातिर सपोर्ट।

हर प्रकार के फॉर्म कंट्रोल खातिर त्रुटि, चेतावनी, आ सफलता जइसन राज्य शामिल कइल गइल बा। एकरे अलावा अक्षम नियंत्रण सभ खातिर शैली सभ के भी सामिल कइल गइल बा।

मूल रूप के रूप में बा

v2.0 के साथ, हमनी के लगे फॉर्म स्टाइल खातिर हल्का आ स्मार्ट डिफ़ॉल्ट बा। कवनो एक्स्ट्रा मार्कअप ना, बस फॉर्म कंट्रोल बा.

<फॉर्म क्लास = "अच्छा" > बा 
  <label> लेबल के नाम </label> बा
  <इनपुट प्रकार = "पाठ" वर्ग = "span3" प्लेसहोल्डर = "कुछ टाइप करीं ..." >   
  <span class = "help-inline" > संबद्ध मदद पाठ बा! </span>के बा 
  <लेबल वर्ग = "चेकबॉक्स" > बा 
    <input type = "checkbox" > हमरा के जांच करीं 
  </label> के बा
  <बटन प्रकार = "सबमिट" class = "btn" > सबमिट करीं </बटन>  
</form> के बा

खोज के फार्म बा

डिफ़ॉल्ट वेबकिट शैली के प्रतिबिंबित करत, बस .form-searchअतिरिक्त गोल खोज क्षेत्र खातिर जोड़ीं।

<form class = "अच्छा रूप-खोज" > बा 
  <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट-माध्यम खोज-क्वेरी" >  
  <बटन प्रकार = "सबमिट" क्लास = "btn" > खोज </बटन>  
</form> के बा

इनलाइन फार्म के बा

इनपुट शुरू करे खातिर ब्लॉक लेवल बा। .form-inlineआ खातिर .form-horizontal, हमनी के इनलाइन-ब्लॉक के इस्तेमाल करेनी जा।

<फॉर्म क्लास = "अच्छा फॉर्म-इनलाइन" > बा 
  <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट-छोट" प्लेसहोल्डर = "ईमेल" >   
  <इनपुट प्रकार = "पासवर्ड" वर्ग = "इनपुट-छोट" प्लेसहोल्डर = "पासवर्ड" >   
  <बटन प्रकार = "सबमिट" क्लास = "बीटीएन" > जा </बटन>  
</form> के बा

उदाहरण के रूप में मार्कअप के बा

उपर दिहल उदाहरण फॉर्म लेआउट के देखत, इहाँ पहिला इनपुट आ कंट्रोल ग्रुप से जुड़ल मार्कअप दिहल गइल बा। स्टाइलिंग खातिर .control-group, .control-label, आ .controlsक्लास सभ जरूरी बा।

<फॉर्म क्लास = "फॉर्म-क्षैतिज" > बा 
  <फील्डसेट> के बा
    <legend> किंवदंती पाठ </legend> के बारे में बतावल गइल बा
    <div वर्ग = "नियंत्रण-समूह" > बा 
      <label class = "control-label" for = "input01" > पाठ इनपुट </label>  
      <div वर्ग = "नियंत्रण" > बा 
        <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट-xlarge" आईडी = "इनपुट 01" >   
        <p class = "help-block" > मदद पाठ के समर्थन कर रहल बा </p> 
      </div> के बा
    </div> के बा
  </फील्डसेट> के बा
</form> के बा

का शामिल बा

बाईं ओर देखावल गइल सभ डिफ़ॉल्ट फॉर्म कंट्रोल सभ के हमनी के सपोर्ट करे लीं। इहाँ बुलेट वाला लिस्ट दिहल गइल बा:

• पाठ इनपुट (पाठ, पासवर्ड, ईमेल आदि) के बारे में जानकारी दिहल गइल बा।
• चेकबॉक्स के बा
• रेडियो पर दिहल गइल बा
• चुनीं
• कई गो चुने के बा
• फाइल के इनपुट कइल जाला
• टेक्स्टएरिया के बा

v2.0 के साथ नया डिफ़ॉल्ट बा

v1.4 तक ले, बूटस्ट्रैप के डिफ़ॉल्ट फॉर्म स्टाइल सभ में क्षैतिज लेआउट के इस्तेमाल कइल गइल। बूटस्ट्रैप 2 के साथ, हमनी के ओह बाधा के हटा देनी जा ताकि कवनो भी फॉर्म खातिर स्मार्ट, अधिक स्केल करे लायक डिफ़ॉल्ट होखे।

ब्राउजर के राज्यन के नया रूप दिहल गइल बा

बूटस्ट्रैप में ब्राउजर समर्थित फोकस आ disabledस्टेट खातिर स्टाइल के सुविधा बा। हमनी के डिफ़ॉल्ट वेबकिट के हटा देनी जा आ ओकरा जगह outlineपर एगो लागू कर देनी जा .box-shadow:focus

फार्म के मान्यता दिहल जाला

एकरे अलावा एह में त्रुटि, चेतावनी, आ सफलता खातिर मान्यता शैली सभ के भी सामिल कइल गइल बा। उपयोग करे खातिर, आसपास के में त्रुटि वर्ग जोड़ीं .control-group।

<फील्डसेट के बा
  class = "नियंत्रण-समूह त्रुटि" > बा
  ...
</फील्डसेट> के बा

इनपुट के प्रीपेंड & संलग्न कइल जाला

इनपुट समूह-संलग्न भा पहिले से लिखल पाठ के साथ-रउआ इनपुट सभ खातिर अउरी संदर्भ देवे के एगो आसान तरीका उपलब्ध करावे ला। एकर बढ़िया उदाहरण में ट्विटर यूजरनेम खातिर @ चिन्ह भा वित्त खातिर $ शामिल बा।

चेकबॉक्स आ रेडियो के बारे में बतावल गइल बा

v1.4 तक ले, बूटस्ट्रैप के स्टैक करे खातिर चेकबॉक्स आ रेडियो सभ के आसपास अतिरिक्त मार्कअप के जरूरत पड़े ला। अब, ई एगो साधारण बात बा कि दोहरावल जाव <label class="checkbox">कि लपेटत बा <input type="checkbox">.

इनलाइन चेकबॉक्स आ रेडियो के भी सपोर्ट कइल जाला। बस .inlineकवनो .checkboxभा में जोड़ दीं .radioआ रउरा काम पूरा हो गइल.

इनलाइन फार्म आ संलग्न/प्रीपेंड करीं

इनलाइन रूप में प्रीपेंड भा एपेंड इनपुट सभ के इस्तेमाल करे खातिर, .add-onआ inputके एकही लाइन पर, बिना स्पेस के, जरूर रखीं।

मदद पाठ के रूप में बा

अपना फॉर्म इनपुट सभ खातिर मदद टेक्स्ट जोड़े खातिर, इनपुट तत्व के बाद इनलाइन हेल्प टेक्स्ट के साथ <span class="help-inline">या एगो हेल्प टेक्स्ट ब्लॉक के साथ शामिल करीं।<p class="help-block">

क्रिया खातिर बटन दिहल जाला

एगो रूढ़ि के रूप में, बटन सभ के इस्तेमाल खाली क्रिया सभ खातिर होखे के चाहीं जबकि हाइपरलिंक सभ के इस्तेमाल ऑब्जेक्ट सभ खातिर करे के बा। जइसे कि "डाउनलोड" बटन होखे के चाहीं जबकि "हाल के गतिविधि" लिंक होखे के चाहीं.

बटन शैली के कवनो भी चीज पर लागू कइल जा सके ला आ .btnक्लास लागू कइल जा सके ला। हालाँकि, आम तौर पर आप इनहन के खाली <a>आ <button>तत्व सभ पर लागू कइल चाहब।

क्रॉस ब्राउज़र संगतता के बा

IE9 गोल कोना पर बैकग्राउंड ग्रेडिएंट के फसल ना देला, एहसे हमनी के एकरा के हटा देनी जा। संबंधित, IE9 अक्षम buttonतत्व सभ के जंफाई करे ला, टेक्स्ट के एगो गंदा टेक्स्ट-शैडो के साथ ग्रे रेंडर करे ला जेकरा के हमनी के ठीक नइखीं कर सकत।

कई गो साइज के होला

फैंसी बड़ बटन बा कि छोट? .btn-large, .btn-small, या .btn-miniदू गो अतिरिक्त आकार खातिर जोड़ीं ।

प्राथमिक कार्रवाई के बा कार्रवाई

प्राथमिक कार्रवाई के बा कार्रवाई

प्राथमिक कार्रवाई के बा कार्रवाई

अक्षम अवस्था में बा

अक्षम बटन सभ खातिर, .disabledलिंक सभ में क्लास आ तत्व disabledसभ खातिर एट्रिब्यूट जोड़ीं।<button>

प्राथमिक कड़ी बा संपर्क

प्राथमिक बटन के बा बटन

हेड अप हो गइल बा! हमनी के .disabledइहाँ उपयोगिता वर्ग के रूप में इस्तेमाल करेनी जा, आम वर्ग के समान .active, एहसे कवनो उपसर्ग के जरूरत नईखे।

एक क्लास, कई गो टैग बा

कवनो , , या तत्व .btnपर क्लास के इस्तेमाल करीं ।<a><button><input>

<a class = "btn" href = "" > लिंक </a> बा  
<बटन वर्ग = "बीटीएन" प्रकार = "सबमिट" >  
  बटन
</बटन> के बा
<इनपुट क्लास = "बीटीएन" प्रकार = "बटन" बा।  
         मान = "इनपुट" > के बा
<इनपुट क्लास = "बीटीएन" प्रकार = "सबमिट" बा।  
         मान = "सबमिट करीं" > बा

एगो बेहतरीन अभ्यास के रूप में, क्रॉस-ब्राउजर रेंडरिंग के मिलान सुनिश्चित करे खातिर आपके संदर्भ खातिर तत्व के मिलान करे के कोसिस करीं। अगर रउरा लगे एगो बा त अपना बटन खातिर inputएगो के इस्तेमाल करीं.<input type="submit">

• आइकन-कांच के बा
• आइकन-संगीत के बा
• आइकन-खोज कइल जाला
• आइकन-लिफाफा के बा
• आइकन-हृदय के बा
• आइकन-स्टार के बा
• आइकन-स्टार-खाली बा
• आइकन-उपयोगकर्ता के बा
• आइकन-फिल्म के बा
• आइकन-वीं-बड़े के बा
• आइकन-थ के बा
• आइकन-वीं-सूची के बा
• आइकन-ठीक बा
• आइकन-हटावे के बा
• आइकन-ज़ूम-इन कइल जाला
• आइकन-ज़ूम-आउट कइल जाला
• आइकन-बंद हो गइल बा
• आइकन-संकेत के बा
• आइकन-कोग के बा
• आइकन-कचरा के बा
• आइकन-घर के बा
• आइकन-फाइल के बा
• आइकन-समय के बा
• आइकन-सड़क के बा
• आइकन-डाउनलोड-अल्ट के बा
• आइकन-डाउनलोड करे के बा
• आइकन-अपलोड कइल जाला
• आइकन-इनबॉक्स के बा
• आइकन-प्ले-सर्कल के बा
• आइकन-दोहरावे के बा

• आइकन-रिफ्रेश कइल जाला
• आइकन-सूची-अल्ट के बा
• आइकन-लॉक के बा
• आइकन-झंडा के बा
• आइकन-हेडफोन के बा
• आइकन-वॉल्यूम-बंद हो गइल बा
• आइकन-वॉल्यूम-डाउन के बा
• आइकन-वॉल्यूम-अप कइल जाला
• आइकन-qrcode के बा
• आइकन-बारकोड के बा
• आइकन-टैग के बा
• आइकन-टैग के बा
• आइकन-पुस्तक के बा
• आइकन-बुकमार्क के बा
• आइकन-प्रिंट के बा
• आइकन-कैमरा के बा
• आइकन-फॉन्ट के बा
• आइकन-बोल्ड बा
• आइकन-इटालिक के बा
• आइकन-पाठ-ऊँचाई के बा
• आइकन-पाठ-चौड़ाई के बा
• आइकन-संरेखित-बाँया बा
• आइकन-संरेखित-केंद्र के बा
• आइकन-संरेखित-दाहिने के बा
• आइकन-संरेखित-जस्टिफाई कइल जाला
• आइकन-सूची के बा
• आइकन-इंडेंट-बाँया बा
• आइकन-इंडेंट-दाहिने के बा
• आइकन-फेसटाइम-वीडियो के बा
• आइकन-चित्र के बा

• आइकन-पेंसिल के बा
• आइकन-नक्शा-मार्कर के बा
• आइकन-समायोजित करे के बा
• आइकन-टिंट के बा
• आइकन-संपादन कइल जाला
• आइकन-शेयर करे के बा
• आइकन-चेक कइल जाला
• आइकन-मूव के बा
• आइकन-कदम-पिछड़े के ओर बा
• आइकन-तेजी से-पिछड़े के बा
• आइकन-पिछड़ा के ओर बा
• आइकन-खेल के बा
• आइकन-विराम दिहल जाला
• आइकन-स्टॉप के बा
• आइकन-आगे के बा
• आइकन-फास्ट-फोरवर्ड के बा
• आइकन-स्टेप-फोरवर्ड के बा
• आइकन-इजेक्ट कइल जाला
• आइकन-शेवरॉन-बाँया बा
• आइकन-शेवरॉन-दाहिने के बा
• आइकन-प्लस-साइन के बा
• आइकन-माइनस-चिन्ह के बा
• आइकन-हटावे-चिह्न के बा
• आइकन-ठीक बा-साइन कइल जाला
• आइकन-प्रश्न-चिह्न के बारे में बतावल गइल बा
• आइकन-जानकारी-चिह्न के बारे में बतावल गइल बा
• आइकन-स्क्रीनशॉट के बा
• आइकन-हटावे-सर्कल के बा
• आइकन-ठीक बा-सर्कल के बा
• आइकन-बैन-सर्कल के बा

• आइकन-तीर-बाएं बा
• आइकन-तीर-दाहिने के बा
• आइकन-तीर-ऊपर के बा
• आइकन-तीर-नीचे के बा
• आइकन-शेयर-अल्ट के बा
• आइकन-आकार-पूरा हो गइल बा
• आइकन-आकार-छोटा कइल जाला
• आइकन-प्लस के बा
• आइकन-माइनस के बा
• आइकन-तारा चिन्ह के बा
• आइकन-विस्मयादिबोधक-चिह्न के बा
• आइकन-उपहार के बा
• आइकन-पत्ता के बा
• आइकन-आग के बा
• आइकन-आँख-खुलल बा
• आइकन-आँख-बंद कइल जाला
• आइकन-चेतावनी-चिन्ह के बा
• आइकन-प्लेन के बा
• आइकन-कैलेंडर के बा
• आइकन-रैंडम के बा
• आइकन-टिप्पणी कइल जाव
• आइकन-चुंबक के बा
• आइकन-शेवरॉन-अप के बा
• आइकन-शेवरॉन-डाउन के बा
• आइकन-रीट्वीट कइल जाला
• आइकन-खरीदारी-गाड़ी के बा
• आइकन-फोल्डर-बंद कइल जाला
• आइकन-फोल्डर-ओपन के बा
• आइकन-आकार-ऊर्ध्वाधर के बा
• आइकन-आकार-क्षैतिज के बा

स्प्राइट के रूप में बनल बा

हर आइकन के एगो अतिरिक्त अनुरोध बनावे के बजाय, हमनी के एकरा के एगो स्प्राइट में संकलित कइले बानी जा-एक फाइल में छवि सभ के एगो गुच्छा जवन छवि सभ के साथ स्थिति देवे खातिर CSS के इस्तेमाल करे ला background-position। ई उहे तरीका ह जवना के हमनी का ट्विटर डॉट कॉम पर इस्तेमाल करेनी जा आ ई हमनी खातिर बढ़िया काम कइले बा.

सभ आइकन क्लास सभ के उपसर्ग .icon-उचित नेमस्पेसिंग आ स्कोपिंग खातिर दिहल गइल बा, बहुत कुछ हमनी के बाकी घटक सभ नियर। एहसे दोसरा औजारन से टकराव से बचे में मदद मिली.

ग्लिफिकॉन्स हमनी के ओपन-सोर्स टूलकिट में सेट हाफ्लिंग्स के इस्तेमाल के अनुमति देले बा जबले कि हमनी के डॉक्स में इहाँ लिंक आ क्रेडिट उपलब्ध करावे के बा। कृपया अपना प्रोजेक्ट में भी अइसने करे पर विचार करीं।

कइसे इस्तेमाल कइल जाला

v2.0.1 के साथ, हमनी के <i>अपना सभ आइकन सभ खातिर टैग के इस्तेमाल करे के विकल्प चुनले बानी जा, बाकी इनहन के लगे कौनों केस क्लास नइखे-केवल एगो साझा उपसर्ग। इस्तेमाल करे खातिर, निम्नलिखित कोड के लगभग कहीं भी रखीं:

<i class = "आइकन-खोज" </i> के बारे में बतावल गइल बा 

उल्टा (सफेद) आइकन सभ खातिर भी स्टाइल उपलब्ध बाड़ें, एक ठो अतिरिक्त क्लास के साथ तइयार कइल गइल बाड़ें:

<i class = "आइकन-खोज आइकन-सफेद" ></i> 

अपना आइकन खातिर 120 गो क्लास बा जवना में से चुने के बा. बस <i>सही क्लास वाला टैग जोड़ दीं आ रउरा सेट हो जाईं. रउआँ पूरा लिस्ट sprites.less में पा सकत बानी या ठीक इहाँ एह दस्तावेज में पा सकत बानी।

केस के प्रयोग कइल जाला

आइकन त बढ़िया होला बाकिर एकर इस्तेमाल कहाँ करी? इहाँ कुछ विचार दिहल जा रहल बा:

• अपना साइडबार नेविगेशन खातिर विजुअल के रूप में
• विशुद्ध रूप से आइकन से संचालित नेविगेशन खातिर
• कवनो क्रिया के अर्थ बतावे में मदद करे खातिर बटन खातिर
• कवनो प्रयोगकर्ता के गंतव्य पर संदर्भ साझा करे खातिर लिंक के साथ

अनिवार्य रूप से, कहीं भी रउआ <i>टैग लगा सकेनी, रउआ आइकन लगा सकेनी।

ताज़ा कर दिहल जाव चेकआउट कइल जाव हटाईं

टिप्पणी सेटिंग्स के बारे में बतावल गइल बा अधिक जानकारी खातिर देखीं