बूटस्ट्रैप

अवयव

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

बटन समूह अधिक टूलबार जैसी कार्यक्षमता के लिए बटन से जुड़ें

बटन समूह

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

आप अधिक जटिल परियोजनाओं के लिए के सेट <div class="btn-group">को a में भी जोड़ सकते हैं ।<div class="btn-toolbar">

बाएं मध्यम सही
1 2 3 4
5 6 7
8

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

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

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

और कई समूहों के लिए टूलबार के साथ:

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

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

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

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

सचेत

बटन समूहों के लिए CSS एक अलग फ़ाइल में है, बटन-समूह रहित।

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

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

ड्रॉपडाउन मेनू को एक के भीतर रखकर .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>

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

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

गतिविधि
गतिविधि
खतरा
सफलता
जानकारी

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

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

  1. <div class = "btn-group" > 
  2.   <a class = "btn" href = "#" > क्रिया </a>  
  3.   <एक वर्ग = " बीटीएन ड्रॉपडाउन -टॉगल" डेटा-टॉगल = "ड्रॉपडाउन " href = "#" >   
  4.     <span class = "caret" </span> 
  5.   </a>
  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>

पेजर त्वरित पिछले और अगले लिंक के लिए

पेजर के बारे में

पेजर घटक हल्के मार्कअप और यहां तक ​​कि हल्की शैलियों के साथ सरल पेजिनेशन कार्यान्वयन के लिए लिंक का एक सेट है। यह ब्लॉग या पत्रिकाओं जैसी साधारण साइटों के लिए बहुत अच्छा है।

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

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

  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">New</span>
चेतावनी <span class="label label-warning">Warning</span>
महत्वपूर्ण <span class="label label-important">Important</span>
जानकारी <span class="label label-info">Info</span>

थंबनेल छवियों, वीडियो, पाठ, और बहुत कुछ के ग्रिड

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

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

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

थोड़े अतिरिक्त मार्कअप के साथ, थंबनेल में किसी भी प्रकार की 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.   <a class = "करीब" > × </a> 
  3.   <मजबूत> चेतावनी! </strong> अपने आप को सर्वश्रेष्ठ जांचें, आप बहुत अच्छे नहीं दिख रहे हैं।
  4. </div>

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

×

चेतावनी!

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

  1. <div class = "अलर्ट अलर्ट-ब्लॉक" > 
  2.   <a class = "करीब" > × </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>

धारीदार

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

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

एनिमेटेड

धारीदार उदाहरण लेता है और उसे एनिमेट करता है।

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

विकल्प और ब्राउज़र समर्थन

अतिरिक्त रंग

प्रोग्रेस बार समान स्टाइल के लिए बटन और अलर्ट के समान वर्ग नामों में से कुछ का उपयोग करते हैं।

  • .progress-info
  • .progress-success
  • .progress-danger

वैकल्पिक रूप से, आप LESS फ़ाइलों को अनुकूलित कर सकते हैं और अपने स्वयं के रंग और आकार रोल कर सकते हैं।

व्‍यवहार

प्रोग्रेस बार CSS3 के ट्रांज़िशन का उपयोग करते हैं, इसलिए यदि आप जावास्क्रिप्ट के माध्यम से चौड़ाई को गतिशील रूप से समायोजित करते हैं, तो यह आसानी से आकार बदल जाएगा।

यदि आप .activeकक्षा का उपयोग करते हैं, तो आपकी .progress-stripedप्रगति पट्टियाँ बाएँ से दाएँ धारियों को चेतन करेंगी।

ब्राउज़र समर्थन

प्रोग्रेस बार अपने सभी प्रभावों को प्राप्त करने के लिए CSS3 ग्रेडिएंट, ट्रांज़िशन और एनिमेशन का उपयोग करते हैं। ये सुविधाएँ IE7-8 या Firefox के पुराने संस्करणों में समर्थित नहीं हैं।

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

विविध कुएँ, बैज और नज़दीकी चिह्न

वेल्स

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

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

आइकन बंद करें

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

×

  1. < ए क्लास = "करीबी" > × </a>