अवयव

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

बटन समूह

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

सर्वोत्तम प्रथाएं

हम बटन समूहों और टूलबार का उपयोग करने के लिए निम्नलिखित दिशानिर्देशों की अनुशंसा करते हैं:

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

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

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

यहां बताया गया है कि HTML एंकर टैग बटनों के साथ निर्मित मानक बटन समूह की तलाश में कैसा दिखता है:

  1. <div class = "btn-group" >
  2. <बटन वर्ग = "बीटीएन" > 1 </बटन>
  3. <बटन वर्ग = "बीटीएन" > 2 </बटन>
  4. <बटन वर्ग = "बीटीएन" > 3 </बटन>
  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>

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

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

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

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

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

बटन ड्रॉपडाउन

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

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

उदाहरण मार्कअप

एक बटन समूह के समान, हमारा मार्कअप नियमित बटन मार्कअप का उपयोग करता है, लेकिन शैली को परिष्कृत करने और बूटस्ट्रैप के ड्रॉपडाउन jQuery प्लगइन का समर्थन करने के लिए कुछ हद तक अतिरिक्त के साथ।

  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.

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

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

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


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

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

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

आकार

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

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "ड्रॉपडाउन-मेनू पुल-राइट" >
  4. <!-- ड्रॉपडाउन मेनू लिंक -->
  5. </ul>
  6. </div>

उदाहरण मार्कअप

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

  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 से प्रेरित अत्यंत सरल और न्यूनतम स्टाइल वाला पेजिनेशन, ऐप्स और खोज परिणामों के लिए बढ़िया। बड़े ब्लॉक को याद करना मुश्किल है, आसानी से स्केलेबल है, और बड़े क्लिक क्षेत्र प्रदान करता है।

स्टेटफुल पेज लिंक

लिंक अनुकूलन योग्य हैं और सही वर्ग के साथ कई परिस्थितियों में काम करते हैं। .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. <उल वर्ग = "पेजर" >
  2. <ली>
  3. <a href = "#" > पिछला </a>
  4. </li>
  5. <ली>
  6. <a href = "#" > अगला </a>
  7. </li>
  8. </ul>

संरेखित लिंक

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

  1. <उल वर्ग = "पेजर" >
  2. <ली क्लास = "पिछला" >
  3. <a href = "#" > पुराना </a>
  4. </li>
  5. <ली क्लास = "अगला" >
  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>

के बारे में

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

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

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

हीरो यूनिट

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

मार्कअप

अपनी सामग्री को इस प्रकार लपेटें div:

  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 सामग्री जैसे शीर्षक, पैराग्राफ या बटन जोड़ना संभव है।

  • थंबनेल लेबल

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

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

  • थंबनेल लेबल

    क्रैस जस्टो ओडियो, डैपिबस एसी फैसिलिसिस इन, एजेस्टास एगेट क्वाम। 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. <ली क्लास = "स्पैन3" >
  3. <a href = "#" वर्ग = "थंबनेल"> _
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <उल वर्ग = "थंबनेल" >
  2. <ली क्लास = "स्पैन3" >
  3. <div class = "थंबनेल" >
  4. <img src = "https://placehold.it/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. <बटन वर्ग = "बंद" डेटा-खारिज = "अलर्ट" > × </बटन>
  3. <मजबूत> चेतावनी! </strong> अपने आप को सर्वश्रेष्ठ जांचें, आप बहुत अच्छे नहीं दिख रहे हैं।
  4. </div>

सचेत! आईओएस उपकरणों href="#"को अलर्ट को खारिज करने के लिए एक की आवश्यकता होती है। एंकर क्लोज आइकॉन के लिए इसे और डेटा एट्रिब्यूट को शामिल करना सुनिश्चित करें। वैकल्पिक रूप से, आप <button>डेटा विशेषता वाले तत्व का उपयोग कर सकते हैं, जिसे हमने अपने दस्तावेज़ों के लिए करने का विकल्प चुना है। का उपयोग करते समय <button>, आपको शामिल करना होगा type="button"या आपके फ़ॉर्म सबमिट नहीं हो सकते हैं।

दो वैकल्पिक वर्गों के साथ मानक अलर्ट संदेश को आसानी से विस्तारित करें: .alert-blockअधिक पैडिंग और टेक्स्ट नियंत्रणों .alert-headingके लिए और मिलान करने वाले शीर्षक के लिए।

चेतावनी!

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

  1. <div class = "अलर्ट अलर्ट-ब्लॉक" >
  2. <a class = "करीब" डेटा-खारिज = "अलर्ट" href = "#" > × </a>
  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 वर्ग = "बार"
  3. शैली = " चौड़ाई : 60 %; " ></div>
  4. </div>

धारीदार

एक धारीदार प्रभाव (कोई IE नहीं) बनाने के लिए एक ढाल का उपयोग करता है।

  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 या Firefox के पुराने संस्करणों में समर्थित नहीं हैं।

ओपेरा और आईई इस समय एनिमेशन का समर्थन नहीं करते हैं।

वेल्स

किसी तत्व को इनसेट प्रभाव देने के लिए कुएं के साथ-साथ एक साधारण प्रभाव का उपयोग करें।

देखो, मैं कुएँ में हूँ!
  1. <div वर्ग = "अच्छी तरह से" >
  2. ...
  3. </div>

आइकन बंद करें

मोडल और अलर्ट जैसी सामग्री को खारिज करने के लिए जेनेरिक क्लोज़ आइकन का उपयोग करें।

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

यदि आप एंकर का उपयोग करते हैं तो iOS उपकरणों को क्लिक ईवेंट के लिए एक href="#" की आवश्यकता होती है।

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