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

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

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

दू गो मूल विकल्प, साथ में दू गो अउरी विशिष्ट भिन्नता।

एकल बटन समूह के बा

.btnमें बटन के एगो श्रृंखला लपेटीं .btn-group.

  1. <div वर्ग = "बीटीएन-समूह" > बा
  2. <button class = "btn" > बाईं ओर </बटन> बा
  3. <button class = "btn" > बीच के </बटन> बा
  4. <बटन क्लास = "btn" > दाहिना </बटन>
  5. </div> के बा

कई गो बटन समूह के बा

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

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

ऊर्ध्वाधर बटन समूह के बा

बटन के एगो सेट के क्षैतिज रूप से ना होके लंबवत ढेर देखाई देवे के बनाईं।

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

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

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

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

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

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

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

  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.

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

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

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


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

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

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

साइज के बा

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

  1. <div वर्ग = "बीटीएन-समूह" > बा
  2. <बटन वर्ग = "बीटीएन बीटीएन-मिनी" > कार्रवाई </बटन>
  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 से प्रेरित सरल पृष्ठांकन, ऐप आ खोज परिणाम खातिर बढ़िया। बड़ ब्लॉक के छूटल मुश्किल बा, आसानी से स्केल करे लायक बा, अवुरी बड़ क्लिक एरिया उपलब्ध करावेला।

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

विकल्प बा

अक्षम आ सक्रिय राज्यन के बारे में बतावल गइल बा

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

  1. <div वर्ग = "पृष्ठांकन" > बा
  2. <उल> के बा
  3. <li class = "अक्षम" ><a href = "#" > « </a></li> के बा
  4. <li class = "सक्रिय" ><a href = "#" > 1 </a></li> बा
  5. ...
  6. </ul> के बा
  7. </div> के बा

रउआँ वैकल्पिक रूप से स्पैन खातिर सक्रिय भा अक्षम एंकर सभ के स्वैप आउट क सकत बानी ताकि क्लिक के कामकाज के हटावल जा सके जबकि इरादा वाला शैली सभ के बरकरार रखल जा सके।

  1. <div वर्ग = "पृष्ठांकन" > बा
  2. <उल> के बा
  3. <li class = "अक्षम" ><span> « </span></li> के बा
  4. <li वर्ग = "सक्रिय" ><span> 1 </span></li> के बा
  5. ...
  6. </ul> के बा
  7. </div> के बा

साइज के बा

फैंसी बड़हन भा छोट पन्ना बनावे के? अतिरिक्त आकार खातिर .pagination-large, .pagination-small, या जोड़ीं ।.pagination-mini

  1. <div class = "पृष्ठांकन पृष्ठांकन-बड़का" >
  2. <उल> के बा
  3. ...
  4. </ul> के बा
  5. </div> के बा
  6. <div वर्ग = "पृष्ठांकन" > बा
  7. <उल> के बा
  8. ...
  9. </ul> के बा
  10. </div> के बा
  11. <div class = "पृष्ठांकन पृष्ठांकन-छोट" > बा
  12. <उल> के बा
  13. ...
  14. </ul> के बा
  15. </div> के बा
  16. <div class = "पृष्ठांकन पृष्ठांकन-मिनी" > बा
  17. <उल> के बा
  18. ...
  19. </ul> के बा
  20. </div> के बा

संरेखण के बा

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

  1. <div class = "पृष्ठांकन पृष्ठांकन-केंद्रित" >
  2. ...
  3. </div> के बा
  1. <div class = "पृष्ठांकन पृष्ठांकन-दाहिना" >
  2. ...
  3. </div> के बा

पेजर के बा

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

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

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

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

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

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

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

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

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

  1. <ul क्लास = "पेजर" > के बा
  2. <li class = "पिछला अक्षम" >
  3. <a href = "#" > &larr के बारे में जानकारी दिहल गइल बा; पुरान </a> के बा
  4. </li> के बा
  5. ...
  6. </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-important">6</span>
जानकारी दिहल गइल बा 8 के बा <span class="badge badge-info">8</span>
उल्टा होला 10 के बा <span class="badge badge-inverse">10</span>

आसानी से ढहल जा सकेला

आसान तरीका से लागू करे खातिर, लेबल आ बैज सभ बस संकुचित हो जइहें (CSS के :emptyचयनकर्ता के माध्यम से) जब भीतर कौनों सामग्री मौजूद ना होखे।

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

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

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

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

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

  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> उदाहरण पन्ना हेडर <small> हेडर खातिर उपपाठ </small></h1>
  3. </div> के बा

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

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

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

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

  • 300x200 के बा

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

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

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

  • 300x200 के बा

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

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

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

  • 300x200 के बा

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

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

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

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

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

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

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

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

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

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

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

  1. <ul class = "थंबनेल" > बा
  2. <ली वर्ग = "स्पैन4" > के बा
  3. <a href = "#" वर्ग = "थंबनेल" > बा
  4. <img data-src = "धारक.जेएस/300x200" alt = "" > बा
  5. </a> के बा
  6. </li> के बा
  7. ...
  8. </ul> के बा

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

  1. <ul class = "थंबनेल" > बा
  2. <ली वर्ग = "स्पैन4" > के बा
  3. <div class = "थंबनेल" > के बा
  4. <img data-src = "धारक.जेएस/300x200" alt = "" > बा
  5. <h3> थंबनेल लेबल </h3> बा
  6. <p> थंबनेल कैप्शन... </p> बा
  7. </div> के बा
  8. </li> के बा
  9. ...
  10. </ul> के बा

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

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

डिफ़ॉल्ट अलर्ट हो गइल बा

कवनो भी पाठ आ एगो वैकल्पिक खारिज बटन .alertके मूल चेतावनी अलर्ट संदेश खातिर लपेटीं।

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

बटन के बर्खास्त कर दिहल जाव

data-dismiss="alert"मोबाइल सफारी आ मोबाइल ओपेरा ब्राउजर सभ में, एट्रिब्यूट के अलावा , टैग href="#"के इस्तेमाल करत समय अलर्ट सभ के खारिज करे खातिर एगो के जरूरत होला।<a>

  1. <a href = "#" क्लास = "बंद करीं" डेटा-खारिज = "सचेतक" > × </a> के बा

एकरे अलावा, रउआँ <button>डेटा एट्रिब्यूट वाला कौनों तत्व के इस्तेमाल कर सकत बानी, जेकरा के हमनी के अपना डॉक्स खातिर करे के विकल्प चुनले बानी जा। , के इस्तेमाल करत <button>घरी रउरा शामिल करे के पड़ी type="button"ना त रउरा फार्म जमा ना कर सके.

  1. <बटन प्रकार = "बटन" वर्ग = "बंद" डेटा-खारिज = "सचेतक" > × </बटन> के बा

जावास्क्रिप्ट के माध्यम से अलर्ट खारिज कर दीं

अलर्ट के जल्दी आ आसानी से खारिज करे खातिर अलर्ट jQuery प्लगइन के इस्तेमाल करीं .


विकल्प बा

लंबा संदेश खातिर, अलर्ट रैपर के ऊपर आ नीचे के पैडिंग के जोड़ के बढ़ाईं .alert-block

चेतावनी!

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

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

संदर्भ के विकल्प के बारे में बतावल गइल बा

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

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

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

सफलता

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

खबर

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

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

बुनियादी

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

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

धारीदार बा

धारीदार प्रभाव बनावे खातिर ढाल के इस्तेमाल करेला। आईई7-8 में उपलब्ध नइखे।

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

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

धारियन के दाहिने से बाएँ एनिमेट .activeकरे खातिर में जोड़ीं । .progress-stripedआईई के सभ संस्करण में उपलब्ध नइखे।

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

ढेर हो गइल बा

एकही में कई बार डाल के .progressओकरा के ढेर करीं।

  1. <div वर्ग = "प्रगति" > बा
  2. <div class = "बार बार-सफलता" शैली = " चौड़ाई : 35 %; " ></div>
  3. <div class = "बार बार-चेतावनी" शैली = " चौड़ाई : 20 %; " ></div>
  4. <div class = "बार बार-खतरा" शैली = " चौड़ाई : 10 %; " ></div>
  5. </div> के बा

विकल्प बा

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

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

  1. <div class = "प्रगति प्रगति-जानकारी" >
  2. <div वर्ग = "बार" शैली = " चौड़ाई : 20 % " ></div> बा
  3. </div> के बा
  4. <div class = "प्रगति प्रगति-सफलता" > बा
  5. <div वर्ग = "बार" शैली = " चौड़ाई : 40 % " ></div> बा
  6. </div> के बा
  7. <div class = "प्रगति प्रगति-चेतावनी" >
  8. <div वर्ग = "बार" शैली = " चौड़ाई : 60 % " ></div> बा
  9. </div> के बा
  10. <div class = "प्रगति प्रगति-खतरा" >
  11. <div वर्ग = "बार" शैली = " चौड़ाई : 80 % " ></div> बा
  12. </div> के बा

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

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

  1. <div class = "प्रगति प्रगति-जानकारी प्रगति-धारीदार" >
  2. <div वर्ग = "बार" शैली = " चौड़ाई : 20 % " ></div> बा
  3. </div> के बा
  4. <div class = "प्रगति प्रगति-सफलता प्रगति-धारीदार" >
  5. <div वर्ग = "बार" शैली = " चौड़ाई : 40 % " ></div> बा
  6. </div> के बा
  7. <div class = "प्रगति प्रगति-चेतावनी प्रगति-धारीदार" >
  8. <div वर्ग = "बार" शैली = " चौड़ाई : 60 % " ></div> बा
  9. </div> के बा
  10. <div class = "प्रगति प्रगति-खतरा प्रगति-धारीदार" >
  11. <div वर्ग = "बार" शैली = " चौड़ाई : 80 % " ></div> बा
  12. </div> के बा

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

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

इंटरनेट एक्सप्लोरर 10 आ ओपेरा 12 से पहिले के संस्करण सभ में एनीमेशन के सपोर्ट ना कइल जाला।

बिबिध प्रकार के घटक सभ के निर्माण खातिर सार ऑब्जेक्ट शैली (जइसे कि ब्लॉग कमेंट, ट्वीट इत्यादि) जेह में पाठ्य सामग्री के साथ-साथ बाईं ओर- या दाएं-संरेखित छवि के बिसेसता होखे।

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

डिफ़ॉल्ट मीडिया में मीडिया ऑब्जेक्ट (इमेज, वीडियो, ऑडियो) के कंटेंट ब्लॉक के बाईं भा दाईं ओर फ्लोट करे के इजाजत बा।

64x64 के बा

मीडिया हेडिंग के बा

क्रास बइठल अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस स्केलेरिस्क एंटी सोलिसिट्यूडिन कोमोडो के बा। क्रास पुरुस ओडियो, वल्पुटेट में वेस्टिबुलम पर, टेम्पस विवेरा टर्पिस। फ्यूसे कंडिमेंटम ननक एसी निसी वल्पुटेट फ्रिंगिला। फौसिबस में डोनेक लैसिनिया कोंगे फेलिस के नाम से जानल जाला।
64x64 के बा

मीडिया हेडिंग के बा

क्रास बइठल अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस स्केलेरिस्क एंटी सोलिसिट्यूडिन कोमोडो के बा। क्रास पुरुस ओडियो, वल्पुटेट में वेस्टिबुलम पर, टेम्पस विवेरा टर्पिस। फ्यूसे कंडिमेंटम ननक एसी निसी वल्पुटेट फ्रिंगिला। फौसिबस में डोनेक लैसिनिया कोंगे फेलिस के नाम से जानल जाला।
64x64 के बा

मीडिया हेडिंग के बा

क्रास बइठल अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस स्केलेरिस्क एंटी सोलिसिट्यूडिन कोमोडो के बा। क्रास पुरुस ओडियो, वल्पुटेट में वेस्टिबुलम पर, टेम्पस विवेरा टर्पिस। फ्यूसे कंडिमेंटम ननक एसी निसी वल्पुटेट फ्रिंगिला। फौसिबस में डोनेक लैसिनिया कोंगे फेलिस के नाम से जानल जाला।
  1. <div class = "मीडिया" > के बा
  2. <a class = "पुल-लेफ्ट" href = "#" > बा
  3. <img क्लास = "मीडिया-ऑब्जेक्ट" डेटा- src = "धारक.जेएस/64x64" >
  4. </a> के बा
  5. <div class = "मीडिया-शरीर" > के बा
  6. <h4 class = "मीडिया-हेडिंग" > मीडिया हेडिंग </h4> बा
  7. ...
  8.  
  9. <!-- नेस्टेड मीडिया ऑब्जेक्ट --> बा
  10. <div class = "मीडिया" > के बा
  11. ...
  12. </div> के बा
  13. </div> के बा
  14. </div> के बा

मीडिया के सूची बा

तनी अतिरिक्त मार्कअप के साथ, रउआँ लिस्ट के अंदर मीडिया के इस्तेमाल कर सकत बानी (कमेंट थ्रेड भा लेख लिस्ट खातिर उपयोगी)।

  • 64x64 के बा

    मीडिया हेडिंग के बा

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

    64x64 के बा

    नेस्टेड मीडिया हेडिंग के बा

    क्रास बइठल अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस स्केलेरिस्क एंटी सोलिसिट्यूडिन कोमोडो के बा। क्रास पुरुस ओडियो, वल्पुटेट में वेस्टिबुलम पर, टेम्पस विवेरा टर्पिस।
    64x64 के बा

    नेस्टेड मीडिया हेडिंग के बा

    क्रास बइठल अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस स्केलेरिस्क एंटी सोलिसिट्यूडिन कोमोडो के बा। क्रास पुरुस ओडियो, वल्पुटेट में वेस्टिबुलम पर, टेम्पस विवेरा टर्पिस।
    64x64 के बा

    नेस्टेड मीडिया हेडिंग के बा

    क्रास बइठल अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस स्केलेरिस्क एंटी सोलिसिट्यूडिन कोमोडो के बा। क्रास पुरुस ओडियो, वल्पुटेट में वेस्टिबुलम पर, टेम्पस विवेरा टर्पिस।
  • 64x64 के बा

    मीडिया हेडिंग के बा

    क्रास बइठल अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस स्केलेरिस्क एंटी सोलिसिट्यूडिन कोमोडो के बा। क्रास पुरुस ओडियो, वल्पुटेट में वेस्टिबुलम पर, टेम्पस विवेरा टर्पिस।
  1. <ul class = "मीडिया-सूची" > बा
  2. <li class = "मीडिया" > के बा
  3. <a class = "पुल-लेफ्ट" href = "#" > बा
  4. <img क्लास = "मीडिया-ऑब्जेक्ट" डेटा- src = "धारक.जेएस/64x64" >
  5. </a> के बा
  6. <div class = "मीडिया-शरीर" > के बा
  7. <h4 class = "मीडिया-हेडिंग" > मीडिया हेडिंग </h4> बा
  8. ...
  9.  
  10. <!-- नेस्टेड मीडिया ऑब्जेक्ट --> बा
  11. <div class = "मीडिया" > के बा
  12. ...
  13. </div> के बा
  14. </div> के बा
  15. </li> के बा
  16. </ul> के बा

वेल्स के ह

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

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

वैकल्पिक कक्षा के बा

दू गो वैकल्पिक संशोधक वर्ग के साथ पैडिंग आ गोल कोना के नियंत्रित करीं।

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

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

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

  1. <बटन वर्ग = "बंद करीं" > × </बटन> के बा

आईओएस डिवाइस सभ खातिर एगो href="#"फॉर क्लिक इवेंट सभ के जरूरत होला अगर आप एंकर के इस्तेमाल कइल पसंद करीं।

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

हेल्पर क्लास के बा

छोट प्रदर्शन भा व्यवहार ट्वीक्स खातिर सरल, केंद्रित कक्षा।

.खींच-बाईं ओर के बा

एगो तत्व के बाईं ओर तैर लीं

  1. class = "खींच-बाँया" बा।
  1. . खींच - बाईं ओर { .
  2. तैरत : बाईं ओर के बा ;
  3. } के बा।

.खींच-दाहिने के बा

एगो तत्व के सही फ्लोट करीं

  1. class = "खींच-दाहिना" बा।
  1. . खींच - दाहिने { .
  2. तैरत : सही बा ;
  3. } के बा।

.म्यूट हो गइल बा

कवनो तत्व के रंग के बदल के#999

  1. class = "म्यूट कइल गइल"।
  1. . म्यूट हो गइल {
  2. रंग : # 999 के बा;
  3. } के बा।

.साफ कर दिहल गइल

floatकवनो तत्व पर के साफ करीं

  1. class = "साफ करे के बा"।
  1. . क्लियरफिक्स कइल जाला { .
  2. * ज़ूम : 1 के बा ;
  3. &: पहिले , 1999 के बा।
  4. &: के बाद { 1000 के बा।
  5. प्रदर्शन : तालिका के बारे में बतावल गइल बा ;
  6. सामग्री : "" के बा ;
  7. } के बा।
  8. &: के बाद { 1000 के बा।
  9. साफ : दुनु के ;
  10. } के बा।
  11. } के बा।