अवयव

नेविगेशन, अलर्ट, पॉपओवर, और बहुत कुछ प्रदान करने के लिए बनाए गए दर्जनों पुन: प्रयोज्य घटक।

उदाहरण

दो और विशिष्ट विविधताओं के साथ दो बुनियादी विकल्प।

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

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

  1. <div class = "btn-group" >
  2. <बटन वर्ग = "बीटीएन" > बायां </बटन>
  3. <बटन वर्ग = "बीटीएन" > मध्य </बटन>
  4. <बटन क्लास = "बीटीएन" > राइट </बटन>
  5. </div>

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

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

लंबवत बटन समूह

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

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

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

बटन समूह रेडियो के रूप में भी कार्य कर सकते हैं, जहां केवल एक बटन सक्रिय हो सकता है, या चेकबॉक्स, जहां किसी भी संख्या में बटन सक्रिय हो सकते हैं। उसके लिए जावास्क्रिप्ट दस्तावेज़ देखें ।

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

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

अवलोकन और उदाहरण

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

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

सभी बटन आकारों के साथ काम करता है

बटन ड्रॉपडाउन किसी भी आकार में काम करते हैं: .btn-large, .btn-small, या .btn-mini

जावास्क्रिप्ट की आवश्यकता है

बटन ड्रॉपडाउन को कार्य करने के लिए बूटस्ट्रैप ड्रॉपडाउन प्लगइन की आवश्यकता होती है।

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


स्प्लिट बटन ड्रॉपडाउन

बटन समूह शैलियों और मार्कअप के आधार पर, हम आसानी से एक स्प्लिट बटन बना सकते हैं। स्प्लिट बटन बाईं ओर एक मानक क्रिया और प्रासंगिक लिंक के साथ दाईं ओर एक ड्रॉपडाउन टॉगल की सुविधा देते हैं।

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

आकार

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

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

ड्रॉपअप मेनू

ड्रापडाउन मेन्यू को .dropdown-menu. यह मेनू की दिशा को बदल देगा .caretऔर ऊपर से नीचे की बजाय नीचे से ऊपर की ओर जाने के लिए मेनू को ही बदल देगा।

  1. <div class = "btn-group dropup" >
  2. <बटन वर्ग = "बीटीएन" > ड्रॉपअप </बटन>
  3. <बटन वर्ग = "बीटीएन ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >
  4. <span class = "caret" </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 वर्ग = "अक्षम" ><a href = "#" > « </a></li>
  4. <li class = "active" ><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. <उल वर्ग = "पेजर" >
  2. <li><a href = "#" > पिछला </a></li>
  3. <li><a href = "#" > अगला </a></li>
  4. </ul>

संरेखित लिंक

वैकल्पिक रूप से, आप प्रत्येक लिंक को पक्षों से संरेखित कर सकते हैं:

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

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

पेजर लिंक पेजिनेशन से सामान्य .disabledउपयोगिता वर्ग का भी उपयोग करते हैं।

  1. <उल वर्ग = "पेजर" >
  2. <ली क्लास = "पिछला अक्षम" >
  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>

बैज

नाम उदाहरण मार्कअप
चूक 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>

आसानी से बंधनेवाला

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

हीरो यूनिट

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

नमस्ते दुनिया!

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

और अधिक जानें

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

पेज हैडर

h1किसी पृष्ठ पर सामग्री के अनुभागों को उचित रूप से स्थान देने और खंडित करने के लिए एक सरल शेल । यह के h1डिफ़ॉल्ट small, तत्व के साथ-साथ अधिकांश अन्य घटकों (अतिरिक्त शैलियों के साथ) का उपयोग कर सकता है।

  1. <div class = "पेज-हेडर" >
  2. <h1> उदाहरण पेज हेडर <छोटा> हेडर के लिए सबटेक्स्ट </ छोटा> </h1>
  3. </div>

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

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

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

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

  • 300x200

    थंबनेल लेबल

    क्रैस जस्टो ओडियो, डैपीबस एसी फैसिलिसिस इन, एजेस्टास एगेट क्वाम। Donec id elit non mi porta gravida और eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    गतिविधि गतिविधि

  • 300x200

    थंबनेल लेबल

    क्रैस जस्टो ओडियो, डैपीबस एसी फैसिलिसिस इन, एजेस्टास एगेट क्वाम। Donec id elit non mi porta gravida और eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    गतिविधि गतिविधि

  • 300x200

    थंबनेल लेबल

    क्रैस जस्टो ओडियो, डैपीबस एसी फैसिलिसिस इन, एजेस्टास एगेट क्वाम। Donec id elit non mi porta gravida और eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    गतिविधि गतिविधि

थंबनेल का उपयोग क्यों करें

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

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

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

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

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

मार्कअप

जैसा कि पहले उल्लेख किया गया है, थंबनेल के लिए आवश्यक मार्कअप हल्का और सीधा है। यहां लिंक की गई छवियों के लिए डिफ़ॉल्ट सेटअप पर एक नज़र डालें :

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

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

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

और ज्यादा उदाहरण

आपके लिए उपलब्ध विभिन्न ग्रिड कक्षाओं के साथ अपने सभी विकल्पों का अन्वेषण करें। आप विभिन्न आकारों को मिलाकर मैच भी कर सकते हैं।

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

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

चेतावनी! सबसे अच्छा यो स्वयं जांचें, आप बहुत अच्छे नहीं दिख रहे हैं।
  1. <div क्लास = "अलर्ट" >
  2. <बटन प्रकार = "बटन" वर्ग = "बंद" डेटा-खारिज = "अलर्ट" > और समय; </बटन>
  3. <मजबूत> चेतावनी! </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>

धारीदार

धारीदार प्रभाव बनाने के लिए ढाल का उपयोग करता है। IE7-8 में उपलब्ध नहीं है।

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

एनिमेटेड

धारियों को दाएं से बाएं चेतन .activeकरने के लिए जोड़ें । .progress-stripedIE के सभी संस्करणों में उपलब्ध नहीं है।

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

स्टैक्ड

.progressउन्हें ढेर करने के लिए एक ही में कई बार रखें ।

  1. <div वर्ग = "प्रगति" >
  2. <div वर्ग = "बार बार-सफलता" शैली = " चौड़ाई : 35 %; " ></div>
  3. <div class = "बार बार-चेतावनी" शैली = " चौड़ाई : 20 %; " ></div>
  4. <div वर्ग = "बार बार-खतरे" शैली = " चौड़ाई : 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 या Firefox के पुराने संस्करणों में समर्थित नहीं हैं।

Internet Explorer 10 और Opera 12 से पहले के संस्करण एनिमेशन का समर्थन नहीं करते हैं।

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

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

डिफ़ॉल्ट मीडिया सामग्री ब्लॉक के बाईं या दाईं ओर मीडिया ऑब्जेक्ट (छवियां, वीडियो, ऑडियो) को तैरने की अनुमति देता है।

64x64

मीडिया शीर्षक

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

मीडिया शीर्षक

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

मीडिया शीर्षक

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

मीडिया सूची

कुछ अतिरिक्त मार्कअप के साथ, आप सूची के अंदर मीडिया का उपयोग कर सकते हैं (टिप्पणी धागे या लेख सूचियों के लिए उपयोगी)।

  • 64x64

    मीडिया शीर्षक

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

    64x64

    नेस्टेड मीडिया शीर्षक

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

    नेस्टेड मीडिया शीर्षक

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

    नेस्टेड मीडिया शीर्षक

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

    मीडिया शीर्षक

    ग्रेविडा नाला में क्रैस सिट अमेट निभ लिबरो। नुल्ला वेल मेटस स्केलेरिस्क एंटे सॉलिसिटुडिन कमोडो। क्रैस पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस।
  1. <ul वर्ग = "मीडिया-सूची" >
  2. <ली क्लास = "मीडिया" >
  3. < ए क्लास = "पुल- लेफ्ट" href = "#" >
  4. <img वर्ग = "मीडिया-वस्तु " डेटा- src = "धारक.जेएस/64x64" >
  5. </a>
  6. <div class = "मीडिया-बॉडी" >
  7. <h4 वर्ग = "मीडिया-शीर्षक" > मीडिया शीर्षक </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="#"यदि आप एंकर का उपयोग करना चाहते हैं तो iOS उपकरणों को क्लिक ईवेंट के लिए आवश्यकता होती है ।

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

सहायक वर्ग

छोटे प्रदर्शन या व्यवहार में बदलाव के लिए सरल, केंद्रित कक्षाएं।

.पुल-बाएं

एक तत्व बाईं ओर फ़्लोट करें

  1. वर्ग = "पुल-बाएं"
  1. . खींचो - बाएँ {
  2. फ्लोट : बाएं ;
  3. }

.pull-सही

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

  1. वर्ग = "पुल-राइट"
  1. . खींचो - दाएं {
  2. फ्लोट : सही ;
  3. }

.म्यूटेड

किसी तत्व का रंग इसमें बदलें#999

  1. वर्ग = "म्यूट"
  1. . मौन {
  2. रंग : #999;
  3. }

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

floatकिसी भी तत्व पर साफ़ करें

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