उदाहरण

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

<ul वर्ग = "ड्रॉपडाउन-मेनू" भूमिका = "मेनू" एरिया-लेबलबी = "ड्रॉपडाउनमेनू" >   
  <li><a tabindex = "-1" href = "#" > क्रिया </a></li>  
  <li><a tabindex = "-1" href = "#" > एक अन्य क्रिया </a></li>  
  <li><a tabindex = "-1" href = "#" > यहाँ कुछ और </a></li>  
  <ली क्लास = "डिवाइडर" ></li> 
  <li><a tabindex = "-1" href = "#" > अलग किया गया लिंक </a></li>  
</ul>

मार्कअप

केवल ड्रॉपडाउन मेनू को देखते हुए, यहां आवश्यक HTML है। आपको ड्रॉपडाउन के ट्रिगर और ड्रॉपडाउन मेनू को .dropdown, या घोषित करने वाले किसी अन्य तत्व के भीतर लपेटने की आवश्यकता है position: relative;। फिर बस मेनू बनाएं।

<div क्लास = "ड्रॉपडाउन" > 
  <!-- ड्रॉपडाउन टॉगल करने के लिए लिंक या बटन ->
  < ul वर्ग = "ड्रॉपडाउन-मेनू " भूमिका = " मेनू "   
    <li><a tabindex = "-1" href = "#" > क्रिया </a></li>  
    <li><a tabindex = "-1" href = "#" > एक अन्य क्रिया </a></li>  
    <li><a tabindex = "-1" href = "#" > यहाँ कुछ और </a></li>  
    <ली क्लास = "डिवाइडर" ></li> 
    <li><a tabindex = "-1" href = "#" > अलग किया गया लिंक </a></li>  
  </ul>
</div>

विकल्प

मेनू को दाईं ओर संरेखित करें और ड्रॉपडाउन के अतिरिक्त स्तर शामिल करें।

मेनू संरेखित करना

ड्रॉपडाउन मेनू को दाईं ओर संरेखित करने के .pull-rightलिए जोड़ें ।.dropdown-menu

<ul वर्ग = "ड्रॉपडाउन-मेनू पुल-राइट" भूमिका = "मेनू" एरिया-लेबलबी = "dLabel" >   
  ...
</ul>

अक्षम मेनू विकल्प

लिंक को अक्षम करने के लिए ड्रॉपडाउन में .disabledजोड़ें ।<li>

<ul वर्ग = "ड्रॉपडाउन-मेनू" भूमिका = "मेनू" एरिया-लेबलबी = "ड्रॉपडाउनमेनू" >   
  <li><a tabindex = "-1" href = "#" > नियमित लिंक </a></li>  
  <li वर्ग = "अक्षम" ><a tabindex = "-1" href = "#" > अक्षम लिंक </a></li>   
  <li><a tabindex = "-1" href = "#" > अन्य लिंक </a></li>  
</ul>

ड्रॉपडाउन पर उप मेनू

कुछ साधारण मार्कअप परिवर्धन के साथ, OS X की तरह होवर पर दिखाई देने वाले ड्रॉपडाउन मेनू का एक अतिरिक्त स्तर जोड़ें। स्वचालित स्टाइलिंग के लिए मौजूदा ड्रॉपडाउन मेनू में .dropdown-submenuसे किसी में भी जोड़ें ।li

< ul वर्ग = "ड्रॉपडाउन-मेनू " भूमिका = " मेनू "   
  ...
  <ली क्लास = "ड्रॉपडाउन-सबमेनू" > 
    <a tabindex = "-1" href = "#" > अधिक विकल्प </a>  
    <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
      ...
    </ul>
  </li>
</ul>

उदाहरण

दो और विशिष्ट विविधताओं के साथ दो बुनियादी विकल्प।

सिंगल बटन ग्रुप

.btnके साथ बटनों की एक श्रृंखला लपेटें .btn-group.

<div class = "btn-group" > 
  <बटन वर्ग = "बीटीएन" > बायां </बटन> 
  <बटन वर्ग = "बीटीएन" > मध्य </बटन> 
  <बटन क्लास = "बीटीएन" > राइट </बटन> 
</div>

एकाधिक बटन समूह

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

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

लंबवत बटन समूह

बटनों का एक सेट क्षैतिज के बजाय लंबवत रूप से स्टैक्ड दिखाई दें।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

आकार

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

<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

मूल टैब

नियमित रूप <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>

अक्षम अवस्था

किसी भी एनएवी घटक (टैब, गोलियां, या सूची) के .disabledलिए , ग्रे लिंक और कोई होवर प्रभाव नहीं जोड़ें । हालांकि, लिंक क्लिक करने योग्य बने रहेंगे, जब तक कि आप hrefविशेषता को हटा नहीं देते। वैकल्पिक रूप से, आप उन क्लिकों को रोकने के लिए कस्टम JavaScript लागू कर सकते हैं।

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

घटक संरेखण

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

stackable

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

स्टैक्ड टैब

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

ढेर गोलियां

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

नीचे की ओर फैलने वाला बिंदु

कुछ अतिरिक्त HTML और ड्रॉपडाउन JavaScript प्लगइन के साथ ड्रॉपडाउन मेनू जोड़ें ।

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

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

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

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

एनएवी सूचियां

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

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

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

<उल वर्ग = "एनएवी नेवी-सूची" > 
  <li class = "nav-header" > लिस्ट हैडर </li> 
  <li class = "active" ><a href = "#" > होम </a></li>  
  <li><a href = "#" > लाइब्रेरी </a></li> 
  ...
</ul>

टिप्पणीएनएवी सूची में नेस्टिंग के लिए, class="nav nav-list"किसी भी नेस्टेड पर शामिल करें <ul>।

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

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

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

टैबेबल नेवी

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

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

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

<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>

टैब में फीका

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

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

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

किसी भी दिशा में टैब करने योग्य

तल पर टैब

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

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

बाईं ओर टैब

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

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

दाईं ओर टैब

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

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

मूल नवबार

शुरू करने के लिए, नेवबार स्थिर होते हैं (शीर्ष पर तय नहीं होते हैं) और इसमें प्रोजेक्ट नाम और बुनियादी नेविगेशन के लिए समर्थन शामिल होता है। एक के भीतर कहीं भी रखें .container, जो आपकी साइट और सामग्री की चौड़ाई निर्धारित करता है।

<div क्लास = "नेवबार" > 
  <div class = "नेवबार-इनर" > 
    <a वर्ग = "ब्रांड" href = "#" > शीर्षक </a>  
    <उल वर्ग = "नौसेना" > 
      <li class = "active" ><a href = "#" > होम </a></li>  
      <li><a href = "#" > लिंक </a></li> 
      <li><a href = "#" > लिंक </a></li> 
    </ul>
  </div>
</div>

नेवबार घटक

ब्रैंड

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

<a class = "brand" href = "#" > प्रोजेक्ट का नाम </a>  

एनएवी लिंक

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

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

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

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

फार्म

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

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

खोज फ़ॉर्म

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

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

घटक संरेखण

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

ड्रॉपडाउन का उपयोग करना

कुछ मार्कअप और ड्रॉपडाउन जावास्क्रिप्ट प्लगइन के साथ नौसेना में ड्रॉपडाउन और ड्रॉपअप जोड़ें ।

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

कॉल ड्रॉपडाउन के बारे में अधिक मार्कअप और जानकारी के लिए जावास्क्रिप्ट ड्रॉपडाउन दस्तावेज़ देखें ।

मूलपाठ

किसी तत्व में टेक्स्ट के तार लपेटें .navbar-text, आमतौर पर <p>उचित अग्रणी और रंग के लिए टैग पर।

वैकल्पिक प्रदर्शन विविधताएं

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

शीर्ष पर स्थिर

.navbar-fixed-topइसमें कम से कम 40px जोड़कर इसके नीचे छिपे हुए क्षेत्र को जोड़ना और याद रखना paddingयाद रखें <body>। इसे कोर बूटस्ट्रैप सीएसएस के बाद और वैकल्पिक उत्तरदायी सीएसएस से पहले जोड़ना सुनिश्चित करें।

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

नीचे से निश्चित

.navbar-fixed-bottomइसके बजाय जोड़ें ।

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

स्टेटिक टॉप नेवबार

एक पूर्ण-चौड़ाई वाला नेवबार बनाएं जो .navbar-static-top. कक्षा के विपरीत .navbar-fixed-top, आपको किसी भी पैडिंग को बदलने की आवश्यकता नहीं है body।

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

उत्तरदायी नेवबार

एक ढहते उत्तरदायी नेवबार को लागू करने के लिए, अपनी नेवबार सामग्री को एक युक्त div में लपेटें .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>

उलटा बदलाव

नेवबार के रूप को जोड़कर संशोधित करें .navbar-inverse।

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

उदाहरण

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

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

मानक पृष्ठ पर अंक लगाना

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

<div क्लास = "पेजिनेशन" > 
  <उल>
    <li><a href = "#" > पिछला </a></li> 
    <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 = "#" > 5 </a></li> 
    <li><a href = "#" > अगला </a></li> 
  </ul>
</div>

विकल्प

अक्षम और सक्रिय राज्य

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

<div क्लास = "पेजिनेशन" > 
  <उल>
    <li वर्ग = "अक्षम" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

इच्छित शैलियों को बनाए रखते हुए क्लिक कार्यक्षमता को हटाने के लिए आप वैकल्पिक रूप से सक्रिय या अक्षम एंकर को स्पैन के लिए स्वैप कर सकते हैं।

<div क्लास = "पेजिनेशन" > 
  <उल>
    <li class = "अक्षम" ><span> « </span></li> 
    <li वर्ग = "सक्रिय" ><span> 1 </span></li> 
    ...
  </ul>
</div>

आकार

फैंसी बड़ा या छोटा पेजिनेशन? जोड़ें .pagination-large, .pagination-small, या .pagination-miniअतिरिक्त आकार के लिए।

<div class = "पेजिनेशन पेजिनेशन-लार्ज" > 
  <उल>
    ...
  </ul>
</div>
<div क्लास = "पेजिनेशन" > 
  <उल>
    ...
  </ul>
</div>
<div class = "पेजिनेशन पेजिनेशन-छोटा" > 
  <उल>
    ...
  </ul>
</div>
<div class = "पेजिनेशन पेजिनेशन-मिनी" > 
  <उल>
    ...
  </ul>
</div>

संरेखण

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

<div class = "पेजिनेशन पेजिनेशन-केंद्रित" > 
  ...
</div>

<div class = "पेजिनेशन पेजिनेशन-राइट" > 
  ...
</div>

पेजर

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

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

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

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

संरेखित लिंक

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

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

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

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

<उल वर्ग = "पेजर" > 
  <li वर्ग = "पिछला अक्षम" > 
    <a href = "#" > ← पुराना </a> 
  </li>
  ...
</ul>

लेबल

बैज

आसानी से बंधनेवाला

:emptyआसान कार्यान्वयन के लिए, जब कोई सामग्री मौजूद नहीं है तो लेबल और बैज बस (सीएसएस के चयनकर्ता के माध्यम से) ढह जाएंगे ।

हीरो यूनिट

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

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

पेज हैडर

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

<div class = "पेज-हेडर" > 
  <h1> उदाहरण पेज हेडर <छोटा> हेडर के लिए सबटेक्स्ट </ छोटा> </h1>
</div>

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

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

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

थोड़े अतिरिक्त मार्कअप के साथ, थंबनेल में किसी भी प्रकार की HTML सामग्री जैसे शीर्षक, पैराग्राफ या बटन जोड़ना संभव है।

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

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

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

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

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

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

मार्कअप

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

<उल वर्ग = "थंबनेल" > 
  <ली क्लास = "स्पैन4" > 
    <a href = "#" वर्ग = "थंबनेल"> _  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<उल वर्ग = "थंबनेल" > 
  <ली क्लास = "स्पैन4" > 
    <div class = "थंबनेल" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> थंबनेल लेबल </h3>
      <p> थंबनेल कैप्शन... </p>
    </div>
  </li>
  ...
</ul>

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

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

डिफ़ॉल्ट अलर्ट

.alertएक बुनियादी चेतावनी चेतावनी संदेश के लिए किसी भी पाठ और एक वैकल्पिक खारिज करें बटन को लपेटें ।

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

बटन खारिज करें

मोबाइल सफारी और मोबाइल ओपेरा ब्राउज़र, विशेषता के अलावा , टैग का उपयोग करते समय अलर्ट को खारिज करने के लिए data-dismiss="alert"एक की आवश्यकता होती है ।href="#"<a>

<a href = "#" वर्ग = "बंद" डेटा-खारिज = "अलर्ट" > × </a>   

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

<बटन प्रकार = "बटन" वर्ग = "बंद" डेटा-खारिज = "अलर्ट" > और समय; </बटन>   

जावास्क्रिप्ट के माध्यम से अलर्ट खारिज करें

अलर्ट की त्वरित और आसान बर्खास्तगी के लिए अलर्ट jQuery प्लगइन का उपयोग करें ।

विकल्प

लंबे संदेशों के लिए, जोड़कर अलर्ट रैपर के ऊपर और नीचे पैडिंग बढ़ाएं .alert-block।

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

प्रासंगिक विकल्प

अलर्ट का अर्थ बदलने के लिए वैकल्पिक कक्षाएं जोड़ें।

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

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

सफलता

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

जानकारी

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

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

बुनियादी

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

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

धारीदार

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

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

एनिमेटेड

धारियों को दाएं से बाएं चेतन .activeकरने के लिए जोड़ें । .progress-stripedIE के सभी संस्करणों में उपलब्ध नहीं है।

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

स्टैक्ड

.progressउन्हें ढेर करने के लिए एक ही में कई बार रखें ।

<div वर्ग = "प्रगति" > 
  <div वर्ग = "बार बार-सफलता" शैली = " चौड़ाई : 35 %; " ></div>   
  <div class = "बार बार-चेतावनी" शैली = " चौड़ाई : 20 %; " ></div>   
  <div वर्ग = "बार बार-खतरे" शैली = " चौड़ाई : 10 %; " </div>   
</div>

विकल्प

अतिरिक्त रंग

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

<div class = "प्रगति प्रगति-जानकारी" > 
  <div वर्ग = "बार" शैली = " चौड़ाई : 20 % " ></div>   
</div>
<div class = "प्रगति प्रगति-सफलता" > 
  <div वर्ग = "बार" शैली = " चौड़ाई : 40 % " ></div>   
</div>
<div class = "प्रगति प्रगति-चेतावनी" > 
  <div वर्ग = "बार" शैली = " चौड़ाई : 60 % " ></div>   
</div>
<div class = "प्रगति प्रगति-खतरा" > 
  <div वर्ग = "बार" शैली = " चौड़ाई : 80 % " ></div>   
</div>

धारीदार बार

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

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

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

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

Internet Explorer 10 और Opera 12 से पहले के संस्करण एनिमेशन का समर्थन नहीं करते हैं।

विभिन्न प्रकार के घटकों (जैसे ब्लॉग टिप्पणियाँ, ट्वीट्स, आदि) के निर्माण के लिए सार वस्तु शैलियाँ जो पाठ्य सामग्री के साथ एक बाएँ या दाएँ-संरेखित छवि पेश करती हैं।

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

डिफ़ॉल्ट मीडिया सामग्री ब्लॉक के बाईं या दाईं ओर मीडिया ऑब्जेक्ट (छवियां, वीडियो, ऑडियो) को तैरने की अनुमति देता है।

मीडिया शीर्षक

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

मीडिया शीर्षक

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

मीडिया शीर्षक

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

<div क्लास = "मीडिया" > 
  < ए क्लास = "पुल- लेफ्ट" href = "#" >  
    <img वर्ग = "मीडिया-वस्तु " डेटा- src = "धारक.जेएस/64x64" >  
  </a>
  <div class = "मीडिया-बॉडी" > 
    <h4 वर्ग = "मीडिया-शीर्षक" > मीडिया शीर्षक </h4> 
    ...
 
    <!-- नेस्टेड मीडिया ऑब्जेक्ट ->
    <div क्लास = "मीडिया" > 
      ...
    </div>
  </div>
</div>

मीडिया सूची

कुछ अतिरिक्त मार्कअप के साथ, आप सूची के अंदर मीडिया का उपयोग कर सकते हैं (टिप्पणी धागे या लेख सूचियों के लिए उपयोगी)।

<ul वर्ग = "मीडिया-सूची" > 
  <ली क्लास = "मीडिया" > 
    < ए क्लास = "पुल- लेफ्ट" href = "#" >  
      <img वर्ग = "मीडिया-वस्तु " डेटा- src = "धारक.जेएस/64x64" >  
    </a>
    <div class = "मीडिया-बॉडी" > 
      <h4 वर्ग = "मीडिया-शीर्षक" > मीडिया शीर्षक </h4> 
      ...
 
      <!-- नेस्टेड मीडिया ऑब्जेक्ट ->
      <div क्लास = "मीडिया" > 
        ...
     </div>
    </div>
  </li>
</ul>

वेल्स

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

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

वैकल्पिक कक्षाएं

दो वैकल्पिक संशोधक वर्गों के साथ पैडिंग और गोल कोनों को नियंत्रित करें।

<div class = "वेल वेल-लार्ज" > 
  ...
</div>

<div class = "वेल वेल-स्मॉल" > 
  ...
</div>

आइकन बंद करें

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

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

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

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

सहायक वर्ग

छोटे प्रदर्शन या व्यवहार में बदलाव के लिए सरल, केंद्रित कक्षाएं।

.पुल-बाएं

एक तत्व बाईं ओर फ़्लोट करें

वर्ग = "पुल-बाएं"

. खींचो - बाएँ {
  फ्लोट : बाएं ;
}

.pull-सही

एक तत्व सही फ़्लोट करें

वर्ग = "पुल-राइट"

. खींचो - दाएं {
  फ्लोट : सही ;
}

.म्यूटेड

किसी तत्व का रंग इसमें बदलें#999

वर्ग = "म्यूट"

. मौन {
  रंग : #999; 
}

.क्लियरफिक्स

floatकिसी ��ी तत्व पर साफ़ करें

वर्ग = "क्लियरफिक्स"

. क्लियरफिक्स {
  * ज़ूम : 1 ; 
  &: पहले ,
  और: के बाद {
    प्रदर्शन : टेबल ;
    सामग्री : "" ; 
  }
  और: के बाद {
    स्पष्ट : दोनों ;
  }
}