बूटस्ट्रैप

घटक

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

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

बटन समूह

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

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

हम बटन समूह आ टूलबार कें उपयोग करय कें लेल निम्नलिखित दिशा निर्देशक कें सिफारिश करय छी:

  • एकटा बटन समूह मे सदिखन एकहि तत्वक प्रयोग करू, <a>वा <button>.
  • एकहि बटन समूह मे अलग-अलग रंगक बटन नहि मिलाउ।
  • पाठ के अलावा या ओकर जगह पर आइकन के प्रयोग करू, मुदा जतय उचित हो, alt आ title पाठ जरूर शामिल करू.

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

पूर्वनिर्धारित उदाहरण

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

बामा मध्य ठीक 
  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>

टूलबार उदाहरण

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

१ २ ३ ४
५ 6 7
8 
  1. <div वर्ग = "बीटीएन-टूलबार" > 
  2.   <div वर्ग = "बीटीएन-समूह" > 
  3.     ...
  4.   </div>
  5. </div>

चेकबॉक्स आ रेडियो स्वाद

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

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

सिर ऊपर

बटन समूहक लेल CSS एकटा अलग फाइल मे अछि, button-groups.less.

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

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

कोनों बटन कें उपयोग ड्रॉपडाउन मेनू कें एकटा कें भीतर रख क .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.     <li वर्ग = "सक्रिय" > 
  5.       <a href = "#" > 1 </a> 
  6.     </li>
  7.     <li><a href = "#" > २ </a></li> 
  8.     <li><a href = "#" > 3 </a></li> 
  9.     <li><a href = "#" > ४ </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 = "#" > एवं आर; पुरान </a> 
  4.   </li>
  5.   <li class = "अगला" > 
  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>

मुद्रण घटक सामग्री के विभाजन के लिये पृष्ठ हेडर एवं हीरो इकाई |

हीरो इकाई

बूटस्ट्रैप एकटा हल्का, लचीला घटक प्रदान करयत छै जेकरा हीरो यूनिट कहल जायत छै जे अहां कें साइट पर सामग्री कें प्रदर्शन करयत छै. मार्केटिंग आओर कंटेंट-हेवी साइट पर ई नीक काज करैत अछि.

मार्कअप

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

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

नमस्कार, दुनियाँ!

ई एगो सरल हीरो यूनिट छै, जे फीचर्ड सामग्री या जानकारी प॑ अतिरिक्त ध्यान आकर्षित करै लेली एगो सरल जंबोट्रॉन-शैली के घटक छै ।

और जानें

पृष्ठ शीर्षक

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

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

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

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

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

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

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

  • थंबनेल लेबल

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

    कार्य कार्य

  • थंबनेल लेबल

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

    कार्य कार्य

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

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

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

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

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

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

मार्कअप के

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

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

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

  1. <ul class = "थंबनेल" > 
  2.   <li वर्ग = "span3" > 
  3.     <div वर्ग = "थंबनेल" > 
  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 = "बंद करू" data-dismiss = "सचेतक" > × </a>  
  3.   <strong> चेतावनी! </strong> बेस्ट चेक यो सेल्फ, अहाँ बेसी नीक नहि लागि रहल छी।
  4. </div>

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

×

चेतावनी!

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

  1. <div class = "सचेतक अलर्ट-ब्लॉक" > 
  2.   <a class = "बंद करू" data-dismiss = "सचेतक" > × </a>  
  3.   <h4 class = "alert-heading" > चेतावनी! </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 वर्ग = "अच्छा" > 
  2.   ...
  3. </div>

बंद आइकन

मोडल आ अलर्ट जैना सामग्री कें खारिज करय कें लेल जेनेरिक बंद आइकन कें उपयोग करूं.

×

  1. <a class = "बंद करू" > × </a>