उदाहरण

लिंक सभ के लिस्ट सभ के देखावे खातिर टॉगल करे लायक, संदर्भ मेनू। ड्रॉपडाउन जावास्क्रिप्ट प्लगइन के साथ इंटरैक्टिव बनावल गइल बा .

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

मार्कअप कइल गइल बा

बस ड्रॉपडाउन मेनू के देखत, इहाँ जरूरी एचटीएमएल दिहल गईल बा। रउआँ के ड्रॉपडाउन के ट्रिगर आ ड्रॉपडाउन मेनू के भीतर लपेटे के पड़ी .dropdown, या कौनों अउरी तत्व जे घोषित करे position: relative;ला। एकरा बाद बस मेनू बनाईं।

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

विकल्प बा

मेनू सभ के दाहिने ओर संरेखित करीं आ जोड़ीं ड्रॉपडाउन के अतिरिक्त स्तर शामिल करीं।

मेनू के संरेखित कइल जा रहल बा

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

<ul क्लास = "ड्रॉपडाउन-मेनू पुल-राइट" भूमिका = "मेनू" aria-labelledby = "dLabel" >   
  ...
</ul> के बा

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

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

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

उदाहरण खातिर दिहल गइल बा

दू गो मूल विकल्प, साथ में दू गो अउरी विशिष्ट भिन्नता।

एकल बटन समूह के बा

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

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

कई गो बटन समूह के बा

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

<div वर्ग = "बीटीएन-टूलबार" > बा 
  <div वर्ग = "बीटीएन-समूह" > बा 
    ...
  </div> के बा
</div> के बा

ऊर्ध्वाधर बटन समूह के बा

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

<div वर्ग = "बीटीएन-समूह बीटीएन-समूह-ऊर्ध्वाधर" > 
  ...
</div> के बा

चेकबॉक्स आ रेडियो के स्वाद के बारे में बतावल गइल बा

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

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

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

अवलोकन आ उदाहरण दिहल गइल बा

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

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

सभ बटन साइज के संगे काम करेला

बटन ड्रॉपडाउन कवनो भी आकार में काम करेला: .btn-large, .btn-small, या .btn-mini.

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

बटन ड्रॉपडाउन के काम करे खातिर बूटस्ट्रैप ड्रॉपडाउन प्लगइन के जरूरत होला।

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

बटन के ड्रॉपडाउन के विभाजन करीं

बटन ग्रुप स्टाइल आ मार्कअप के आधार पर हमनी के आसानी से स्प्लिट बटन बना सकेनी जा। स्प्लिट बटन सभ में बाईं ओर एगो मानक क्रिया आ दाहिने ओर एगो ड्रॉपडाउन टॉगल के बिसेसता बा जेह में संदर्भ लिंक सभ के साथ।

<div वर्ग = "बीटीएन-समूह" > बा 
  <बटन वर्ग = "btn" > कार्रवाई </बटन> बा 
  <बटन वर्ग = "बीटीएन ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
    <span class = "कैरेट" </span> के बारे में बतावल गइल बा 
  </बटन> के बा
  <ul वर्ग = "ड्रॉपडाउन-मेनू" > बा 
    <!-- ड्रॉपडाउन मेनू लिंक --> बा
  </ul> के बा
</div> के बा

साइज के बा

अतिरिक्त बटन वर्ग के उपयोग करीं .btn-mini, .btn-small, या .btn-largeसाइजिंग खातिर।

<div वर्ग = "बीटीएन-समूह" > बा 
  <बटन वर्ग = "बीटीएन बीटीएन-मिनी" > कार्रवाई </बटन> 
  <बटन वर्ग = "बीटीएन बीटीएन-मिनी ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
    <span class = "कैरेट" </span> के बारे में बतावल गइल बा 
  </बटन> के बा
  <ul वर्ग = "ड्रॉपडाउन-मेनू" > बा 
    <!-- ड्रॉपडाउन मेनू लिंक --> बा
  </ul> के बा
</div> के बा

ड्रॉपअप मेनू बा

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

<div वर्ग = "बीटीएन-समूह ड्रॉपअप" > बा 
  <बटन क्लास = "btn" > ड्रॉपअप </बटन> बा 
  <बटन वर्ग = "बीटीएन ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
    <span class = "कैरेट" </span> के बारे में बतावल गइल बा 
  </बटन> के बा
  <ul वर्ग = "ड्रॉपडाउन-मेनू" > बा 
    <!-- ड्रॉपडाउन मेनू लिंक --> बा
  </ul> के बा
</div> के बा

हल्का डिफ़ॉल्ट एकही मार्कअप, अलग-अलग क्लास

इहाँ के सभ nav घटक-टैब, गोली, आ सूची- क्लास के माध्यम से एकही बेस मार्कअप आ स्टाइल साझा करे लें ।.nav

बेसिक टैब के बारे में बतावल गइल बा

लिंक के एगो रेगुलर ले लीं <ul>आ जोड़ीं .nav-tabs:

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

बेसिक गोली के बारे में बतावल गईल बा

उहे एचटीएमएल लीं, बाकिर .nav-pillsएकरा बदले इस्तेमाल करीं:

<ul class = "नव नव-गोली" > के बा 
  <ली वर्ग = "सक्रिय" > के बा 
    <a href = "#" > घर बा </a> 
  </li> के बा
  <li><a href = "#" > ... </a></li> के बारे में बतावल गइल बा 
  <li><a href = "#" > ... </a></li> के बारे में बतावल गइल बा 
</ul> के बा

अक्षम अवस्था में बा

कवनो भी nav घटक (टैब, गोली, या सूची) खातिर, ग्रे लिंक.disabled खातिर जोड़ीं आ कवनो होवर प्रभाव ना . हालाँकि, लिंक क्लिक करे लायक रही जबले कि ओह क्लिक सभ के रोके खातिर कस्टम जावास्क्रिप्ट लागू ना कइल गइल होखे।

<ul class = "नव नव-गोली" > के बा 
  ...
  <li class = "अक्षम" ><a href = "#" > घर </a></li> बा  
  ...
</ul> के बा

घटक के संरेखण के बारे में बतावल गइल बा

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

स्टैक करे लायक बा

चूंकि टैब आ गोली डिफ़ॉल्ट रूप से क्षैतिज होला, बस एगो दूसरा क्लास, .nav-stacked, जोड़ीं ताकि ऊ लंबवत ढेर लउके।

ढेर हो गइल टैब बा

<ul class = "नव नव-टैब नव-स्टैक कइल गइल" > 
  ...
</ul> के बा

ढेर हो गइल गोली

<ul class = "नव नव-गोलियाँ नव-ढेर हो गइल" > 
  ...
</ul> के बा

ड्रॉपडाउन हो गइल बा

तनी अतिरिक्त एचटीएमएल आ ड्रॉपडाउन जावास्क्रिप्ट प्लगइन के साथे ड्रॉपडाउन मेनू जोड़ीं .

ड्रॉपडाउन के साथ टैब बा

<ul class = "नव नव-टैब" > बा 
  <li class = "ड्रॉपडाउन" > के बा 
    <a class = "ड्रॉपडाउन-टॉगल" बा। 
       data-toggle = "ड्रॉपडाउन" बा।
       href = "#" > के बा
        ड्रॉपडाउन हो गइल बा
        <b class = "कैरेट" </b> के बारे में बतावल गइल बा 
      </a> के बा
    <ul वर्ग = "ड्रॉपडाउन-मेनू" > बा 
      <!-- लिंक बा -->
    </ul> के बा
  </li> के बा
</ul> के बा

ड्रॉपडाउन के साथ गोली

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

नव लिस्ट बा

वैकल्पिक हेडर के साथ nav लिंक के समूह बनावे के एगो सरल आ आसान तरीका। एकर इस्तेमाल ओएस एक्स में फाइंडर निहन साइडबार में सबसे निमन होखेला।

उदाहरण खातिर नव सूची

लिंक के एगो लिस्ट लेके जोड़ीं class="nav nav-list":

<ul class = "नव नव-सूची" > बा 
  <li class = "nav-header" > सूची हेडर </li> बा 
  <li class = "सक्रिय" ><a href = "#" > घर </a></li> बा  
  <li><a href = "#" > लाइब्रेरी </a></li> बा 
  ...
</ul> के बा

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

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

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

<ul class = "नव नव-सूची" > बा 
  ...
  <li class = "विभाजक" </li> के बारे में बतावल गइल बा 
  ...
</ul> के बा

तब्बेबल नव के बा

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

टैब करे लायक उदाहरण दिहल गइल बा

टैब के टैब करे लायक बनावे .tab-paneखातिर हर टैब खातिर यूनिक आईडी वाला एगो बनाईं आ ओकरा के में लपेटीं .tab-content.

<div class = "tabbable" > <!-- खाली बाएं/दाएं टैब खातिर जरूरी बा -->  
  <ul class = "नव नव-टैब" > बा 
    <li class = "सक्रिय" ><a href = "#tab1" डेटा-टॉगल = "टैब" > खंड 1 </a></li>   
    <li><a href = "#tab2" डेटा-टॉगल = "टैब" > खंड 2 </a></li>  
  </ul> के बा
  <div वर्ग = "टैब-सामग्री" > बा 
    <div वर्ग = "टैब-फलक सक्रिय" आईडी = "टैब1" >  
      <p> हम खंड 1 में बानी </p>
    </div> के बा
    <div वर्ग = "टैब-पेन" आईडी = "टैब 2" > बा  
      <p> हाउडी, हम खंड 2 में बानी </p>
    </div> के बा
  </div> के बा
</div> के बा

टैब में फीका पड़ जाला

टैब के फीका होखे खातिर, .fadeहर एक में जोड़ीं .tab-pane।

जेक्वेरी प्लगइन के जरूरत बा

सभ टैबेबल टैब हमनी के हल्का जेक्वेरी प्लगइन से संचालित बा। जावास्क्रिप्ट डॉक्स पन्ना पर टैब करे लायक टैब के जीवंत करे के तरीका के बारे में अउरी पढ़ीं .

कवनो दिशा में टैब करे लायक बा

नीचे के ओर टैब बा

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

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

बाईं ओर के टैब बा

बाईं ओर टैब लगावे खातिर क्लास के स्वैप करीं।

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

दाहिने ओर टैब बा

दाहिने ओर टैब लगावे खातिर क्लास के स्वैप करीं।

<div class = "टैबबल टैब-दाहिना" > बा 
  <ul class = "नव नव-टैब" > बा 
    ...
  </ul> के बा
  <div वर्ग = "टैब-सामग्री" > बा 
    ...
  </div> के बा
</div> के बा

बेसिक नवबर के बा

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

<div class = "नवबार" > के बा 
  <div वर्ग = "नवबार-आंतरिक" > बा 
    <a class = "brand" href = "#" > शीर्षक </a> बा  
    <ul class = "नव" > के बा 
      <li class = "सक्रिय" ><a href = "#" > घर </a></li> बा  
      <li><a href = "#" > लिंक </a></li> बा 
      <li><a href = "#" > लिंक </a></li> बा 
    </ul> के बा
  </div> के बा
</div> के बा

नवबार के घटक के बारे में बतावल गइल बा

ब्रांड

अपना ब्रांड भा प्रोजेक्ट के नाम देखावे खातिर एगो साधारण लिंक खातिर खाली एंकर टैग के जरूरत होला.

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

नव लिंक दिहल गइल बा

नव आइटम के बिना क्रमबद्ध सूची के माध्यम से जोड़ल सरल बा।

<ul class = "नव" > के बा 
  <ली वर्ग = "सक्रिय" > के बा 
    <a href = "#" > घर बा </a> 
  </li> के बा
  <li><a href = "#" > लिंक </a></li> बा 
  <li><a href = "#" > लिंक </a></li> बा 
</ul> के बा

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

<ul class = "नव" > के बा 
  ...
  <li class = "विभाजक-ऊर्ध्वाधर" </li> के बा 
  ...
</ul> के बा

फार्म के रूप में बा

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

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

खोज के फार्म बा

अउरी अनुकूलित खोज फार्म खातिर, नवबार में बिसेस शैली सभ खातिर इनपुट में .navbar-searchआ formमें जोड़ीं।.search-query

<form class = "नवबार-खोज पुल-बाँया" > 
  <इनपुट प्रकार = "पाठ" वर्ग = "खोज-क्वेरी" प्लेसहोल्डर = "खोज" >   
</form> के बा

घटक के संरेखण के बारे में बतावल गइल बा

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

ड्रॉपडाउन के इस्तेमाल कइल जा रहल बा

nav में ड्रॉपडाउन आ ड्रॉपअप जोड़ीं जवना में तनी मार्कअप आ ड्रॉपडाउन जावास्क्रिप्ट प्लगइन बा .

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

अउरी मार्कअप आ ड्रॉपडाउन के कॉल करे के जानकारी खातिर जावास्क्रिप्ट ड्रॉपडाउन दस्तावेज पर जाईं .

पाठ

पाठ के स्ट्रिंग सभ के कौनों तत्व में , के साथ लपेटीं .navbar-text, आमतौर पर <p>सही लीडिंग आ रंग खातिर टैग पर।

वैकल्पिक प्रदर्शन के भिन्नता बा

नवबार के सबसे बाहरी div पर एगो अतिरिक्त क्लास के साथ व्यूपोर्ट के ऊपर या नीचे ठीक करीं, .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 class = "नवबार" > के बा 
  <div वर्ग = "नवबार-आंतरिक" > बा 
    <div वर्ग = "कंटेनर" > के बा 
 
      <!-- .btn-navbar के इस्तेमाल संकुचित नवबा��� सामग्री खातिर टॉगल के रूप में कइल जाला -->
      <a class = "btn btn-navbar" डेटा-टॉगल = "संकुचित" डेटा-लक्ष्य = ".nav-संकुचित" >   
        <span class = "आइकन-बार" </span> के बा 
        <span class = "आइकन-बार" </span> के बा 
        <span class = "आइकन-बार" </span> के बा 
      </a> के बा
 
      <!-- अगर रउआ ब्रांड के देखावल चाहत बानी त ओकरा के बाहर जरूर छोड़ दीं -->
      <a class = "brand" href = "#" > प्रोजेक्ट के नाँव </a>  
 
      <!-- जवन भी चीज रउआ 940px या ओकरा से कम पर छिपावल चाहत बानी, इहाँ के भीतर रखीं -->
      <div वर्ग = "नव-संकुचन" > बा 
        <!-- .नव, .नवबार-खोज, .नवबर-फॉर्म आदि --> के बा
      </div> के बा
 
    </div> के बा
  </div> के बा
</div> के बा

उल्टा भिन्नता के बारे में बतावल गइल बा

नवबार के लुक जोड़ के संशोधित करीं .navbar-inverse.

<div class = "नवबार नवबार-उलटा" > बा 
  ...
</div> के बा

उदाहरण खातिर दिहल गइल बा

एकही उदाहरण के देखावल गइल बा जइसे कि ई कई पन्ना सभ पर देखावल जा सके ला।

<ul class = "ब्रेडक्रंब" > के बा 
  <li><a href = "#" > घर </a> <span class = "विभाजक" > / </span></li> बा   
  <li><a href = "#" > लाइब्रेरी </a> <span class = "विभाजक" > / </span></li> बा   
  <li class = "सक्रिय" > डेटा </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 = "#" > अगिला </a></li> बा 
  </ul> के बा
</div> के बा

विकल्प बा

अक्षम आ सक्रिय राज्यन के बारे में बतावल गइल बा

लिंक अलग-अलग परिस्थिति खातिर अनुकूलन योग्य बा। अनक्लिक .disabledकरे लायक लिंक सभ खातिर आ .activeवर्तमान पन्ना के बतावे खातिर इस्तेमाल करीं।

<div वर्ग = "पृष्ठांकन " > बा 
  <उल> के बा
    <li class = "अक्षम" ><a href = "#" > पिछला </a></li>  
    <li class = "सक्रिय" ><a href = "#" > 1 </a></li> बा  
    ...
  </ul> के बा
</div> के बा

संरेखण के बा

पृष्ठांकन लिंक सभ के संरेखण बदले खातिर दू गो वैकल्पिक वर्ग सभ में से कौनों एक के जोड़ीं: .pagination-centeredआ .pagination-right.

<div class = "पृष्ठांकन पृष्ठांकन-केंद्रित" > 
  ...
</div> के बा

<div class = "पृष्ठांकन पृष्ठांकन-दाहिना" > 
  ...
</div> के बा

पेजर के बा

हल्का मार्कअप आ शैली सभ के साथ सरल पन्नाकरण कार्यान्वयन सभ खातिर त्वरित पिछला आ अगिला लिंक। ब्लॉग भा पत्रिका जइसन साधारण साइट खातिर ई बहुते बढ़िया बा.

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

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

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

संरेखित कइल गइल लिंक बा

एकरे अलावा, आप हर लिंक के साइड सभ में संरेखित क सकत बानी:

<ul क्लास = "पेजर" > के बा 
  <li class = "पिछला" > के बा 
    <a href = "#" > &larr के बारे में जानकारी दिहल गइल बा; पुरान </a> के बा 
  </li> के बा
  <li वर्ग = "अगला" > बा 
    <a href = "#" > नया → </a> के बा 
  </li> के बा
</ul> के बा

वैकल्पिक रूप से अक्षम स्थिति बा

पेजर लिंक सभ में पेजिनेशन से जनरल .disabledयूटिलिटी क्लास के भी इस्तेमाल होला।

<ul क्लास = "पेजर" > के बा 
  <li class = "पिछला अक्षम" > 
    <a href = "#" > &larr के बारे में जानकारी दिहल गइल बा; पुरान </a> के बा 
  </li> के बा
  ...
</ul> के बा

लेबल लगावल गइल बा

बैज के बा

हीरो इकाई के बा

रउरा साइट पर प्रमुख सामग्री के देखावे खातिर एगो हल्का, लचीला घटक. मार्केटिंग आ सामग्री से भरपूर साइट पर ई बढ़िया काम करेला.

<div वर्ग = "हीरो-इकाई" > के बा 
  <h1> शीर्षक </h1> बा
  <p> टैगलाइन </p> के बा
  <p> के बा
    <एक वर्ग = " बीटीएन बीटीएन-प्राथमिक बीटीएन-बड़े" > 
      अउरी जाने खातिर देखीं
    </a> के बा
  </p>के बा
</div> के बा

पन्ना के हेडर बा

h1एगो पन्ना पर सामग्री के खंड सभ के उचित रूप से स्पेस आउट आ सेगमेंट करे खातिर एगो सरल शेल । ई h1's डिफ़ॉल्ट small, तत्व के साथे-साथ अधिकतर अन्य घटक सभ (अतिरिक्त शैली सभ के साथ) के इस्तेमाल क सके ला।

<div वर्ग = "पृष्ठ-हेडर" > बा 
  <h1> उदाहरण पन्ना हेडर </h1> बा
</div> के बा

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

डिफ़ॉल्ट रूप से, बूटस्ट्रैप के थंबनेल सभ के अइसन बनावल गइल बा कि लिंक कइल गइल छवि सभ के कम से कम जरूरी मार्कअप के साथ देखावल जा सके।

बेहद अनुकूलन योग्य बा

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

थंबनेल के इस्तेमाल काहें करीं

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

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

थंबनेल मार्कअप सरल बा- ulकवनो संख्या में liतत्व वाला एगो के जरूरत बा। इ सुपर लचीला भी बा, जवना से कवनो प्रकार के सामग्री के बस तनी जादा मार्कअप के संगे आपके सामग्री के लपेटे के अनुमति बा।

ग्रिड कॉलम साइज के इस्तेमाल करेला

अंत में, थंबनेल घटक मौजूदा ग्रिड सिस्टम क्लास सभ के इस्तेमाल करे ला-जइसे कि .span2या .span3—थंबनेल आयाम सभ के नियंत्रण खातिर।

मार्कअप कइल गइल बा

जइसन कि पहिले बतावल गइल बा कि थंबनेल खातिर जरूरी मार्कअप हल्का आ सीधा होला. लिंक कइल गइल छवि सभ खातिर डिफ़ॉल्ट सेटअप पर नजर डालल जा रहल बा :

<ul class = "थंबनेल" > बा 
  <ली वर्ग = "स्पैन4" > के बा 
    <a href = "#" वर्ग = "थंबनेल" > बा  
      <img src = "https://प्लेसहोल्ड.इट/300x200" alt = "" > बा  
    </a> के बा
  </li> के बा
  ...
</ul> के बा

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

<ul class = "थंबनेल" > बा 
  <ली वर्ग = "स्पैन4" > के बा 
    <div class = "थंबनेल" > के बा 
      <img src = "https://प्लेसहोल्ड.इट/300x200" alt = "" > बा  
      <h3> थंबनेल लेबल </h3> बा
      <p> थंबनेल कैप्शन... </p> बा
    </div> के बा
  </li> के बा
  ...
</ul> के बा

अउरी उदाहरण दिहल जा सकेला

रउरा लगे उपलब्ध विभिन्न ग्रिड क्लास के साथ आपन सभ विकल्प के खोज करीं। आप अलग-अलग साइज के भी मिला के मिला सकत बानी।

डिफ़ॉल्ट अलर्ट हो गइल बा

कवनो भी पाठ आ एगो वैकल्पिक खारिज बटन .alertके मूल चेतावनी अलर्ट संदेश खातिर लपेटीं।

<div वर्ग = "सचेतक" > बा 
  <बटन प्रकार = "बटन" वर्ग = "बंद" डेटा-खारिज = "सचेतक" > × </बटन>   
  <strong> चेतावनी दिहल गइल बा! </strong> बेस्ट चेक यो सेल्फ, रउरा बहुते बढ़िया नइखीं लागत.
</div> के बा

बटन के बर्खास्त कर दिहल जाव

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

<a href = "#" क्लास = "बंद करीं" डेटा-खारिज करीं = "सचेतक" > × </बटन>   

एकरे अलावा, रउआँ <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> के बा

धारीदार बा

धारीदार प्रभाव बनावे खातिर ढाल के इस्तेमाल करेला। आईई7-8 में उपलब्ध नइखे।

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

एनिमेटेड हो गइल बा

धारियन के दाहिने से बाएँ एनिमेट .activeकरे खातिर में जोड़ीं । .progress-stripedआईई के सभ संस्करण में उपलब्ध नइखे।

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

ढेर हो गइल बा

एकही में कई बार डाल के .progressओकरा के ढेर करीं।

<div वर्ग = "प्रगति" > बा 
  <div class = "बार बार-सफलता" शैली = " चौड़ाई : 35 %; " ></div>   
  <div class = "बार बार-चेतावनी" शैली = " चौड़ाई : 20 %; " ></div>   
  <div class = "बार बार-खतरा" शैली = " चौड़ाई : 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 भा फायरफॉक्स के पुरान संस्करण सभ में सपोर्ट ना कइल जालें।

इंटरनेट एक्सप्लोरर 10 आ ओपेरा 12 से पहिले के संस्करण सभ में एनीमेशन के सपोर्ट ना कइल जाला।

वेल्स के ह

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

<div class = "अच्छा" > के बा 
  ...
</div> के बा

वैकल्पिक कक्षा के बा

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

<div class = "अच्छी तरह से अच्छा-बड़ा" > 
  ...
</div> के बा

<div class = "अच्छा अच्छा-छोटा" > बा 
  ...
</div> के बा

आइकन के बंद करीं

मोडल आ अलर्ट नियर सामग्री के खारिज करे खातिर जेनेरिक बंद आइकन के इस्तेमाल करीं।

<बटन वर्ग = "बंद करीं" > × </बटन> के बा 

आईओएस डिवाइस सभ में क्लिक इवेंट सभ खातिर एगो href="#" के जरूरत होला अगर आप कौनों एंकर के इस्तेमाल कइल पसंद करीं।

<a class = "बंद करीं" href = "#" > × </a> के बा  

हेल्पर क्लास के बा

छोट प्रदर्शन भा व्यवहार ट्वीक्स खातिर सरल, केंद्रित कक्षा।

.खींच-बाईं ओर के बा

एगो तत्व के बाईं ओर तैर लीं

class = "खींच-बाँया" बा।

. खींच - बाईं ओर { .
  तैरत : बाईं ओर के बा ;
} के बा।

.खींच-दाहिने के बा

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

class = "खींच-दाहिना" बा।

. खींच - दाहिने { .
  तैरत : सही बा ;
} के बा।

.म्यूट हो गइल बा

कवनो तत्व के रंग के बदल के#999

class = "म्यूट कइल गइल"।

. म्यूट हो गइल {
  रंग : # 999 के बा; 
} के बा।

.साफ कर दिहल गइल

floatकवनो तत्व पर के साफ करीं

class = "साफ करे के बा"।

. क्लियरफिक्स कइल जाला { .
  * ज़ूम : 1 के बा ; 
  &: पहिले , 1999 के बा।
  &: के बाद { 1000 के बा।
    प्रदर्शन : तालिका के बारे में बतावल गइल बा ;
    सामग्री : "" के बा ; 
  } के बा।
  &: के बाद { 1000 के बा।
    साफ : दुनु के ;
  } के बा।
} के बा।