बूटस्ट्रैप के बा

घटक के बारे में बतावल गइल बा

बूटस्ट्रैप में दर्जनों रियूजेबल कंपोनेंट बनावल गइल बा जेह से नेविगेशन, अलर्ट, पोपोवर, आ अउरी बहुत कुछ उपलब्ध करावल जा सके ला।

बटन समूह अउरी टूलबार नियर कामकाज खातिर बटन सभ से जुड़ीं

बटन समूह के बा

एक ठो समग्र घटक के रूप में कई गो बटन सभ के एक साथ जोड़े खातिर बटन समूह सभ के इस्तेमाल करीं। <a>या <button>तत्वन के एगो श्रृंखला के साथ इनहन के निर्माण करीं ।

बेहतरीन तरीका के बारे में बतावल गइल बा

बटन समूह आ टूलबार सभ के इस्तेमाल खातिर हमनी के निम्नलिखित दिशानिर्देश सभ के सलाह देत बानी जा:

  • एकही बटन समूह में हमेशा एकही तत्व के इस्तेमाल करीं, <a>या <button>.
  • एकही बटन समूह में अलग-अलग रंग के बटन ना मिलाईं।
  • टेक्स्ट के अलावा भा एकरे जगह पर आइकन के इस्तेमाल करीं, बाकी जहाँ उचित होखे, alt आ टाइटल टेक्स्ट जरूर शामिल करीं।

ड्रॉपडाउन वाला संबंधित बटन समूह (नीचे देखल जाय) के अलग से बोलावल जाय आ हमेशा इरादा वाला व्यवहार के संकेत देवे खातिर ड्रॉपडाउन कैरेट शामिल होखे के चाहीं।

डिफ़ॉल्ट उदाहरण बा

इहाँ एचटीएमएल एंकर टैग बटन सभ के साथ बनावल मानक बटन समूह के कइसे देखल जाला:

  1. <div वर्ग = "बीटीएन-समूह" > बा 
  2.   <बटन वर्ग = "btn" > 1 </बटन> के बा 
  3.   <बटन वर्ग = "btn" > 2 </बटन> के बा 
  4.   <बटन वर्ग = "btn" > 3 </बटन> के बा 
  5. </div> के बा

टूलबार के उदाहरण दिहल गइल बा

अधिक जटिल घटक के लिए <div class="btn-group">एक में के सेट के संयोजन ।<div class="btn-toolbar">

  1. <div वर्ग = "बीटीएन-टूलबार" > बा 
  2.   <div वर्ग = "बीटीएन-समूह" > बा 
  3.     ...
  4.   </div> के बा
  5. </div> के बा

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

बटन समूह रेडियो के रूप में भी काम क सके ला, जहाँ खाली एगो बटन सक्रिय हो सके ला, या चेकबॉक्स, जहाँ कौनों भी संख्या में बटन सक्रिय हो सके ला। ओकरा खातिर जावास्क्रिप्ट डॉक्स देखल जाव .

जावास्क्रिप्ट ले लीं »

बटन समूह में ड्रॉपडाउन होला

हेड अप हो गइल बा! ड्रॉपडाउन वाला बटन सभ के सही रेंडरिंग खातिर अलग-अलग .btn-groupएक के भीतर अपना में लपेटल जरूरी बा ।.btn-toolbar

बटन ड्रॉपडाउन मेनू संदर्भ मेनू उपलब्ध करावे खातिर बटन समूह पर बनावल गइल बा

बटन के ड्रॉपडाउन हो जाला

अवलोकन आ उदाहरण दिहल गइल बा

कवनो बटन के इस्तेमाल ड्रॉपडाउन मेनू के एगो के भीतर रख के .btn-groupआ उचित मेनू मार्कअप उपलब्ध करा के ट्रिगर करे खातिर करीं।

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

बटन समूह के तरह, हमनी के मार्कअप नियमित बटन मार्कअप के इस्तेमाल करेला, लेकिन शैली के परिष्कृत करे अवुरी बूटस्ट्रैप के ड्रॉपडाउन jQuery प्लगइन के सपोर्ट करे खाती मुट्ठी भर जोड़ के संगे।

  1. <div वर्ग = "बीटीएन-समूह" > बा 
  2.   <a class = "btn ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" href = "#" >   
  3.     कार्रवाई
  4.     <span class = "कैरेट" </span> के बारे में बतावल गइल बा 
  5.   </a> के बा
  6.   <ul वर्ग = "ड्रॉपडाउन-मेनू" > बा 
  7.     <!-- ड्रॉपडाउन मेनू लिंक --> बा
  8.   </ul> के बा
  9. </div> के बा

सभ बटन साइज के संगे काम करेला

बटन ड्रॉपडाउन कवनो भी साइज में काम करेला। राउर बटन के आकार .btn-large, .btn-small, या .btn-mini.

जावास्क्रिप्ट के जरूरत बा

बटन ड्रॉपडाउन के काम करे खातिर बूटस्ट्रैप ड्रॉपडाउन प्लगइन के जरूरत होला।

कुछ मामिला में-मोबाइल नियर-ड्रॉपडाउन मेनू सभ के बिस्तार व्यूपोर्ट के बाहर होखी। रउआँ के संरेखण के मैन्युअल रूप से या कस्टम जावास्क्रिप्ट के साथ हल करे के पड़ी।


बटन के ड्रॉपडाउन के विभाजन करीं

अवलोकन आ उदाहरण दिहल गइल बा

बटन ग्रुप स्टाइल आ मार्कअप के आधार पर हमनी के आसानी से स्प्लिट बटन बना सकेनी जा। स्प्लिट बटन सभ में बाईं ओर एगो मानक क्रिया आ दाहिने ओर एगो ड्रॉपडाउन टॉगल के बिसेसता बा जेह में संदर्भ लिंक सभ के साथ।

साइज के बा

अतिरिक्त बटन क्लास के उपयोग करीं .btn-mini, .btn-small, या .btn-largeसाइजिंग खातिर।

  1. <div वर्ग = "बीटीएन-समूह" > बा 
  2.   ...
  3.   <ul class = "ड्रॉपडाउन-मेनू पुल-राइट" > बा 
  4.     <!-- ड्रॉपडाउन मेनू लिंक --> बा
  5.   </ul> के बा
  6. </div> के बा

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

हमनी के सामान्य बटन ड्रॉपडाउन के विस्तार क के दूसरा बटन एक्शन देवेनी जा जवन अलग से ड्रॉपडाउन ट्रिगर के रूप में काम करेला।

  1. <div वर्ग = "बीटीएन-समूह" > बा 
  2.   <बटन वर्ग = "btn" > कार्रवाई </बटन> बा 
  3.   <बटन वर्ग = "बीटीएन ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
  4.     <span class = "कैरेट" </span> के बारे में बतावल गइल बा 
  5.   </बटन> के बा
  6.   <ul वर्ग = "ड्रॉपडाउन-मेनू" > बा 
  7.     <!-- ड्रॉपडाउन मेनू लिंक --> बा
  8.   </ul> के बा
  9. </div> के बा

ड्रॉपअप मेनू बा

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

  1. <div वर्ग = "बीटीएन-समूह ड्रॉपअप" > बा 
  2.   <बटन क्लास = "btn" > ड्रॉपअप </बटन> बा 
  3.   <बटन वर्ग = "बीटीएन ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
  4.     <span class = "कैरेट" </span> के बारे में बतावल गइल बा 
  5.   </बटन> के बा
  6.   <ul वर्ग = "ड्रॉपडाउन-मेनू" > बा 
  7.     <!-- ड्रॉपडाउन मेनू लिंक --> बा
  8.   </ul> के बा
  9. </div> के बा

पेजिंग सामग्री के माध्यम से पेजिंग खातिर दू गो विकल्प

मल्टीकॉन-पृष्ठ पृष्ठांकन के बा

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

Rdio से प्रेरित अल्ट्रा सरल आ न्यूनतम स्टाइल वाला पेजिनेशन, ऐप आ खोज परिणाम खातिर बढ़िया बा। बड़ ब्लॉक के छूटल मुश्किल बा, आसानी से स्केल करे लायक बा, अवुरी बड़ क्लिक एरिया उपलब्ध करावेला।

स्टेटफुल पन्ना के लिंक बा

लिंक अनुकूलन योग्य होला आ सही क्लास के साथ कई गो परिस्थिति में काम करेला। .disabledअनक्लिक करे लायक लिंक .activeखातिर आ वर्तमान पन्ना खातिर।

लचीला संरेखण के बा

पृष्ठांकन लिंक सभ के संरेखण बदले खातिर दू गो वैकल्पिक वर्ग सभ में से कौनों एक के जोड़ीं: .pagination-centeredआ .pagination-right.

उदाहरण खातिर दिहल गइल बा

डिफ़ॉल्ट पन्ना बनावे वाला घटक लचीला होला आ कई गो भिन्नता सभ में काम करे ला।

मार्कअप कइल गइल बा

एगो में लपेटल <div>, पृष्ठांकन बस एगो <ul>.

  1. <div वर्ग = "पृष्ठांकन" > बा 
  2.   <उल> के बा
  3.     <li><a href = "#" > पिछला </a></li> बा 
  4.     <ली वर्ग = "सक्रिय" > के बा 
  5.       <a href = "#" > 1 </a> के बा 
  6.     </li> के बा
  7.     <li><a href = "#" > 2 </a></li> के बा 
  8.     <li><a href = "#" > 3 </a></li> के बा 
  9.     <li><a href = "#" > 4 ​​</a></li> के बा 
  10.     <li><a href = "#" > अगिला </a></li> बा 
  11.   </ul> के बा
  12. </div> के बा

पेजर त्वरित पिछला आ अगिला लिंक खातिर

पेजर के बारे में बा

पेजर घटक हल्का मार्कअप आ अउरी हल्का शैली सभ के साथ सरल पन्नाकरण कार्यान्वयन सभ खातिर लिंक सभ के सेट हवे। ब्लॉग भा पत्रिका जइसन साधारण साइट खातिर ई बहुते बढ़िया बा.

वैकल्पिक रूप से अक्षम स्थिति बा

पेजर लिंक सभ में पेजिनेशन से जनरल .disabledक्लास के भी इस्तेमाल होला।

डिफ़ॉल्ट उदाहरण बा

डिफ़ॉल्ट रूप से, पेजर लिंक सभ के केंद्रित करे ला।

  1. <ul क्लास = "पेजर" > के बा 
  2.   <ली> के बा
  3.     <a href = "#" > पिछला </a> बा 
  4.   </li> के बा
  5.   <ली> के बा
  6.     <a href = "#" > अगिला </a> बा 
  7.   </li> के बा
  8. </ul> के बा

संरेखित कइल गइल लिंक बा

एकरे अलावा, आप हर लिंक के साइड सभ में संरेखित क सकत बानी:

  1. <ul क्लास = "पेजर" > के बा 
  2.   <li class = "पिछला" > के बा 
  3.     <a href = "#" > &larr के बारे में जानकारी दिहल गइल बा; पुरान </a> के बा 
  4.   </li> के बा
  5.   <li वर्ग = "अगला" > बा 
  6.     <a href = "#" > नया → </a> के बा 
  7.   </li> के बा
  8. </ul> के बा

इनलाइन लेबल टेक्स्ट के लेबल आ एनोटेशन करीं

लेबल लगावल गइल बा मार्कअप कइल गइल बा
बाकी <span class="label">Default</span>
सफलता <span class="label label-success">Success</span>
चेतावनी <span class="label label-warning">Warning</span>
महत्वपूर्ण <span class="label label-important">Important</span>
जानकारी दिहल गइल बा <span class="label label-info">Info</span>
उल्टा होला <span class="label label-inverse">Inverse</span>

बैज संकेतक आ अनपढ़ गिनती के बारे में बतावल गइल बा

बारे में

बैज कौनों तरह के संकेतक भा गिनती के देखावे खातिर छोट, सरल घटक होलें। ई आमतौर पर मेल डॉट ऐप नियर ईमेल क्लाइंट सभ में या पुश नोटिफिकेशन खातिर मोबाइल ऐप सभ पर पावल जालें।

उपलब्ध कक्षा बा

नांव उदाहरण मार्कअप कइल गइल बा
बाकी 1 के बा <span class="badge">1</span>
सफलता 2 के बा <span class="badge badge-success">2</span>
चेतावनी 4 के बा <span class="badge badge-warning">4</span>
त्रुटि 6 के बा <span class="badge badge-error">6</span>
जानकारी दिहल गइल बा 8 के बा <span class="badge badge-info">8</span>
उल्टा होला 10 के बा <span class="badge badge-inverse">10</span>

टाइपोग्राफिक घटक सामग्री के सेगमेंट करे खातिर पन्ना हेडर आ हीरो यूनिट

हीरो इकाई के बा

बूटस्ट्रैप एगो हल्का, लचीला घटक देला जवना के हीरो यूनिट कहल जाला जवन रउरा साइट पर सामग्री देखावेला. मार्केटिंग आ सामग्री से भरपूर साइट पर ई बढ़िया काम करेला.

मार्कअप कइल गइल बा

आपन सामग्री के divलाइक में लपेटीं ताकि:

  1. <div वर्ग = "हीरो-इकाई" > के बा 
  2.   <h1> शीर्षक </h1> बा
  3.   <p> टैगलाइन </p> के बा
  4.   <p> के बा
  5.     <एक वर्ग = " बीटीएन बीटीएन-प्राथमिक बीटीएन-बड़े" > 
  6.       अउरी जाने खातिर देखीं
  7.     </a> के बा
  8.   </p>के बा
  9. </div> के बा

नमस्कार बा, दुनिया!

ई एगो साधारण हीरो यूनिट हवे, फीचर सामग्री भा जानकारी पर अतिरिक्त धियान खींचे खातिर एगो साधारण जंबोट्रॉन स्टाइल के घटक हवे।

अउरी जाने खातिर देखीं

पन्ना के हेडर बा

h1एगो पन्ना पर सामग्री के खंड सभ के उचित रूप से स्पेस आउट आ सेगमेंट करे खातिर एगो सरल शेल । ई h1's डिफ़ॉल्ट small, तत्व के साथे-साथ अधिकतर अन्य घटक सभ (अतिरिक्त शैली सभ के साथ) के इस्तेमाल क सके ला।

उदाहरण पन्ना हेडर हेडर खातिर उपपाठ

  1. <div वर्ग = "पृष्ठ-हेडर" > बा 
  2.   <h1> उदाहरण पन्ना हेडर </h1> बा
  3. </div> के बा

थंबनेल छवि, वीडियो, पाठ, आ अउरी बहुत कुछ के ग्रिड

डिफ़ॉल्ट थंबनेल बा

डिफ़ॉल्ट रूप से, बूटस्ट्रैप के थंबनेल सभ के अइसन बनावल गइल बा कि लिंक कइल गइल छवि सभ के कम से कम जरूरी मार्कअप के साथ देखावल जा सके।

बेहद अनुकूलन योग्य बा

तनी अतिरिक्त मार्कअप के साथ थंबनेल में कवनो तरह के एचटीएमएल सामग्री जइसे कि हेडिंग, पैराग्राफ, भा बटन जोड़ल संभव बा.

  • थंबनेल लेबल बा

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

    कार्रवाई कार्रवाई

  • थंबनेल लेबल बा

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

    कार्रवाई कार्रवाई

थंबनेल के इस्तेमाल काहें करीं

थंबनेल (पहिले .media-gridv1.4 तक ले) फोटो भा वीडियो के ग्रिड, छवि खोज परिणाम, खुदरा उत्पाद, पोर्टफोलियो, आ अउरी बहुत कुछ खातिर बहुत बढ़िया बा। ई लिंक भा स्थिर सामग्री हो सके लें।

सरल, लचीला म��र्कअप बा

थंबनेल मार्कअप सरल बा- ulकवनो संख्या में liतत्व वाला एगो के जरूरत बा। इ सुपर लचीला भी बा, जवना से कवनो प्रकार के सामग्री के बस तनी जादा मार्कअप के संगे आपके सामग्री के लपेटे के अनुमति बा।

ग्रिड कॉलम साइज के इस्तेमाल करेला

अंत में, थंबनेल घटक मौजूदा ग्रिड सिस्टम क्लास सभ के इस्तेमाल करे ला-जइसे कि .span2या .span3—थंबनेल आयाम सभ के नियंत्रण खातिर।

मार्कअप के बारे में बतावल गईल बा

जइसन कि पहिले बतावल गइल बा कि थंबनेल खातिर जरूरी मार्कअप हल्का आ सीधा होला. लिंक कइल गइल छवि सभ खातिर डिफ़ॉल्ट सेटअप पर नजर डालल जा रहल बा :

  1. <ul class = "थंबनेल" > बा 
  2.   <ली वर्ग = "स्पैन3" > के बा 
  3.     <a href = "#" वर्ग = "थंबनेल" > बा  
  4.       <img src = "https://प्लेसहोल्ड.इट/260x180" alt = "" > बा  
  5.     </a> के बा
  6.   </li> के बा
  7.   ...
  8. </ul> के बा

थंबनेल में कस्टम एचटीएमएल सामग्री खातिर, मार्कअप में तनी बदलाव होला। <a>ब्लॉक लेवल सामग्री के कहीं भी अनुमति देवे खातिर, हमनी के एगो लाइक खातिर स्वैप कर देनी जा <div>ताकि:

  1. <ul class = "थंबनेल" > बा 
  2.   <ली वर्ग = "स्पैन3" > के बा 
  3.     <div class = "थंबनेल" > के बा 
  4.       <img src = "https://प्लेसहोल्ड.इट/260x180" alt = "" > बा  
  5.       <h5> थंबनेल लेबल </h5> बा
  6.       <p> थंबनेल कैप्शन ठीक इहाँ... </p>
  7.     </div> के बा
  8.   </li> के बा
  9.   ...
  10. </ul> के बा

अउरी उदाहरण दिहल जा सकेला

रउरा लगे उपलब्ध विभिन्न ग्रिड क्लास के साथ आपन सभ विकल्प के खोज करीं। आप अलग-अलग साइज के भी मिला के मिला सकत बानी।

सफलता, चेतावनी, आ त्रुटि संदेश खातिर स्टाइल सभ के अलर्ट करे ला

हल्का वजन के डिफ़ॉल्ट हो जाला

बेस क्लास के दोबारा लिखल गइल बा

बूटस्ट्रैप 2 के साथ, हमनी के आधार वर्ग के सरल बना देले बानी जा: .alertके बजाय .alert-message। हमनी के न्यूनतम जरूरी मार्कअप भी कम कर देले बानी जा-ना <p>डिफ़ॉल्ट रूप से जरूरी बा, बस बाहरी <div>.

एकल अलर्ट संदेश दिहल गइल बा

कम कोड वाला अधिका टिकाऊ घटक खातिर, हमनी के ब्लॉक अलर्ट, संदेश जवन अधिका पैडिंग आ आम तौर पर अधिका टेक्स्ट के साथ आवेला, खातिर डिफरेंसिएटिंग लुक हटा दिहले बानी जा। क्लास भी बदल के .alert-block.

जावास्क्रिप्ट के साथे बढ़िया से चलेला

बूटस्ट्रैप एगो बढ़िया jQuery प्लगइन के संगे आवेला जवन कि अलर्ट संदेश के सपोर्ट करेला, जवना से ओकरा के खारिज कईल जल्दी अवुरी आसान हो जाला।

प्लगइन के प्राप्त करीं »

उदाहरण के अलर्ट बा

अपना संदेश आ एगो वैकल्पिक बंद आइकन के सरल वर्ग के साथ एगो div में लपेटीं।

× के बा चेतावनी! बेस्ट चेक यो सेल्फ, रउरा बहुते बढ़िया नइखीं लागत. 
  1. <div वर्ग = "सचेतक" > बा 
  2.   <a class = "बंद करीं" data-dismiss = "सचेतक" > × </a>  
  3.   <strong> चेतावनी दिहल गइल बा! </strong> बेस्ट चेक यो सेल्फ, रउरा बहुते बढ़िया नइखीं लागत.
  4. </div> के बा

मानक अलर्ट संदेश के दू गो वैकल्पिक क्लास के साथ आसानी से बढ़ाईं: .alert-blockअउरी पैडिंग आ टेक्स्ट कंट्रोल .alert-headingखातिर आ मिलान करे वाला हेडिंग खातिर।

× के बा

चेतावनी!

बेस्ट चेक यो सेल्फ, रउरा बहुते बढ़िया नइखीं लागत. नुल्ला विटाए एलिट लिबेरो, एगो फारेट्रा औग। प्रैसेंट कोमोडो कर्सस मैग्ना, वेल स्केलेरिस्क निस्ल कॉन्सेक्टेटर एट के बा।

  1. <div class = "अलर्ट अलर्ट-ब्लॉक" > बा 
  2.   <a class = "बंद करीं" data-dismiss = "सचेतक" > × </a>  
  3.   <h4 class = "अलर्ट-हेडिंग" > चेतावनी बा! </h4> के बा 
  4.   बेस्ट चेक यो सेल्फ, रउआ नइखीं...
  5. </div> के बा

संदर्भ विकल्प सभ अलर्ट के अर्थ बदले खातिर वैकल्पिक क्लास सभ के जोड़ीं

गलती भा खतरा होखे के चाहीं

× के बा ओह स्नैप के बा! कुछ बात बदल के फेर से सबमिट करे के कोशिश करीं. 
  1. <div class = "अलर्ट अलर्ट-त्रुटि" > बा 
  2.   ...
  3. </div> के बा

सफलता

× के बा बहुत बढ़िया! रउआ ई महत्वपूर्ण अलर्ट संदेश सफलतापूर्वक पढ़नी। 
  1. <दिव क्लास के बा  = "अलर्ट अलर्ट-सफलता" > बा
  2.   ...
  3. </div> के बा

खबर

× के बा हेड अप हो गइल बा! एह अलर्ट पर रउरा सभे के ध्यान देबे के जरूरत बा, बाकिर ई सुपर इम्पोर्टेन्ट नइखे. 
  1. <div class = "सचेतक अलर्ट-जानकारी" बा।  >
  2.   ...
  3. </div> के बा

प्रगति बार लोडिंग, रीडायरेक्टिंग, या एक्शन स्टेटस खातिर

उदाहरण आ मार्कअप दिहल गइल बा

बुनियादी

ऊर्ध्वाधर ढाल के साथ डिफ़ॉल्ट प्रगति बार।

  1. <div वर्ग = "प्रगति" > बा 
  2.   <div क्लास = "बार" के बा। 
  3.        शैली = " चौड़ाई : 60 %; " ></div> बा 
  4. </div> के बा

धारीदार बा

धारीदार प्रभाव बनावे खातिर ढाल के इस्तेमाल करे ला (कोई आईई ना)।

  1. <div class = "प्रगति प्रगति-धारीदार" > 
  2.   <div क्लास = "बार" के बा। 
  3.        शैली = " चौड़ाई : 20 %; " ></div> बा 
  4. </div> के बा

एनिमेटेड हो गइल बा

धारीदार उदाहरण लेके ओकरा के एनिमेट करेला (कोई आईई ना)।

  1. <div class = "प्रगति प्रगति-धारीदार बा।" 
  2.      सक्रिय बा" >
  3.   <div क्लास = "बार" के बा। 
  4.        शैली = " चौड़ाई : 40 %; " ></div> बा 
  5. </div> के बा

विकल्प आ ब्राउजर के समर्थन दिहल गइल बा

अतिरिक्त रंग के बा

प्रगति बार सभ में सुसंगत शैली सभ खातिर कुछ एकही बटन आ अलर्ट क्लास सभ के इस्तेमाल होला।

धारीदार सलाख के बा

ठोस रंग के समान, हमनी के अलग-अलग धारीदार प्रगति बार बा।

बेवहार

प्रगति बार में CSS3 संक्रमण के इस्तेमाल होला, एह से अगर आप जावास्क्रिप्ट के माध्यम से चौड़ाई के डायनामिक रूप से समायोजित करीं, त ई सुचारू रूप से आकार बदल जाई।

अगर रउआ .activeक्लास के इस्तेमाल करीं त राउर .progress-stripedप्रगति बार बाएँ से दाहिने ओर धारियन के एनिमेट करी।

ब्राउजर के समर्थन बा

प्रगति बार सभ में CSS3 ढाल, संक्रमण, आ एनीमेशन सभ के इस्तेमाल होला जेह से कि इनहन के सगरी इफेक्ट सभ के हासिल कइल जा सके। ई फीचर सभ IE7-9 भा फायरफॉक्स के पुरान संस्करण सभ में सपोर्ट ना कइल जालें।

ओपेरा आ आईई एह समय एनीमेशन के सपोर्ट ना करे लें।

विविध हल्के उपयोगिता घटक के बा

वेल्स के ह

कुआँ के इस्तेमाल कवनो तत्व पर सरल प्रभाव के रूप में करीं ताकि ओकरा के इनसेट प्रभाव दिहल जा सके।

देखऽ, हम एगो इनार में बानी! 
  1. <div class = "अच्छा" > के बा 
  2.   ...
  3. </div> के बा

आइकन के बंद करीं

मोडल आ अलर्ट नियर सामग्री के खारिज करे खातिर जेनेरिक बंद आइकन के इस्तेमाल करीं।

× के बा

  1. <a class = "बंद करीं" > × </a> के बा