घटक

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

बटन समूह

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

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

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

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

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

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

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

  1. <div वर्ग = "बीटीएन-समूह" >
  2. <बटन वर्ग = "btn" > 1 </बटन>
  3. <बटन वर्ग = "btn" > 2 </बटन>
  4. <बटन वर्ग = "btn" > 3 </बटन>
  5. </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

सब बटन साइज के साथ काज करैत अछि

बटन ड्रॉपडाउन कोनो आकार मे काज करैत अछि. अपन बटन आकार .btn-large, .btn-small, अथवा .btn-mini.

जावास्क्रिप्ट के आवश्यकता अछि

बटन ड्रॉपडाउन कें काज करय कें लेल बूटस्ट्रैप ड्रॉपडाउन प्लगइन कें आवश्यकता होयत छै.

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


विभाजित बटन ड्रॉपडाउन

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

बटन ग्रुप स्टाइल आ मार्कअप के आधार पर हम आसानी स स्प्लिट बटन बना सकैत छी | विभाजित बटनऽ म॑ बायां तरफ मानक क्रिया आरू दाहिना तरफ संदर्भ लिंक के साथ ड्रॉपडाउन टॉगल के सुविधा छै.

आकार के

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

  1. <div वर्ग = "बीटीएन-समूह" >
  2. ...
  3. <ul class = "ड्रॉपडाउन-मेनू पुल-राइट" >
  4. <!-- ड्रॉपडाउन मेनू लिंक -->
  5. </ul>
  6. </div>

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

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

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

ड्रॉपअप मेनू

ड्रॉपडाउन मेनू कें सेहो नीचा सं ऊपर टॉगल कैल जा सकय छै कें तत्काल अभिभावक मे एकटा वर्ग जोड़ क .dropdown-menu. ई के दिशा के पलट देत .caretआ मेनू के स्वयं के रिपोजिशन करत जे ऊपर सं नीचा के बजाय नीचा सं ऊपर जाय.

  1. <div class = "btn-समूह ड्रॉपअप" >
  2. <button class = "btn" > ड्रॉपअप </बटन>
  3. <button class = "btn ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >
  4. <span class = "कैरेट" </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. <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>

पेजर त्वरित पिछला आ अगिला लिंक के लेल

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

पेजर घटक हल्का मार्कअप आरू आरू हल्का शैली के साथ सरल पृष्ठांकन कार्यान्वयन लेली लिंक के एक सेट छै. ब्लॉग या पत्रिका सन सरल साइट के लेल ई बढ़िया अछि.

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

.disabledपेजर लिंक पृष्ठांकन स सामान्य वर्ग क सेहो उपयोग करैत अछि ।

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

डिफ़ॉल्ट रूप स, पेजर लिंक कए केंद्रित करैत अछि.

  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>
उल्टा <span class="label label-inverse">Inverse</span>

विषय में

बैज कोनों तरह कें संकेतक या गिनती कें प्रदर्शित करय कें लेल छोट, सरल घटक छै. इ आमतौर पर मेल डॉट ऐप जैना ईमेल क्लाइंट मे या पुश सूचनाक कें लेल मोबाइल ऐप पर पाएल जायत छै.

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

नाम उदाहरण मार्कअप
चुकनाइ <span class="badge">1</span>
सफलता <span class="badge badge-success">2</span>
चेतावनी <span class="badge badge-warning">4</span>
महत्वपूर्ण 6 <span class="badge badge-important">6</span>
जानकारी 8 <span class="badge badge-info">8</span>
उल्टा १० <span class="badge badge-inverse">10</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एक पृष्ठ पर सामग्री के खंडों को उचित रूप से स्पेस आउट और सेगमेंट करने के लिए एक के लिए एक सरल शेल | ई h1's डिफ़ॉल्ट small, तत्व के साथ-साथ अधिकांश अन्य घटक (अतिरिक्त शैली के साथ) के उपयोग कर सकै छै.

  1. <div class = "पृष्ठ-शीर्षक" >
  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. <button class = "बंद" data-dismiss = "सचेतक" > × </बटन>
  3. <strong> चेतावनी! </strong> बेस्ट चेक यो सेल्फ, अहाँ बेसी नीक नहि लागि रहल छी।
  4. </div>

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

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

चेतावनी!

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

  1. <div class = "सचेतक अलर्ट-ब्लॉक" >
  2. <a class = "बंद करू" data-dismiss = "सचेतक" href = "#" > × </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. <div वर्ग = "बार"।
  3. शैली = " चौड़ाई : 20 %; " ></div>
  4. </div>

एनिमेटेड

धारीदार उदाहरण लैत अछि आ ओकरा एनिमेट करैत अछि (कोनो आईई नहि)।

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

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

अतिरिक्त रंग

प्रगति बार सुसंगत शैलीक कें लेल किछु एकहि बटन आ अलर्ट वर्गक कें उपयोग करयत छै.

धारीदार सलाखों

ठोस रंग के समान, हम विभिन्न धारीदार प्रगति बार रखने हैं |

व्यवहार

प्रगति बार CSS3 संक्रमण के उपयोग करै छै, अतः अगर आप जावास्क्रिप्ट के माध्यम स॑ चौड़ाई क॑ गतिशील रूप स॑ समायोजित करै छै, त॑ ई सुचारू रूप स॑ आकार बदलतै ।

यदि अहां .activeक्लास कें उपयोग करय छी त अहां कें .progress-stripedप्रगति बार बायां सं दायां पट्टी कें एनिमेट करतय.

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

प्रगति बार अपनऽ सब प्रभाव प्राप्त करै लेली CSS3 ढाल, संक्रमण, आरू एनीमेशन के उपयोग करै छै. ई सुविधा IE7-9 या फायरफॉक्स केरऽ पुरानऽ संस्करणऽ म॑ समर्थित नै छै ।

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

वेल्स

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

देखू, हम एकटा इनार मे छी!
  1. <div वर्ग = "अच्छा" >
  2. ...
  3. </div>

बंद आइकन

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

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

आईओएस डिवाइस कें क्लिक घटनाक कें लेल एकटा href="#" कें आवश्यकता होयत छै अगर अहां एंकर कें उपयोग करय कें बजाय.

  1. <a class = "बंद" href = "#" > & समय; </a>