घटक ऐ

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

उदाहरण दे

दो बुनियादी विकल्प, दो होर विशिष्ट बदलावें कन्नै।

सिंगल बटन ग्रुप

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

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

सारे बटन साइज़ कन्नै कम्म करदा ऐ

बटन ड्रॉपडाउन किसे बी आकार पर कम्म करदे न: .btn-large, .btn-small, जां .btn-mini.

जावास्क्रिप्ट दी लोड़ ऐ

बटन ड्रॉपडाउन गी कम्म करने आस्तै बूटस्ट्रैप ड्रॉपडाउन प्लगइन दी लोड़ होंदी ऐ।

किश मामलें च-जि’यां मोबाइल-ड्रॉपडाउन मेनू व्यूपोर्ट दे बाहर फैलग। तुसेंगी संरेखण गी मैन्युअल रूप कन्नै जां कस्टम जावास्क्रिप्ट कन्नै हल करने दी लोड़ ऐ.


बटन ड्रॉपडाउन विभाजित करो

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

  1. <div वर्ग = "बीटीएन-समूह" >
  2. <बटन वर्ग = "बीटीएन" > कार्रवाई </बटन>
  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. <बटन वर्ग = "बीटीएन" > ड्रॉपअप </बटन>
  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. <ली वर्ग = "सक्रिय" ><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. <ली वर्ग = "पिछला" >
  3. <a href = "#" > & लरर ऐ; पुराना </a>
  4. </li> दा
  5. <ली वर्ग = "अगला" >
  6. <a href = "#" > नए → </a> दा
  7. </li> दा
  8. </ul> दा

वैकल्पिक अक्षम स्थिति

पेजर लिंक .disabledपृष्ठांकन थमां सामान्य उपयोगिता वर्ग दा बी इस्तेमाल करदे न।

  1. <ul वर्ग = "पेजर" > ऐ
  2. <li class = "पिछला अक्षम" >
  3. <a href = "#" > & लरर ऐ; पुराना </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>

बिल्ला

नां मसाल मार्कअप करना
डिफाल्ट <span class="badge">1</span>
कामयाबी <span class="badge badge-success">2</span>
चेतावनी <span class="badge badge-warning">4</span>
जरूरी <span class="badge badge-important">6</span>
इन्फो <span class="badge badge-info">8</span>
उल्टा १० <span class="badge badge-inverse">10</span>

आसानी से ढहने वाला

आसान लागू करने आस्तै, लेबल ते बैज बस संकुचित होई जांगन (सीएसएस दे :emptyचयनकर्ता दे राहें) जिसलै अंदर कोई सामग्री मौजूद नेईं ऐ।

हीरो इकाई

अपनी साइट पर कुंजी सामग्री गी प्रदर्शत करने आस्तै इक हल्का, लचीला घटक। एह् मार्केटिंग ते सामग्री-भारी साइटें पर खरा कम्म करदा ऐ।

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

एह् इक साधारण हीरो इकाई ऐ, फीचर सामग्री जां जानकारी पर अतिरिक्त ध्यान आह्नने आस्तै इक साधारण जंबोट्रॉन शैली दा घटक ऐ।

और जानें

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

पेज दा हेडर

h1इक पृष्ठ पर सामग्री दे खंडें गी उचित रूप कन्नै स्पेस आउट ते सेगमेंट करने आस्तै इक आस्तै इक साधारण शेल । एह् h1's डिफाल्ट small, तत्व दे कन्नै-कन्नै होर मते सारे घटकें (अतिरिक्त शैलियें कन्नै) दा उपयोग करी सकदा ऐ.

  1. <div वर्ग = "पृष्ठ-शीर्षक" >
  2. <h1> उदाहरण पृष्ठ हेडर <small> हेडर आस्तै उपपाठ </small></h1>
  3. </div> दा

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

डिफाल्ट रूप कन्नै, बूटस्ट्रैप दे थंबनेल गी घट्ट शा घट्ट जरूरी मार्कअप कन्नै लिंक कीती गेदी छवियें गी प्रदर्शत करने आस्तै डिजाइन कीता गेदा ऐ।

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

थोह् ड़ी-मती अतिरिक्त मार्कअप कन्नै, थंबनेल च कुसै बी चाल्ली दी HTML सामग्री जि’यां हेडिंग, पैराग्राफ, जां बटन जोड़ना संभव ऐ।

  • 300x200 दा

    थंबनेल लेबल

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

    हरकत हरकत

  • 300x200 दा

    थंबनेल लेबल

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

    हरकत हरकत

  • 300x200 दा

    थंबनेल लेबल

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

    हरकत हरकत

थंबनेल दा इस्तेमाल क्यों करो

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

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

थंबनेल मार्कअप सरल ऐ- ulकिसे बी संख्या च liतत्वें कन्नै इक एह् सब किश ऐ जेह् ड़ी लोड़चदी ऐ। एह् सुपर लचीला बी ऐ, जेह् ड़ा तुंदी सामग्री गी लपेटने आस्तै सिर्फ थोह् ड़ी-मती मार्कअप कन्नै कुसै बी किस्म दी सामग्री दी अनुमति दिंदा ऐ।

ग्रिड स्तंभ आकारें दा उपयोग करदा ऐ

आखरी च, थंबनेल घटक मौजूदा ग्रिड सिस्टम व���्गें दा उपयोग करदा ऐ-जियां .span2जां.span3आखरी च, थंबनेल घटक थंबनेल आयामें दे नियंत्रण

मार्कअप करना

जि’यां पैह् ले आखेआ गेआ ऐ, थंबनेल आस्तै लोड़चदा मार्कअप हल्का ते सीधा ऐ। लिंक कीती गेदी छवियें आस्तै डिफ़ॉल्ट सेटअप पर इक नज़र ऐ :

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

थंबनेल च कस्टम HTML सामग्री आस्तै, मार्कअप च थोड़ा बदलाव होंदा ऐ। ब्लॉक स्तर दी सामग्री गी कुतै बी अनुमति देने लेई, अस <a>गी इक <div>पसंद आस्तै स्वैप करदे आं तां:

  1. <ul class = "थंबनेल" > ऐ
  2. <ली वर्ग = "स्पैन4" > ऐ
  3. <div वर्ग = "थंबनेल" > ऐ
  4. <img डेटा- 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

चेतावनी!

बेस्ट चेक यो सेल्फ, तुसीं बहुत अच्छा नहीं लग रहे हो। नुल्ला विटाए एलिट लिबेरो, इक फारेत्रा औग। प्रैसेंट कोमोडो कर्सस मैग्ना, वेल scelerisque nisl consectetur एट।

  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 वर्ग = "मीडिया" > ऐ
  2. <a class = "पुल-बाएं" href = "#" >
  3. <img वर्ग = "मीडिया-वस्तु" डेटा- src = "धारक.जेएस/64x64" >
  4. </a> दा
  5. <div class = "मीडिया-शरीर" > ऐ
  6. <h4 class = "मीडिया-हेडिंग" > मीडिया हेडिंग </h4>
  7. ...
  8.  
  9. <!-- नेस्टेड मीडिया वस्तु -->
  10. <div वर्ग = "मीडिया" > ऐ
  11. ...
  12. </div> दा
  13. </div> दा
  14. </div> दा

मीडिया लिस्ट

थोड़ा अतिरिक्त मार्कअप कन्नै, तुस सूची दे अंदर मीडिया दा इस्तेमाल करी सकदे ओ (टिप्पणी थ्रेड जां लेख सूची आस्तै उपयोगी)।

  • 64x64 दा

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

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

    64x64 दा

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

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

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

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

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

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

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

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

वेल्स ने दी

कुएं गी इक तत्व पर इक साधारण प्रभाव दे रूप च इस्तेमाल करो तां जे उसी इक इनसेट प्रभाव दित्ता जाई सकै।

देखो, मैं इक कुएं च हां!
  1. <div वर्ग = "अच्छा" > ऐ
  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. &: पहले , ऐ .
  4. &: दे बाद {
  5. प्रदर्शन : तालिका ;
  6. सामग्री : "" ऐ ;
  7. } ऐ।
  8. &: दे बाद {
  9. साफ : दोनों ;
  10. } ऐ।
  11. } ऐ।