उदाहरण

लिंक्सच्या सूची प्रदर्शित करण्यासाठी टॉगल करण्यायोग्य, संदर्भ मेनू. ड्रॉपडाउन JavaScript प्लगइनसह परस्परसंवादी केले .

<ul class = "dropdown-menu" role = "menu" 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 class = "ड्रॉपडाउन-मेनू" भूमिका = "मेनू" 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-rightकरण्यासाठी a मध्ये जोडा ..dropdown-menu

<ul class = "ड्रॉपडाउन-मेनू पुल-राइट" रोल = "मेनू" aria-labelledby = "dLabel" >   
  ...
</ul>

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

लिंक अक्षम करण्यासाठी ड्रॉपडाऊनमध्ये .disabledजोडा .<li>

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "ड्रॉपडाउन मेनू" >   
  <li><a tabindex = "-1" href = "#" > नियमित लिंक </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > अक्षम केलेली लिंक </a></li>   
  <li><a tabindex = "-1" href = "#" > दुसरी लिंक </a></li>  
</ul>

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

काही सोप्या मार्कअप अॅडिशन्ससह, OS X प्रमाणे हॉवरवर दिसणारे ड्रॉपडाउन मेनूचे अतिरिक्त स्तर जोडा. स्वयंचलित शैलीसाठी विद्यमान ड्रॉपडाउन मेनूमधील .dropdown-submenuकोणत्याहीमध्ये जोडा .li

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

उदाहरणे

आणखी दोन विशिष्ट भिन्नतेसह दोन मूलभूत पर्याय.

एकल बटण गट

.btnमध्ये बटणांची मालिका गुंडाळा .btn-group.

<div वर्ग = "btn-ग्रुप" > 
  <button class = "btn" > डावीकडे </button> 
  <button class = "btn" > मध्य </button> 
  <button class = "btn" > उजवे </button> 
</div>

एकाधिक बटण गट

अधिक जटिल घटकांसाठी <div class="btn-group">a मध्ये संच एकत्र करा .<div class="btn-toolbar">

<div वर्ग = "btn-टूलबार" > 
  <div वर्ग = "btn-ग्रुप" > 
    ...
  </div>
</div>

अनुलंब बटण गट

बटणांचा संच क्षैतिज ऐवजी अनुलंब स्टॅक केलेला दिसावा.

<div वर्ग = "btn-group btn-group-vertical" > 
  ...
</div>

चेकबॉक्स आणि रेडिओ फ्लेवर्स

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

बटण गटांमध्ये ड्रॉपडाउन

सावधान!योग्य रेंडरिंगसाठी ड्रॉपडाउनसह बटणे वैयक्तिकरित्या त्यांच्या .btn-groupस्वतःमध्ये गुंडाळलेली असणे आवश्यक आहे ..btn-toolbar

विहंगावलोकन आणि उदाहरणे

ड्रॉपडाउन मेनू ट्रिगर करण्यासाठी कोणतेही बटण वापरा आणि ते a मध्ये ठेवून .btn-groupआणि योग्य मेनू मार्कअप प्रदान करा.

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

सर्व बटण आकारांसह कार्य करते

बटण ड्रॉपडाउन कोणत्याही आकारात कार्य करतात: .btn-large, .btn-small, किंवा .btn-mini.

JavaScript आवश्यक आहे

बटण ड्रॉपडाउनला कार्य करण्यासाठी बूटस्ट्रॅप ड्रॉपडाउन प्लगइन आवश्यक आहे.

काही प्रकरणांमध्ये - जसे की मोबाइल - ड्रॉपडाउन मेनू व्ह्यूपोर्टच्या बाहेर वाढेल. तुम्हाला स्वहस्ते किंवा सानुकूल JavaScript सह संरेखन सोडवणे आवश्यक आहे.

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

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

<div वर्ग = "btn-ग्रुप" > 
  <button class = "btn" > क्रिया </button> 
  <button class = "btn dropdown-toggle" data-toggle = "ड्रॉपडाउन" >  
    <span वर्ग = "कॅरेट" ></span> 
  </ बटन>
  <ul class = "ड्रॉपडाउन-मेनू" > 
    <!-- ड्रॉपडाउन मेनू लिंक्स -->
  </ul>
</div>

आकार

अतिरिक्त बटण वर्ग वापरा .btn-mini, .btn-smallकिंवा .btn-largeआकारमानासाठी.

<div वर्ग = "btn-ग्रुप" > 
  <button class = "btn btn-mini" > क्रिया </button> 
  <बटण वर्ग = "btn btn-mini dropdown-toggle" data-toggle = "ड्रॉपडाउन" >  
    <span वर्ग = "कॅरेट" ></span> 
  </ बटन>
  <ul class = "ड्रॉपडाउन-मेनू" > 
    <!-- ड्रॉपडाउन मेनू लिंक्स -->
  </ul>
</div>

ड्रॉपअप मेनू

च्या तत्काळ पालकामध्ये एकल वर्ग जोडून ड्रॉपडाउन मेनू तळापासून वर टॉगल केले जाऊ शकतात .dropdown-menu. हे ची दिशा फ्लिप करेल .caretआणि वरच्या खाली ऐवजी तळापासून वर जाण्यासाठी मेनू स्वतःच पुनर्स्थित करेल.

<div वर्ग = "btn-ग्रुप ड्रॉपअप" > 
  <button class = "btn" > ड्रॉपअप </button> 
  <button class = "btn dropdown-toggle" data-toggle = "ड्रॉपडाउन" >  
    <span वर्ग = "कॅरेट" ></span> 
  </ बटन>
  <ul class = "ड्रॉपडाउन-मेनू" > 
    <!-- ड्रॉपडाउन मेनू लिंक्स -->
  </ul>
</div>

लाइटवेट डीफॉल्ट समान मार्कअप, भिन्न वर्ग

येथील सर्व एनएव्ही घटक—टॅब, गोळ्या आणि सूची— वर्गात समान बेस मार्कअप आणि शैली शेअर करतात .nav.

मूलभूत टॅब

<ul>दुवे नियमित घ्या आणि जोडा .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li वर्ग = "सक्रिय" > 
    <a href="#" > होम </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

मूलभूत गोळ्या

तेच HTML घ्या, परंतु .nav-pillsत्याऐवजी वापरा:

<ul class = "nav nav-pills" > 
  <li वर्ग = "सक्रिय" > 
    <a href="#" > होम </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

अपंग राज्य

कोणत्याही एनएव्ही घटकासाठी (टॅब, गोळ्या किंवा सूची), राखाडी लिंक जोडा .disabledआणि कोणतेही होव्हर प्रभाव नाही . hrefतथापि, जोपर्यंत तुम्ही विशेषता काढून टाकत नाही तोपर्यंत लिंक क्लिक करण्यायोग्य राहतील . वैकल्पिकरित्या, त्या क्लिक्सना प्रतिबंध करण्यासाठी तुम्ही सानुकूल JavaScript लागू करू शकता.

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > होम </a></li>  
  ...
</ul>

घटक संरेखन

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

स्टॅक करण्यायोग्य

टॅब आणि गोळ्या डीफॉल्टनुसार क्षैतिज असल्याने, .nav-stackedत्यांना अनुलंब स्टॅक केलेले दिसण्यासाठी फक्त दुसरा वर्ग जोडा.

स्टॅक केलेले टॅब

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

रचलेल्या गोळ्या

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

ड्रॉपडाउन

थोडे अतिरिक्त HTML आणि ड्रॉपडाउन JavaScript प्लगइनसह ड्रॉपडाउन मेनू जोडा .

ड्रॉपडाउनसह टॅब

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

ड्रॉपडाउनसह गोळ्या

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

एनएव्ही याद्या

पर्यायी शीर्षलेखांसह एनएव्ही लिंक्सचे गट तयार करण्याचा एक साधा आणि सोपा मार्ग. ते OS X मधील फाइंडर सारख्या साइडबारमध्ये सर्वोत्तम वापरले जातात.

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

लिंक्सची यादी घ्या आणि जोडा class="nav nav-list":

<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, जसे की:

<ul class = "nav nav-list" > 
  ...
  <li वर्ग = "विभाजक" ></li> 
  ...
</ul>

Tabbable nav

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

टेबलचे उदाहरण

टॅब टॅब करण्यायोग्य बनवण्यासाठी, .tab-paneप्रत्येक टॅबसाठी एक युनिक आयडी तयार करा आणि त्यात गुंडाळा .tab-content.

<div class = "tabbable" > <!-- फक्त डाव्या/उजव्या टॅबसाठी आवश्यक -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > विभाग १ </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > विभाग २ </a></li>  
  </ul>
  <div वर्ग = "टॅब-सामग्री" > 
    <div class = "tab-pane सक्रिय" id = "tab1" >  
      <p> मी विभाग १ मध्ये आहे. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> नमस्कार, मी विभाग २ मध्ये आहे. </p>
    </div>
  </div>
</div>

टॅबमध्ये फेड

टॅब फेड इन करण्यासाठी, .fadeप्रत्येकामध्ये जोडा .tab-pane.

jQuery प्लगइन आवश्यक आहे

सर्व टॅब करण्यायोग्य टॅब आमच्या लाइटवेट jQuery प्लगइनद्वारे समर्थित आहेत. JavaScript डॉक्स पृष्ठावर टॅब करण्यायोग्य टॅब कसे जिवंत करावे याबद्दल अधिक वाचा .

कोणत्याही दिशेने टेबल

तळाशी टॅब

HTML चा क्रम फ्लिप करा आणि तळाशी टॅब ठेवण्यासाठी वर्ग जोडा.

<div वर्ग = "टॅब करण्यायोग्य टॅब-खाली" > 
  <div वर्ग = "टॅब-सामग्री" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

डावीकडे टॅब

डावीकडे टॅब ठेवण्यासाठी वर्ग स्वॅप करा.

<div वर्ग = "टॅब करण्यायोग्य टॅब-लेफ्ट" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div वर्ग = "टॅब-सामग्री" > 
    ...
  </div>
</div>

उजवीकडे टॅब

उजवीकडे टॅब ठेवण्यासाठी वर्ग स्वॅप करा.

<div वर्ग = "टॅब करण्यायोग्य टॅब-उजवे" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div वर्ग = "टॅब-सामग्री" > 
    ...
  </div>
</div>

मूलभूत नवबार

सुरू करण्यासाठी, navbars स्थिर असतात (शीर्षस्थानी निश्चित केलेले नाहीत) आणि प्रकल्पाच्या नावासाठी आणि मूलभूत नेव्हिगेशनसाठी समर्थन समाविष्ट करतात. एक मध्ये कुठेही .containerठेवा, जे तुमच्या साइटची आणि सामग्रीची रुंदी सेट करते.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a वर्ग = "ब्रँड" href = "#" > शीर्षक </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > होम </a></li>  
      <li><a href = "#" > लिंक </a></li> 
      <li><a href = "#" > लिंक </a></li> 
    </ul>
  </div>
</div>

नवबार घटक

ब्रँड

तुमचा ब्रँड किंवा प्रोजेक्ट नाव दाखवण्यासाठी साध्या लिंकसाठी फक्त अँकर टॅग आवश्यक आहे.

<a वर्ग = "ब्रँड" href = "#" > प्रकल्पाचे नाव </a>  

एनएव्ही लिंक्स

नेव्ही आयटम अक्रमित सूचीद्वारे जोडणे सोपे आहे.

<ul class = "nav" > 
  <li वर्ग = "सक्रिय" > 
    <a href="#" > होम </a> _ _ 
  </li>
  <li><a href = "#" > लिंक </a></li> 
  <li><a href = "#" > लिंक </a></li> 
</ul>

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

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

फॉर्म

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

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

शोध फॉर्म

अधिक सानुकूलित शोध फॉर्मसाठी, navbar मधील विशेष शैलींसाठी इनपुटमध्ये आणि .navbar-searchजोडा .form.search-query

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

घटक संरेखन

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

ड्रॉपडाउन वापरणे

थोडे मार्कअप आणि ड्रॉपडाउन JavaScript प्लगइनसह एनएव्हीमध्ये ड्रॉपडाउन आणि ड्रॉपअप जोडा .

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

अधिक मार्कअप आणि कॉलिंग ड्रॉपडाउनवरील माहितीसाठी JavaScript ड्रॉपडाउन दस्तऐवजांना भेट द्या .

मजकूर

सह घटकामध्ये मजकूराच्या स्ट्रिंग गुंडाळा .navbar-text, सामान्यतः <p>योग्य अग्रगण्य आणि रंगासाठी टॅगवर.

पर्यायी प्रदर्शन भिन्नता

सर्वात बाहेरील div वर अतिरिक्त वर्गासह व्ह्यूपोर्टच्या वरच्या किंवा खालच्या बाजूस नॅव्हबार निश्चित करा, .navbar.

शीर्षस्थानी निश्चित

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

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

तळाशी निश्चित

.navbar-fixed-bottomत्याऐवजी जोडा .

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

स्थिर शीर्ष नवबार

जोडून पृष्ठासह स्क्रोल होणारा पूर्ण-रुंदीचा नॅव्हबार तयार करा .navbar-static-top. वर्गाच्या विपरीत .navbar-fixed-top, तुम्हाला वरील कोणतेही पॅडिंग बदलण्याची आवश्यकता नाही body.

<div class = "navbar navbar-static-top" > 
  ...
</div>

प्रतिसाद देणारा नवबार

कोलॅप्सिंग रिस्पॉन्सिव्ह नॅव्हबार अंमलात आणण्यासाठी, तुमची navbar सामग्री div मध्ये गुंडाळा, .nav-collapse.collapseआणि navbar टॉगल बटण जोडा .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div वर्ग = "कंटेनर" > 
 
      <!-- .btn-navbar संकुचित नवबार सामग्रीसाठी टॉगल म्हणून वापरले जाते -->
      <a वर्ग = "btn btn-navbar" डेटा-टॉगल = "संकुचित करा" डेटा-लक्ष्य = ".nav-संकुचित" >   
        <span वर्ग = "आयकॉन-बार" ></span> 
        <span वर्ग = "आयकॉन-बार" ></span> 
        <span वर्ग = "आयकॉन-बार" ></span> 
      </a>
 
      <!-- तुम्हाला तो दाखवायचा असेल तर ब्रँड तिथेच सोडण्याची खात्री करा -->
      <a वर्ग = "ब्रँड" href = "#" > प्रकल्पाचे नाव </a>  
 
      <!-- तुम्हाला जे काही 940px किंवा त्यापेक्षा कमी लपवायचे आहे ते येथे ठेवा -->
      <div class = "nav-collaps collapse" > 
        <!-- .nav, .navbar-शोध, .navbar-फॉर्म, इ -->
      </div>
 
    </div>
  </div>
</div>

उलटा फरक

जोडून नवबारचे स्वरूप सुधारित करा .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

उदाहरणे

एकच उदाहरण दर्शविले आहे कारण ते एकाधिक पृष्ठांवर प्रदर्शित केले जाऊ शकते.

<ul class = "ब्रेडक्रंब" > 
  <li><a href = "#" > घर </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > लायब्ररी </a> <span class = "divider" > / </span></li>   
  <li class = "active" > डेटा </li> 
</ul>

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

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

<div वर्ग = "पृष्ठांकन" > 
  <ul>
    <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 = "#" > ४ </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li><a href = "#" > पुढे </a></li> 
  </ul>
</div>

पर्याय

अक्षम आणि सक्रिय राज्ये

दुवे वेगवेगळ्या परिस्थितींसाठी सानुकूल करण्यायोग्य आहेत. .disabledक्लिक न करता येणार्‍या दुव्यांसाठी आणि .activeवर्तमान पृष्ठ सूचित करण्यासाठी वापरा .

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

इच्छित शैली टिकवून ठेवताना क्लिक कार्यक्षमता काढून टाकण्यासाठी तुम्ही स्पॅनसाठी सक्रिय किंवा अक्षम अँकर वैकल्पिकरित्या बदलू शकता.

<div वर्ग = "पृष्ठांकन" > 
  <ul>
    <li वर्ग = "अक्षम" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

आकार

फॅन्सी मोठे किंवा लहान पृष्ठांकन? .pagination-large, .pagination-small, किंवा .pagination-miniअतिरिक्त आकारांसाठी जोडा .

<div वर्ग = "पृष्‍ठांकन पृष्ठांकन-लार्ज" > 
  <ul>
    ...
  </ul>
</div>
<div वर्ग = "पृष्ठांकन" > 
  <ul>
    ...
  </ul>
</div>
<div वर्ग = "पृष्ठ क्रमांकन पृष्ठांकन-स्मॉल" > 
  <ul>
    ...
  </ul>
</div>
<div वर्ग = "पृष्ठ क्रमांकन पृष्ठांकन-मिनी" > 
  <ul>
    ...
  </ul>
</div>

संरेखन

पृष्ठांकन दुव्यांचे संरेखन बदलण्यासाठी दोन पर्यायी वर्गांपैकी एक जोडा: .pagination-centeredआणि .pagination-right.

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

<div वर्ग = "पृष्ठांकन पृष्ठांकन-उजवे" > 
  ...
</div>

पेजर

हलके मार्कअप आणि शैलींसह साध्या पृष्ठांकन अंमलबजावणीसाठी द्रुत मागील आणि पुढील दुवे. ब्लॉग किंवा मासिके सारख्या साध्या साइटसाठी हे छान आहे.

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

डीफॉल्टनुसार, पेजर लिंक्स केंद्रस्थानी ठेवतात.

<ul class = "पेजर" > 
  <li><a href = "#" > मागील </a></li> 
  <li><a href = "#" > पुढे </a></li> 
</ul>

संरेखित दुवे

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

<ul class = "पेजर" > 
  <li वर्ग = "मागील" > 
    <a href="#" > & larr ; जुने </a> 
  </li>
  <li वर्ग = "पुढील" > 
    <a href = "#" > नवीन → </a> 
  </li>
</ul>

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

.disabledपेजर लिंक्स पेजनेशनमधून सामान्य उपयुक्तता वर्ग देखील वापरतात .

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

लेबल्स

बॅज

सहज कोलॅप्सिबल

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

हिरो युनिट

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

<div वर्ग = "नायक-युनिट" > 
  <h1> शीर्षक </h1>
  <p> टॅगलाइन </p>
  <p>
    <a वर्ग = "btn btn-प्राथमिक btn-लार्ज" > 
      अधिक जाणून घ्या
    </a>
  </p>
</div>

पृष्ठ शीर्षलेख

h1पृष्ठावरील सामग्रीचे विभाग योग्यरित्या काढण्यासाठी आणि विभाग करण्यासाठी एक साधा शेल . h1हे डीफॉल्ट small, घटक तसेच इतर बहुतेक घटक (अतिरिक्त शैलींसह) वापरू शकते .

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

डीफॉल्ट लघुप्रतिमा

डीफॉल्टनुसार, बूटस्ट्रॅपची लघुप्रतिमा कमीतकमी आवश्यक मार्कअपसह लिंक केलेल्या प्रतिमा प्रदर्शित करण्यासाठी डिझाइन केलेली आहेत.

अत्यंत सानुकूल करण्यायोग्य

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

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

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

साधे, लवचिक मार्कअप

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

ग्रिड स्तंभ आकार वापरते

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

मार्कअप

आधी सांगितल्याप्रमाणे, लघुप्रतिमांसाठी आवश्यक मार्कअप हलके आणि सरळ आहे. लिंक केलेल्या प्रतिमांसाठी डीफॉल्ट सेटअप येथे पहा :

<ul class = "थंबनेल्स" > 
  <li वर्ग = "span4" > 
    <a href = "#" वर्ग = "थंबनेल" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

लघुप्रतिमांमधील सानुकूल HTML सामग्रीसाठी, मार्कअप किंचित बदलतो. कोठेही ब्लॉक लेव्हल सामग्रीला अनुमती देण्यासाठी, आम्ही लाइकसाठी स्वॅप <a>करतो <div>:

<ul class = "थंबनेल्स" > 
  <li वर्ग = "span4" > 
    <div वर्ग = "थंबनेल" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> थंबनेल लेबल </h3>
      <p> लघुप्रतिमा मथळा... </p>
    </div>
  </li>
  ...
</ul>

आणखी उदाहरणे

तुमच्यासाठी उपलब्ध असलेल्या विविध ग्रिड वर्गांसह तुमचे सर्व पर्याय एक्सप्लोर करा. तुम्ही वेगवेगळे आकार मिक्स आणि मॅच करू शकता.

डीफॉल्ट सूचना

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

<div वर्ग = "सूचना" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <strong> चेतावणी! </strong> स्वतःची उत्तम तपासणी करा, तुम्ही फार चांगले दिसत नाही.
</div>

डिसमिस बटणे

data-dismiss="alert"मोबाइल सफारी आणि मोबाइल ऑपेरा ब्राउझर, विशेषता व्यतिरिक्त , टॅग href="#"वापरताना अलर्ट डिसमिस करण्यासाठी एक आवश्यक आहे.<a>

<a href = "#" वर्ग = "close" data-dismiss = "alert" > × </a>   

वैकल्पिकरित्या, तुम्ही डेटा विशेषता असलेले घटक वापरू शकता <button>, जे आम्ही आमच्या डॉक्ससाठी निवडले आहे. वापरताना <button>, आपण समाविष्ट करणे आवश्यक आहे type="button"किंवा आपले फॉर्म सबमिट करू शकत नाहीत.

<button type = "button" class = "close" data-dismiss = "alert" > × </button>   

JavaScript द्वारे सूचना डिसमिस करा

सूचना जलद आणि सहज डिसमिस करण्यासाठी jQuery प्लगइन वापरा .

पर्याय

दीर्घ संदेशांसाठी, अॅलर्ट रॅपरच्या वरच्या आणि खालच्या बाजूस जोडून पॅडिंग वाढवा .alert-block.

<div वर्ग = "अलर्ट अलर्ट-ब्लॉक" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <h4> चेतावणी! </h4>
  स्वत: ला उत्तम तपासा, तुम्ही नाही...
</div>

संदर्भित पर्याय

अलर्टचा अर्थ बदलण्यासाठी पर्यायी वर्ग जोडा.

चूक किंवा धोका

<div वर्ग = "सूचना इशारा-त्रुटी" > 
  ...
</div>

यश

<div वर्ग = "सूचना अलर्ट-यशस्वी" > 
  ...
</div>

माहिती

<div वर्ग = "अलर्ट अलर्ट-माहिती" > 
  ...
</div>

उदाहरणे आणि मार्कअप

बेसिक

उभ्या ग्रेडियंटसह डीफॉल्ट प्रगती बार.

<div वर्ग = "प्रगती" > 
  <div वर्ग = "बार" शैली = " रुंदी : 60 %; " ></div>   
</div>

पट्टेदार

स्ट्रीप इफेक्ट तयार करण्यासाठी ग्रेडियंट वापरते. IE7-8 मध्ये उपलब्ध नाही.

<div class = "progress progress-striped" > 
  <div वर्ग = "बार" शैली = " रुंदी : 20 %; " ></div>   
</div>

अॅनिमेटेड

उजवीकडून डावीकडे पट्टे अॅनिमेट करण्यासाठी .activeजोडा . .progress-stripedIE च्या सर्व आवृत्त्यांमध्ये उपलब्ध नाही.

<div class = "progress progress-striped active" > 
  <div वर्ग = "बार" शैली = " रुंदी : 40 %; " ></div>   
</div>

स्टॅक केलेले

.progressत्यांना स्टॅक करण्यासाठी अनेक बार एकाच ठिकाणी ठेवा.

<div वर्ग = "प्रगती" > 
  <div class = "bar bar-success" शैली = " रुंदी : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " रुंदी : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " रुंदी : 10 %; " ></div>   
</div>

पर्याय

अतिरिक्त रंग

प्रगती बार सुसंगत शैलींसाठी काही समान बटण आणि अलर्ट वर्ग वापरतात.

<div वर्ग = "प्रगती प्रगती-माहिती" > 
  <div class = "bar" शैली = " रुंदी : 20 % " ></div>   
</div>
<div वर्ग = "प्रगती प्रगती-यश" > 
  <div class = "bar" शैली = " रुंदी : 40 % " ></div>   
</div>
<div वर्ग = "प्रगती प्रगती चेतावणी" > 
  <div class = "bar" शैली = " रुंदी : 60 % " ></div>   
</div>
<div वर्ग = "प्रगती प्रगती-धोका" > 
  <div वर्ग = "बार" शैली = " रुंदी : 80 % " ></div>   
</div>

पट्टेदार बार

घन रंगांप्रमाणेच, आमच्याकडे विविध स्ट्रीप प्रोग्रेस बार आहेत.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" शैली = " रुंदी : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" शैली = " रुंदी : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" शैली = " रुंदी : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div वर्ग = "बार" शैली = " रुंदी : 80 % " ></div>   
</div>

ब्राउझर समर्थन

प्रोग्रेस बार त्यांचे सर्व प्रभाव साध्य करण्यासाठी CSS3 ग्रेडियंट, संक्रमण आणि अॅनिमेशन वापरतात. ही वैशिष्ट्ये IE7-9 किंवा Firefox च्या जुन्या आवृत्त्यांमध्ये समर्थित नाहीत.

Internet Explorer 10 आणि Opera 12 पेक्षा पूर्वीच्या आवृत्त्या अॅनिमेशनला सपोर्ट करत नाहीत.

विविध प्रकारचे घटक (जसे की ब्लॉग टिप्पण्या, ट्विट्स इ.) तयार करण्यासाठी अमूर्त ऑब्जेक्ट शैली ज्यात मजकूर सामग्रीसह डावीकडे किंवा उजवीकडे संरेखित प्रतिमा वैशिष्ट्यीकृत आहे.

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

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

मीडिया हेडिंग

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.

मीडिया हेडिंग

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.

मीडिया हेडिंग

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.

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

मीडिया यादी

थोड्या अतिरिक्त मार्कअपसह, तुम्ही सूचीमध्ये मीडिया वापरू शकता (टिप्पणी थ्रेड किंवा लेख सूचीसाठी उपयुक्त).

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

विहिरी

एखाद्या घटकावर इनसेट इफेक्ट देण्यासाठी विहीर वापरा.

<div वर्ग = "वेल" > 
  ...
</div>

पर्यायी वर्ग

दोन पर्यायी सुधारक वर्गांसह पॅडिंग आणि गोलाकार कोपरे नियंत्रित करा.

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

<div वर्ग = "चांगले-छोटे" > 
  ...
</div>

चिन्ह बंद करा

मॉडेल आणि सूचनांसारखी सामग्री डिसमिस करण्यासाठी जेनेरिक क्लोज आयकॉन वापरा.

<button class = "बंद करा" > × </button> 

href="#"तुम्ही अँकर वापरत असल्‍यास iOS डिव्‍हाइसेसना क्लिक इव्‍हेंटसाठी आवश्‍यक आहे.

<a वर्ग = "बंद करा" href = "#" > × </a>  

मदतनीस वर्ग

लहान प्रदर्शन किंवा वर्तन बदलांसाठी साधे, केंद्रित वर्ग.

.डावीकडे ओढा

बाकी एक घटक फ्लोट करा

वर्ग = "डावीकडे खेचा"

. खेचा - डावीकडे {
  फ्लोट : डावीकडे ;
}

.उजवीकडे ओढा

एक घटक उजवीकडे फ्लोट करा

वर्ग = "उजवीकडे खेचा"

. खेचा - उजवीकडे {
  फ्लोट : बरोबर ;
}

.निःशब्द

घटकाचा रंग यामध्ये बदला#999

वर्ग = "निःशब्द"

. निःशब्द {
  रंग : #999; 
}

.clearfix

floatकोणत्याही घटकावर साफ करा

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

. क्लिअरफिक्स {
  * झूम : 1 ; 
  &: आधी ,
  &: नंतर {
    प्रदर्शन : टेबल ;
    सामग्री : "" ; 
  }
  &: नंतर {
    स्पष्ट : दोन्ही ;
  }
}