बटन समूह

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

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

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

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

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

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

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

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

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

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

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

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

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

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

सचेत

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

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

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

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

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

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

<div class = "btn-group" > 
  <एक वर्ग = " बीटीएन ड्रॉपडाउन -टॉगल" डेटा-टॉगल = "ड्रॉपडाउन " href = "#" >   
    गतिविधि
    <span class = "caret" </span> 
  </a>
  <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
    <!-- ड्रॉपडाउन मेनू लिंक ->
  </ul>
</div>

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

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

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

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > क्रिया </a>  
  <एक वर्ग = " बीटीएन ड्रॉपडाउन -टॉगल" डेटा-टॉगल = "ड्रॉपडाउन " href = "#" >   
    <span class = "caret" </span> 
  </a>
  <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
    <!-- ड्रॉपडाउन मेनू लिंक ->
  </ul>
</div>

शक्तिशाली आधार वर्ग

यहां सभी एनएवी घटक—टैब, गोलियां और सूचियां— कक्षा के माध्यम से समान आधार मार्कअप और शैलियों को साझा करते हैं ।.nav

कब इस्तेमाल करें

सामग्री के अनुभागों या संबंधित सामग्री के पृष्ठों के बीच नेविगेट करने के लिए टैब और गोलियां महान हैं।

घटक संरेखण

एनएवी लिंक संरेखित करने के लिए, .pull-leftया .pull-rightउपयोगिता वर्गों का उपयोग करें। दोनों वर्ग निर्दिष्ट दिशा में एक सीएसएस फ्लोट जोड़ देंगे।

मूल टैब

नियमित रूप <ul>से लिंक लें और जोड़ें .nav-tabs:

• घर
• प्रोफ़ाइल
• संदेशों

<ul class = "नेव नेवी-टैब" > 
  <ली क्लास = "सक्रिय" > 
    <a href = "#" > होम </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

मूल गोलियां

वही HTML लें, लेकिन .nav-pillsइसके बजाय उपयोग करें:

• घर
• प्रोफ़ाइल
• संदेशों

<उल क्लास = "एनएवी नेवी-पिल्स" > 
  <ली क्लास = "सक्रिय" > 
    <a href = "#" > होम </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

उन्हें कैसे ढेर करें

चूंकि टैब और गोलियां डिफ़ॉल्ट रूप से क्षैतिज होती हैं, इसलिए .nav-stackedउन्हें लंबवत रूप से स्टैक्ड दिखाने के लिए बस एक द्वितीय श्रेणी जोड़ें।

स्टैक्ड टैब

• घर
• प्रोफ़ाइल
• संदेशों

<ul class = "नेव नेवी-टैब एनएवी-स्टैक्ड" > 
  ...
</ul>

ढेर गोलियां

• घर
• प्रोफ़ाइल
• संदेशों

<ul class = "एनएवी नेवी-पिल्स नेवी-स्टैक्ड" > 
  ...
</ul>

रिच मेनू आसान बना दिया

बूटस्ट्रैप टैब और गोलियों में ड्रॉपडाउन मेनू बहुत आसान हैं और इसके लिए केवल थोड़े अतिरिक्त HTML और हल्के jQuery प्लगइन की आवश्यकता होती है।

बूटस्ट्रैप में ड्रॉपडाउन आरंभ करने पर दस्तावेज़ पढ़ने के लिए जावास्क्रिप्ट पृष्ठ पर जाएं ।

ड्रॉपडाउन वाले टैब

• घर
• प्रोफ़ाइल
• ड्रॉप डाउन
  • गतिविधि
  • एक और क्रिया
  • यहाँ कुछ और
  • अलग लिंक

<ul class = "नेव नेवी-टैब" > 
  <ली क्लास = "ड्रॉपडाउन" > 
    <a class = "ड्रॉपडाउन-टॉगल" 
       डेटा-टॉगल = "ड्रॉपडाउन"
       href = "#" >
        ड्रॉप डाउन
        <बी क्लास = "कैरेट" </b> 
      </a>
    <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
      <!-- लिंक्स -->
    </ul>
  </li>
</ul>

ड्रॉपडाउन के साथ गोलियां

• घर
• प्रोफ़ाइल
• ड्रॉप डाउन
  • गतिविधि
  • एक और क्रिया
  • यहाँ कुछ और
  • अलग लिंक

<उल क्लास = "एनएवी नेवी-पिल्स" > 
  <ली क्लास = "ड्रॉपडाउन" > 
    <a class = "ड्रॉपडाउन-टॉगल" 
       डेटा-टॉगल = "ड्रॉपडाउन"
       href = "#" >
        ड्रॉप डाउन
        <बी क्लास = "कैरेट" </b> 
      </a>
    <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
      <!-- लिंक्स -->
    </ul>
  </li>
</ul>

एप्लिकेशन-शैली नेविगेशन

एनएवी सूचियां वैकल्पिक हेडर के साथ एनएवी लिंक के समूह बनाने का एक सरल और आसान तरीका प्रदान करती हैं। ओएस एक्स में फाइंडर जैसे साइडबार में उनका सबसे अच्छा उपयोग किया जाता है।

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

आइकन के साथ

एनएवी सूचियों को आइकनों से लैस करना भी आसान है। कक्षा के साथ उचित <i>टैग जोड़ें और आप तैयार हैं।

उदाहरण एनएवी सूची

लिंक की एक सूची लें और जोड़ें class="nav nav-list":

<उल वर्ग = "एनएवी नेवी-सूची" > 
  <ली क्लास = "एनएवी-हेडर" > 
    सूची शीर्षलेख
  </li>
  <ली क्लास = "सक्रिय" > 
    <a href = "#" > होम </a> 
  </li>
  <ली>
    <a href = "#" > लाइब्रेरी </a> 
  </li>
  ...
</ul>

प्रतीक के साथ उदाहरण

वही उदाहरण, लेकिन <i>आइकन के लिए टैग के साथ।

<उल वर्ग = "एनएवी नेवी-सूची" > 
  ...
  <ली>
    <a href = "#" > 
      <i class = "आइकन-बुक" ></i> 
      पुस्तकालय
    </a>
  </li>
  ...
</ul>

क्या शामिल है

टैब के माध्यम से सामग्री के बीच टॉगल करने के लिए एक साधारण प्लगइन के साथ अपने टैब को जीवंत बनाएं। बूटस्ट्रैप चार शैलियों में टैब करने योग्य टैब को एकीकृत करता है: शीर्ष (डिफ़ॉल्ट), दाएं, नीचे और बाएं।

उनके बीच बदलना आसान है और केवल बहुत कम मार्कअप बदलने की आवश्यकता है।

सारणीबद्ध उदाहरण

.nav-tabsटैब को टैब करने योग्य बनाने के लिए, किसी अन्य div में class के साथ लपेटें .tabbable।

कस्टम jQuery प्लगइन

सभी टैब करने योग्य टैब हमारे हल्के jQuery प्लगइन द्वारा संचालित होते हैं। जावास्क्रिप्ट दस्तावेज़ पृष्ठ पर टैब करने योग्य टैब को जीवंत बनाने के तरीके के बारे में और पढ़ें।

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

तल पर टैब

HTML के क्रम को पलटें और नीचे टैब लगाने के लिए एक वर्ग जोड़ें।

<div वर्ग = "टैब करने योग्य टैब-नीचे" > 
  <div वर्ग = "टैब-सामग्री" > 
    ...
  </div>
  <ul class = "नेव नेवी-टैब" > 
    ...
  </ul>
</div>

बाईं ओर टैब

बाईं ओर टैब लगाने के लिए कक्षा को स्वैप करें।

<div वर्ग = "टैब करने योग्य टैब-बाएं" > 
  <ul class = "नेव नेवी-टैब" > 
    ...
  </ul>
  <div वर्ग = "टैब-सामग्री" > 
    ...
  </div>
</div>

दाईं ओर टैब

टैब को दाईं ओर रखने के लिए कक्षा को स्वैप करें।

<div वर्ग = "टैब करने योग्य टैब-दाएं" > 
  <ul class = "नेव नेवी-टैब" > 
    ...
  </ul>
  <div वर्ग = "टैब-सामग्री" > 
    ...
  </div>
</div>

नवबार मचान

नेवबार को स्थिर या स्थिर प्रदर्शन के लिए इसे अच्छी तरह से संरचित करने के लिए केवल कुछ divs की आवश्यकता होती है।

<div क्लास = "नेवबार" > 
  <div class = "नेवबार-इनर" > 
    <div क्लास = "कंटेनर" > 
      ...
    </div>
  </div>
</div>

फिक्स्ड नेवबार

नेवबार को व्यूपोर्ट के शीर्ष पर स्थिर करने के .navbar-fixed-topलिए, सबसे बाहरी डिव में जोड़ें, .navbar.

<div class = "नेवबार नेवबार-फिक्स्ड-टॉप" > 
  ...
</div>

अपने CSS में, आपको अपनी <body>. इसे कोर बूटस्ट्रैप सीएसएस के बाद और वैकल्पिक उत्तरदायी सीएसएस से पहले जोड़ना सुनिश्चित करें।

ब्रांड का नाम

आपके ब्रांड या प्रोजेक्ट का नाम दिखाने के लिए एक सरल लिंक के लिए केवल एक एंकर टैग की आवश्यकता होती है।

< एक वर्ग = "ब्रांड" href = "#" >  
  परियोजना का नाम
</a>

खोज फ़ॉर्म

.navbar-searchखोज प्रपत्र कक्षा के साथ नेवबार में कस्टम शैलियाँ प्राप्त करते हैं । इसे संरेखित करने के लिए शामिल करें .pull-leftया .pull-rightचालू करें।form

<फॉर्म क्लास = "नेवबार-सर्च पुल-लेफ्ट" > 
  <इनपुट प्रकार = "पाठ" वर्ग = "खोज-क्वेरी" प्लेसहोल्डर = "खोज" >   
</फॉर्म>

वैकल्पिक उत्तरदायी भिन्नता

आपके टॉपबार में सामग्री की मात्रा के आधार पर, आप उत्तरदायी विकल्पों को लागू करना चाह सकते हैं। ऐसा करने के लिए, अपनी एनएवी सामग्री को एक युक्त डिव में लपेटें .nav-collapse.collapse, और नेवबार टॉगल बटन जोड़ें .btn-navbar।

<div क्लास = "नेवबार" > 
  <div class = "नेवबार-इनर" > 
    <div क्लास = "कंटेनर" > 
 
      <!-- .btn-navbar को संक्षिप्त नेवबार सामग्री के लिए टॉगल के रूप में प्रयोग किया जाता है -->
      <a वर्ग = "बीटीएन बीटीएन-नेवबार" डेटा-टॉगल = "पतन" डेटा-लक्ष्य = ".एनएवी-पतन">   
        <span class = "आइकन-बार" ></span> 
        <span class = "आइकन-बार" ></span> 
        <span class = "आइकन-बार" ></span> 
      </a>
 
      <!-- अगर आप इसे दिखाना चाहते हैं तो ब्रांड को वहीं छोड़ना सुनिश्चित करें ->
      <a class = "brand" href = "#" > प्रोजेक्ट का नाम </a>  
 
      <!-- जो कुछ भी आप 940px या उससे कम पर छिपाना चाहते हैं, उसे यहां रखें -->
      <div class = "नेव-पतन" > 
        <!-- .nav, .navbar-search, .navbar-form, आदि ->
      </div>
 
    </div>
  </div>
</div>

एनएवी लिंक

एनएवी आइटम अनियंत्रित सूचियों के माध्यम से जोड़ना आसान है।

<उल वर्ग = "नौसेना" > 
  <ली क्लास = "सक्रिय" > 
    <a href = "#" > होम </a> 
  </li>
  <li><a href = "#" > लिंक </a></li> 
  <li><a href = "#" > लिंक </a></li> 
</ul>

आप एक खाली सूची आइटम और एक साधारण वर्ग के साथ आसानी से अपने एनएवी लिंक में डिवाइडर जोड़ सकते हैं। बस इसे लिंक के बीच जोड़ें:

<उल वर्ग = "नौसेना" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

घटक संरेखण

एनएवी, सर्च फॉर्म या टेक्स्ट को अलाइन करने के लिए .pull-leftया .pull-rightयूटिलिटी क्लासेस का इस्तेमाल करें। दोनों वर्ग निर्दिष्ट दिशा में एक सीएसएस फ्लोट जोड़ देंगे।

ड्रॉपडाउन जोड़ना

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

<उल वर्ग = "नौसेना" > 
  <ली क्लास = "ड्रॉपडाउन" > 
    <a href = "#" 
          वर्ग = "ड्रॉपडाउन-टॉगल"
          डेटा-टॉगल = "ड्रॉपडाउन" >
          खाता
          <बी क्लास = "कैरेट" </b> 
    </a>
    <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
      ...
    </ul>
  </li>
</ul>

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

उनका उपयोग क्यों करें

ब्रेडक्रंब नेविगेशन का उपयोग उपयोगकर्ताओं को यह दिखाने के लिए किया जाता है कि वे किसी ऐप या साइट के भीतर कहां हैं, लेकिन प्राथमिक नेविगेशन के लिए नहीं। सबसे प्रभावी होने के लिए उनका उपयोग विरल और संक्षिप्त रखें।

उदाहरण

एक एकल उदाहरण दिखाया गया है क्योंकि इसे कई पृष्ठों में प्रदर्शित किया जा सकता है।

• घर

• होम /
• पुस्तकालय

• होम /
• पुस्तकालय /
• जानकारी

मार्कअप

HTML लिंक के साथ आपकी मानक अनियंत्रित सूची है।

<उल वर्ग = "ब्रेडक्रंब" > 
  <ली>
    <a href = "#" > होम </a> <span class = "divider" > / </span>   
  </li>
  <ली>
    <a href = "#" > लाइब्रेरी </a> <span class = "divider" > / </span>   
  </li>
  <ली क्लास = "सक्रिय" > 
    <a href = "#" > डेटा </a> 
  </li>
</ul>

कब इस्तेमाल करें

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

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

लिंक अनुकूलन योग्य हैं और सही वर्ग के साथ कई परिस्थितियों में काम करते हैं। .disabledक्लिक न करने योग्य लिंक के .activeलिए और वर्तमान पृष्ठ के लिए।

लचीला संरेखण

पेजिनेशन लिंक के संरेखण को बदलने के लिए दो वैकल्पिक वर्गों में से कोई एक जोड़ें: .pagination-centeredऔर .pagination-right.

उदाहरण

डिफ़ॉल्ट पेजिनेशन घटक लचीला है और कई रूपों में काम करता है।

मार्कअप

एक में लिपटे <div>, पृष्ठ पर अंक लगाना सिर्फ एक है <ul>।

<div क्लास = "पेजिनेशन" > 
  <उल>
    <li><a href = "#" > पिछला </a></li> 
    <ली क्लास = "सक्रिय" > 
      <a href = "#" > 1 </a> 
    </li>
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > अगला </a></li> 
  </ul>
</div>

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

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

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

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

• पिछला
• अगला

<उल वर्ग = "पेजर" > 
  <ली>
    <a href = "#" > पिछला </a> 
  </li>
  <ली>
    <a href = "#" > अगला </a> 
  </li>
</ul>

संरेखित लिंक

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

• वृद्ध
• नया →

<उल वर्ग = "पेजर" > 
  <ली क्लास = "पिछला" > 
    <a href = "#" > ← पुराना </a> 
  </li>
  <ली क्लास = "अगला" > 
    <a href = "#" > नया → </a> 
  </li>
</ul>

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

मार्कअप

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

<div class = "हीरो-यूनिट" > 
  <h1> शीर्षक </h1>
  <p> टैगलाइन </p>
  <p>
    <a वर्ग = "बीटीएन बीटीएन-प्राथमिक बीटीएन-बड़ा"> 
      और अधिक जानें
    </a>
  </p>
</div>

h1किसी पृष्ठ पर सामग्री के अनुभागों को उचित रूप से स्थान देने और खंडित करने के लिए एक सरल शेल । यह के h1डिफ़ॉल्ट small, तत्व के साथ-साथ अधिकांश अन्य घटकों (अतिरिक्त शैलियों के साथ) का उपयोग कर सकता है।

<div class = "पेज-हैडर" > 
  <h1> उदाहरण पृष्ठ शीर्षलेख </h1>
</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- थंबनेल आयामों के नियंत्रण के लिए।

मार्कअप

जैसा कि पहले उल्लेख किया गया है, थंबनेल के लिए आवश्यक मार्कअप हल्का और सीधा है। यहां लिंक की गई छवियों के लिए डिफ़ॉल्ट सेटअप पर एक नज़र डालें :

<उल वर्ग = "थंबनेल" > 
  <ली क्लास = "स्पैन3" > 
    <a href = "#" वर्ग = "थंबनेल"> _  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<उल वर्ग = "थंबनेल" > 
  <ली क्लास = "स्पैन3" > 
    <div class = "थंबनेल" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> थंबनेल लेबल </h5>
      <p> थंबनेल कैप्शन यहीं... </p>
    </div>
  </li>
  ...
</ul>

और ज्यादा उदाहरण

आपके लिए उपलब्ध विभिन्न ग्रिड कक्षाओं के साथ अपने सभी विकल्पों का अन्वेषण करें। आप विभिन्न आकारों को मिलाकर मैच भी कर सकते हैं।

पुनर्लेखित आधार वर्ग

बूटस्ट्रैप 2 के साथ, हमने बेस क्लास को सरल बनाया है: .alertके बजाय .alert-message. हमने न्यूनतम आवश्यक मार्कअप भी कम कर दिया है—नहीं <p>डिफ़ॉल्ट रूप से आवश्यक है, केवल बाहरी <div>.

सिंगल अलर्ट मैसेज

कम कोड वाले अधिक टिकाऊ घटक के लिए, हमने ब्लॉक अलर्ट, संदेश जो अधिक पैडिंग के साथ आते हैं और आमतौर पर अधिक टेक्स्ट के लिए विभेदक स्वरूप को हटा दिया है। वर्ग भी बदल गया है .alert-block।

जावास्क्रिप्ट के साथ बढ़िया चला जाता है

बूटस्ट्रैप एक महान jQuery प्लगइन के साथ आता है जो अलर्ट संदेशों का समर्थन करता है, जिससे उन्हें जल्दी और आसानी से खारिज कर दिया जाता है।

प्लगइन प्राप्त करें »

उदाहरण अलर्ट

सरल वर्ग के साथ एक div में अपना संदेश और एक वैकल्पिक नज़दीकी आइकन लपेटें।

<div क्लास = "अलर्ट" > 
  <a class = "करीब" डेटा-खारिज = "अलर्ट" > × </a>  
  <मजबूत> चेतावनी! </strong> अपने आप को सर्वश्रेष्ठ जांचें, आप बहुत अच्छे नहीं दिख रहे हैं।
</div>

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

<div class = "अलर्ट अलर्ट-ब्लॉक" > 
  <a class = "करीब" डेटा-खारिज = "अलर्ट" > × </a>  
  <h4 वर्ग = "अलर्ट-हेडिंग" > चेतावनी! </h4> 
  सबसे अच्छा यो स्वयं जांचें, आप नहीं हैं ...
</div>

त्रुटि या खतरा

<div class = "अलर्ट अलर्ट-एरर" > 
  ...
</div>

सफलता

<div class = "अलर्ट अलर्ट-सफलता" > 
  ...
</div>

जानकारी

<div class = "अलर्ट अलर्ट-जानकारी" > 
  ...
</div>

बुनियादी

लंबवत ढाल के साथ डिफ़ॉल्ट प्रगति पट्टी।

<div वर्ग = "प्रगति" > 
  <div वर्ग = "बार" 
       शैली = " चौड़ाई : 60 %; " ></div> 
</div>

धारीदार

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

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

एनिमेटेड

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

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

अतिरिक्त रंग

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

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

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

व्‍यवहार

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

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

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

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

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

वेल्स

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

<div वर्ग = "अच्छी तरह से" > 
  ...
</div>

बैज

एक अपठित गणना के लिए या एक साधारण संकेतक के रूप में किसी तत्व पर बैज का उपयोग करें।

<स्पैन क्लास = "बैज" > 3 </div> 

आइकन बंद करें

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

×

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