घटक

दर्जनों पुन: उपयोग करय योग्य घटक नेविगेशन, अलर्ट, पोपोवर, आओर बहुत किछु प्रदान करय लेल निर्मित.

उदाहरण के लिये

दूटा मूल विकल्प, संगहि दूटा आओर विशिष्ट भिन्नता।

एकल बटन समूह

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

  1. <div वर्ग = "बीटीएन-समूह" >
  2. <button class = "btn" > बाम </button>
  3. <button class = "btn" > मध्य </बटन>
  4. <button class = "btn" > दाहिना </बटन>
  5. </div>

एकाधिक बटन समूह

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

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

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

बटन कें एकटा सेट कें क्षैतिज रूप सं नहि बल्कि लंबवत ढेर देखाय दिअ.

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

आकार के

अतिरिक्त बटन वर्ग क उपयोग करू .btn-mini, .btn-small, या .btn-largeआकार देबाक लेल.

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

ड्रॉपअप मेनू

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

  1. <div class = "btn-समूह ड्रॉपअप" >
  2. <button class = "btn" > ड्रॉपअप </बटन>
  3. <button class = "btn ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >
  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 = "#" > </a></li>
  6. <li><a href = "#" > 3 </a></li>
  7. <li><a href = "#" > </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 = "#" > एवं आर; पुरान </a>
  4. </li>
  5. <li class = "अगला" >
  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>
महत्वपूर्ण 6 <span class="badge badge-important">6</span>
जानकारी 8 <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 = "btn btn-प्राथमिक btn-बड़े" >
  6. और जानें
  7. </a>
  8. </p>
  9. </div>

पृष्ठ शीर्षक

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

  1. <div class = "पृष्ठ-शीर्षक" >
  2. <h1> उदाहरण पृष्ठ शीर्षक <small> शीर्षक क लेल उपपाठ </small></h1>
  3. </div>

पूर्वनिर्धारित थंबनेल

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

अत्यधिक अनुकूलन योग्य

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

  • 300x200 के

    थंबनेल लेबल

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

    कार्य कार्य

  • 300x200 के

    थंबनेल लेबल

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

    कार्य कार्य

  • 300x200 के

    थंबनेल लेबल

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

    कार्य कार्य

थंबनेल के प्रयोग कियैक करू

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

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

थंबनेल मार्कअप सरल अछि- ulकोनो संख्या मे liतत्वक संग एकटा मात्र आवश्यक अछि । ई सुपर लचीला भी छै, जेकरा स॑ कोनो भी प्रकार के सामग्री के साथ बस कनी अधिक मार्कअप के साथ आपनो सामग्री क॑ लपेटै के अनुमति मिलै छै ।

ग्रिड कॉलम आकारक उपयोग करैत अछि

अंत मे, थंबनेल घटक मौजूदा ग्रिड सिस्टम वर्गक कें उपयोग करयत छै-जैना .span2या.span3 —थंबनेल आयाम कें नियंत्रण कें लेल.

मार्कअप

जेना कि पहिने कहल गेल अछि जे थंबनेल के लेल आवश्यक मार्कअप हल्का आ सोझ अछि. लिंक कएल गेल छविक लेल डिफ़ॉल्ट सेटअप पर एक नजरि देल गेल अछि :

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

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

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

अधिक उदाहरण

अहां कें लेल उपलब्ध विभिन्न ग्रिड क्लास कें साथ अपन सबटा विकल्पक कें खोज करूं. अहां अलग-अलग साइज के सेहो मिला सकय छी आओर मिला सकय छी.

डिफ़ॉल्ट अलर्ट

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

चेतावनी! बेस्ट चेक यो सेल्फ, अहाँ बेसी नीक नहि लागि रहल छी।
  1. <div वर्ग = "सचेतक" >
  2. <बटन प्रकार = "बटन" वर्ग = "बंद" data-dismiss = "सचेतक" > × </बटन>
  3. <strong> चेतावनी! </strong> बेस्ट चेक यो सेल्फ, अहाँ बेसी नीक नहि लागि रहल छी।
  4. </div>

बटन खारिज करब

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

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

वैकल्पिक रूप स, अहां <button>डेटा विशेषता क संग कोनो तत्व क उपयोग क सकैत छी, जे हम अपन डॉक्स क लेल करबाक विकल्प चुनने छी. उपयोग करय कें समय <button>, अहां कें शामिल करनाय आवश्यक छै type="button"या अहां कें फॉर्म जमा नहि कयर सकय छै.

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

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

अलर्ट कें त्वरित आ आसान खारिज करय कें लेल अलर्ट jQuery प्लगइन कें उपयोग करूं .


विकल्प

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

चेतावनी!

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

  1. <div class = "सचेतक अलर्ट-ब्लॉक" >
  2. <बटन प्रकार = "बटन" वर्ग = "बंद" data-dismiss = "सचेतक" > × </बटन>
  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>

धारीदार

धारीदार प्रभाव बनेबाक लेल ढाल क उपयोग करैत अछि । IE7-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 के

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

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

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

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

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

क्रास बैस अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस scelerisque एंटी सोलिसिट्यूडिन कोमोडो। क्रास पुरुस ओडियो, वेस्टिबुलम में वल्पुटेट एट, टेम्पस विवेरा टर्पिस | Fusce condimentum nunc एसी निसी वल्पुटेट फ्रिंगिला। फौसिबस में डोनेक लैसिनिया कोंगे फेलिस।
  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 के

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

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

    64x64 के

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

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

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

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

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

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

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

    क्रास बैस अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस scelerisque एंटी सोलिसिट्यूडिन कोमोडो। क्रास पुरुस ओडियो, वेस्टिबुलम में वल्पुटेट एट, टेम्पस विवेरा टर्पिस |
  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 वर्ग = "मीडिया" >
  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. float : बामा ;
  3. } .

.खींच-दाहिना

एक तत्व सही तैरना

  1. class = "पुल-राइट"।
  1. . खींच - दाहिना { .
  2. float : दाहिना ;
  3. } .

.म्यूट क देल गेल

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

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

.क्लियरफिक्स करब

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

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