उदाहरण

लिङ्कानां सूचीं प्रदर्शयितुं टॉगल-योग्यं, सन्दर्भ-मेनू । ड्रॉपडाउन जावास्क्रिप्ट प्लगइन इत्यनेन सह अन्तरक्रियाशीलं कृतम् .

<ul class="ड्रॉपडाउन-मेनू" भूमिका="मेनू" aria-labelledby="ड्रॉपडाउनमेनू"> class = "ड्रॉपडाउन-मेनू" भूमिका = "मेनू" aria-labelledby = "ड्रॉपडाउनमेनू" >  
  <li><a tabindex = "-1" href = "#" > क्रिया </a></li>  
  <li><a tabindex = "-1" href = "#" > अन्यत् क्रिया </a></li>  
  <li><a tabindex = "-1" href = "#" > अन्यत् किमपि अत्र </a></li>  
  <li class = "विभाजक" </li> 
  <li><a tabindex = "-1" href = "#" > पृथक् लिङ्क् </a></li>  
</ul> इति

मार्कअप

केवलं ड्रॉप् डाउन मेन्यू पश्यन्, अत्र आवश्यकं HTML अस्ति । भवद्भिः ड्रॉप् डाउन इत्यस्य ट्रिगरं ड्रॉप् डाउन मेन्यू च अन्तः वेष्टयितुं आवश्यकम् .dropdown, अथवा अन्यत् एलिमेण्ट् यत् घोषयति position: relative;। ततः केवलं मेनू रचयन्तु।

<div class="अवरोहणम्"> class = "ड्रॉपडाउन" >
  <!-- ड्रॉपडाउन् टॉगल कर्तुं लिङ्क् अथवा बटन् -->
  <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-righta मध्ये योजयन्तु .dropdown-menuदक्षिणतः ड्रॉपडाउन मेनू संरेखयन्तु ।

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

मेनू विकल्पों को अक्षम किया गया

लिङ्क् अक्षमीकरणाय ड्रॉप् डाउन मध्ये .disableda मध्ये योजयन्तु ।<li>

<ul class="ड्रॉपडाउन-मेनू" भूमिका="मेनू" aria-labelledby="ड्रॉपडाउनमेनू"> class = "ड्रॉपडाउन-मेनू" भूमिका = "मेनू" 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 class="ड्रॉपडाउन-मेनू" भूमिका="मेनू" aria-labelledby="dLabel"> वर्ग = "ड्रॉपडाउन-मेनू" भूमिका = "मेनू" aria-labelledby = "dLabel" >  
  ...
  <li class = "ड्रॉपडाउन-उपमेनू" > 
    <a tabindex = "-1" href = "#" > अधिकविकल्पाः </a>  
    <ul class = "ड्रॉपडाउन-मेनू" > 
      ...
    </ul> इति
  </li> इति
</ul> इति

उदाहरणानि

द्वौ मूलविकल्पौ, द्वौ अधिकविशिष्टौ भिन्नताभिः सह।

एकल बटन समूह

.btnin इत्यनेन बटन्-श्रृङ्खलां वेष्टयन्तु .btn-group।

<दिव वर्ग="बटन-समूह"> वर्ग = "btn-समूह" >
  <button class = "btn" > वाम </button> 
  <button class = "btn" > मध्य </button> 
  <button class = "btn" > दक्षिण </button> 
</div> इति

अनेक बटन समूह

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

<div class="btn-उपकरणपट्टिका"> class = "btn-उपकरणपट्टिका" >
  <div वर्ग = "btn-समूह" > 
    ...
  </div> इति
</div> इति

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

बटनस्य समुच्चयं क्षैतिजरूपेण न अपितु लम्बवत् स्तम्भितं दृश्यते इति कुर्वन्तु ।

<div class="btn-समूहः btn-समूहः-ऊर्ध्वाधरः"> class = "btn-समूह btn-समूह-ऊर्ध्वाधर" >
  ...
</div> इति

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

बटनसमूहाः रेडियोरूपेण अपि कार्यं कर्तुं शक्नुवन्ति, यत्र केवलं एकं बटनं सक्रियं भवितुम् अर्हति, अथवा चेकबॉक्स, यत्र किमपि संख्यायां बटनं सक्रियं भवितुम् अर्हति । तदर्थं जावास्क्रिप्ट् डॉक्स पश्यन्तु ।

बटनसमूहेषु ड्रॉपडाउन्स्

शिरः उपरि !ड्रॉप्डाउन्स् सहितं बटन्स् सम्यक् प्रतिपादनार्थं .btn-groupa अन्तः स्वकीयेषु व्यक्तिगतरूपेण वेष्टितव्यम् ।.btn-toolbar

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

a इत्यस्य अन्तः स्थापयित्वा .btn-groupसमुचितं मेनू मार्कअपं च प्रदातुं ड्रॉप् डाउन मेनू ट्रिगर कर्तुं कस्यापि बटनस्य उपयोगं कुर्वन्तु ।

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

सर्वैः बटन् आकारैः सह कार्यं करोति

बटन ड्रॉपडाउन्स् कस्मिन् अपि आकारे कार्यं कुर्वन्ति: .btn-large, .btn-small, अथवा .btn-mini.

जावास्क्रिप्ट् आवश्यकम्

बटन् ड्रॉप् डाउन्स् कार्यं कर्तुं Bootstrap ड्रॉप् डाउन प्लगिन् इत्यस्य आवश्यकता भवति ।

केषुचित् सन्दर्भेषु—मोबाइल इव—द्रोप्डाउनमेनू दृश्यपोर्टतः बहिः विस्तारयिष्यन्ति । भवद्भिः संरेखणस्य समाधानं मैन्युअल् रूपेण अथवा कस्टम् जावास्क्रिप्ट् इत्यनेन करणीयम् ।

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

बटन् समूहशैल्याः मार्कअप च आधारेण वयं सहजतया विभक्तबटनं निर्मातुं शक्नुमः । विभक्तबटन् वामे मानकक्रिया तथा दक्षिणभागे सन्दर्भलिङ्कैः सह ड्रॉपडाउन टॉगल दर्शयति ।

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

आकाराः

अतिरिक्तबटनवर्गाणां उपयोगं कुर्वन्तु .btn-mini, .btn-small, अथवा .btn-largeआकारनिर्धारणार्थम् ।

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

ड्रॉपअप मेनू

- इत्यस्य तत्कालीन-मातृपित्रे एकं वर्गं योजयित्वा अधः उपरि अपि ड्रॉप्-डाउन-मेनू-इत्येतत् टोग्ल् कर्तुं शक्यते .dropdown-menu। इदं the इत्यस्य दिशां flip करिष्यति .caretतथा च मेनू स्वयं पुनः स्थापयिष्यति यत् उपरि अधः न स्थाने अधः उपरि गन्तुं शक्नोति ।

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

लघु पूर्वनिर्धारित समान मार्कअप, भिन्न वर्ग

अत्र सर्वे nav घटकाः—टैब्स्, गोलियां, सूचीः च—वर्गस्य माध्यमेन समानं आधारमार्कअपं शैल्यां च साझां कुर्वन्ति.nav ।

मूलभूत ट्याब्स्

लिङ्कानां नियमितं गृहीत्वा <ul>योजयन्तु .nav-tabs:

<ul class = "नव नव-टैब्स" > 
  <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-leftor .pull-rightutility classes इत्यस्य उपयोगं कुर्वन्तु । उभयवर्गः निर्दिष्टदिशि CSS float योजयिष्यति ।

स्टैक करने योग्य

यतः ट्याब्स् तथा गोलियां पूर्वनिर्धारितरूपेण क्षैतिजाः सन्ति, केवलं द्वितीयवर्गं योजयन्तु, .nav-stacked, येन ते लम्बवत् स्तम्भिताः दृश्यन्ते ।

स्तम्भित ट्याब्स्

<ul class = "नव नव-टैब्स नव-स्तम्भित" > 
  ...
</ul> इति

स्तम्भित गोलियाँ

<ul class = "नव नव-गोलियाँ नव-स्तम्भित" > 
  ...
</ul> इति

ड्रॉपडाउन्स्

किञ्चित् अतिरिक्त HTML सह ड्रॉपडाउन मेनू योजयन्तु तथा च ड्रॉपडाउन JavaScript प्लगिन् योजयन्तु |

ड्रॉपडाउन सहित ट्याब्स्

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

ड्रॉपडाउन सहित गोलियाँ

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

नव सूची

वैकल्पिकशीर्षकैः सह nav लिङ्कानां समूहानां निर्माणस्य सरलः सुलभः च उपायः । ते OS X इत्यस्मिन् Finder इत्यादिषु पार्श्वपट्टिकासु सर्वोत्तमरूपेण उपयुज्यन्ते ।

उदाहरण nav list

लिङ्कानां सूचीं गृहीत्वा योजयन्तु class="nav nav-list":

<ul class = "नव नव-सूची" > 
  <li class = "nav-header" > सूचीशीर्षकं </li> 
  <li class = "सक्रिय" ><a href = "#" > गृहम् </a></li>  
  <li><a href = "#" > पुस्तकालयः </a></li> 
  ...
</ul> इति

टीकाnav सूचीयाः अन्तः नेस्टिंग् कृते, class="nav nav-list"कस्मिन् अपि nested इत्यत्र समाविष्टं कुर्वन्तु <ul>।

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

class इत्यनेन सह रिक्तसूचीवस्तु निर्माय क्षैतिजविभाजकं योजयन्तु .divider, यथा तथा:

<ul class = "नव नव-सूची" > 
  ...
  <li class = "विभाजक" </li> 
  ...
</ul> इति

तब्बाबल नव

ट्याब्स् मार्गेण सामग्रीनां मध्ये टॉगल कर्तुं सरलेन प्लगिन् इत्यनेन स्वस्य ट्याब्स् जीवनं आनयन्तु। बूटस्ट्रैप् चतुर्षु शैल्यासु टैबबल् ट्याब्स् एकीकृतं करोति: उपरि (पूर्वनिर्धारितं), दक्षिणं, अधः, वामम् च ।

टैबबल् उदाहरणम्

ट्याब्स् ट्याब्बल् कर्तुं, .tab-paneप्रत्येकस्य ट्याब् कृते एकं with unique ID रचयन्तु तथा च तान् , मध्ये वेष्टयन्तु .tab-content।

<div class = "tabbable" > <!-- केवलं वाम/दक्षिण ट्याब्स् कृते आवश्यकम् -->  
  <ul class = "नव नव-टैब्स" > 
    <li class = "सक्रिय" ><a href = "#tab1" data-toggle = "टैब" > खण्डः १ </a></li>   
    <li><a href = "#tab2" data-toggle = "टैब" > खण्डः २ </a></li>  
  </ul> इति
  <div class = "टैब-सामग्री" > 
    <div वर्ग = "टैब-फलक सक्रिय" id = "tab1" >  
      <p> अहं खण्डे 1. </p> अस्मि
    </div> इति
    <div वर्ग = "टैब-फलक" id = "टैब 2" >  
      <p> हाउडी, अहं खण्डे २ अस्मि । </p>
    </div> इति
  </div> इति
</div> इति

ट्याब्स् मध्ये फीका भवति

.fadeट्याब्स् फीका भवितुं, प्रत्येकं योजयन्तु .tab-pane।

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

सर्वे टैबबल् ट्याब्स् अस्माकं लघु jQuery प्लगिन् द्वारा संचालिताः सन्ति। JavaScript docs पृष्ठे tabbable ट्याब्स् कथं जीवन्तं कर्तुं शक्यते इति विषये अधिकं पठन्तु .

कस्मिन् अपि दिशि तब्बाबलम्

अधः ट्याब्स्

HTML इत्यस्य क्रमं पलट्य अधः ट्याब्स् स्थापयितुं क्लास् योजयन्तु ।

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

वामभागे ट्याब्स्

वामभागे ट्याब्स् स्थापयितुं वर्गं स्वैप् कुर्वन्तु ।

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

दक्षिणे ट्याब्स्

दक्षिणभागे ट्याब्स् स्थापयितुं वर्गं स्वैप् कुर्वन्तु ।

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

मूल नवबर

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

<div class = "नवबार" > 
  <div class = "नवबार-अन्तर्गत" > 
    <a class = "brand" 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>  

नव लिङ्क्

Nav आइटम्स् अक्रमितसूचीद्वारा योजयितुं सरलाः सन्ति।

<उल वर्ग = "नव" > 
  <li वर्ग = "सक्रिय" > 
    <a href = "#" > गृहम् </a> 
  </li> इति
  <li><a href = "#" > लिङ्क </a></li> 
  <li><a href = "#" > लिङ्क </a></li> 
</ul> इति

रिक्तसूचीवस्तुनः सरलवर्गस्य च सह भवान् स्वस्य nav लिङ्केषु विभाजकान् सहजतया योजयितुं शक्नोति । केवलं लिङ्कानां मध्ये एतत् योजयन्तु:

<उल वर्ग = "नव" > 
  ...
  <li class = "विभाजक-ऊर्ध्वाधर" </li> 
  ...
</ul> इति

रूपाणि

नवबारस्य अन्तः एकं रूपं सम्यक् शैलीं कर्तुं, स्थापयितुं च, अधः दर्शितवत् समुचितवर्गान् योजयन्तु । पूर्वनिर्धारितरूपस्य कृते, include .navbar-formand either .pull-leftor .pull-rightसम्यक् संरेखयितुं ।

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

खोज प्रपत्र

अधिक-अनुकूलित-अन्वेषण-प्रपत्रस्य कृते, navbar मध्ये विशेषशैल्याः कृते निवेशे and .navbar-searchमध्ये योजयन्तु ।form.search-query

<form class = "नवबार-खोज पुल-वाम" > 
  <input type = "text" class = "खोज-प्रश्न" स्थानधारक = "खोज" >   
</form> इति

घटक संरेखण

nav लिङ्क्स्, अन्वेषणप्रपत्रं, पाठं वा संरेखयन्तु, .pull-leftअथवा .pull-rightउपयोगितावर्गाणां उपयोगं कुर्वन्तु । उभयवर्गः निर्दिष्टदिशि CSS float योजयिष्यति ।

ड्रॉपडाउन्स् इत्यस्य उपयोगेन

किञ्चित् मार्कअपेन सह nav मध्ये ड्रॉपडाउन्स् तथा ड्रॉपअप्स् योजयन्तु तथा च ड्रॉपडाउन्स् जावास्क्रिप्ट् प्लगिन् .

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

अधिकं मार्कअपं ज्ञातुं तथा च ड्रॉपडाउन्स् आह्वयितुं सूचनां प्राप्तुं JavaScript ड्रॉप्डाउन्स् दस्तावेजं पश्यन्तु ।

पाठ

पाठस्य ताराः , इत्यनेन सह तत्त्वे वेष्टयन्तु .navbar-text, प्रायः <p>सम्यक् लीडिंग् तथा वर्णार्थं टैग् इत्यत्र ।

वैकल्पिक प्रदर्शन भिन्नताएँ

navbar इत्येतत् viewport इत्यस्य उपरि वा अधः वा बाह्यतम div इत्यत्र अतिरिक्तवर्गेण सह स्थिरं कुर्वन्तु, .navbar.

शीर्ष पर स्थिर

योजयन्तु .navbar-fixed-topस्मर्यतां च यत् तस्य अधः गुप्तक्षेत्रस्य लेखानुरूपं न्यूनातिन्यूनं 40px paddingयोजयित्वा <body>. कोर Bootstrap 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, मध्ये लपेटयन्तु तथा च navbar टॉगल बटनं योजयन्तु, .btn-navbar.

<div class = "नवबार" > 
  <div class = "नवबार-अन्तर्गत" > 
    <div class = "पात्र" > 
 
      <!-- .btn-navbar इत्यस्य उपयोगः संकुचितस्य navbar सामग्रीयाः कृते टॉगलरूपेण भवति -->
      <a class = "btn btn-navbar" डेटा-टॉगल = "संकुचित" डेटा-लक्ष्य = ".nav-संकुचित" >   
        <span class = "चिह्न-पट्टिका" </span> 
        <span class = "चिह्न-पट्टिका" </span> 
        <span class = "चिह्न-पट्टिका" </span> 
      </a> इति
 
      <!-- यदि भवान् दर्शयितुम् इच्छति तर्हि ब्राण्डं तत्र बहिः अवश्यं त्यजतु -->
      <a class = "brand" href = "#" > परियोजना नाम </a>  
 
      <!-- यत्किमपि भवन्तः इच्छन्ति तत् 940px अथवा न्यूनतरं निगूढं भवतु, अत्र अन्तः स्थापयन्तु -->
      <div class = "नव-संकुचनं पतनम्" > 
        <!-- .नव, .नवबर-अन्वेषण, .नवबर-रूप इत्यादि -->
      </div> इति
 
    </div> इति
  </div> इति
</div> इति

उल्टा भिन्नता

योजयित्वा नवबारस्य रूपं परिवर्तयन्तु .navbar-inverse।

<div class = "नवबर नवबार-विलोम" > 
  ...
</div> इति

उदाहरणानि

एकं उदाहरणं दर्शितं यथा बहुपृष्ठेषु प्रदर्शितं भवेत्।

<ul class = "ब्रेडक्रम्ब" > 
  <li><a href = "#" > गृहम् </a> <span class = "विभाजकः" > / </span></li>   
  <li><a href = "#" > पुस्तकालयः </a> <span class = "विभाजकः" > / </span></li>   
  <li class = "सक्रिय" > दत्तांशः </li> 
</ul> इति

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

Rdio द्वारा प्रेरित सरल पृष्ठांकन, एप्स एवं खोज परिणामों के लिए महान। विशालः खण्डः कठिनः त्यक्तुं शक्यते, सुलभतया स्केल-करणीयः, बृहत् क्लिक्-क्षेत्राणि च प्रदाति ।

<div वर्ग = "पृष्ठांकन" > 
  <उल> इति
    <li><a href = "#" > पूर्व </a></li> 
    <li><a href = "#" > १ </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 class = "सक्रिय" ><a href = "#" > 1 </a></li>  
    ...
  </ul> इति
</div> इति

अभिप्रेतशैल्याः अवधारणं कुर्वन् क्लिक् कार्यक्षमतां दूरीकर्तुं भवान् वैकल्पिकरूपेण spans कृते सक्रियम् अथवा अक्षमम् एंकर्स् स्वैप् आउट् कर्तुं शक्नोति ।

<div वर्ग = "पृष्ठांकन" > 
  <उल> इति
    <li class = "अक्षम" ><span> « </span></li> इति 
    <li class = "सक्रिय" ><span> १ </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 class = "नायक-एकक" > 
  <h1> शीर्षकम् </h1>
  <p> टैग्लाइन् </p> इति
  <प> इति
    <a class = "btn btn-प्राथमिक btn-बड़े" > 
      अधिकं ज्ञातुं शक्नुवन्ति
    </a> इति
  </p> इति
</div> इति

पृष्ठ शीर्षक

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

<div class = "पृष्ठ-शीर्षक" > 
  <h1> उदाहरणं पृष्ठशीर्षकं <small> शीर्षकस्य उपपाठः </small></h1>
</div> इति

पूर्वनिर्धारित लघुचित्र

पूर्वनिर्धारितरूपेण, Bootstrap इत्यस्य लघुचित्रं न्यूनतमेन आवश्यकेन मार्कअपेन सह लिङ्क् कृतानि चित्राणि प्रदर्शयितुं डिजाइनं कृतम् अस्ति ।

अत्यधिक अनुकूलन योग्य

किञ्चित् अतिरिक्तं मार्कअपं कृत्वा, लघुचित्रेषु शीर्षकं, अनुच्छेदं, बटनं वा इत्यादीनां किमपि प्रकारस्य HTML सामग्रीं योजयितुं शक्यते ।

लघुचित्रस्य प्रयोगः किमर्थम्

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

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

लघुचित्रचिह्नं सरलम् अस्ति— ulकिमपि संख्यायां liतत्त्वैः सह a इति सर्वं आवश्यकम् अस्ति । इदमपि सुपर लचीला अस्ति, यत् भवतः सामग्रीं लपेटयितुं केवलं किञ्चित् अधिकं मार्कअपं कृत्वा किमपि प्रकारस्य सामग्रीं अनुमन्यते।

जालस्तम्भ आकाराणां उपयोगं करोति

अन्तिमे, लघुचित्रघटकः लघुचित्रपरिमाणानां नियन्त्रणार्थं विद्यमानजालप्रणालीवर्गाणां उपयोगं करोति—यथा .span2वा — ।.span3

मार्कअप

यथा पूर्वं उक्तं, लघुचित्रस्य कृते आवश्यकं मार्कअपं लघु, सरलं च भवति । अत्र लिङ्क् कृतानां चित्राणां पूर्वनिर्धारितं सेटअपं पश्यन्तु :

<ul class = "लघुचित्रम्" > 
  <li वर्ग = "span4" > 
    <a href = "#" वर्ग = "लघुचित्र" >  
      <img डेटा- src = "धारक.js/300x200" alt = "" >  
    </a> इति
  </li> इति
  ...
</ul> इति

लघुचित्रेषु कस्टम् HTML सामग्रीं कृते, मार्कअप किञ्चित् परिवर्तते । कुत्रापि ब्लॉक् लेवल सामग्रीं अनुमन्यते, वयं the <a>for a <div>like so इति स्वैप् कुर्मः:

<ul class = "लघुचित्रम्" > 
  <li वर्ग = "span4" > 
    <div class = "लघुचित्र" > 
      <img डेटा- src = "धारक.js/300x200" alt = "" >  
      <h3> लघुचित्रलेबल </h3>
      <p> लघुचित्र शीर्षक... </p>
    </div> इति
  </li> इति
  ...
</ul> इति

अधिकानि उदाहरणानि

भवतः कृते उपलब्धैः विविधैः जालवर्गैः सह भवतः सर्वान् विकल्पान् अन्वेष्टुम् अर्हति । भवन्तः भिन्न-भिन्न-आकारानाम् अपि मिश्रणं मेलनं च कर्तुं शक्नुवन्ति ।

पूर्वनिर्धारित चेतावनी

मूलभूतचेतावनीसचेतनासन्देशाय किमपि पाठं वैकल्पिकं निष्कासनबटनं च लपेटयन्तु .alert।

<div वर्ग = "सचेतना" > 
  <बटन प्रकार = "बटन" वर्ग = "बंद करें" data-dismiss = "सचेतना" > × </बटन> इति   
  <strong> चेतावनी ! </strong> Best check yo self, त्वं बहु उत्तमं न दृश्यते।
</div> इति

बटन को खारिज करें

data-dismiss="alert"मोबाईल सफारी तथा मोबाईल ओपेरा ब्राउज़र, विशेषता के अतिरिक्त , टैग href="#"का उपयोग करते समय अलर्टों के निराकरण के लिए एक की आवश्यकता होती है।<a>

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

वैकल्पिकरूपेण, भवान् <button>data attribute इत्यनेन सह एलिमेण्ट् इत्यस्य उपयोगं कर्तुं शक्नोति, यत् अस्माभिः अस्माकं docs कृते कर्तुं विकल्पितम् अस्ति । , इत्यस्य उपयोगं कुर्वन् <button>भवान् अवश्यमेव समावेशयति type="button"अथवा भवतां प्रपत्राणि न प्रस्तूयन्ते।

<बटन प्रकार = "बटन" वर्ग = "बंद करें" data-dismiss = "सचेतना" > × </बटन> इति   

जावास्क्रिप्ट् मार्गेण सचेतनानि निरस्तं कुर्वन्तु

अलर्ट्स् शीघ्रं सुलभं च निष्कासनार्थं alerts jQuery प्लगइन इत्यस्य उपयोगं कुर्वन्तु ।

विकल्पाः

दीर्घतरसन्देशानां कृते, , योजयित्वा अलर्ट-वेष्टनस्य उपरि अधः च गद्दी वर्धयन्तु .alert-block।

<div class = "सचेतना-सचेतना-अवरोध" > 
  <बटन प्रकार = "बटन" वर्ग = "बंद करें" data-dismiss = "सचेतना" > × </बटन> इति   
  <h4> चेतावनी ! </h4> इति
  Best check yo self, त्वं न...
</div> इति

सन्दर्भविकल्पाः

अलर्ट् इत्यस्य अर्थं परिवर्तयितुं वैकल्पिकवर्गान् योजयन्तु ।

दोषः संकटः वा

<div class = "सचेतना-सचेतना-त्रुटि" > 
  ...
</div> इति

सफलता

<div class = "सचेतना चेतावनी-सफलता" > 
  ...
</div> इति

सूचना

<div class = "सचेतना-सचेतना-सूचना" > 
  ...
</div> इति

उदाहरण एवं मार्कअप

आधारभूत

ऊर्ध्वाधरढालयुक्तं पूर्वनिर्धारितं प्रगतिपट्टिका ।

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

धारीदारः

पट्टिकायुक्तं प्रभावं निर्मातुं ढालस्य उपयोगं करोति । IE7-8 इत्यत्र न उपलब्धम्।

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

सजीवः

पट्टिकाः दक्षिणतः वामतः सजीवं कर्तुं Add .activeto । .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 इत्यस्मात् पूर्वं संस्करणाः एनिमेशनं समर्थयन्ति न ।

पाठ्यसामग्रीणां पार्श्वे वाम- वा दक्षिण-संरेखितं चित्रं दर्शयति इति विविधप्रकारस्य घटकानां निर्माणार्थं अमूर्तवस्तुशैल्याः (यथा ब्लॉगटिप्पणीः, ट्वीट् इत्यादयः)

पूर्वनिर्धारितं उदाहरणम्

पूर्वनिर्धारितं माध्यमं सामग्रीखण्डस्य वामभागे वा दक्षिणभागे वा माध्यमवस्तुं (चित्रं, भिडियो, श्रव्यं) प्लवितुं शक्नोति ।

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

क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। Fusce condimentum nunc एसी निसी vulputate fringilla. Donec lacinia congue felis in faucibus.

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

क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। Fusce condimentum nunc एसी निसी vulputate fringilla. Donec lacinia congue felis in faucibus.

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

क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। Fusce condimentum nunc एसी निसी vulputate fringilla. Donec lacinia congue felis in faucibus.

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

मीडिया सूची

किञ्चित् अतिरिक्तं मार्कअपं कृत्वा, भवान् सूचीयाः अन्तः मीडिया (टिप्पणीसूत्राणां वा लेखसूचीनां वा कृते उपयोगी) उपयोक्तुं शक्नोति ।

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

वेल्स इति

कस्मिंश्चित् तत्वे इन्सेट् प्रभावं दातुं कूपस्य उपयोगं सरलप्रभावरूपेण कुर्वन्तु ।

<div class = "अच्छा" > 
  ...
</div> इति

वैकल्पिकवर्गाः

वैकल्पिकसंशोधकवर्गद्वयेन सह गद्दीकरणं गोलकोणानि च नियन्त्रयन्तु ।

<div class = "अच्छा सु-बृहत्" > 
  ...
</div> इति

<div class = "अच्छा सु-लघु" > 
  ...
</div> इति

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

मोडाल्स् तथा अलर्ट् इत्यादीनां सामग्रीं निराकरणार्थं सामान्यनिरोधचिह्नस्य उपयोगं कुर्वन्तु ।

<बटन वर्ग = "बंद करें" > × </बटन> इति 

iOS उपकरणेषु href="#"क्लिक् इवेण्ट्स् कृते एकं आवश्यकं भवति यदि भवान् एङ्कर् इत्यस्य उपयोगं इच्छति।

<a class = "बंद करें" href = "#" > × </a> इति  

सहायकवर्गाः

लघुप्रदर्शनस्य अथवा व्यवहारस्य tweaks कृते सरलाः, केन्द्रीकृतवर्गाः।

.पुल-वाम

एकं तत्वं वामभागे प्लवन्तु

class = "कर्षण-वाम"।

. खींच - वाम { .
  float : वामम् ;
} इति ।

.पुल-दक्षिणम्

एकं तत्वं सम्यक् प्लवतु

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

. खींच - दक्षिण { .
  float : दक्षिणम् ;
} इति ।

.निःशब्दः

कस्यचित् तत्त्वस्य वर्णं परिवर्तयन्तु#999

class = "निःशब्दः" ।

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

.स्पष्टीकरणम्

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

class = "स्पष्टीकरणम्" ।

. स्पष्टीकरणम् { .
  * जूम : 1 ; 
  &: पूर्वं , .
  &: पश्चात् { .
    प्रदर्शन : तालिका ;
    content : "" ; 
  } इति ।
  &: पश्चात् { .
    स्पष्ट : उभयम् ;
  } इति ।
} इति ।