उदाहरण

लिङ्कहरूको सूचीहरू प्रदर्शन गर्नको लागि टगल गर्न मिल्ने, प्रासंगिक मेनु। ड्रपडाउन JavaScript प्लगइनसँग अन्तरक्रियात्मक बनाइयो ।

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <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>

मार्कअप

केवल ड्रपडाउन मेनु हेर्दै, यहाँ आवश्यक 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 class = "डिभाइडर" ></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 = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > नियमित लिङ्क </a></li>  
  <li वर्ग = "असक्षम" ><a tabindex = "-1" href = "#" > असक्षम गरिएको लिङ्क </a></li>   
  <li><a tabindex = "-1" href = "#" > अर्को लिङ्क </a></li>  
</ul>

ड्रपडाउनहरूमा उप मेनुहरू

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

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

उदाहरणहरू

दुई आधारभूत विकल्पहरू, दुई थप विशिष्ट भिन्नताहरू सहित।

एकल बटन समूह

.btnभित्र बटनहरूको श्रृंखला लपेट्नुहोस् .btn-group।

<div class = "btn-group" > 
  <बटन वर्ग = "btn" > बायाँ </ बटन> 
  <बटन वर्ग = "btn" > मध्य </ बटन> 
  <बटन वर्ग = "btn" > दायाँ </ बटन> 
</div>

बहु बटन समूहहरू

थप जटिल कम्पोनेन्टहरूको लागि <div class="btn-group">a मा सेटहरू मिलाउनुहोस् ।<div class="btn-toolbar">

<div class = "btn-उपकरणपट्टी" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

ठाडो बटन समूहहरू

तेर्सो भन्दा ठाडो रूपमा स्ट्याक गरिएको बटनहरूको सेट बनाउनुहोस्।

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

चेकबक्स र रेडियो स्वादहरू

बटन समूहहरूले रेडियोको रूपमा पनि काम गर्न सक्छन्, जहाँ केवल एक बटन सक्रिय हुन सक्छ, वा चेकबक्सहरू, जहाँ बटनहरूको संख्या सक्रिय हुन सक्छ। यसको लागि जाभास्क्रिप्ट कागजातहरू हेर्नुहोस् ।

बटन समूहहरूमा ड्रपडाउनहरू

हेड अप!उचित रेन्डरिङको लागि ड्रपडाउनहरू भएका बटनहरू व्यक्तिगत रूपमा आफ्नै .btn-groupभित्र बेरिएको हुनुपर्छ।.btn-toolbar

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

ड्रपडाउन मेनुलाई a भित्र राखेर .btn-groupर उचित मेनु मार्कअप प्रदान गरेर ट्रिगर गर्न कुनै पनि बटन प्रयोग गर्नुहोस्।

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "ड्रपडाउन" href = "#" >   
    कार्य
    <span class = "caret" ></span> 
  </a>
  <ul class = "ड्रपडाउन-मेनु" > 
    <!-- ड्रपडाउन मेनु लिङ्कहरू -->
  </ul>
</div>

सबै बटन आकारहरूसँग काम गर्दछ

बटन ड्रपडाउनहरू कुनै पनि साइजमा काम गर्दछ: .btn-large, .btn-smallवा .btn-mini।

जाभास्क्रिप्ट चाहिन्छ

बटन ड्रपडाउनहरूलाई काम गर्न बुटस्ट्र्याप ड्रपडाउन प्लगइन आवश्यक पर्दछ ।

केही अवस्थामा - जस्तै मोबाइल - ड्रपडाउन मेनुहरू भ्यूपोर्ट बाहिर विस्तार हुनेछ। तपाईले पङ्क्तिबद्धतालाई म्यानुअल रूपमा वा अनुकूलन JavaScript मार्फत समाधान गर्न आवश्यक छ।

विभाजित बटन ड्रपडाउनहरू

बटन समूह शैलीहरू र मार्कअपमा निर्माण गर्दै, हामी सजिलैसँग विभाजित बटन सिर्जना गर्न सक्छौं। स्प्लिट बटनहरूले बायाँमा मानक कार्य र सान्दर्भिक लिङ्कहरूसँग दायाँमा ड्रपडाउन टगल सुविधा दिन्छ।

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

आकारहरू

अतिरिक्त बटन वर्गहरू .btn-mini, .btn-smallवा .btn-largeसाइजिङको लागि प्रयोग गर्नुहोस्।

<div class = "btn-group" > 
  <बटन वर्ग = "btn btn-mini" > कार्य </ बटन> 
  <बटन वर्ग = "btn btn-mini dropdown-toggle" data-toggle = "ड्रपडाउन" >  
    <span class = "caret" ></span> 
  </ बटन>
  <ul class = "ड्रपडाउन-मेनु" > 
    <!-- ड्रपडाउन मेनु लिङ्कहरू -->
  </ul>
</div>

ड्रपअप मेनुहरू

ड्रपडाउन मेनुहरू तलबाट माथिको तत्काल अभिभावकमा एकल वर्ग थपेर पनि टगल गर्न सकिन्छ .dropdown-menu। यसले दिशालाई फ्लिप गर्नेछ .caretर माथिल्लो तलको सट्टा तलबाट माथि सार्नको लागि मेनु आफैंलाई पुन: स्थान दिन्छ।

<div वर्ग = "btn-समूह ड्रपअप" > 
  <बटन वर्ग = "btn" > ड्रपअप </ बटन> 
  <बटन वर्ग = "btn ड्रपडाउन-टगल" डेटा-टगल = "ड्रपडाउन" >  
    <span class = "caret" ></span> 
  </ बटन>
  <ul class = "ड्रपडाउन-मेनु" > 
    <!-- ड्रपडाउन मेनु लिङ्कहरू -->
  </ul>
</div>

लाइटवेट पूर्वनिर्धारित समान मार्कअप, विभिन्न वर्गहरू

यहाँका सबै एनएभ कम्पोनेन्टहरू - ट्याबहरू, चक्कीहरू, र सूचीहरू - एउटै आधार मार्कअप र शैलीहरू.nav कक्षा मार्फत साझेदारी गर्छन्।

आधारभूत ट्याबहरू

लिङ्कहरूको नियमित लिनुहोस् <ul>र थप्नुहोस् .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "सक्रिय" > 
    <a href="#" > घर </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

आधारभूत चक्कीहरू

उही HTML लिनुहोस्, तर .nav-pillsयसको सट्टा प्रयोग गर्नुहोस्:

<ul class = "nav nav-pills" > 
  <li class = "सक्रिय" > 
    <a href="#" > घर </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

असक्षम राज्य

कुनै पनि एनएभ कम्पोनेन्टका लागि (ट्याबहरू, चक्कीहरू, वा सूची), खैरो लिङ्कहरू थप्नुहोस् .disabledर कुनै होभर प्रभावहरू छैनन् । लिङ्कहरू क्लिक गर्न योग्य रहनेछन्, तथापि, तपाईंले विशेषता नहटाएसम्म href। वैकल्पिक रूपमा, तपाइँ ती क्लिकहरू रोक्न अनुकूलन JavaScript लागू गर्न सक्नुहुन्छ।

<ul class = "nav nav-pills" > 
  ...
  <li वर्ग = "असक्षम" ><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 class = "ड्रपडाउन" > 
    <a वर्ग = "ड्रपडाउन-टगल" 
       data-toggle = "ड्रपडाउन"
       href = "#" >
        ड्रपडाउन
        <b class = "caret" ></b> 
      </a>
    <ul class = "ड्रपडाउन-मेनु" > 
      <!-- लिङ्कहरू -->
    </ul>
  </li>
</ul>

ड्रपडाउन संग गोली

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

Nav सूचीहरू

वैकल्पिक हेडरहरूको साथ एनएभि लिङ्कहरूको समूहहरू निर्माण गर्न सरल र सजिलो तरिका। तिनीहरू OS X मा खोजकर्ता जस्तै साइडबारहरूमा राम्रो प्रयोग गरिन्छ।

उदाहरण nav सूची

लिङ्कहरूको सूची लिनुहोस् र थप्नुहोस् 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 class = "डिभाइडर" ></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 वर्ग = "ट्याब-फलक सक्रिय" आईडी = "ट्याब१" >  
      <p> म खण्ड १ मा छु। </p>
    </div>
    <div class = "tab- pane" id = "tab2" >  
      <p> नमस्ते, म खण्ड २ मा छु। </p>
    </div>
  </div>
</div>

ट्याबहरूमा फेड

ट्याबहरू फेड इन बनाउनको लागि, .fadeप्रत्येकमा थप्नुहोस् .tab-pane।

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

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

कुनै पनि दिशामा ट्याबबल

तल ट्याबहरू

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>

Navbar अवयवहरू

ब्रान्ड

तपाईंको ब्रान्ड वा परियोजनाको नाम देखाउनको लागि एउटा साधारण लिङ्कलाई एङ्कर ट्याग मात्र चाहिन्छ।

<a वर्ग = "ब्रान्ड" href = "#" > परियोजनाको नाम </a>  

Nav लिङ्कहरू

नेभी वस्तुहरू क्रमबद्ध सूचीहरू मार्फत थप्न सरल छन्।

<ul class = "nav" > 
  <li class = "सक्रिय" > 
    <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यसलाई राम्ररी पङ्क्तिबद्ध गर्नुहोस्।

<form वर्ग = "navbar-form पुल-बायाँ" > 
  <इनपुट प्रकार = "पाठ" वर्ग = "span2" >  
  <बटन प्रकार = "सबमिट" वर्ग = "btn" > बुझाउनुहोस् </ बटन>  
</form>

खोज फारम

थप अनुकूलित खोज फारमको .navbar-searchलागि , नेभबारमा विशेष शैलीहरूको लागि इनपुटमा formर थप्नुहोस्।.search-query

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

कम्पोनेन्ट पङ्क्तिबद्धता

एनएभि लिङ्कहरू पङ्क्तिबद्ध गर्नुहोस्, खोज फारम, वा पाठ, .pull-leftवा .pull-rightउपयोगिता वर्गहरू प्रयोग गर्नुहोस्। दुबै वर्गहरूले निर्दिष्ट दिशामा CSS फ्लोट थप्नेछन्।

ड्रपडाउनहरू प्रयोग गर्दै

अलिकति मार्कअप र ड्रपडाउन जाभास्क्रिप्ट प्लगइनको साथ एनएभिमा ड्रपडाउनहरू र ड्रपअपहरू थप्नुहोस् ।

<ul class = "nav" > 
  <li class = "ड्रपडाउन" > 
    <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 कार्यान्वयन गर्न, आफ्नो navbar सामग्री समावेश div .nav-collapse.collapseमा बेर्नुहोस्, र navbar टगल बटन, थप्नुहोस् .btn-navbar।

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div वर्ग = "कन्टेनर" > 
 
      <!-- .btn-navbar लाई संक्षिप्त गरिएको नेभबार सामग्रीको लागि टगलको रूपमा प्रयोग गरिन्छ -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- यदि तपाइँ यसलाई देखाउन चाहनुहुन्छ भने ब्रान्डलाई त्यहाँ छोड्न निश्चित हुनुहोस् -->
      <a वर्ग = "ब्रान्ड" href = "#" > परियोजनाको नाम </a>  
 
      <!-- तपाईंले 940px वा कममा लुकाउन चाहनुभएको सबै कुरा यहाँ भित्र राख्नुहोस् -->
      <div class = "nav-collaps colapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </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 वर्ग = "सक्रिय" > डाटा </li> 
</ul>

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

Rdio द्वारा प्रेरित सरल पृष्ठांकन, अनुप्रयोगहरू र खोज परिणामहरूको लागि उत्कृष्ट। ठूलो ब्लक हराउन गाह्रो छ, सजिलै मापनयोग्य छ, र ठूलो क्लिक क्षेत्रहरू प्रदान गर्दछ।

<div वर्ग = "पृष्ठांकन" > 
  <ul>
    <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> 
    <li><a href = "#" > ५ </a></li> 
    <li><a href = "#" > अर्को </a></li> 
  </ul>
</div>

विकल्पहरू

असक्षम र सक्रिय राज्यहरू

लिङ्कहरू विभिन्न परिस्थितिहरूको लागि अनुकूलन योग्य छन्। .disabledक्लिक गर्न नसकिने लिङ्कहरूको लागि र .activeहालको पृष्ठ संकेत गर्न प्रयोग गर्नुहोस्।

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

इच्छित शैलीहरू कायम राख्दा क्लिक कार्यक्षमता हटाउनको लागि तपाईंले वैकल्पिक रूपमा सक्रिय वा असक्षम एङ्करहरू स्प्यानहरूको लागि स्वैप गर्न सक्नुहुन्छ।

<div वर्ग = "पृष्ठांकन" > 
  <ul>
    <li वर्ग = "असक्षम" ><span> « </span></li> 
    <li class = "active" ><span> १ </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 class = "अघिल्लो" > 
    <a href = "#" > ← पुरानो </a> 
  </li>
  <li class = "next" > 
    <a href = "#" > नयाँ → </a> 
  </li>
</ul>

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

पेजर लिङ्कहरूले .disabledपृष्ठांकनबाट सामान्य उपयोगिता वर्ग पनि प्रयोग गर्दछ।

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

लेबलहरू

ब्याजहरू

सजिलै संग मिल्ने

सजिलो कार्यान्वयनको लागि, :emptyकुनै पनि सामग्री भित्र नहुँदा लेबलहरू र ब्याजहरू (CSS को चयनकर्ता मार्फत) संक्षिप्त हुनेछन्।

नायक एकाई

तपाईंको साइटमा मुख्य सामग्री प्रदर्शन गर्न हल्का, लचिलो कम्पोनेन्ट। यसले मार्केटिङ र सामग्री-भारी साइटहरूमा राम्रोसँग काम गर्दछ।

<div वर्ग = "नायक-इकाई" > 
  <h1> शीर्षक </ h1>
  <p> ट्यागलाइन </p>
  <p>
    <a वर्ग = "btn btn-प्राथमिक btn-लार्ज" > 
      अझै सिक
    </a>
  </p>
</div>

पृष्ठ हेडर

h1पृष्ठमा सामग्रीको खण्डहरू उचित रूपमा स्पेस आउट गर्न र खण्डहरू विभाजन गर्नको लागि एउटा साधारण शेल । यसले h1पूर्वनिर्धारित small, तत्व र अन्य धेरै कम्पोनेन्टहरू (अतिरिक्त शैलीहरूसँग) प्रयोग गर्न सक्छ।

<div वर्ग = "पृष्ठ-हेडर" > 
  <h1> उदाहरण पृष्ठ हेडर <small> हेडरको लागि Subtext </small></h1>
</div>

पूर्वनिर्धारित थम्बनेलहरू

पूर्वनिर्धारित रूपमा, बुटस्ट्र्यापको थम्बनेलहरू न्यूनतम आवश्यक मार्कअपको साथ लिङ्क गरिएका छविहरू प्रदर्शन गर्न डिजाइन गरिएका छन्।

उच्च अनुकूलन योग्य

थोरै अतिरिक्त मार्कअपको साथ, थम्बनेलहरूमा शीर्षकहरू, अनुच्छेदहरू, वा बटनहरू जस्ता कुनै पनि प्रकारको HTML सामग्री थप्न सम्भव छ।

थम्बनेलहरू किन प्रयोग गर्ने

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

सरल, लचिलो मार्कअप

थम्बनेल मार्कअप सरल छ - तत्वहरूको ulकुनै पनि संख्याको साथ liसबै आवश्यक छ। यो अति लचिलो पनि छ, कुनै पनि प्रकारको सामग्रीलाई तपाईंको सामग्रीहरू र्‍याप गर्न अलि बढी मार्कअपको साथ अनुमति दिँदै।

ग्रिड स्तम्भ आकारहरू प्रयोग गर्दछ

अन्तमा, थम्बनेल कम्पोनेन्टले थम्बनेल आयामहरूको नियन्त्रणको लागि अवस्थित ग्रिड प्रणाली वर्गहरू जस्तै .span2वा — प्रयोग गर्दछ।.span3

मार्कअप

पहिले उल्लेख गरिएझैं, थम्बनेलहरूको लागि आवश्यक मार्कअप हल्का र सीधा छ। यहाँ लिङ्क गरिएका छविहरूको लागि पूर्वनिर्धारित सेटअपमा एक नजर छ :

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

थम्बनेलहरूमा अनुकूलन HTML सामग्रीको लागि, मार्कअप थोरै परिवर्तन हुन्छ। ब्लक स्तर सामग्रीलाई कहीं पनि अनुमति दिनको लागि, हामी यस प्रकारको <a>लागि स्वैप गर्छौं <div>:

<ul class = "थम्बनेल" > 
  <li class = "span4" > 
    <div वर्ग = "थम्बनेल" > 
      <img data-src = "holder.js/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"वा तपाईंको फारमहरू पेश नगर्न सक्छ।

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

JavaScript मार्फत अलर्टहरू खारेज गर्नुहोस्

अलर्टहरू छिटो र सजिलै खारेज गर्न अलर्टहरू jQuery प्लगइन प्रयोग गर्नुहोस् ।

विकल्पहरू

लामो सन्देशहरूको लागि, थपेर अलर्ट र्यापरको माथि र तल प्याडिङ बढाउनुहोस् .alert-block।

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

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

अलर्टको अर्थ परिवर्तन गर्न वैकल्पिक कक्षाहरू थप्नुहोस्।

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

<div वर्ग = "सतर्क चेतावनी-त्रुटि" > 
  ...
</div>

सफलता

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

जानकारी

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

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

आधारभूत

ठाडो ढाँचाको साथ पूर्वनिर्धारित प्रगति पट्टी।

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

धारीदार

स्ट्रिप गरिएको प्रभाव सिर्जना गर्न ग्रेडियन्ट प्रयोग गर्दछ। IE7-8 मा उपलब्ध छैन।

<div class = "progress progress-striped" > 
  <div वर्ग = "पट्टी" शैली = " चौडाइ : २० %; " ></div>   
</div>

एनिमेटेड

दायाँ देखि बायाँ स्ट्रिपहरू एनिमेसन गर्न मा .activeथप्नुहोस् । .progress-stripedIE को सबै संस्करणहरूमा उपलब्ध छैन।

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

स्ट्याक गरिएको

.progressतिनीहरूलाई स्ट्याक गर्न एकै ठाउँमा धेरै बारहरू राख्नुहोस् ।

<div वर्ग = "प्रगति" > 
  <div class = "bar bar-success" शैली = " चौडाइ : 35 %; " ></div>   
  <div वर्ग = "पट्टी बार-चेतावनी" शैली = " चौडाइ : २० %; " ></div>   
  <div class = "बार बार-खतरनाक" शैली = " चौडाइ : 10 %; " ></div>   
</div>

विकल्पहरू

अतिरिक्त रंगहरू

प्रगति पट्टीहरूले समान शैलीहरूका लागि केही समान बटन र अलर्ट कक्षाहरू प्रयोग गर्छन्।

<div वर्ग = "प्रगति प्रगति जानकारी" > 
  <div वर्ग = "पट्टी" शैली = " चौडाइ : २० % " ></div>   
</div>
<div वर्ग = "प्रगति प्रगति-सफलता" > 
  <div class = "bar" शैली = " चौडाइ : 40 % " ></div>   
</div>
<div वर्ग = "प्रगति प्रगति चेतावनी" > 
  <div class = "bar" शैली = " चौडाइ : 60 % " ></div>   
</div>
<div वर्ग = "प्रगति प्रगति खतरा" > 
  <div class = "bar" शैली = " चौडाइ : 80 % " ></div>   
</div>

धारीदार बारहरू

ठोस रङहरू जस्तै, हामीसँग विभिन्न धारीदार प्रगति पट्टीहरू छन्।

<div class = "progress progress-info progress-striped" > 
  <div वर्ग = "पट्टी" शैली = " चौडाइ : २० % " ></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 वर्ग = "प्रगति प्रगति-खतरा प्रगति-धारीदार" > 
  <div class = "bar" शैली = " चौडाइ : 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। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis। Fusce condimentum nunc ac nisi vulputate fringilla। डोनेक लासिनिया कन्गु फेलिस इन फौसिबस।

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

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis। Fusce condimentum nunc ac nisi vulputate fringilla। डोनेक लासिनिया कन्गु फेलिस इन फौसिबस।

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

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis। Fusce condimentum nunc ac nisi vulputate fringilla। डोनेक लासिनिया कन्गु फेलिस इन फौसिबस।

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

मिडिया सूची

अलिकति अतिरिक्त मार्कअपको साथ, तपाइँ सूची भित्र मिडिया प्रयोग गर्न सक्नुहुन्छ (टिप्पणी थ्रेड वा लेख सूचीहरूको लागि उपयोगी)।

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

वेल्स

एक तत्व मा एक इनसेट प्रभाव दिन को लागी एक साधारण प्रभाव को रूप मा प्रयोग गर्नुहोस्।

<div वर्ग = "राम्रो" > 
  ...
</div>

वैकल्पिक कक्षाहरू

दुई वैकल्पिक परिमार्जक वर्गहरूको साथ प्याडिङ र गोलाकार कुनाहरू नियन्त्रण गर्नुहोस्।

<div वर्ग = "राम्रो राम्रो-ठूलो" > 
  ...
</div>

<div वर्ग = "राम्रो राम्रो-सानो" > 
  ...
</div>

बन्द आइकन

मोडल र अलर्टहरू जस्ता सामग्री खारेज गर्नका लागि जेनेरिक क्लोज आइकन प्रयोग गर्नुहोस्।

<बटन वर्ग = "बन्द" > &समय; </ बटन> 

iOS यन्त्रहरूलाई क्लिक घटनाहरूको लागि आवश्यक छ href="#"यदि तपाइँ बरु एङ्कर प्रयोग गर्नुहुन्छ।

<a वर्ग = "बंद" href = "#" > &समय; </a>  

सहायक कक्षाहरू

सानो प्रदर्शन वा व्यवहार ट्वीकका लागि सरल, केन्द्रित कक्षाहरू।

बायाँ तान्नुहोस्

बायाँ तत्व फ्लोट गर्नुहोस्

वर्ग = "बायाँ तान्नुहोस्"

। तान्नुहोस् - बायाँ {
  फ्लोट : बायाँ ;
}

दायाँ तान्नुहोस्

एक तत्व दायाँ फ्लोट गर्नुहोस्

वर्ग = "दायाँ तान्नुहोस्"

। तान्नुहोस् - दायाँ {
  फ्लोट : दायाँ ;
}

.म्युट

तत्वको रङमा परिवर्तन गर्नुहोस्#999

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

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

.clearfix

floatकुनै पनि तत्व मा खाली गर्नुहोस्

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

। क्लियरफिक्स {
  * जुम : 1 ; 
  &: पहिले ,
  &: पछि {
    प्रदर्शन : तालिका ;
    सामग्री : "" ; 
  }
  &: पछि {
    स्पष्ट : दुबै ;
  }
}