उदारण

दुव्यांची वळेरी दाखोवपाखातीर टॉगल करपाक येवपी, संदर्भ मेनू. ड्रॉपडावन जावास्क्रिप्ट प्लगइन कडेन परस्पर संवादात्मक केला .

<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 वर्ग = "विभाजक" </li> 
  <li><a tabindex = "-1" href = "#" > वेगळी दुवो </a></li>  
</ul> हें नांव

मार्कअप करप

फकत ड्रॉपडावन मेनू पळयतना, हांगा गरजेचें HTML आसा. तुमकां ड्रॉपडावनाचो ट्रिगर आनी ड्रॉपडावन मेनू भितर रॅप करचो पडटलो .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 वर्ग = "विभाजक" </li> 
    <li><a tabindex = "-1" href = "#" > वेगळी दुवो </a></li>  
  </ul> हें नांव
</div> हें नांव

पर्याय आसात

मेनू उजवे वटेन संरेखित करात आनी जोडात ड्रॉपडावनांची अतिरिक्त पातळी समाविष्ट करात.

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

.pull-righta कडेन जोडात ते .dropdown-menuउजवे वटेन ड्रॉपडावन मेनू संरेखित करात.

<ul वर्ग = "ड्रॉपडावन-मेनू पुल-उजवें" भुमिका = "मेनू" aria-labelledby = "dLabel" >   
  ...
</ul> हें नांव

मेनू पर्याय अक्षम केल्यात

दुवो अक्षम करपाक ड्रॉपडावनांत .disableda कडेन जोडात .<li>

<ul वर्ग = "ड्रॉपडावन-मेनू" भुमिका = "मेनू" aria-labelledby = "ड्रॉपडावनमेनू" >   
  <li><a tabindex = "-1" href = "#" > नेमान दुवो </a></li>  
  <li class = "अक्षम" ><a tabindex = "-1" href = "#" > अक्षम दुवो </a></li>   
  <li><a tabindex = "-1" href = "#" > दुसरी दुवो </a></li>  
</ul> हें नांव

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

ड्रॉपडावन मेनूची एक अतिरिक्त पातळी जोडात, OS X सारके होवराचेर दिसपी, कांय साद्या मार्कअप जोडणीं सयत. स्वयंचलित स्टायलिंग खातीर अस्तित्वांत आशिल्ल्या ड्रॉपडावन मेनूंतल्या .dropdown-submenuखंयच्याय कडेन जोडात .li

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

उदाहरणां

दोन मुळावे पर्याय, ताचे वांगडा आनीक दोन विशिश्ट बदल.

एकूच बटण गट

.btnin च्या आदारान बटणांची माळ गुठलावची .btn-group.

<div वर्ग = "बीटीएन-समूह" > 
  <बटण वर्ग = "btn" > डावें </बटण> 
  <बटण वर्ग = "btn" > मदीं </बटण> 
  <बटण वर्ग = "btn" > उजवें </बटण> 
</div> हें नांव

एका परस चड बटण गट

चड गुंतागुंतीच्या घटकांखातीर एकांत संच एकठांय करात <div class="btn-group">.<div class="btn-toolbar">

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

उबे बटण गट

बटणांचो संच आडवो न्हय तर उबो रांकिल्लो दिसचो.

<div वर्ग = "btn-समूह btn-समूह-उभ्या" > 
  ...
</div> हें नांव

चेकबॉक्स आनी रेडिओ रूची

बटण गट रेडिओ म्हणूनय काम करूंक शकतात, जंय फकत एक बटण सक्रिय आसूं येता, वा चेकबॉक्स, जंय खंयच्याय संख्येन बटण सक्रिय आसूं येता. ते खातीर जावास्क्रिप्ट डॉक्स पळयात .

बटण गटांत ड्रॉपडावन

तकली वयर काडटा!ड्रॉपडावन आशिल्ले बटण योग्य रेंडरींग खातीर .btn-groupएक भितर स्वताच्या बटणांत वैयक्तीक रितीन गुठलावंक जाय ..btn-toolbar

नियाळ आनी उदाहरणां

ड्रॉपडावन मेनू a भितर दवरून .btn-groupआनी योग्य मेनू मार्कअप दिवन ट्रिगर करपाक खंयचेंय बटण वापरात.

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

सगळ्या बटण आकारां वांगडा काम करता

बटण ड्रॉपडावन खंयच्याय आकाराचेर काम करतात: .btn-large, .btn-small, वा .btn-mini.

जावास्क्रिप्ट जाय

बटण ड्रॉपडावन कार्य करपाक बूटस्ट्रॅप ड्रॉपडावन प्लगइनाची गरज आसता.

कांय प्रकरणांनी-मोबायला सारके-ड्रॉपडावन मेनू व्यूपोर्टा भायर विस्तारतले. तुमकां संरेखण हाताळणीन वा सानुकूल जावास्क्रिप्टान सोडोवची पडटली.

विभाजन बटण ड्रॉपडावन

बटण गट शैली आनी मार्कअपाचेर उबारून आमी सहजपणान स्प्लिट बटण तयार करूंक शकतात. विभाजीत बटणां डावी वटेन मानक कृती आनी उजवे वटेन संदर्भ दुव्यां सयत ड्रॉपडावन टॉगल दाखयतात.

<div वर्ग = "बीटीएन-समूह" > 
  <बटण वर्ग = "btn" > कृती </बटण> 
  <बटण वर्ग = "btn ड्रॉपडावन-टॉगल" डेटा-टॉगल = "ड्रॉपडावन" >  
    <span वर्ग = "कॅरेट" </span> 
  </बटण> हें नांव
  <ul वर्ग = "ड्रॉपडावन-मेनू" > 
    <!-- ड्रॉपडावन मेनू दुवे -->
  </ul> हें नांव
</div> हें नांव

आकारांचो आस्पाव जाता

अतिरिक्त बटण वर्ग वापरात .btn-mini, .btn-small, वा .btn-largeआकार दिवपाखातीर.

<div वर्ग = "बीटीएन-समूह" > 
  <बटण वर्ग = "btn btn-mini" > कृती </बटण> 
  <बटण वर्ग = "btn btn-मिनी ड्रॉपडावन-टॉगल" डेटा-टॉगल = "ड्रॉपडावन" >  
    <span वर्ग = "कॅरेट" </span> 
  </बटण> हें नांव
  <ul वर्ग = "ड्रॉपडावन-मेनू" > 
    <!-- ड्रॉपडावन मेनू दुवे -->
  </ul> हें नांव
</div> हें नांव

ड्रॉपअप मेनू आसात

च्या तात्काळ पालकाक एकूच वर्ग जोडून ड्रॉपडावन मेनू सकयल सावन वयर टॉगल करूंक शकतात .dropdown-menu. तो दिका .caretउलटयतलो आनी मेनू स्वता परतून वयर सकयल वचचे बदला सकयल वयर वचपाक.

<div वर्ग = "btn-समूह ड्रॉपअप" > 
  <बटण वर्ग = "btn" > ड्रॉपअप </बटण> 
  <बटण वर्ग = "btn ड्रॉपडावन-टॉगल" डेटा-टॉगल = "ड्रॉपडावन" >  
    <span वर्ग = "कॅरेट" </span> 
  </बटण> हें नांव
  <ul वर्ग = "ड्रॉपडावन-मेनू" > 
    <!-- ड्रॉपडावन मेनू दुवे -->
  </ul> हें नांव
</div> हें नांव

हलके वजनाचे मुलभूत समान मार्कअप, वेगवेगळे वर्ग

हांगाचे सगळे nav घटक-टॅब, गोळ्या, आनी यादी- वर्गा वरवीं समान बेस मार्कअप आनी शैली वांटतात.nav .

मुळावे टॅब

लिंकांचो रेग्युलर घेवचो <ul>आनी जोडचो .nav-tabs:

<ul वर्ग = "nav nav-टॅब" > 
  <li वर्ग = "सक्रीय" > 
    <a href = "#" > घर </a> 
  </li> हें नांव
  <li><a href = "#" > ... </a></li> ह्या नांवान वळखतात 
  <li><a href = "#" > ... </a></li> ह्या नांवान वळखतात 
</ul> हें नांव

मुळाव्यो गुळयो

तोच HTML घेयात, पूण .nav-pillsताचे बदला वापरात:

<ul class = "नव नव-गोळ्या" > 
  <li वर्ग = "सक्रीय" > 
    <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 = "nav nav-टॅब nav-स्टॅक केल्ले" > 
  ...
</ul> हें नांव

रास केल्लीं गोळ्यां

<ul class = "नव नव-गोळ्या नव-स्टॅक केल्लीं" > 
  ...
</ul> हें नांव

ड्रॉपडावन करतात

मात्शें अतिरिक्त HTML आनी ड्रॉपडावन जावास्क्रिप्ट प्लगइन आशिल्लें ड्रॉपडावन मेनू जोडात .

ड्रॉपडावन आशिल्ले टॅब

<ul वर्ग = "nav nav-टॅब" > 
  <li वर्ग = "ड्रॉपडावन" > 
    <a class = "ड्रॉपडावन-टॉगल". 
       data-toggle = "ड्रॉपडावन".
       href = "#" > हें नांव
        ड्रॉपडावन करप
        <b वर्ग = "कॅरेट" </b> 
      </a> हें नांव
    <ul वर्ग = "ड्रॉपडावन-मेनू" > 
      <!-- दुवे -->
    </ul> हें नांव
  </li> हें नांव
</ul> हें नांव

ड्रॉपडावन आशिल्लीं गोळ्यां

<ul class = "नव नव-गोळ्या" > 
  <li वर्ग = "ड्रॉपडावन" > 
    <a class = "ड्रॉपडावन-टॉगल". 
       data-toggle = "ड्रॉपडावन".
       href = "#" > हें नांव
        ड्रॉपडावन करप
        <b वर्ग = "कॅरेट" </b> 
      </a> हें नांव
    <ul वर्ग = "ड्रॉपडावन-मेनू" > 
      <!-- दुवे -->
    </ul> हें नांव
  </li> हें नांव
</ul> हें नांव

नव यादी

पर्यायी शीर्षकां सयत nav दुव्यांचो गट तयार करपाचो एक सोपो आनी सोपो मार्ग. OS X च्या Finder सारकिल्या सायडबारांत तांचो वापर चड बरो जाता.

उदाहरण नाव यादी

दुव्यांची वळेरी घेयात आनी जोडात class="nav nav-list":

<ul वर्ग = "nav नव-सूची" > 
  <li class = "nav-header" > यादी शीर्षक </li> 
  <li class = "सक्रीय" ><a href = "#" > घर </a></li>  
  <li><a href = "#" > लायब्ररी </a></li> 
  ...
</ul> हें नांव

नोंद घेवचीnav वळेरे भितर नेस्ट करपाखातीर, class="nav nav-list"खंयच्याय नेस्टेडाचेर समाविष्ट करात <ul>.

आडवे विभाजक

वर्गा वांगडा रिकामी वळेरी आयटम तयार करून आडवो विभाजक जोडात .divider, जशें अशें:

<ul वर्ग = "nav नव-सूची" > 
  ...
  <li वर्ग = "विभाजक" </li> 
  ...
</ul> हें नांव

टॅबबॅबल नव

टॅबा वरवीं सामुग्री मदीं टॉगल करपाक साद्या प्लगइनान तुमचे टॅब जिवीत हाडात. बूटस्ट्रॅप टॅब करपाक येवपी टॅब चार शैलींनी एकठांय करता: वयर (मुळावें), उजवें, सकयल, आनी डावें.

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

टॅब टॅब करपाक योग्य करपाक, .tab-paneदर एका टॅबा खातीर एक अद्वितीय ID आशिल्लो एक तयार करात आनी तांकां .tab-content.

<div class = "tabbable" > <!-- फकत डाव्या/उजव्या टॅबांक जाय -->  
  <ul वर्ग = "nav nav-टॅब" > 
    <li class = "सक्रीय" ><a href = "#tab1" data-toggle = "टॅब" > विभाग 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "टॅब" > विभाग 2 </a></li>  
  </ul> हें नांव
  <div वर्ग = "टॅब-सामग्री" > 
    <div वर्ग = "टॅब-पॅन सक्रिय" id = "टॅब1" >  
      <p> हांव विभाग 1. </p>
    </div> हें नांव
    <div वर्ग = "टॅब-पॅन" id = "टॅब 2" >  
      <p> हावडी, हांव विभाग 2. </p>
    </div> हें नांव
  </div> हें नांव
</div> हें नांव

टॅबांत फिकट जावप

टॅब फीके करपाक, .fadeदरेक जोडात .tab-pane.

jQuery प्लगइनाची गरज आसा

सगळे टॅब करपाक येवपी टॅब आमच्या हलके वजनाच्या jQuery प्लगइनान चालना दितात. जावास्क्रिप्ट डॉक्स पानाचेर टॅब करपाक येवपी टॅब कशे जिवीत हाडचे हाचे विशीं चड वाचात .

खंयचेय दिकेन टॅब करपाक मेळटा

सकयल आशिल्ले टॅब

HTML चो क्रम उलटून सकयल टॅब घालपाक एक वर्ग जोडात.

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

डावी वटेन टॅब

डाव्या वटेन टॅब घालपाक वर्ग स्वॅप करचो.

<div class = "टॅबॅबल टॅब-डावें" > 
  <ul वर्ग = "nav nav-टॅब" > 
    ...
  </ul> हें नांव
  <div वर्ग = "टॅब-सामग्री" > 
    ...
  </div> हें नांव
</div> हें नांव

उजवे वटेन टॅब

उजवे वटेन टॅब घालपाक वर्ग स्वॅप करचो.

<div class = "टॅबबल टॅब-उजवें" > 
  <ul वर्ग = "nav nav-टॅब" > 
    ...
  </ul> हें नांव
  <div वर्ग = "टॅब-सामग्री" > 
    ...
  </div> हें नांव
</div> हें नांव

मुळावें नवबार

सुरवात करपाक, navbars स्थिर आसात (वयल्यान स्थिर नात) आनी प्रकल्प नांव आनी मुळाव्या नेव्हिगेशनाक आदार आसपावीत करतात. a भितर खंयच्याय सुवातेर एक दवरात .container, जे तुमची साइट आनी सामुग्रीची रुंदाय थारायता.

<div वर्ग = "नवबार" > 
  <div वर्ग = "नवबार-अंतर्गत" > 
    <a class = "brand" href = "#" > शीर्षक </a>  
    <ul वर्ग = "नव" > 
      <li class = "सक्रीय" ><a href = "#" > घर </a></li>  
      <li><a href = "#" > दुवो </a></li> 
      <li><a href = "#" > दुवो </a></li> 
    </ul> हें नांव
  </div> हें नांव
</div> हें नांव

नवबार घटक

ब्रांड

तुमचो ब्रँड वा प्रकल्पाचें नांव दाखोवपाक सादी दुव्याक फकत एंकर टॅग जाय पडटा.

<a class = "brand" href = "#" > प्रकल्पाचें नांव </a>  

नाव दुवे

Nav आयटम अक्रमीत यादीं वरवीं जोडप सोंपें आसा.

<ul वर्ग = "नव" > 
  <li वर्ग = "सक्रीय" > 
    <a href = "#" > घर </a> 
  </li> हें नांव
  <li><a href = "#" > दुवो </a></li> 
  <li><a href = "#" > दुवो </a></li> 
</ul> हें नांव

तुमी रिकामे यादी आयटम आनी साद्या वर्गा वरवीं तुमच्या nav दुव्यांत डिव्हायडर सहज जोडूंक शकतात. फकत दुव्यां मदीं हें जोडचें:

<ul वर्ग = "नव" > 
  ...
  <li class = "विभाजक-उबें" </li> 
  ...
</ul> हें नांव

रूपां

नवबारांत फॉर्म योग्य रितीन स्टायल करपाक आनी स्थापन करपाक, सकयल दाखयल्ले प्रमाणें योग्य वर्ग जोडात. मुलभूत फॉर्माखातीर, समाविष्ट करात .navbar-formआनी एक तर .pull-leftवा .pull-rightताका योग्य रितीन संरेखित करपाक.

<form class = "navbar-फॉर्म पुल-डावें" > 
  <इनपुट प्रकार = "मजकूर" वर्ग = "span2" >  
  <बटण प्रकार = "सबमिट" class = "btn" > सबमिट करचें </button>  
</form> हें नांव

सोद फॉर्म

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

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

घटक संरेखण

nav दुवे, सोद फॉर्म, वा मजकूर संरेखित करात, .pull-leftवा .pull-rightउपयुक्तताय वर्ग वापरात. दोनूय वर्ग निर्दिश्ट दिशेन CSS फ्लोट जोडटले.

ड्रॉपडावन वापरप

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

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

ड्रॉपडावन कॉल करपा विशीं चड मार्कअप आनी म्हायती खातीर JavaScript ड्रॉपडावन दस्तावेजीकरणाक भेट दिवची .

लिखीत

.navbar-text, चड करून <p>योग्य लीडिंग आनी रंगाखातीर टॅगाचेर आशिल्ल्या घटकांत मजकूराचीं स्ट्रिंग्स गुठलावचीं .

पर्यायी प्रदर्शन बदल

सगळ्यांत भायल्या div चेर अतिरिक्त वर्गा वांगडा navbar व्ह्यूपोर्टाच्या वयल्या वा सकयल स्थिर करात, .navbar.

वयल्यान स्थिर केलां

जोडचें .navbar-fixed-topआनी ताचे सकयल लिपिल्ल्या वाठाराचें लेखाजोखा दिवपाचो उगडास दवरात, तातूंत उण्यांत उणें 40px paddingजोडून <body>. कोर बूटस्ट्रॅप CSS उपरांत आनी पर्यायी प्रतिसाद दिवपी CSS पयलीं हें जोडपाची खात्री करात.

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

उलटयल्लें बदल

जोडून नवबाराचो देखावो बदलचो .navbar-inverse.

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

उदाहरणां

एकूच उदाहरण दाखयल्लें जशें तें जायत्या पानांचेर दाखोवंक शकता.

<ul class = "ब्रेडक्रंब" > 
  <li><a href = "#" > मुखेल </a> <span वर्ग = "विभाजक" > / </span></li>   
  <li><a href = "#" > लायब्ररी </a> <span वर्ग = "विभाजक" > / </span></li>   
  <li class = "सक्रीय" > डेटा </li> 
</ul> हें नांव

मानक पृष्ठांकन

Rdio कडल्यान प्रेरीत केल्लें सादें पृष्ठांकन, ऍप्लिकेशनां आनी सोद परिणामां खातीर उत्तम. व्हडलो ब्लॉक चुकप कठीण, सहज मापनीय, आनी व्हड क्लिक क्षेत्र पुरवण करता.

<div वर्ग = "पृष्ठांकन" > 
  <उल> हें नांव
    <li><a href = "#" > आदलें </a></li> 
    <li><a href = "#" > 1 </a></li> हें नांव 
    <li><a href = "#" > २ </a></li> हें नांव 
    <li><a href = "#" > ३ </a></li> हें नांव 
    <li><a href = "#" > ४ </a></li> हें नांव 
    <li><a href = "#" > ५ </a></li> हें नांव 
    <li><a href = "#" > फुडें </a></li> 
  </ul> हें नांव
</div> हें नांव

पर्याय आसात

अपंग आनी सक्रिय राज्यां

दुवे वेगवेगळ्या परिस्थिती खातीर अनुकूल करपाक मेळटात. .disabledक्लिक करूंक शकना अशा दुव्यां खातीर आनी .activeसद्याचें पान दाखोवपाक वापरात .

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

हेतू आशिल्लीं शैलीं तिगोवन दवरतना क्लिक कार्यक्षमताय काडून उडोवपाक तुमी पर्यायीपणान सक्रिय वा अक्षम एंकर स्पॅन खातीर स्वॅप आउट करूंक शकतात.

<div वर्ग = "पृष्ठांकन" > 
  <उल> हें नांव
    <li वर्ग = "अक्षम" ><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> हें नांव

पेजर हें नांव

उजवाड मार्कअप आनी शैलीं सयत साद्या पृष्ठांकन कार्यान्वयनांक जलद आदले आनी फुडले दुवे. ब्लॉग वा नेमाळीं सारकिल्या साद्या सायटीं खातीर हें बरें.

मुलभूत उदाहरण

पूर्वनिर्धारीतपणान, पेजर दुवे केंद्रीत करता.

<ul वर्ग = "पेजर" > 
  <li><a href = "#" > आदलें </a></li> 
  <li><a href = "#" > फुडें </a></li> 
</ul> हें नांव

संरेखित दुवे

पर्यायान, तुमी दरेक दुवो बाजूंक संरेखित करूंक शकतात:

<ul वर्ग = "पेजर" > 
  <li वर्ग = "आदले" > 
    <a href = "#" > आनी लार; जाण्टे </a> 
  </li> हें नांव
  <li वर्ग = "फुडलें" > 
    <a href = "#" > नवें → </a> हें नांव 
  </li> हें नांव
</ul> हें नांव

पर्यायी अक्षम स्थिती

पेजर दुवे पृष्ठांकनांतल्यान सामान्य .disabledउपयुक्तताय वर्गूय वापरतात.

<ul वर्ग = "पेजर" > 
  <li class = "आदले अक्षम" > 
    <a href = "#" > आनी लार; जाण्टे </a> 
  </li> हें नांव
  ...
</ul> हें नांव

लेबलां

बॅज घालतात

सहज कोसळपाक येता

सोप्या कार्यान्वयनाक, लेबल आनी बॅज फकत कोसळटले (CSS च्या :emptyनिवडका वरवीं) जेन्ना भितर कसलीच सामुग्री अस्तित्वांत ना.

नायक एकक

तुमच्या साइटचेर मुखेल सामुग्री दाखोवपाक एक हलको, लवचीक घटक. मार्केटींग आनी सामुग्री-जड साइटांचेर तो बरो काम करता.

<div वर्ग = "नायक-एकक" > 
  <h1> शीर्षक </h1>
  <p> टॅगलायन </p>
  <p> हें नांव
    <a class = "btn btn-प्राथमिक बीटीएन-व्हड" > 
      चड जाणून घेयात
    </a> हें नांव
  </p> हें नांव
</div> हें नांव

पृष्ठ शीर्षक

h1एक पानाचेर सामुग्री विभाग योग्य रितीन स्पेस करपाक आनी विभागपाक एक सादें शेल . तो h1's default small, घटक तशेंच चडशे हेर घटक (अतिरिक्त शैलीं सयत) वापरूंक शकता.

<div class = "पान-शीर्षक" > 
  <h1> उदाहरण पान शीर्षक <small> शीर्षकाखातीर उपमजकूर </small></h1>
</div> हें नांव

मुलभूत लघुप्रतिमा

पूर्वनिर्धारीतपणान, Bootstrap ची लघुप्रतिमा उण्यांत उणी गरज आशिल्ल्या मार्कअपान दुवो केल्लीं प्रतिमा दाखोवपाक तयार केल्यात.

अत्यंत अनुकूलन करपाक येता

थोडें अतिरिक्त मार्कअप आसल्यार, शीर्षकां, परिच्छेद, वा बटणां सारकिल्या खंयच्याय प्रकारची HTML सामुग्री लघुप्रतिमांत जोडप शक्य आसा.

लघुप्रतिमा कित्याक वापरात

लघुप्रतिमा (आदीं .media-gridv1.4 मेरेन) फोटो वा व्हिडियोच्या ग्रिड, प्रतिमा सोद परिणाम, किरकोळ उत्पाद, पोर्टफोलियो, आनी हेर जायत्या खातीर बरे आसात. ते दुवे वा स्थिर सामुग्री आसूं येतात.

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

लघुप्रतिमा मार्कअप सादें आसा- ulखंयच्याय संख्येच्या liघटकां सयत एक हें सगळें जाय. तशेंच तो सुपर लवचीक आसा, तुमची सामग्री गुठलावपाक फकत थोडो चड मार्कअप आशिल्ल्या खंयच्याय प्रकारच्या सामुग्रीक परवानगी दिता.

जाळी स्तंभ आकार वापरता

निमाणें, लघुप्रतिमा घटक सद्याचे ग्रिड प्रणाली वर्ग वापरता-जशे .span2वा .span3—लघुप्रतिमा परिमाणांचेर नियंत्रण दवरपाखातीर.

मार्कअप करप

आदीं सांगिल्ले प्रमाण लघुप्रतिमां खातीर गरजेचें मार्कअप हळुवार आनी सरळ आसता. लिंक केल्ल्या प्रतिमां खातीर मुलभूत सेटअप पळयात :

<ul class = "लघुप्रतिमा" > 
  <li वर्ग = "स्पॅन4" > 
    <a href = "#" वर्ग = "लघुप्रतिमा" >  
      <img डेटा- src = "धारक.जेएस / 300x200" alt = "" >  
    </a> हें नांव
  </li> हें नांव
  ...
</ul> हें नांव

लघुप्रतिमांतल्या सानुकूल HTML सामुग्री खातीर, मार्कअप मात्सो बदलता. <a>खंयच्याय सुवातेर ब्लॉक पातळेची सामुग्री परवानगी दिवपाक, आमी the for a like so स्वॅप करतात <div>:

<ul class = "लघुप्रतिमा" > 
  <li वर्ग = "स्पॅन4" > 
    <div वर्ग = "लघुप्रतिमा" > 
      <img डेटा- src = "धारक.जेएस / 300x200" alt = "" >  
      <h3> लघुप्रतिमा लेबल </h3>
      <p> लघुप्रतिमा कॅप्शन... </p>
    </div> हें नांव
  </li> हें नांव
  ...
</ul> हें नांव

आनीक उदाहरणां

तुमकां उपलब्ध आशिल्ल्या वेगवेगळ्या ग्रिड वर्गां सयत तुमचे सगळे पर्याय सोदून काडात. तशेंच वेगवेगळ्या आकारांत मिक्स आनी जुळोवणी करूं येता.

मुलभूत इशारो

.alertमुळाव्या शिटकावणी इशारो संदेशा खातीर खंयचोय मजकूर आनी पर्यायी डिसमिस बटण भितर गुठलायात .

<div वर्ग = "सचेतक" > 
  <बटण प्रकार = "बटण" वर्ग = "बंद करचें" data-dismiss = "अलर्ट" > × </बटण> हें नांव   
  <strong> शिटकावणी दिता! </strong> बेस्ट चेक यो सेल्फ, तूं चड बरो दिसना.
</div> हें नांव

बटणां काडून उडोवप

मोबायल सफारी आनी मोबायल ओपेरा ब्राउझर, data-dismiss="alert"गुणधर्म सोडून, ​​टॅग href="#"वापरतना सावधानताय काडून उडोवपा खातीर एक गरज आसता.<a>

<a href = "#" वर्ग = "बंद" डेटा-डिस्मिस = "सचेतना" > × </a> हें नांव   

पर्यायीपणान, तुमी डेटा गुणधर्म आशिल्लो घटक वापरूं येता <button>, जो आमी आमच्या डॉक्सां खातीर करपाचो पर्याय घेतला. वापरतना <button>, तुमी समाविष्ट करपाक जाय type="button"वा तुमचे फॉर्म सादर करूंक शकनात.

<बटण प्रकार = "बटण" वर्ग = "बंद करचें" data-dismiss = "अलर्ट" > × </बटण> हें नांव   

जावास्क्रिप्ट वरवीं सावधानताय काडून उडोवची

सावधानताय बेगीन आनी सोंपेंपणान काडून उडोवपा खातीर सावधानताय jQuery प्लगइन वापरात .

पर्याय आसात

लांब संदेशां खातीर, जोडून सावधानताय रॅपराच्या वयल्या आनी सकयल्या भागाचेर पॅडींग वाडोवचें .alert-block.

<div class = "अलर्ट इशारो-अवरोध" > 
  <बटण प्रकार = "बटण" वर्ग = "बंद करचें" data-dismiss = "अलर्ट" > × </बटण> हें नांव   
  <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 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 वा Firefox च्या पोरन्या आवृत्त्यांनी हीं वैशिश्ट्यां समर्थीत नात.

Internet Explorer 10 आनी Opera 12 परस आदल्यो आवृत्त्यो एनिमेशनाक तेंको दिना.

मजकूर आशयाच्या बरोबर डावी- वा ​​उजवी-संरेखित प्रतिमा दाखोवपी वेगवेगळ्या प्रकारचे घटक (जशे की ब्लॉग टिप्पणी, ट्विट, आदी) तयार करपाखातीर अमूर्त वस्तू शैली.

मुलभूत उदाहरण

मुलभूत माध्यम माध्यम वस्तू (प्रतिमा, व्हिडियो, ऑडियो) सामुग्री ब्लॉकाचे दावे वा उजवे वटेन तरंगपाक परवानगी दिता.

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

क्रास बस आमेत निभ लिबेरो, ग्रेविडा नुल्ला में. नुल्ला वेल मेटस स्केलेरिस्क आंत सोलिसिटुडीन कोमोडो. क्रास पुरस ओडियो, वेस्टिबुलम इन वल्पुटेट अॅट, टेम्पस व्हिवेरा टर्पिस. फ्युसे कॉन्डिमेंटम ननक एसी निसी वल्पुटेट फ्रिंजिला. फॉसिबसांत डोनेक लॅसिनिया कॉंग फेलिस.

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

क्रास बस आमेत निभ लिबेरो, ग्रेविडा नुल्ला में. नुल्ला वेल मेटस स्केलेरिस्क आंत सोलिसिटुडीन कोमोडो. क्रास पुरस ओडियो, वेस्टिबुलम इन वल्पुटेट अॅट, टेम्पस व्हिवेरा टर्पिस. फ्युसे कॉन्डिमेंटम ननक एसी निसी वल्पुटेट फ्रिंजिला. फॉसिबसांत डोनेक लॅसिनिया कॉंग फेलिस.

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

क्रास बस आमेत निभ लिबेरो, ग्रेविडा नुल्ला में. नुल्ला वेल मेटस स्केलेरिस्क आंत सोलिसिटुडीन कोमोडो. क्रास पुरस ओडियो, वेस्टिबुलम इन वल्पुटेट अॅट, टेम्पस व्हिवेरा टर्पिस. फ्युसे कॉन्डिमेंटम ननक एसी निसी वल्पुटेट फ्रिंजिला. फॉसिबसांत डोनेक लॅसिनिया कॉंग फेलिस.

<div वर्ग = "माध्यम" > 
  <a class = "ओड-डावें" href = "#" >  
    <img वर्ग = "मीडिया-वस्तू" डेटा- src = "धारक.js / 64x64" >  
  </a> हें नांव
  <div class = "माध्यम-शरीर" > 
    <h4 class = "मीडिया-शीर्षक" > माध्यम शीर्षक </h4> 
    ...
 
    <!-- नेस्टेड माध्यम वस्तू -->
    <div वर्ग = "माध्यम" > 
      ...
    </div> हें नांव
  </div> हें नांव
</div> हें नांव

माध्यमांची वळेरी

थोडें अतिरिक्त मार्कअप आसल्यार, तुमी यादी भितर माध्यम वापरूं येता (टिप्पणी धागे वा लेख यादी खातीर उपेगी).

<ul class = "माध्यम-सूची" > 
  <li वर्ग = "माध्यम" > 
    <a class = "ओड-डावें" href = "#" >  
      <img वर्ग = "मीडिया-वस्तू" डेटा- src = "धारक.js / 64x64" >  
    </a> हें नांव
    <div class = "माध्यम-शरीर" > 
      <h4 class = "मीडिया-शीर्षक" > माध्यम शीर्षक </h4> 
      ...
 
      <!-- नेस्टेड माध्यम वस्तू -->
      <div वर्ग = "माध्यम" > 
        ...
     </div> हें नांव
    </div> हें नांव
  </li> हें नांव
</ul> हें नांव

वेल्स हांणी केला

घटकाचेर सादो परिणाम म्हणून कुंड वापरून ताका इनसेट परिणाम दिवचो.

<div वर्ग = "बरें" > 
  ...
</div> हें नांव

पर्यायी वर्ग

दोन पर्यायी संशोधक वर्गां सयत पॅडींग आनी वाटकुळे कोनशे नियंत्रीत करात.

<div class = "बरें बरें-व्हड" > 
  ...
</div> हें नांव

<div class = "बरें बरें-ल्हान" > 
  ...
</div> हें नांव

बंद करचें चिन्ह

मोडल आनी सावधानताय सारकिल्या सामुग्री न्हयकारपा खातीर सामान्य बंद चिन्न वापरात.

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

href="#"तुमकां एंकर वापरप पसंत आसल्यार iOS डिव्हायसांक क्लिक इव्हेंटां खातीर जाय पडटा .

<a class = "बंद करचें" href = "#" > × </a> हें नांव  

मदत करपी वर्ग

ल्हान प्रदर्शन वा वर्तनाच्या ट्वीक्स खातीर सादे, केंद्रीत वर्ग.

.ओडून-डावें

एक घटक उजवें तरंगचें

class = "ओडून-डावें".

हें . ओडणें - डावें { .
  float : उजवें ;
} हें .

.ओडून-उजवें

एक तत्व उजवें तरंगचें

class = "ओडून-उजवें".

हें . ओडणें - उजवें { .
  float : उजवें ;
} हें .

.म्यूट केलें

एका घटकाचो रंग असो बदलचो#999

class = "म्यूट केल्लें".

हें . म्यूट केल्लें { .
  रंग : # 999; 
} हें .

.स्पश्ट करप

floatखंयच्याय घटकाचेर द निवळ करचें

class = "स्पश्ट करप".

हें . स्पश्ट करप { .
  * झूम : 1 हें ; 
  &: आदी , .
  &: उपरांत { .
    प्रदर्शन : कोश्टक ;
    आशय : "" ; 
  } हें .
  &: उपरांत { .
    स्पश्ट : दोनूय ;
  } हें .
} हें .