टाइपोग्राफिक स्केल

संपूर्ण टाइपोग्राफ़िक ग्रिड हमारे वेरिएबल में दो कम चरों पर आधारित है। फ़ाइल रहित: @baseFontSizeऔर @baseLineHeight. पहला आधार फ़ॉन्ट-आकार है जो पूरे उपयोग किया जाता है और दूसरा आधार रेखा-ऊंचाई है।

हम अपने सभी प्रकार के मार्जिन, पैडिंग और लाइन-ऊंचाई बनाने के लिए उन चर, और कुछ गणित का उपयोग करते हैं।

उदाहरण बॉडी टेक्स्ट

नुलम क्विस रिसस एगेट उरना मोलिस ऑर्नारे वेल यू लियो। कम समाज नाटोक पेनटिबस एट मैग्नीस डिस पार्ट्युरिएंट मोंटेस, नैसेटुर रिडिकुलस मस। Nullam id dolor id nibh ultricies vehicula ut id elit.

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

जोर का उपयोग करना

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

नोट: बेझिझक <b>और <i>HTML5 में उपयोग करें, लेकिन उनका उपयोग थोड़ा बदल गया है। <b>अतिरिक्त महत्व बताए बिना शब्दों या वाक्यांशों को उजागर करने के <i>लिए है, जबकि ज्यादातर आवाज, तकनीकी शब्दों आदि के लिए है।

उदाहरण के पते

<address>टैग का उपयोग कैसे किया जा सकता है, इसके दो उदाहरण यहां दिए गए हैं :

उदाहरण संक्षेप

संक्षिप्ताक्षरों को अपरकेस टेक्स्ट और हल्के डॉटेड बॉटम बॉर्डर के साथ स्टाइल किया गया है। उनके पास होवर पर एक सहायता कर्सर भी है ताकि उपयोगकर्ताओं को अतिरिक्त संकेत मिले कि होवर पर कुछ दिखाया जाएगा।

कटा हुआ ब्रेड के बाद से HTML सबसे अच्छी चीज है।

विशेषता शब्द का संक्षिप्त रूप attr है ।

एक ब्लॉककोट शामिल करने के लिए, <blockquote>किसी भी HTML को कोट के रूप में लपेटें। सीधे उद्धरणों के लिए हम अनुशंसा करते हैं कि एक <p>.

अपने स्रोत का हवाला देने के लिए एक वैकल्पिक तत्व शामिल करें और स्टाइलिंग उद्देश्यों के लिए <small>आपको इससे पहले एक एम डैश मिलेगा ।—

<ब्लॉकक्वॉट>
  <p> लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिंग एलीट। पूर्णांक posuere एक पूर्व venenatis मिटा दें। </p>
  <छोटा> कोई प्रसिद्ध </छोटा>
</blockquote>

डिफ़ॉल्ट ब्लॉकक्वाट्स को इस प्रकार स्टाइल किया जाता है:

लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। पूर्णांक posuere एक पूर्व venenatis मिटा दें।

बॉडी ऑफ़ वर्क में प्रसिद्ध कोई व्यक्ति

अपने ब्लॉकक्वाट को दाईं ओर फ़्लोट करने के लिए, जोड़ें class="pull-right":

लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। पूर्णांक posuere एक पूर्व venenatis मिटा दें।

बॉडी ऑफ़ वर्क में प्रसिद्ध कोई व्यक्ति

अक्रमित

<ul>

• लोरेन इपसाम डलार सिट आमेट
• Consectetur adipiscing अभिजात वर्ग
• मासा में पूर्णांक मोलेस्टी लोरेम
• प्रीटियम निस्ल एलिकेट में सुविधा
• नुल्ला वोलुटपाट अलिकम वेलिटा
  • फेसेलस इयाकुलिस नेक
  • पुरुस सोडालेस अल्ट्रीसीज
  • वेस्टिबुलम लौरीट पोर्टिटर सेमी
  • एसी ट्रिस्टिक लिबरो वॉलुटपाट एट
• फौसीबस पोर्टा लैकस फ्रिंजिला वेला
• ऐनियन सिट आमेट इरेट नन
• एगेट पोर्टिटर लोरेम

अनस्टाइल्ड

<ul class="unstyled">

• लोरेन इपसाम डलार सिट आमेट
• Consectetur adipiscing अभिजात वर्ग
• मासा में पूर्णांक मोलेस्टी लोरेम
• प्रीटियम निस्ल एलिकेट में सुविधा
• नुल्ला वोलुटपाट अलिकम वेलिटा
  • फेसेलस इयाकुलिस नेक
  • पुरुस सोडालेस अल्ट्रीसीज
  • वेस्टिबुलम लौरीट पोर्टिटर सेमी
  • एसी ट्रिस्टिक लिबरो वॉलुटपाट एट
• फौसीबस पोर्टा लैकस फ्रिंजिला वेला
• ऐनियन सिट आमेट इरेट नन
• एगेट पोर्टिटर लोरेम

आदेश दिया

<ol>

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

विवरण

<dl>

विवरण सूचियाँ

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

यूइसमोड

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

Donec id elit non mi porta gravida और eget metus.

मालेसुदा पोर्टा

इतियाम पोर्टा सेम मलेसुदा मैग्ना मोलिस यूइसमॉड।

इन - लाइन

कोड के इनलाइन स्निपेट को <code>.

उदाहरण के लिए , <code> अनुभाग </ कोड > को इनलाइन के रूप में लपेटा जाना चाहिए ।  

बुनियादी ब्लॉक

<pre>कोड की कई पंक्तियों के लिए उपयोग करें । उचित प्रतिपादन के लिए कोड में किसी भी कोण कोष्ठक से बचना सुनिश्चित करें।

<p>यहां नमूना पाठ...</p>

<पूर्व>
  <p>नमूना पाठ यहां...</p>
</pre>

नोट:<pre> टैग के भीतर कोड को यथासंभव बाईं ओर रखना सुनिश्चित करें ; यह सभी टैब प्रस्तुत करेगा।

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

गूगल

एक ही <pre>तत्व लें और बेहतर प्रतिपादन के लिए दो वैकल्पिक कक्षाएं जोड़ें।

<p> यहां नमूना पाठ... </p>

<प्री क्लास = "सुंदर प्रिंट 
     लिननम्स" >
  <p>नमूना पाठ यहां...</p>
</pre>

google-code-prettify डाउनलोड करें और उपयोग करने के तरीके के लिए रीडमी देखें।

<तालिका>
  <थेड>
    <tr>
      <वें> ... </वें>
      <वें> ... </वें>
    </tr>
  </थड>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</तालिका>

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

<टेबल क्लास = "टेबल" > 
  …
</तालिका>

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

नोट: धारीदार तालिकाएँ :nth-childCSS चयनकर्ता का उपयोग करती हैं और IE7-IE8 में उपलब्ध नहीं हैं।

<टेबल क्लास = "टेबल टेबल-स्ट्राइप्ड" > 
  …
</तालिका>

सौंदर्य प्रयोजनों के लिए पूरी मेज और गोल कोनों के चारों ओर बॉर्डर जोड़ें।

<टेबल क्लास = "टेबल टेबल-बॉर्डर" > 
  …
</तालिका>

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

<टेबल क्लास = "टेबल टेबल-कंडेंस्ड" > 
  …
</तालिका>

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

<टेबल क्लास = "टेबल टेबल-स्ट्राइप्ड टेबल-बॉर्डर टेबल-कंडेंस्ड" > 
  ...
</तालिका>

लचीला HTML और CSS

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

आसान स्टाइलिंग और ईवेंट बाइंडिंग के लिए अधिक जटिल लेआउट संक्षिप्त और स्केलेबल कक्षाओं के साथ आते हैं, इसलिए आप हर कदम पर कवर होते हैं।

चार लेआउट शामिल

बूटस्ट्रैप चार प्रकार के प्रपत्र लेआउट के लिए समर्थन के साथ आता है:

• लंबवत (डिफ़ॉल्ट)
• खोज
• इन - लाइन
• क्षैतिज

विभिन्न प्रकार के प्रपत्र लेआउट के लिए मार्कअप में कुछ बदलावों की आवश्यकता होती है, लेकिन नियंत्रण स्वयं बने रहते हैं और समान व्यवहार करते हैं।

नियंत्रण राज्य और अधिक

बूटस्ट्रैप के रूपों में इनपुट, टेक्स्टरेरा जैसे सभी आधार प्रपत्र नियंत्रणों के लिए शैलियाँ शामिल हैं, और आप जो अपेक्षा करते हैं उसका चयन करें। लेकिन यह कई कस्टम घटकों के साथ आता है जैसे संलग्न और प्रीपेड इनपुट और चेकबॉक्स की सूचियों के लिए समर्थन।

प्रत्येक प्रकार के प्रपत्र नियंत्रण के लिए त्रुटि, चेतावनी और सफलता जैसी स्थितियाँ शामिल हैं। अक्षम नियंत्रणों के लिए शैलियाँ भी शामिल हैं।

बुनियादी रूप

v2.0 के साथ, हमारे पास फ़ॉर्म शैलियों के लिए हल्के और अधिक स्मार्ट डिफ़ॉल्ट हैं। कोई अतिरिक्त मार्कअप नहीं, बस नियंत्रण बनाएं।

<फॉर्म क्लास = "वेल" > 
  <लेबल> लेबल का नाम </लेबल>
  <इनपुट प्रकार = "पाठ" वर्ग = "स्पैन 3" प्लेसहोल्डर = "कुछ टाइप करें ..." >   
  <span class = "help-inline" > एसोसिएटेड हेल्प टेक्स्ट! </span> 
  <लेबल वर्ग = "चेकबॉक्स" > 
    <इनपुट प्रकार = "चेकबॉक्स" > मुझे देखें 
  </लेबल>
  <बटन प्रकार = "सबमिट" वर्ग = "बीटीएन" > सबमिट करें </बटन>  
</फॉर्म>

खोज फ़ॉर्म

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

<फॉर्म क्लास = "वेल फॉर्म-सर्च" > 
  <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट-माध्यम खोज-क्वेरी" >  
  <बटन प्रकार = "सबमिट करें" वर्ग = "बीटीएन" > खोज </बटन>  
</फॉर्म>

इनलाइन फॉर्म

इनपुट शुरू करने के लिए ब्लॉक स्तर हैं। .form-inlineऔर के लिए .form-horizontal, हम इनलाइन-ब्लॉक का उपयोग करते हैं।

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

उदाहरण मार्कअप

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

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

क्या शामिल है

बाईं ओर दिखाए गए सभी डिफ़ॉल्ट फ़ॉर्म नियंत्रण हैं जिनका हम समर्थन करते हैं। यहाँ बुलेटेड सूची है:

• पाठ इनपुट (पाठ, पासवर्ड, ईमेल, आदि)
• चेक बॉक्स
• रेडियो
• चुनते हैं
• एकाधिक चयन
• फ़ाइल इनपुट
• पाठ क्षेत्र

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

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

पुन: डिज़ाइन किया गया ब्राउज़र बताता है

बूटस्ट्रैप में ब्राउज़र-समर्थित फ़ोकस और disabledस्थिति के लिए शैलियाँ हैं। हम डिफ़ॉल्ट वेबकिट को हटाते हैं outlineऔर box-shadowइसके स्थान पर :focus.

फॉर्म सत्यापन

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

<फ़ील्डसेट
  वर्ग = "नियंत्रण-समूह त्रुटि" >
  …
</फ़ील्डसेट>

इनपुट तैयार करें और संलग्न करें

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

चेकबॉक्स और रेडियो

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">

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

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

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

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

एक स्प्राइट के रूप में निर्मित

प्रत्येक आइकन को एक अतिरिक्त अनुरोध करने के बजाय, हमने उन्हें एक स्प्राइट में संकलित किया है - एक फ़ाइल में छवियों का एक गुच्छा जो छवियों को रखने के लिए CSS का उपयोग करता हैbackground-position . यह वही तरीका है जिसका उपयोग हम Twitter.com पर करते हैं और इसने हमारे लिए अच्छा काम किया है।

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

Glyphicons ने हमें अपने ओपन-सोर्स टूलकिट में सेट हाफलिंग्स का उपयोग करने की अनुमति तब तक दी है जब तक हम यहां डॉक्स में एक लिंक और क्रेडिट प्रदान करते हैं। कृपया अपनी परियोजनाओं में ऐसा करने पर विचार करें।

कैसे इस्तेमाल करे

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

<i वर्ग = "आइकन-खोज" ></i> 

उल्टे (सफ़ेद) चिह्नों के लिए शैलियाँ भी उपलब्ध हैं, जिन्हें एक अतिरिक्त वर्ग के साथ तैयार किया गया है:

<i वर्ग = "आइकन-खोज आइकन-सफेद" ></i> 

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

बक्सों का इस्तेमाल करें

प्रतीक महान हैं, लेकिन कोई उनका उपयोग कहां करेगा? यहां कुछ विचार हैं:

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

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

ताज़ा करना चेक आउट मिटाना

टिप्पणी समायोजन और जानकारी