बूटस्ट्रैप के बा

घटक के बारे में बतावल गइल बा

बूटस्ट्रैप में दर्जनों रियूजेबल कंपोनेंट बनावल गइल बा जेह से नेविगेशन, अलर्ट, पोपोवर, आ अउरी बहुत कुछ उपलब्ध करावल जा सके ला।

बटन समूह अउरी टूलबार नियर कामकाज खातिर बटन सभ से जुड़ीं

बटन समूह के बा

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

रउआँ अउरी जटिल प्रोजेक्ट सभ खातिर <div class="btn-group">एगो में सेट सभ के भी जोड़ सकत बानी।<div class="btn-toolbar">

छोड़ देलन मध्य ठीक
1 के बा 2 के बा 3 के बा 4 के बा
5 के बा 6 के बा 7 के बा
8 के बा

उदाहरण के रूप में मार्कअप के बा

इहाँ एचटीएमएल एंकर टैग बटन सभ के साथ बनावल मानक बटन समूह के कइसे देखल जाला:

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

चेकबॉक्स आ रेडियो के स्वाद के बारे में बतावल गइल बा

बटन समूह रेडियो के रूप में भी काम क सके ला, जहाँ खाली एगो बटन सक्रिय हो सके ला, या चेकबॉक्स, जहाँ कौनों भी संख्या में बटन सक्रिय हो सके ला। ओकरा खातिर जावास्क्रिप्ट डॉक्स देखल जाव .

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

सिर ऊपर उठ जाला

बटन समूह खातिर सीएसएस एगो अलग फाइल में बा, बटन-समूह.लेस।

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

बटन के ड्रॉपडाउन हो जाला

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

कार्रवाई
कार्रवाई
खतरा
सफलता
जानकारी दिहल गइल बा

उदाहरण के रूप में मार्कअप के बा

बटन समूह के तरह, हमनी के मार्कअप नियमित बटन मार्कअप के इस्तेमाल करेला, लेकिन शैली के परिष्कृत करे अवुरी बूटस्ट्रैप के ड्रॉपडाउन jQuery प्लगइन के सपोर्ट करे खाती मुट्ठी भर जोड़ के संगे।

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

बटन के ड्रॉपडाउन के विभाजन करीं

बटन ग्रुप स्टाइल आ मार्कअप के आधार पर हमनी के आसानी से स्प्लिट बटन बना सकेनी जा। स्प्लिट बटन सभ में बाईं ओर एगो मानक एक्शन आ दाहिने ओर एगो ड्रॉपडाउन टॉगल के बिसेसता बा जेह में संदर्भ संबंध बा।

कार्रवाई
कार्रवाई
खतरा
सफलता
जानकारी दिहल गइल बा

उदाहरण के रूप में मार्कअप के बा

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

  1. <div वर्ग = "बीटीएन-समूह" > बा 
  2.   <a class = "btn" href = "#" > कार्रवाई </a> बा  
  3.   <a class = "btn ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" href = "#" >   
  4.     <span class = "कैरेट" </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. <ul क्लास = "पेजर" > के बा 
  2.   <ली> के बा
  3.     <a href = "#" > पिछला </a> बा 
  4.   </li> के बा
  5.   <ली> के बा
  6.     <a href = "#" > अगिला </a> बा 
  7.   </li> के बा
  8. </ul> के बा

संरेखित कइल गइल लिंक बा

एकरे अलावा, आप हर लिंक के साइड सभ में संरेखित क सकत बानी:

  1. <ul क्लास = "पेजर" > के बा 
  2.   <li class = "पिछला" > के बा 
  3.     <a href = "#" > &larr के बारे में जानकारी दिहल गइल बा; पुरान </a> के बा 
  4.   </li> के बा
  5.   <li वर्ग = "अगला" > बा 
  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>

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

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

डिफ़ॉल्ट रूप से, बूटस्ट्रैप के थंबनेल सभ के अइसन बनावल गइल बा कि लिंक कइल गइल छवि सभ के कम से कम जरूरी मार्कअप के साथ देखावल जा सके।

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

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

  • थंबनेल लेबल बा

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

    कार्रवाई कार्रवाई

  • थंबनेल लेबल बा

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

    कार्रवाई कार्रवाई

थंबनेल के इस्तेमाल काहें करीं

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

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

थंबनेल मार्कअप सरल बा- ulकवनो संख्या में liतत्व वाला एगो के जरूरत बा। इ सुपर लचीला भी बा, जवना से कवनो प्रकार के सामग्री के बस तनिका जादा मार्कअप के संगे आपके सामग्री के लपेटे के अनुमति बा।

ग्रिड कॉलम साइज के इस्तेमाल करेला

अंत में, थंबनेल घटक मौजूदा ग्रिड सिस्टम क्लास सभ के इस्तेमाल करे ला-जइसे कि .span2या .span3—थंबनेल आयाम सभ के नियंत्रण खातिर।

मार्कअप के बारे में बतावल गईल बा

जइसन कि पहिले बतावल गइल बा कि थंबनेल खातिर जरूरी मार्कअप हल्का आ सीधा होला. लिंक कइल गइल छवि सभ खातिर डिफ़ॉल्ट सेटअप पर नजर डालल जा रहल बा :

  1. <ul class = "थंबनेल" > बा 
  2.   <ली वर्ग = "स्पैन3" > के बा 
  3.     <a href = "#" वर्ग = "थंबनेल" > बा  
  4.       <img src = "https://प्लेसहोल्ड.इट/260x180" alt = "" > बा  
  5.     </a> के बा
  6.   </li> के बा
  7.   ...
  8. </ul> के बा

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

  1. <ul class = "थंबनेल" > बा 
  2.   <ली वर्ग = "स्पैन3" > के बा 
  3.     <div class = "थंबनेल" > के बा 
  4.       <img src = "https://प्लेसहोल्ड.इट/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> चेतावनी दिहल गइल बा! </strong> बेस्ट चेक यो सेल्फ, रउरा बहुते बढ़िया नइखीं लागत.
  4. </div> के बा

मानक अलर्ट संदेश के दू गो वैकल्पिक क्लास के साथ आसानी से बढ़ाईं: .alert-blockअउरी पैडिंग आ टेक्स्ट कंट्रोल .alert-headingखातिर आ मिलान करे वाला हेडिंग खातिर।

× के बा

चेतावनी!

बेस्ट चेक यो सेल्फ, रउरा बहुते बढ़िया नइखीं लागत. नुल्ला विटा एलिट लिबेरो, एगो फारेट्रा औग। प्रैसेंट कोमोडो कर्सस मैग्ना, वेल स्केलेरिस्क निस्ल कॉन्सेक्टेटर एट के बा।

  1. <div class = "अलर्ट अलर्ट-ब्लॉक" > बा 
  2.   <a class = "बंद करीं" > × </a> के बा 
  3.   <h4 class = "अलर्ट-हेडिंग" > चेतावनी बा! </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 भा फायरफॉक्स के पुरान संस्करण सभ में सपोर्ट ना कइल जालें।

ओपेरा एह समय एनीमेशन के सपोर्ट नइखे करत।

विविध कुआँ, बैज, आ बंद आइकन बा

वेल्स के ह

कुआँ के इस्तेमाल कवनो तत्व पर सरल प्रभाव के रूप में करीं ताकि ओकरा के इनसेट प्रभाव दिहल जा सके।

देखऽ, हम एगो इनार में बानी! 
  1. <div class = "अच्छा" > के बा 
  2.   ...
  3. </div> के बा

आइकन के बंद करीं

मोडल आ अलर्ट नियर सामग्री के खारिज करे खातिर जेनेरिक बंद आइकन के इस्तेमाल करीं।

× के बा

  1. <a class = "बंद करीं" > × </a> के बा