घटक

दर्जनों पुन: उपयोग करय योग्य घटक बूटस्ट्रैप मे निर्मित छै जे नेविगेशन, अलर्ट, पॉपओवर, आ बहुत किछु प्रदान करय छै.

बटन समूह

एक समग्र घटक कें रूप मे अनेक बटन कें एक साथ जोड़य कें लेल बटन समूहक कें उपयोग करूं. <a>या <button>तत्वों की एक श्रृंखला के साथ इनके निर्माण |

सर्वोत्तम प्रथाएँ

हम बटन समूह आ टूलबार कें उपयोग करय कें लेल निम्नलिखित दिशा निर्देशक कें सिफारिश करय छी:

एकटा बटन समूह मे सदिखन एकहि तत्वक प्रयोग करू, <a>वा <button>.
एकहि बटन समूह मे अलग-अलग रंगक बटन नहि मिलाउ।
पाठ के अलावा या ओकर जगह पर आइकन के प्रयोग करू, मुदा जतय उचित हो, alt आ title पाठ जरूर शामिल करू.

ड्रॉपडाउन कें साथ संबंधित बटन समूहक (नीचा देखूं) कें अलग सं कॉल कैल जेबाक चाही आ हमेशा इच्छित व्यवहार कें संकेत करय कें लेल एकटा ड्रॉपडाउन कैरेट शामिल कैल जेबाक चाही.

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

एतय एचटीएमएल एंकर टैग बटन के साथ निर्मित मानक बटन समूह केना देखै छै:

<div वर्ग = "बीटीएन-समूह" > 
  <बटन वर्ग = "btn" > 1 </बटन> 
  <बटन वर्ग = "btn" > 2 </बटन> 
  <बटन वर्ग = "btn" > 3 </बटन> 
</div>

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

अधिक जटिल घटक के लिये <div class="btn-group">एक में सेट के संयोजन |<div class="btn-toolbar">

<div वर्ग = "बीटीएन-टूलबार" > 
  <div वर्ग = "बीटीएन-समूह" > 
    ...
  </div>
</div>

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

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

जावास्क्रिप्ट प्राप्त करू »

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

हेड अप! ड्रॉपडाउन वाला बटन क॑ सही रेंडरिंग लेली .btn-groupएक के भीतर अलग-अलग अपनऽ म॑ लपेटलऽ जाना चाहियऽ ।.btn-toolbar

बटन ड्रॉपडाउन

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

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

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

बटन समूह के तरह, हमरऽ मार्कअप नियमित बटन मार्कअप के उपयोग करै छै, लेकिन शैली क॑ परिष्कृत करै आरू बूटस्ट्रैप केरऽ ड्रॉपडाउन jQuery प्लगइन क॑ समर्थन करै लेली मुट्ठी भर जोड़ऽ के साथ ।

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

सब बटन साइज के साथ काज करैत अछि

बटन ड्रॉपडाउन कोनो आकार मे काज करैत अछि. अपन बटन आकार .btn-large, .btn-small, अथवा .btn-mini.

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

बटन ड्रॉपडाउन कें काज करय कें लेल बूटस्ट्रैप ड्रॉपडाउन प्लगइन कें आवश्यकता होयत छै.

किछु मामला मे-जेना मोबाइल-ड्रॉपडाउन मेनू व्यूपोर्ट सं बाहर विस्तारित होयत. अहां कें संरेखण कें मैन्युअल रूप सं या कस्टम जावास्क्रिप्ट कें साथ हल करय कें जरूरत छै.

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

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

बटन ग्रुप स्टाइल आ मार्कअप के आधार पर हम आसानी स स्प्लिट बटन बना सकैत छी | विभाजित बटनऽ म॑ बायां तरफ मानक क्रिया आरू दाहिना तरफ संदर्भ लिंक के साथ ड्रॉपडाउन टॉगल के सुविधा छै.

आकार के

अतिरिक्त बटन classe .btn-mini, .btn-small, या .btn-largeआकार देबाक लेल उपयोग करू.

<div वर्ग = "बीटीएन-समूह" > 
  ...
  <ul class = "ड्रॉपडाउन-मेनू पुल-राइट" > 
    <!-- ड्रॉपडाउन मेनू लिंक -->
  </ul>
</div>

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

हम सामान्य बटन ड्रॉपडाउन पर विस्तार करय छै एकटा दोसर बटन क्रिया प्रदान करय कें लेल जे अलग ड्रॉपडाउन ट्रिगर कें रूप मे संचालित होयत छै.

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

ड्रॉपअप मेनू

ड्रॉपडाउन मेनू कें सेहो नीचा सं ऊपर टॉगल कैल जा सकय छै कें तत्काल अभिभावक मे एकटा वर्ग जोड़ क .dropdown-menu. ई के दिशा के पलट देत .caretआ मेनू के स्वयं के रिपोजिशन करत जे ऊपर सं नीचा के बजाय नीचा सं ऊपर जाय.

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

हल्का डिफ़ॉल्ट समान मार्कअप, अलग-अलग वर्ग

शक्तिशाली आधार वर्ग

एतय सबटा nav घटक-टैब, गोली, आ सूची - वर्ग कें माध्यम सं एकहि आधार मार्कअप आ शैली कें साझा करयत छै ..nav

कब प्रयोग करब

टैब आ गोली सामग्री कें खंडक कें लेल या संबंधित सामग्री कें पन्नाक कें बीच नेविगेट करय कें लेल बढ़िया छै.

घटक संरेखण

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

बेसिक टैब

लिंक के एकटा रेगुलर लिय <ul>आ जोड़ू .nav-tabs:

<ul class = "नव नव-टैब" > 
  <li वर्ग = "सक्रिय" > 
    <a href = "#" > घर </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

बेसिक गोलियाँ

ओही एचटीएमएल लिअ, मुदा एकर .nav-pillsबदलामे प्रयोग करू:

<ul class = "नव नव-गोलियाँ" > 
  <li वर्ग = "सक्रिय" > 
    <a href = "#" > घर </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

स्टैक करय योग्य टैब या गोलियाक कें ऊर्ध्वाधर बनाऊं

कैसे ढेर करे 'एम्

जेना कि टैब आ गोली डिफ़ॉल्ट रूप सं क्षैतिज अछि, बस एकटा दोसर वर्ग, .nav-stacked, जोड़ू जे ओकरा लंबवत ढेर देखाय.

ढेर टैब

<ul class = "नव नव-टैब नव-ढेर" > 
  ...
</ul>

ढेर गोलियाँ

<ul class = "नव नव-गोलियाँ नव-ढेर" > 
  ...
</ul>

ड्रॉपडाउन उन्नत nav घटक के लिये |

समृद्ध मेनू आसान बना

बूटस्ट्रैप टैब आरू गोली म॑ ड्रॉपडाउन मेनू सुपर आसान छै आरू एकरा लेली केवल कनी अतिरिक्त एचटीएमएल आरू हल्का जेक्वेरी प्लगइन के जरूरत छै.

बूटस्ट्रैप मे ड्रॉपडाउन कें आरंभ करय पर डॉक्स पढ़य कें लेल जावास्क्रिप्ट पृष्ठ पर जाउ .

ड्रॉपडाउन के साथ टैब

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

ड्रॉपडाउन के साथ गोलियाँ

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

नव सूची सरल ढेर नव बनाउ, साइडबार के लेल बढ़िया

अनुप्रयोग-शैली नेविगेशन

Nav सूची वैकल्पिक हेडर कें साथ nav लिंक कें समूह बनावा कें एकटा सरल आ आसान तरीका प्रदान करयत छै. एकरऽ उपयोग ओएस एक्स म॑ फाइंडर जैसनऽ साइडबार म॑ सबसे अच्छा छै ।

संरचनात्मक रूप स॑, ई सब टैब आरू गोली जैसनऽ कोर नव शैली प॑ बनलऽ छै, ई लेली उपयोग आरू अनुकूलन सीधा छै ।

आइकन के साथ

नव सूची कें आइकन सं लैस करनाय सेहो आसान छै. क्लास के संग उचित <i>टैग जोड़ू आ अहाँ सेट भ गेलौं।

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

क्लास के साथ एकटा खाली सूची आइटम बना क एकटा क्षैतिज विभाजक जोड़ू .divider, जेना कि:

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

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

लिंक के लिस्ट ल क जोड़ू class="nav nav-list":

<ul class = "नव नव-सूची" > 
  <li वर्ग = "nav-हेडर" > 
    सूची हेडर
  </li>
  <li वर्ग = "सक्रिय" > 
    <a href = "#" > घर </a> 
  </li>
  <ली>
    <a href = "#" > पुस्तकालय </a> 
  </li>
  ...
</ul>

आइकन के साथ उदाहरण

वएह उदाहरण, मुदा <i>आइकन के लेल टैग के संग।

<ul class = "नव नव-सूची" > 
  ...
  <ली>
    <a href = "#" > 
      <i class = "चिह्न-पुस्तक" </i> 
      पुस्तकालय
    </a>
  </li>
  ...
</ul>

Tabbable nav जावास्क्रिप्ट के माध्यम स टैब के जीवन मे लाउ

की शामिल अछि

टैब कें माध्यम सं सामग्री कें बीच टॉगल करय कें लेल एकटा सरल प्लगइन कें साथ अपन टैब कें जीवंत करूं. बूटस्ट्रैप टैबेबल टैब क॑ चारि शैली म॑ एकीकृत करै छै: ऊपर (डिफ़ॉल्ट), दाहिना, नीचे, आरू बायां.

एहि सभक बीच बदलब आसान अछि आ मात्र बहुत कम मार्कअप बदलबाक आवश्यकता अछि ।

टैबबल उदाहरण

.nav-tabsटैब के टैब करय योग्य बनेबाक लेल, क्लास के संग दोसर div मे लपेटू .tabbable.

हम खंड 1 मे छी।

Howdy, I'm in Section 2.

What up girl, this is Section 3.

कस्टम jQuery प्लगइन

सब टैबेबल टैब हमर हल्का jQuery प्लगइन द्वारा संचालित अछि. जावास्क्रिप्ट डॉक्स पृष्ठ पर टैबबल टैब क॑ जीवन म॑ कोना लाबै के तरीका के बारे म॑ आरू पढ़ऽ ।

जावास्क्रिप्ट प्राप्त →

सीधा मार्कअप

टैबेबल टैब कें उपयोग करय कें लेल एकटा रैपिंग div, टैब कें एकटा सेट, आ सामग्री कें टैबेबल फलक कें एकटा सेट कें आवश्यकता होयत छै.

<div वर्ग = "टैबबल" > 
  <ul class = "नव नव-टैब" > 
    <li class = "सक्रिय" ><a href = "#1" data-toggle = "टैब" > खंड 1 </a></li>   
    <li><a href = "#2" data-toggle = "टैब" > खंड 2 </a></li>  
  </ul>
  <div वर्ग = "टैब-सामग्री" > 
    <div वर्ग = "टैब-फलक सक्रिय" आईडी = "1" >  
      <p> हम खंड 1 मे छी. </p>
    </div>
    <div वर्ग = "टैब-फलक" आईडी = "2" >  
      <p> हाउडी, हम खंड 2 मे छी. </p>
    </div>
  </div>
</div>

कोनो दिशा मे टैबबबल

नीचाँ पर टैब

एचटीएमएल के क्रम फ्लिप करू आ एकटा क्लास जोड़ू जे नीचाँ मे टैब राखू।

हम सेक्शन ए मे छी।

Howdy, I'm in Section B.

What up girl, this is Section C.

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

बामा कात टैब

बामा कात टैब लगाबय लेल क्लास स्वैप करू.

हम सेक्शन ए मे छी।

Howdy, I'm in Section B.

What up girl, this is Section C.

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

दाहिना दिस टैब

दाहिना दिस टैब लगाबय लेल क्लास स्वैप करू.

हम सेक्शन ए मे छी।

Howdy, I'm in Section B.

What up girl, this is Section C.

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

स्थिर नवबार उदाहरण

प्रोजेक्ट नाम, नेविगेशन, आरू खोज फॉर्म के साथ स्थिर (ऊपर पर स्थिर नै) नवबार के एक उदाहरण.

नवबार मचान

नवबार क॑ स्थिर या स्थिर प्रदर्शन लेली एकरा अच्छा तरह स॑ संरचित करै लेली केवल कुछ डिव्स के जरूरत छै ।

<div वर्ग = "नवबार" > 
  <div वर्ग = "नवबार-आन्तरिक" > 
    <div वर्ग = "कंटेनर" > 
      ...
    </div>
  </div>
</div>

नवबार फिक्स्ड

नवबार क॑ व्यूपोर्ट केरऽ ऊपर या निचला भाग म॑ सबसें बाहरी div प॑ एक अतिरिक्त वर्ग के साथ ठीक करऽ, .navbar.

<div class = "नवबार नवबार-नियत-शीर्ष" > 
  ...
</div>

<div class = "नवबार नवबार-नियत-नीचे" > 
  ...
</div>

जखन अहाँ नवबार लगाबैत छी तँ मोन राखू जे नीचाँ नुकायल क्षेत्रक हिसाब देब। मे 40px या ओहि स बेसी apdding जोड़ू <body>. कोर बूटस्ट्रैप सीएसएस क बाद आओर वैकल्पिक उत्तरदायी सीएसएस स पहिने एकरा अवश्य जोड़ू.

ब्रांड नाम

अपन ब्रांड या प्रोजेक्ट के नाम देखाबय लेल एकटा साधारण लिंक के लेल केवल एंकर टैग के जरूरत अछि.

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

नवबार में रूप

नवबार के भीतर कोनो फॉर्म के सही तरीका स स्टाइल आ पोजीशन देबय लेल, उचित क्लास जोड़ू जेना कि नीचा देखाओल गेल अछि | डिफ़ॉल्ट फॉर्म क लेल, शामिल करू .navbar-formआओर या त .pull-leftया .pull-rightओकरा सही ढंग स संरेखित करबाक लेल.

<form class = "नवबार-फॉर्म पुल-बाएं" > 
  <इनपुट प्रकार = "पाठ" वर्ग = "span2" >  
</form>

एकटा बेसी अनुकूलित खोज फॉर्म के लेल, .navbar-searchनवबार मे विशेष शैली प्राप्त करय लेल क्लास जोड़ू.

<form class = "नवबार-खोज पुल-बाम" > 
  <input type = "text" class = "खोज-क्वेरी" प्लेसहोल्डर = "खोज" >   
</form>

वैकल्पिक प्रतिक्रियाशील भिन्नता

अपनऽ टॉपबार म॑ सामग्री के मात्रा के आधार प॑, आप उत्तरदायी विकल्पऽ क॑ लागू करना चाहै सकै छियै । ऐना करय लेल, अपन nav सामग्री के एकटा युक्त div, .nav-collapse.collapse, मे लपेटू आओर navbar टॉगल बटन जोड़ू, .btn-navbar.

<div वर्ग = "नवबार" > 
  <div वर्ग = "नवबार-आन्तरिक" > 
    <div वर्ग = "कंटेनर" > 
 
      <!-- .btn-navbar क' उपयोग संकुचित नवबार सामग्री क लेल टॉगल क रूप मे कएल जाएत अछि -->
      <a class = "btn btn-navbar" डेटा-टॉगल = "संकुचित" डेटा-लक्ष्य = ".nav-संकुचित" >   
        <span class = "चिह्न-पट्टी" </span> 
        <span class = "चिह्न-पट्टी" </span> 
        <span class = "चिह्न-पट्टी" </span> 
      </a>
 
      <!-- ब्रांड के बाहर जरूर छोड़ू अगर अहां चाहय छी जे ओकरा देखाबय -->
      <a class = "brand" href = "#" > परियोजना नाम </a>  
 
      <!-- जे किछु अहाँ चाहैत छी जे 940px या ओहि सँ कम पर नुकायल रहय, एतय भीतर राखू -->
      <div वर्ग = "nav-संकुचन" > 
        <!-- .नव, .नवबर-खोज, .नवबर-रूप, आदि -->
      </div>
 
    </div>
  </div>
</div>

हेड अप! उत्तरदायी नवबार के लेल संकुचन प्लगइन के आवश्यकता अछि .

नव लिंक

नव आइटम कें अनऑर्डर लिस्ट कें माध्यम सं जोड़नाय सरल छै.

<ul वर्ग = "नव" > 
  <li वर्ग = "सक्रिय" > 
    <a href = "#" > घर </a> 
  </li>
  <li><a href = "#" > लिंक </a></li> 
  <li><a href = "#" > लिंक </a></li> 
</ul>

अहां एकटा खाली सूची आइटम आ एकटा सरल क्लास सं आसानी सं अपन नव लिंक मे डिवाइडर जोड़ सकय छी. बस लिंक के बीच ई जोड़ू:

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

घटक संरेखण

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

ड्रॉपडाउन मेनू जोड़ब

nav में ड्रॉपडाउन आ ड्रॉपअप जोड़ब सुपर सरल अछि, मुदा हमर जावास्क्रिप्ट प्लगइन के उपयोग के आवश्यकता अछि .

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

जावास्क्रिप्ट प्राप्त →

नवबार में पाठ

<p>उचित लीडिंग आ रंगक लेल पाठक स्ट्रिंगकेँ टैगमे लपेटू ।

कियैक प्रयोग करब

ब्रेडक्रंब नेविगेशन के उपयोग उपयोगकर्ता क॑ ई देखाबै के तरीका के रूप म॑ करलऽ जाय छै कि वू कोनो ऐप या साइट के भीतर कहाँ छै, लेकिन प्राथमिक नेविगेशन लेली नै । एकर उपयोग विरल आ संक्षिप्त राखू जे बेसी प्रभावी होयत।

उदाहरण के लिये

एकटा उदाहरण जेना देखाओल गेल अछि जेना ई अनेक पृष्ठक पार प्रदर्शित भ' सकैत अछि |

मार्कअप

एचटीएमएल लिंकक संग अहाँक मानक अक्रमित सूची अछि ।

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

बहुकॉन-पृष्ठ पृष्ठांकन

कब प्रयोग करब

Rdio स प्रेरित अल्ट्रा सरल आ न्यूनतम स्टाइल पेजिनेशन, ऐप्स आ खोज परिणाम क लेल बढ़िया। पैघ ब्लॉक कें छूटनाय मुश्किल छै, आसानी सं स्केल करय योग्य छै, आ पैघ क्लिक क्षेत्र प्रदान करय छै.

स्टेटफुल पेज लिंक

लिंक अनुकूलन योग्य छै आ सही वर्ग कें साथ अनेक परिस्थितिक मे काज करय छै. .disabledअनक्लिक करय योग्य लिंक के .activeलेल आ वर्तमान पृष्ठ के लेल.

लचीला संरेखण

पृष्ठांकन लिंक क' संरेखण बदलबाक लेल दू वैकल्पिक वर्ग मे सँ कोनो एकटा जोड़ू: .pagination-centeredआओर .pagination-right.

उदाहरण के लिये

डिफ़ॉल्ट पृष्ठांकन घटक लचीला छै आरू एक संख्या म॑ भिन्नता म॑ काम करै छै.

मार्कअप

एकटा मे लपेटल <div>, पृष्ठांकन मात्र एकटा <ul>.

<div वर्ग = "पृष्ठांकन" > 
  <उल>
    <li><a href = "#" > पूर्व </a></li> 
    <li वर्ग = "सक्रिय" > 
      <a href = "#" > 1 </a> 
    </li>
    <li><a href = "#" > २ </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > ४ </a></li> 
    <li><a href = "#" > अगिला </a></li> 
  </ul>
</div>

पेजर त्वरित पिछला आ अगिला लिंक के लेल

पेजर के बारे में

पेजर घटक हल्का मार्कअप आरू आरू हल्का शैली के साथ सरल पृष्ठांकन कार्यान्वयन लेली लिंक के एक सेट छै. ब्लॉग या पत्रिका सन सरल साइट के लेल ई बढ़िया अछि.

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

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

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

डिफ़ॉल्ट रूप स, पेजर लिंक कए केंद्रित करैत अछि.

<ul वर्ग = "पेजर" > 
  <ली>
    <a href = "#" > पिछला </a> 
  </li>
  <ली>
    <a href = "#" > अगिला </a> 
  </li>
</ul>

संरेखित लिंक

वैकल्पिक रूप सँ, अहाँ प्रत्येक लिंक केँ साइड मे संरेखित क' सकैत छी:

<ul वर्ग = "पेजर" > 
  <li class = "पिछला" > 
    <a href = "#" > एवं आर; पुरान </a> 
  </li>
  <li class = "अगला" > 
    <a href = "#" > नवीनतम → </a> 
  </li>
</ul>

लेबल	मार्कअप
चुकनाइ	`<span class="label">Default</span>`
सफलता	`<span class="label label-success">Success</span>`
चेतावनी	`<span class="label label-warning">Warning</span>`
महत्वपूर्ण	`<span class="label label-important">Important</span>`
जानकारी	`<span class="label label-info">Info</span>`
उल्टा	`<span class="label label-inverse">Inverse</span>`

विषय में

बैज कोनों तरह कें संकेतक या गिनती कें प्रदर्शित करय कें लेल छोट, सरल घटक छै. इ आमतौर पर मेल डॉट ऐप जैना ईमेल क्लाइंट मे या पुश सूचनाक कें लेल मोबाइल ऐप पर पाएल जायत छै.

उपलब्ध कक्षाएँ

नाम	उदाहरण	मार्कअप
चुकनाइ	१	`<span class="badge">1</span>`
सफलता	२	`<span class="badge badge-success">2</span>`
चेतावनी	४	`<span class="badge badge-warning">4</span>`
दोष	6	`<span class="badge badge-error">6</span>`
जानकारी	8	`<span class="badge badge-info">8</span>`
उल्टा	१०	`<span class="badge badge-inverse">10</span>`

हीरो इकाई

बूटस्ट्रैप एकटा हल्का, लचीला घटक प्रदान करयत छै जेकरा हीरो यूनिट कहल जायत छै जे अहां कें साइट पर सामग्री कें प्रदर्शन करयत छै. मार्केटिंग आओर कंटेंट-हेवी साइट पर ई नीक काज करैत अछि.

मार्कअप

अपन सामग्री के divलाइक में लपेटू ताकि:

<div वर्ग = "नायक-इकाई" > 
  <h1> शीर्षक </h1>
  <p> टैगलाइन </p>
  <p>
    <a class = "btn btn-प्राथमिक btn-बड़े" > 
      और जानें
    </a>
  </p>
</div>

नमस्कार, दुनियाँ!

ई एगो सरल हीरो यूनिट छै, जे फीचर्ड सामग्री या जानकारी प॑ अतिरिक्त ध्यान आकर्षित करै लेली एगो सरल जंबोट्रॉन-शैली के घटक छै ।

और जानें

पृष्ठ शीर्षक

h1एक पृष्ठ पर सामग्री के अनुभागों को appropratiely स्पेस आउट और सेगमेंट करने के लिए एक के लिए एक सरल शेल | ई h1's डिफ़ॉल्ट small, तत्व के साथ-साथ अधिकांश अन्य घटक (अतिरिक्त शैली के साथ) के उपयोग कर सकै छै.

<div class = "पृष्ठ-शीर्षक" > 
  <h1> उदाहरण पृष्ठ शीर्षक </h1>
</div>

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

डिफ़ॉल्ट रूप सं, बूटस्ट्रैप कें थंबनेल न्यूनतम आवश्यक मार्कअप कें साथ लिंक कैल गेल छवियक कें प्रदर्शन करय कें लेल डिजाइन कैल गेल छै.

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

कनी अतिरिक्त मार्कअप के साथ, थंबनेल में कोनो भी तरह के एचटीएमएल सामग्री जेना हेडिंग, पैराग्राफ, या बटन जोड़ना संभव छै.

थंबनेल लेबल

क्रास जस्टो ओडियो, डापिबस एसी फैसिलिसिस में, एगेस्टास एगेट क्वाम। डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस। नुल्लम आईडी डोलोर आईडी निभ ultrices vehicula उत आईडी अभिजात वर्ग।

कार्य कार्य
थंबनेल लेबल

क्रास जस्टो ओडियो, डापिबस एसी फैसिलिसिस में, एगेस्टास एगेट क्वाम। डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस। नुल्लम आईडी डोलोर आईडी निभ ultrices vehicula उत आईडी अभिजात वर्ग।

कार्य कार्य

थंबनेल के प्रयोग कियैक करू

थंबनेल (पहिने .media-gridv1.4 तक) फोटो या वीडियो के ग्रिड, छवि खोज परिणाम, खुदरा उत्पाद, पोर्टफोलियो, आओर बहुत किछु के लेल बढ़िया अछि. ओ लिंक वा स्थिर सामग्री भ सकैत अछि ।

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

थंबनेल मार्कअप सरल अछि- ulकोनो संख्या मे liतत्वक संग एकटा मात्र आवश्यक अछि । ई सुपर लचीला भी छै, जेकरा स॑ कोनो भी प्रकार के सामग्री के साथ बस कनी अधिक मार्कअप के साथ आपनो सामग्री क॑ लपेटै के अनुमति मिलै छै ।

ग्रिड कॉलम आकारक उपयोग करैत अछि

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

मार्कअप के

जेना कि पहिने कहल गेल अछि जे थंबनेल के लेल आवश्यक मार्कअप हल्का आ सोझ अछि. लिंक कएल गेल छविक लेल डिफ़ॉल्ट सेटअप पर एक नजरि देल गेल अछि :

<ul class = "थंबनेल" > 
  <li वर्ग = "span3" > 
    <a href = "#" वर्ग = "थंबनेल" >  
      <img src = "https://प्लेसहोल्ड.इट/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

थंबनेल म॑ कस्टम एचटीएमएल सामग्री लेली, मार्कअप म॑ कनी बदलाव होय जाय छै । <a>ब्लॉक लेवल सामग्री कतहु अनुमति देबय लेल, हम एकटा लाइक के लेल स्वैप करैत छी <div>त:

<ul class = "थंबनेल" > 
  <li वर्ग = "span3" > 
    <div वर्ग = "थंबनेल" > 
      <img src = "https://प्लेसहोल्ड.इट/260x180" alt = "" >  
      <h5> थंबनेल लेबल </h5>
      <p> थंबनेल कैप्शन एतहि... </p>
    </div>
  </li>
  ...
</ul>

अधिक उदाहरण

अहां कें लेल उपलब्ध विभिन्न ग्रिड क्लास कें साथ अपन सबटा विकल्पक कें खोज करूं. अहां अलग-अलग साइज के सेहो मिला सकय छी आओर मिला सकय छी.

हल्के डिफ़ॉल्ट

पुनर्लिखित आधार वर्ग

बूटस्ट्रैप 2 क संग, हम आधार वर्ग कए सरल कएने छी: .alertक बजाय .alert-message. हम न्यूनतम आवश्यक मार्कअप सेहो कम कएने छी-कोनो <p>डिफ़ॉल्ट रूप स आवश्यक अछि, बस बाहरी <div>.

एकल अलर्ट संदेश

कम कोड वाला अधिक टिकाऊ घटक लेली, हम ब्लॉक अलर्ट, संदेश जे अधिक पैडिंग आरू आम तौर पर अधिक पाठ के साथ आबै छै, के लेलऽ विभेदक रूप क॑ हटाय देल॑ छै । क्लास सेहो बदलि क .alert-block.

जावास्क्रिप्ट के साथ बढ़िया चलैत अछि

बूटस्ट्रैप एकटा बढ़िया jQuery प्लगइन कें साथ आबै छै जे अलर्ट संदेशक कें समर्थन करयत छै, जेकरा खारिज करनाय जल्दी आ आसान बनायत छै.

प्लगइन प्राप्त करू »

उदाहरण अलर्ट

सरल वर्ग के साथ एक div में अपने संदेश और एक वैकल्पिक बंद आइकन लपेटें |

× चेतावनी! बेस्ट चेक यो सेल्फ, अहाँ बेसी नीक नहि लागि रहल छी।

<div वर्ग = "सचेतक" > 
  <a class = "बंद करू" data-dismiss = "सचेतक" > × </a>  
  <strong> चेतावनी! </strong> बेस्ट चेक यो सेल्फ, अहाँ बेसी नीक नहि लागि रहल छी।
</div>

दू वैकल्पिक वर्गक कें साथ मानक अलर्ट संदेश कें आसानी सं विस्तारित करूं: .alert-blockअधिक पैडिंग आ पाठ नियंत्रणक कें .alert-headingलेल आ एकटा मिलान हेडिंग कें लेल.

चेतावनी!

बेस्ट चेक यो सेल्फ, अहाँ बेसी नीक नहि लागि रहल छी। नुल्ला विटाए एलिट लिबेरो, एक फारेत्रा औग। Praesent commodo cursus मैग्ना, वेल scelerisque nisl consectetur एट।

<div class = "सचेतक अलर्ट-ब्लॉक" > 
  <a class = "बंद करू" data-dismiss = "सचेतक" > × </a>  
  <h4 class = "alert-heading" > चेतावनी! </h4> 
  बेस्ट चेक यो सेल्फ, अहाँ नहि छी...
</div>

संदर्भ विकल्प कोनों अलर्ट कें संकेत बदलय कें लेल वैकल्पिक वर्गक कें जोड़ूं

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

× ओह स्नैप! किछु बात बदलू आ फेर सं जमा करय के कोशिश करू.

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

सफलता

× नीक केलहुं! अहां ई महत्वपूर्ण अलर्ट संदेश सफलतापूर्वक पढ़लहुं.

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

जानकारी

× हेड अप! एहि अलर्ट पर अहां सभ के ध्यान देबय के जरूरत अछि, मुदा ई सुपर इम्पोर्टेन्ट नहिं अछि.

<div class = "सचेतक चेतावनी-जानकारी" > 
  ...
</div>

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

मूलभूत

एकटा ऊर्ध्वाधर ढाल के साथ पूर्वनिर्धारित प्रगति बार.

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

धारीदार

एकटा धारीदार प्रभाव (कोनो आईई नहि) बनेबाक लेल एकटा ढाल क उपयोग करैत अछि ।

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

एनिमेटेड

धारीदार उदाहरण लैत अछि आ ओकरा एनिमेट करैत अछि (कोनो आईई नहि)।

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

विकल्प आ ब्राउज़र समर्थन

अतिरिक्त रंग

प्रगति बार सुसंगत शैलीक कें लेल किछु एकहि बटन आ अलर्ट वर्गक कें उपयोग करयत छै.

धारीदार सलाखों

ठोस रंग के समान, हम विभिन्न धारीदार प्रगति बार रखने हैं |

व्यवहार

प्रगति बार CSS3 संक्रमण के उपयोग करै छै, अतः अगर आप जावास्क्रिप्ट के माध्यम स॑ चौड़ाई क॑ गतिशील रूप स॑ समायोजित करै छै, त॑ ई सुचारू रूप स॑ आकार बदलतै ।

यदि अहां .activeक्लास कें उपयोग करय छी त अहां कें .progress-stripedप्रगति बार बायां सं दायां पट्टी कें एनिमेट करतय.

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

प्रगति बार अपनऽ सब प्रभाव प्राप्त करै लेली CSS3 ढाल, संक्रमण, आरू एनीमेशन के उपयोग करै छै. ई सुविधा IE7-9 या फायरफॉक्स केरऽ पुरानऽ संस्करणऽ म॑ समर्थित नै छै ।

ओपेरा आ आईई एहि समय एनीमेशन के समर्थन नै करैत अछि ।

वेल्स

कुआँ के प्रयोग कोनो तत्व पर सरल प्रभाव के रूप में करू ताकि ओकरा इनसेट प्रभाव देल जा सकय |

देखू, हम एकटा इनार मे छी!

<div वर्ग = "अच्छा" > 
  ...
</div>

बंद आइकन

मोडल आ अलर्ट जैना सामग्री कें खारिज करय कें लेल जेनेरिक बंद आइकन कें उपयोग करूं.

<a class = "बंद करू" > × </a>

बटन समूह अधिक टूलबार-जैसा कार्यक्षमता कें लेल बटन सं जुड़ू

बटन समूह

सर्वोत्तम प्रथाएँ

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

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

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

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

बटन ड्रॉपडाउन मेनू संदर्भ मेनू प्रदान करय कें लेल बटन समूहक पर निर्मित छै

बटन ड्रॉपडाउन

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

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

सब बटन साइज के साथ काज करैत अछि

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

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

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

आकार के

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

ड्रॉपअप मेनू

नव, टैब, आ गोलियाँ अत्यधिक अनुकूलन योग्य सूची-शैली नेविगेशन

हल्का डिफ़ॉल्ट समान मार्कअप, अलग-अलग वर्ग

शक्तिशाली आधार वर्ग

कब प्रयोग करब

घटक संरेखण

बेसिक टैब

बेसिक गोलियाँ

स्टैक करय योग्य टैब या गोलियाक कें ऊर्ध्वाधर बनाऊं

कैसे ढेर करे 'एम्

ढेर टैब

ढेर गोलियाँ

ड्रॉपडाउन उन्नत nav घटक के लिये |

समृद्ध मेनू आसान बना

ड्रॉपडाउन के साथ टैब

ड्रॉपडाउन के साथ गोलियाँ

नव सूची सरल ढेर नव बनाउ, साइडबार के लेल बढ़िया

अनुप्रयोग-शैली नेविगेशन

आइकन के साथ

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

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

आइकन के साथ उदाहरण

Tabbable nav जावास्क्रिप्ट के माध्यम स टैब के जीवन मे लाउ

की शामिल अछि

टैबबल उदाहरण

कस्टम jQuery प्लगइन

सीधा मार्कअप

कोनो दिशा मे टैबबबल

नीचाँ पर टैब

बामा कात टैब

दाहिना दिस टैब

नवबर

स्थिर नवबार उदाहरण

नवबार मचान

नवबार फिक्स्ड

ब्रांड नाम

नवबार में रूप

वैकल्पिक प्रतिक्रियाशील भिन्नता

नव लिंक

घटक संरेखण

ड्रॉपडाउन मेनू जोड़ब

नवबार में पाठ

रोटी के टुकड़े

कियैक प्रयोग करब

उदाहरण के लिये

मार्कअप

पेजिंग सामग्री के माध्यम स पेजिंग के लेल दू विकल्प

बहुकॉन-पृष्ठ पृष्ठांकन

कब प्रयोग करब

स्टेटफुल पेज लिंक

लचीला संरेखण

उदाहरण के लिये

मार्कअप

पेजर त्वरित पिछला आ अगिला लिंक के लेल

पेजर के बारे में

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

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

संरेखित लिंक

इनलाइन लेबल पाठ लेबल आ एनोटेशन करू

बैज संकेतक आ अपठित गिनती

विषय में

उपलब्ध कक्षाएँ

मुद्रण घटक सामग्री के विभाजन के लिये पृष्ठ हेडर एवं हीरो इकाई |