मसाल

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

<ul वर्ग = "ड्रॉपडाउन-मेनू" भूमिका = "मेनू" एरिया-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> दा

मेनू विकल्प अक्षम कीते गेदे न

लिंक गी अक्षम करने लेई ड्रॉपडाउन च .disableda च जोड़ो ।<li>

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

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

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

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

उदाहरण दे

दो बुनियादी विकल्प, दो होर विशिष्ट बदलावें कन्नै।

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

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

<div वर्ग = "बीटीएन-समूह" > 
  <बटन वर्ग = "बीटीएन" > बाएं </बटन> 
  <बटन वर्ग = "बीटीएन" > मध्य </बटन> 
  <बटन वर्ग = "बीटीएन" > दाएं </बटन> 
</div> दा

कई बटन समूह

होर जटिल घटकें लेई <div class="btn-group">इक च सेटें गी संयोजित करो ।<div class="btn-toolbar">

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

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

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

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

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

बटन समूह रेडियो दे रूप च बी कम्म करी सकदे न, जित्थै सिर्फ इक बटन सक्रिय होई सकदा ऐ, जां चेकबॉक्स, जित्थै कुसै बी संख्या च बटन सक्रिय होई सकदा ऐ। उसदे लेई जावास्क्रिप्ट डॉक्स दिक्खो ।

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

सिर ऊपर !ड्रॉपडाउन आह् ले बटनें गी उचित रेंडरिंग आस्तै .btn-groupइक दे अंदर अपने-आपै च व्यक्तिगत रूप कन्नै लपेटेआ जाना लोड़चदा ऐ..btn-toolbar

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

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

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

सारे बटन साइज़ कन्नै कम्म करदा ऐ

बटन ड्रॉपडाउन किसे बी आकार पर कम्म करदे न: .btn-large, .btn-small, जां .btn-mini.

जावास्क्रिप्ट दी लोड़ ऐ

बटन ड्रॉपडाउन गी कम्म करने आस्तै बूटस्ट्रैप ड्रॉपडाउन प्लगइन दी लोड़ होंदी ऐ।

किश मामलें च-जि’यां मोबाइल-ड्रॉपडाउन मेनू व्यूपोर्ट दे बाहर फैलग। तुसेंगी संरेखण गी मैन्युअल रूप कन्नै जां कस्टम जावास्क्रिप्ट कन्नै हल करने दी लोड़ ऐ.

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

बटन समूह शैलियां ते मार्कअप पर आधारित, अस आसानी कन्नै इक स्प्लिट बटन बनाई सकने आं। विभाजित बटनें च बक्खी दा इक मानक कार्रवाई ते संदर्भ लिंक कन्नै सज्जे पास्से इक ड्रॉपडाउन टॉगल दी सुविधा ऐ।

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

साइज दे

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

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

ड्रॉपअप मेनू

ड्रॉपडाउन मेनू गी बी निचले थमां उप्पर टॉगल कीता जाई सकदा ऐ .dropdown-menu. एह् दी दिशा गी फ्लिप करग .caretते मेनू गी अपने आपै गी दुबारा स्थापत करग तां जे उप्पर थमां हेठ जाने दी बजाय थल्लै थमां उप्पर चली सकै।

<div वर्ग = "बीटीएन-समूह ड्रॉपअप" > 
  <बटन वर्ग = "बीटीएन" > ड्रॉपअप </बटन> 
  <बटन वर्ग = "बीटीएन ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
    <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 आस्तै जोड़ो ते कोई होवर प्रभाव नेईं . लिंक क्लिक करने योग्य रौह् ग, हालांकि, जदूं तकर तुस एट्रिब्यूट गी नेईं हटांदे ओ. वैकल्पिक रूप कन्नै, तुस उनें क्लिकें गी रोकने आस्तै कस्टम जावास्क्रिप्ट लागू करी सकदे ओ.href

<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 = "नव नव-टैब" > 
  <ली वर्ग = "ड्रॉपडाउन" > ऐ 
    <a class = "ड्रॉपडाउन-टॉगल" ऐ। 
       डेटा-टॉगल = "ड्रॉपडाउन" ऐ।
       href = "#" > ऐ
        ड्रॉपडाउन
        <b class = "कैरेट" </b> ऐ 
      </a> दा
    <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
      <!-- लिंक --> ऐ
    </ul> दा
  </li> दा
</ul> दा

ड्रॉपडाउन कन्नै गोलियां

<ul class = "नव नव-गोलियाँ" > 
  <ली वर्ग = "ड्रॉपडाउन" > ऐ 
    <a class = "ड्रॉपडाउन-टॉगल" ऐ। 
       डेटा-टॉगल = "ड्रॉपडाउन" ऐ।
       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.

जेक्वेरी प्लगइन दी लोड़ ऐ

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

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

नीचे पर टैब

एचटीएमएल दा क्रम फ्लिप करो ते थल्ले टैब लाने आस्तै इक क्लास जोड़ो।

<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 वर्ग = "नवबार" > ऐ 
  <div class = "नवबार-आंतरिक" > 
    <a class = "ब्रांड" href = "#" > शीर्षक </a>  
    <उल वर्ग = "नव" > ऐ 
      <li class = "सक्रिय" ><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 = "विभाजक-ऊर्ध्वाधर" </li> 
  ...
</ul> दा

रूप दे

नवबार दे अंदर इक फार्म गी ठीक ढंगै कन्नै स्टाइल करने ते स्थिति देने लेई, उचित वर्गें गी जोड़ो जिऱयां कि हेठ दित्ते गेदे न. डिफाल्ट फार्म आस्तै, शामल करो .navbar-formते या तां .pull-leftजां .pull-rightइसगी ठीक ढंगै कन्नै संरेखित करने आस्तै.

<form class = "नवबार-फॉर्म पुल-बाएं" > 
  <इनपुट प्रकार = "पाठ" वर्ग = "span2" >  
  <button type = "submit" class = "btn" > सबमिट करो </बटन>  
</form> दा

सर्च फार्म

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

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

घटक संरेखण करना

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

ड्रॉपडाउन दा इस्तेमाल करदे होई

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

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

होर मार्कअप ते ड्रॉपडाउन गी कॉल करने दी जानकारी आस्तै जावास्क्रिप्ट ड्रॉपडाउन दस्तावेजें पर जाओ ।

पाठ

पाठ दी स्ट्रिंग्स गी इक तत्व च लपेटो .navbar-text, आमतौर पर <p>उचित लीडिंग ते रंग आस्तै इक टैग पर.

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

नवबार गी व्यूपोर्ट दे शीर्शक जां थल्लै पर इक अतिरिक्त वर्ग कन्नै बाहरले div पर ठीक करो, .navbar.

टॉप पर फिक्स हो गया

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

उल्टा बदलाव

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

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

उदाहरण दे

इक गै उदाहरन जिऱयां दस्सेआ गेआ ऐ जे एह् मते सारे पन्नें पर प्रदर्शत होई सकदा ऐ।

<ul class = "ब्रेडक्रंब" > ऐ 
  <li><a href = "#" > घर </a> <स्पैन वर्ग = "विभाजक" > / </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 = "#" > 5 </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> दा

तुस वैकल्पिक रूप कन्नै स्पैन आस्तै सक्रिय जां अक्षम एंकरें गी स्वैप आउट करी सकदे ओ तां जे इरादा शैलियें गी बरकरार रक्खदे होई क्लिक फ़ंक्शनलटी गी हटाया जाई सकै.

<div वर्ग = "पृष्ठांकन" > ऐ 
  <उल> दा
    <li class = "अक्षम" ><span> « </span></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> दा

पेजर ने दी

हल्के मार्कअप ते शैलियें कन्नै सरल पृष्ठांकन कार्यान्वयनें लेई त्वरित पिछले ते अगले लिंक। ब्लॉग जां पत्रिकाएं जनेह् साधारण साइटें आस्तै एह् बड़ा शैल ऐ।

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

डिफ़ॉल्ट रूप कन्नै, पेजर लिंकें गी केंद्रत करदा ऐ।

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

संरेखित लिंक

वैकल्पिक रूप कन्नै, तुस हर इक लिंक गी बक्ख-बक्ख संरेखित करी सकदे ओ:

<ul वर्ग = "पेजर" > ऐ 
  <ली वर्ग = "पिछला" > 
    <a href = "#" > & लरर ऐ; पुराना </a> 
  </li> दा
  <ली वर्ग = "अगला" > 
    <a href = "#" > नए → </a> दा 
  </li> दा
</ul> दा

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

पेजर लिंक .disabledपृष्ठांकन थमां सामान्य उपयोगिता वर्ग दा बी इस्तेमाल करदे न।

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

लेबल लगाए

बिल्ला

आसानी से ढहने वाला

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

हीरो इकाई

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

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

पेज दा हेडर

h1इक पृष्ठ पर सामग्री दे खंडें गी उचित रूप कन्नै स्पेस आउट ते सेगमेंट करने आस्तै इक आस्तै इक साधारण शेल । एह् h1's डिफाल्ट small, तत्व दे कन्नै-कन्नै होर मते सारे घटकें (अतिरिक्त शैलियें कन्नै) दा उपयोग करी सकदा ऐ.

<div वर्ग = "पृष्ठ-शीर्षक" > 
  <h1> उदाहरण पृष्ठ हेडर <small> हेडर आस्तै उपपाठ </small></h1>
</div> दा

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

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

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

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

थंबनेल दा इस्तेमाल क्यों करो

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

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

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

ग्रिड स्तंभ आकारें दा उपयोग करदा ऐ

आखरी च, थंबनेल घटक थंबनेल आयामें दे नियंत्रण आस्तै मौजूदा ग्रिड सिस्टम वर्गें दा उपयोग करदा ऐ-जि’यां .span2जां —..span3

मार्कअप करना

जि’यां पैह् ले आखेआ गेआ ऐ, थंबनेल आस्तै लोड़चदा मार्कअप हल्का ते सीधा ऐ। लिंक कीती गेदी छवियें आस्तै डिफ़ॉल्ट सेटअप पर इक नज़र ऐ :

<ul class = "थंबनेल" > ऐ 
  <ली वर्ग = "स्पैन4" > ऐ 
    <a href = "#" वर्ग = "थंबनेल" >  
      <img डेटा- src = "धारक.जेएस/300x200" alt = "" >  
    </a> दा
  </li> दा
  ...
</ul> दा

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

<ul class = "थंबनेल" > ऐ 
  <ली वर्ग = "स्पैन4" > ऐ 
    <div वर्ग = "थंबनेल" > ऐ 
      <img डेटा- src = "धारक.जेएस/300x200" alt = "" >  
      <h3> थंबनेल लेबल </h3> ऐ
      <p> थंबनेल कैप्शन... </p>
    </div> दा
  </li> दा
  ...
</ul> दा

होर मिसाल

तुंदे कोल उपलब्ध बक्ख-बक्ख ग्रिड क्लासें कन्नै अपने सारे विकल्पें दी खोज करो। तुस बक्ख-बक्ख आकारें गी बी मिक्स ते मैच करी सकदे ओ।

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

.alertबुनियादी चेतावनी अलर्ट संदेश आस्तै कुसै बी पाठ ते इक वैकल्पिक बर्खास्तगी बटन गी अंदर लपेटो ।

<div वर्ग = "सचेतक" > ऐ 
  <बटन प्रकार = "बटन" वर्ग = "बंद करो" डेटा-खारिज = "सचेतक" > × </बटन> दा   
  <strong> चेतावनी दी ! </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> दा

धारीदार

धारीदार प्रभ��व बनाने लेई इक ढाल दा उपयोग करदा ऐ। आईई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 वर्ग = "मीडिया" > ऐ 
  <a class = "पुल-बाएं" href = "#" >  
    <img वर्ग = "मीडिया-वस्तु" डेटा- src = "धारक.जेएस/64x64" >  
  </a> दा
  <div class = "मीडिया-शरीर" > ऐ 
    <h4 class = "मीडिया-हेडिंग" > मीडिया हेडिंग </h4> 
    ...
 
    <!-- नेस्टेड मीडिया वस्तु -->
    <div वर्ग = "मीडिया" > ऐ 
      ...
    </div> दा
  </div> दा
</div> दा

मीडिया लिस्ट

थोड़ा अतिरिक्त मार्कअप कन्नै, तुस सूची दे अंदर मीडिया दा इस्तेमाल करी सकदे ओ (टिप्पणी थ्रेड जां लेख सूची आस्तै उपयोगी)।

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

वेल्स ने दी

कुएं गी इक तत्व पर इक साधारण प्रभाव दे रूप च इस्तेमाल करो तां जे उसी इक इनसेट प्रभाव दित्ता जाई सकै।

<div वर्ग = "अच्छा" > ऐ 
  ...
</div> दा

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

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

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

<div class = "अच्छी तरह से अच्छी तरह से-छोटा" > 
  ...
</div> दा

बंद करो आइकन

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

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

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

<a class = "बंद करो" href = "#" > & टाइम्स; </a> दा  

सहायक कक्षाएं

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

।खींच-बाएं

इक तत्व बाईं ओर तैरना

class = "खींच-बाएं" ऐ।

ऐ . खींचना - बाएं {
  तैरना : बाएं ;
} ऐ।

।खींच-दाहिने

इक तत्व सही तैरना

class = "पुल-राइट" ऐ।

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

।म्यूट कर दित्ता

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

class = "म्यूट" ऐ।

ऐ . म्यूट कीता {
  रंग : # 999 ऐ; 
} ऐ।

.साफ़ करना

floatकिसी भी तत्व पर दी साफ करो

class = "साफ़ करना"।

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