उदाहरण

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

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

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

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

ड्रॉपडाउन मेनू इत्यस्य अतिरिक्तस्तरं योजयन्तु, OS X इत्यस्य इव होवर इत्यत्र दृश्यन्ते, केषाञ्चन सरलमार्कअप-योजनाभिः सह । स्वचालित-स्टाइलिंग् कृते विद्यमान-ड्रॉप्-डाउन-मेनू-मध्ये .dropdown-submenuकस्मिन् अपि योजयन्तु ।li

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

उदाहरणानि

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

एकल बटन समूह

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

<दिव वर्ग="बटन-समूह">
  <button class="btn">१</बटन> इति
  <button class="btn">२</बटन> इति
  <button class="btn">३</बटन> इति
</div> इति

अनेक बटन समूह

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

आकाराः

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

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

ड्रॉपअप मेनू

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

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

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

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

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

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

<ul class="नव नव-टैब्स्">
  <लि वर्ग="सक्रिय">
    <a href="#">गृहम्</a> इति
  </li> इति
  <li><a href="#">...</a></li> इति
  <li><a href="#">...</a></li> इति
</ul> इति

मूलभूत गोलियाँ

तदेव HTML गृह्यताम्, परन्तु .nav-pillsतस्य स्थाने उपयुज्यताम् :

<ul class="नव नव-गोल्यः">
  <लि वर्ग="सक्रिय">
    <a href="#">गृहम्</a> इति
  </li> इति
  <li><a href="#">...</a></li> इति
  <li><a href="#">...</a></li> इति
</ul> इति

अक्षम अवस्था

कस्यचित् nav घटकस्य (टैब्स्, गोलियां, सूची वा), ग्रे लिङ्कानां.disabled कृते योजयन्तु तथा च कोऽपि होवर प्रभावः नास्ति . लिङ्कानि क्लिक् कर्तुं शक्यन्ते तथापि, यावत् तान् क्लिक् निवारयितुं कस्टम् जावास्क्रिप्ट् कार्यान्वितं न भवति ।

<ul class="नव नव-गोल्यः">
  ...
  <li class="disabled"><a href="#">गृहम्</a></li> इति
  ...
</ul> इति

घटक संरेखण

nav लिङ्क्स् संरेखयितुं, .pull-leftor .pull-rightutility classes इत्यस्य उपयोगं कुर्वन्तु । उभयवर्गः निर्दिष्टदिशि CSS float योजयिष्यति ।

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

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

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

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

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

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

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

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

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

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

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

<ul class="नव नव-गोल्यः">
  <li class="अवरोहणम्">
    <a class="ड्रॉपडाउन-टॉगल"।
       data-toggle="अवरोहणम्" ।
       href="#"> इति
        ड्रॉपडाउन
        <b class="caret"></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="active"><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="active"><a href="#tab1" data-toggle="tab">खण्डः १</a></li>
    <li><a href="#tab2" data-toggle="tab">खण्डः २</a></li>
  </ul> इति
  <div class="टैब-सामग्री">
    <div class="टैब-पैन सक्रिय" id="tab1">
      <p>अहं खण्डे १ अस्मि।</p>
    </div> इति
    <div class="टैब-पैन" id="tab2">
      <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, यत् भवतः साइट् इत्यस्य विस्तारं सामग्रीं च निर्धारयति ।

<दिव वर्ग="नवबर">
  <दिव वर्ग="नवबर-अन्तर्गत">
    <a class="brand" href="#">शीर्षक</a> इति
    <ul class="नव"> इति
      <li class="active"><a href="#">गृहम्</a></li> इति
      <li><a href="#">लिङ्क्</a></li> इति
      <li><a href="#">लिङ्क्</a></li> इति
    </ul> इति
  </div> इति
</div> इति

नवबार घटक

चिह्न

स्वस्य ब्राण्ड् अथवा परियोजनानाम दर्शयितुं सरलं लिङ्क् केवलं एंकर टैग् आवश्यकम् अस्ति।

<a class="brand" href="#">परियोजना नाम</a>

नव लिङ्क्

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

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

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

<ul class="नव"> इति
  ...
  <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 योजयिष्यति ।

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

किञ्चित् मार्कअपं कृत्वा dropdowns javascript plugin इत्यनेन सह nav मध्ये dropdowns तथा dropups योजयन्तु |

<ul class="नव"> इति
  <li class="अवरोहणम्">
    <a href="#" class="अवरोहण-अवरोहणम्" data-toggle="अवरोहणम्">
      वृतांत्तः
      <b class="caret"></b> इति
    </a> इति
    <ul class="अवरोहण-मेनू">
      ...
    </ul> इति
  </li> इति
</ul> इति

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

पाठ

पाठस्य ताराः , इत्यनेन सह तत्त्वे वेष्टयन्तु .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="पात्रम्"> इति

      <!-- .btn-navbar इत्यस्य उपयोगः संकुचितस्य navbar सामग्रीयाः टॉगलरूपेण भवति -->
      <a class="btn btn-navbar" data-toggle="collapse" दत्तांश-लक्ष्य=".nav-collapse">
        <span class="चिह्न-पट्टिका"></span> इति
        <span class="चिह्न-पट्टिका"></span> इति
        <span class="चिह्न-पट्टिका"></span> इति
      </a> इति

      <!-- यदि भवान् दर्शयितुम् इच्छति तर्हि ब्राण्डं तत्र बहिः अवश्यं त्यजतु -->
      <a class="brand" href="#">परियोजना नाम</a>

      <!-- यत्किमपि भवन्तः 940px वा न्यूनतरं वा निगूढं इच्छन्ति, अत्र अन्तः स्थापयन्तु -->
      <दिव वर्ग="नव-संकुचना">
        <!-- .नव, .नवबर-अन्वेषण, .नवबर-रूप इत्यादि -->
      </div> इति

    </div> इति
  </div> इति
</div> इति

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

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

<div class="नवबर नवबर-विलोम">
  ...
</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 द्वारा प्रेरित सरल पृष्ठांकन, एप्स एवं खोज परिणामों के लिए महान। विशालः खण्डः कठिनः त्यक्तुं शक्यते, सुलभतया स्केल-करणीयः, बृहत् क्लिक्-क्षेत्राणि च प्रदाति ।

<दिव वर्ग="पृष्ठांकन">
  <उल> इति
    <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वर्तमानपृष्ठं सूचयितुं च उपयुज्यताम् ।

<दिव वर्ग="पृष्ठांकन">
  <उल> इति
    <li class="disabled"><a href="#">पूर्व</a></li> इति
    <li class="सक्रिय"><a href="#">१</a></li> इति
    ...
  </ul> इति
</div> इति

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

<दिव वर्ग="पृष्ठांकन">
  <उल> इति
    <li class="अक्षम"><span>पूर्व</span></li>
    <li class="सक्रिय"><span>१</span></li> इति
    ...
  </ul> इति
</div> इति

संरेखणम्

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

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

<div class="पृष्ठांकन पृष्ठकरण-अधिकार">
  ...
</div> इति

पेजर इति

लघु मार्कअप तथा शैलियों के साथ सरल पृष्ठांकन कार्यान्वयनों के लिए त्वरित पूर्व और अगले लिङ्क। ब्लॉग् वा पत्रिका इत्यादीनां सरलसाइट्-स्थानानां कृते इदं महान् अस्ति।

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

पूर्वनिर्धारितरूपेण, पेजरः लिङ्कान् केन्द्रयति ।

<ul class="pager"> इति
  <li><a href="#">पूर्व</a></li> इति
  <li><a href="#">अग्रे</a></li> इति
</ul> इति

संरेखित लिंक

वैकल्पिकरूपेण, भवान् प्रत्येकं लिङ्कं पार्श्वेषु संरेखयितुं शक्नोति:

<ul class="pager"> इति
  <li class="पूर्वम्">
    <a href="#">&लार्र्; प्राचीन</a> इति
  </li> इति
  <li class="अनन्तरं">
    <a href="#">नवतरः →</a> इति
  </li> इति
</ul> इति

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

पेजर लिङ्क्स् पृष्ठकरणात् सामान्य .disabledउपयोगिता वर्गस्य अपि उपयोगं कुर्वन्ति ।

<ul class="pager"> इति
  <li class="पूर्वं अक्षमम्">
    <a href="#">&लार्र्; प्राचीन</a> इति
  </li> इति
  ...
</ul> इति

लेबल

बैज

नायक इकाई

भवतः साइट् मध्ये प्रमुखसामग्री प्रदर्शयितुं लघु, लचीला घटकः। विपणन-सामग्री-भारयुक्तेषु साइट्-स्थानेषु इदं सम्यक् कार्यं करोति ।

<div class="नायक-एककम्">
  <h1>शीर्षकम्</h1>
  <p>टैग्लाइन</p> इति
  <प> इति
    <a class="बटन् बटन्-प्राथमिक बटन्-बृहत्">
      अधिकं ज्ञातुं शक्नुवन्ति
    </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 class="span4"> इति
    <a href="#" वर्ग="थम्बचित्रम्">
      <img src="https://placehold.it/300x200" alt=""> इति
    </a> इति
  </li> इति
  ...
</ul> इति

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

<ul class="लघुचित्रम्">
  <li class="span4"> इति
    <div class="थम्बचित्रम्">
      <img src="https://placehold.it/300x200" alt=""> इति
      <h3>लघुचित्रलेबल</h3>
      <p>लघुचित्र शीर्षक...</p>
    </div> इति
  </li> इति
  ...
</ul> इति

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

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

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

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

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

बटन को निरस्त करें

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

<a href="#" class="close" data-dismiss="alert">×</a> इति

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

<button type="बटन" class="बन्द" data-dismiss="alert">×</बटन>

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

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

विकल्पाः

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

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

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

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

दोषः संकटः वा

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

सफलता

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

सूचना

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

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

आधारभूत

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

<दिव वर्ग="प्रगति">
  <div class="bar" शैली="विस्तार: ६०%;"></div>
</div> इति

धारीदारः

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

<div class="प्रगति-प्रगति-पट्टिकायुक्ता">
  <div class="bar" शैली="विस्तार: २०%;"></div>
</div> इति

सजीवः

दक्षिणतः वामतः पट्टिकाः सजीवं कर्तुं to .activeयोजयन्तु । .progress-stripedIE इत्यस्य सर्वेषु संस्करणेषु न उपलब्धम् ।

<div class="प्रगति-प्रगति-पट्टिका-सक्रियः">
  <div class="bar" शैली="विस्तार: ४०%;"></div>
</div> इति

स्तम्भितम्

.progressतान् स्तम्भयितुं एकस्मिन् एव बहुविधानि पट्टिकाः स्थापयन्तु ।

<दिव वर्ग="प्रगति">
  <div class="बार बार-सफलता" शैली="विस्तार: ३५%;"></div>
  <div class="बार बार-चेतावनी" style="width: 20%;"></div>
  <div class="बार बार-खतरा" शैली="विस्तार: १०%;"></div>
</div> इति

विकल्पाः

अतिरिक्त रंग

प्रगतिपट्टिकाः सुसंगतशैल्याः कृते केषाञ्चन समानबटनस्य अलर्टवर्गाणां च उपयोगं कुर्वन्ति ।

<div class="प्रगति-प्रगति-सूचना">
  <div class="bar" शैली="विस्तार: २०%"></div>
</div> इति
<div class="प्रगति प्रगति-सफलता">
  <div class="bar" शैली="विस्तार: ४०%"></div>
</div> इति
<div class="प्रगति-प्रगति-चेतावनी">
  <div class="bar" शैली="विस्तार: ६०%"></div>
</div> इति
<div class="प्रगति-प्रगति-संकट">
  <div class="bar" शैली="विस्तार: 80%"></div>
</div> इति

धारीदार पट्टियाँ

ठोसवर्णानां सदृशं अस्माकं विविधाः पट्टिकायुक्ताः प्रगतिपट्टिकाः सन्ति ।

<div class="प्रगतिप्रगति-सूचना प्रगति-पट्टिकायुक्ता">
  <div class="bar" शैली="विस्तार: २०%"></div>
</div> इति
<div class="प्रगति प्रगति-सफलता प्रगति-पट्टिका">
  <div class="bar" शैली="विस्तार: ४०%"></div>
</div> इति
<div class="प्रगतिप्रगति-चेतावनी प्रगति-पट्टिकायुक्ता">
  <div class="bar" शैली="विस्तार: ६०%"></div>
</div> इति
<div class="प्रगति प्रगति-संकट प्रगति-पट्टिका">
  <div class="bar" शैली="विस्तार: 80%"></div>
</div> इति

ब्राउज़र समर्थन

प्रगतिपट्टिकाः स्वस्य सर्वान् प्रभावान् प्राप्तुं CSS3 ढालस्य, संक्रमणस्य, एनिमेशनस्य च उपयोगं कुर्वन्ति । एतानि विशेषतानि IE7-9 अथवा Firefox इत्यस्य प्राचीनसंस्करणेषु समर्थितानि न सन्ति ।

Internet Explorer 10 तथा Opera 12 इत्यस्मात् पूर्वं संस्करणाः एनिमेशनं समर्थयन्ति न ।

वेल्स इति

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

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

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

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

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

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

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

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

<button class="close">&समयानि;</button> इति

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

<a class="निमीलित" href="#">×</a> इति

सहायकवर्गाः

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

.पुल-वाम

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

class="पुल-वाम"।

.पुल-वाम { .
  float: वाम;
} .

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

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

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

.पुल-दक्षिण { .
  float: सम्यक्;
} .

.निःशब्दः

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

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

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

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

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

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

.क्लियरफिक्स् { .
  *जूम: 1;
  &:पूर्वम्‌,
  &:अनन्तरम्‌ {
    प्रदर्शनम् : तालिका;
    विषयः: "";
  } .
  &:अनन्तरम्‌ {
    clear: उभयम्;
  } .
} .