बटन समूह

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

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

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

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

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

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

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

<div class = "btn-group" > 
  <बटन वर्ग = "बीटीएन" > 1 </बटन> 
  <बटन वर्ग = "बीटीएन" > 2 </बटन> 
  <बटन वर्ग = "बीटीएन" > 3 </बटन> 
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

सभी बटन आकारों के साथ काम करता है

बटन ड्रॉपडाउन किसी भी आकार में काम करते हैं। आपके बटन का आकार .btn-large, .btn-small, या .btn-mini.

जावास्क्रिप्ट की आवश्यकता है

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

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

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

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

आकार

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

<div class = "btn-group" > 
  ...
  <ul class = "ड्रॉपडाउन-मेनू पुल-राइट" > 
    <!-- ड्रॉपडाउन मेनू लिंक -->
  </ul>
</div>

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

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

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

ड्रॉपअप मेनू

ड्रापडाउन मेन्यू को .dropdown-menu. यह मेनू की दिशा को बदल देगा .caretऔर ऊपर से नीचे की बजाय नीचे से ऊपर की ओर जाने के लिए मेनू को ही बदल देगा।

<div class = "btn-group dropup" > 
  <बटन वर्ग = "बीटीएन" > ड्रॉपअप </बटन> 
  <बटन वर्ग = "बीटीएन ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
    <span class = "caret" </span> 
  </बटन>
  <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 प्लगइन की आवश्यकता होती है।

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

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

• घर
• मदद करना
• ड्रॉप डाउन
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

• घर
• मदद करना
• ड्रॉप डाउन
  • Action
  • Another action
  • Something else here
  • Separated link

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

अनुप्रयोग-शैली नेविगेशन

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

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

आइकन के साथ

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

क्षैतिज विभाजक

वर्ग के साथ एक खाली सूची आइटम बनाकर एक क्षैतिज विभक्त जोड़ें .divider, जैसे:

<उल वर्ग = "एनएवी नेवी-सूची" > 
  ...
  <ली क्लास = "डिवाइडर" ></li> 
  ...
</ul>

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

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

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

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

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

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

क्या शामिल है

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

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

टैब में फीका

टैब को फीका करने के लिए, .fadeप्रत्येक में जोड़ें .tab-pane.

jQuery प्लगइन की आवश्यकता है

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

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

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

टैब को टैब करने योग्य बनाने के लिए, .tab-paneप्रत्येक टैब के लिए एक अद्वितीय आईडी के साथ बनाएं और उन्हें .tab-content.

दाएं या बाएं संरेखित टैब के लिए, .nav-tabsऔर .tab-contentमें लपेटें .tabbable।

सीधा मार्कअप

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

<div class = "tabbable" > <!-- केवल बाएँ/दाएँ टैब के लिए आवश्यक है -->  
  <ul class = "नेव नेवी-टैब" > 
    <li class = "active" ><a href = "# tab1" data-toggle = "tab" > सेक्शन 1 </a></li>   
    <li><a href = "# tab2" data-toggle = "tab" > सेक्शन 2 </a></li>  
  </ul>
  <div वर्ग = "टैब-सामग्री" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> मैं सेक्शन 1 में हूं। </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> हाउडी, मैं सेक्शन 2 में हूं। </p>
    </div>
  </div>
</div>

तल पर टैब

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

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

बाईं ओर टैब

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

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

दाईं ओर टैब

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

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

नवबार मचान

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

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

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

सबसे बाहरी डिव पर एक अतिरिक्त वर्ग के साथ नेवबार को व्यूपोर्ट के ऊपर या नीचे ठीक करें .navbar।

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

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

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

ब्रांड का नाम

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

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

नवबार में प्रपत्र

नेवबार के भीतर एक फॉर्म को सही ढंग से स्टाइल और स्थिति देने के लिए, नीचे दिखाए गए अनुसार उपयुक्त वर्ग जोड़ें। डिफ़ॉल्ट रूप के लिए, शामिल करें .navbar-formऔर या तो .pull-leftया .pull-rightइसे ठीक से संरेखित करने के लिए।

<फॉर्म क्लास = "नेवबार-फॉर्म पुल-लेफ्ट" > 
  <इनपुट प्रकार = "पाठ" वर्ग = "span2" >  
</फॉर्म>

अधिक अनुकूलित खोज फ़ॉर्म के लिए, नेवबार में विशेष शैलियों के .navbar-searchलिए formऔर .search-queryइनपुट में जोड़ें।

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

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

आपके टॉपबार में सामग्री की मात्रा के आधार पर, आप उत्तरदायी विकल्पों को लागू करना चाह सकते हैं। ऐसा करने के लिए, अपनी एनएवी सामग्री को एक युक्त डिव में लपेटें .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>

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

नवबार में पाठ

उचित लीडिंग और रंग के लिए <.navbar-text>आमतौर पर टैग पर टेक्स्ट के स्ट्रिंग्स को a में लपेटें ।<p>

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

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

उदाहरण

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

• घर

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

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

मार्कअप

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

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

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

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

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

पेजर लिंक पेजिनेशन .disabledसे सामान्य वर्ग का भी उपयोग करते हैं।

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

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

• पिछला
• अगला

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

संरेखित लिंक

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

• वृद्ध
• नया →

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

के बारे में

बैज एक संकेतक या किसी प्रकार की गिनती प्रदर्शित करने के लिए छोटे, सरल घटक होते हैं। वे आमतौर पर ईमेल क्लाइंट जैसे Mail.app या मोबाइल ऐप पर पुश नोटिफिकेशन के लिए पाए जाते हैं।

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

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

मार्कअप

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

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

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

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

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

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

सफलता

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

जानकारी

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

बुनियादी

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

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

धारीदार

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

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

एनिमेटेड

धारीदार उदाहरण लेता है और इसे एनिमेट करता है (कोई आईई नहीं)।

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

अतिरिक्त रंग

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

धारीदार बार

ठोस रंगों के समान, हमारे पास विविध धारीदार प्रगति पट्टियाँ हैं।

व्‍यवहार

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

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

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

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

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

वेल्स

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

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

आइकन बंद करें

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

×

<बटन वर्ग = "करीब" > × </बटन> 

यदि आप एंकर का उपयोग करते हैं तो iOS उपकरणों को क्लिक ईवेंट के लिए एक href="#" की आवश्यकता होती है।

<a class = "करीब" href = "#" > × </a>