बटन दे समूह

इक समग्र घटक दे रूप च मते सारे बटनें गी इक कन्नै जोड़ने लेई बटन समूहें दा उपयोग करो. <a>इन्हें या <button>तत्वें दी इक श्रृंखला कन्नै बनाओ ।

उत्तम प्रथाएं

बटन समूहें ते टूलबारें दा इस्तेमाल करने आस्तै अस निम्नलिखित दिशा-निर्देशें दी सलाह दिंदे न:

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

ड्रॉपडाउन कन्नै सरबंधत बटन समूहें गी बक्ख-बक्ख बुलाया जाना चाहिदा ते हमेशा इरादे दे व्यवहार गी दर्शाने आस्तै इक ड्रॉपडाउन कैरेट शामल करना चाहिदा ।

डिफ़ॉल्ट उदाहरण ऐ

एह्दे च एह् दिक्खेआ गेआ ऐ जे एचटीएमएल एंकर टैग बटनें कन्नै बने दा इक मानक बटन समूह कि’यां दिक्खदा ऐ:

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

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

होर जटिल घटकें लेई <div class="btn-group">इक च सेटें गी संयोजित करो ।<div class="btn-toolbar">

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

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

बटन समूह रेडियो दे रूप च बी कम्म करी सकदे न, जित्थै सिर्फ इक बटन सक्रिय होई सकदा ऐ, जां चेकबॉक्स, जित्थै कुसै बी संख्या च बटन सक्रिय होई सकदा ऐ। उसदे लेई जावास्क्रिप्ट डॉक्स दिक्खो ।

जावास्क्रिप्ट पाओ »

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

सिर ऊपर ! ड्रॉपडाउन आह् ले बटनें गी उचित रेंडरिंग आस्तै .btn-groupइक दे अंदर अपने-आपै च व्यक्तिगत रूप कन्नै लपेटेआ जाना लोड़चदा ऐ..btn-toolbar

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

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

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

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

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

सारे बटन साइज़ कन्नै कम्म करदा ऐ

बटन ड्रॉपडाउन किसे बी आकार च कम्म करदे न। अपने बटन दे आकार गी .btn-large, .btn-small, जां .btn-mini.

जावास्क्रिप्ट दी लोड़ ऐ

बटन ड्रॉपडाउन गी कम्म करने आस्तै बूटस्ट्रैप ड्रॉपडाउन प्लगइन दी लोड़ होंदी ऐ।

किश मामलें च-जि’यां मोबाइल-ड्रॉपडाउन मेनू व्यूपोर्ट दे बाहर फैलग। तुसेंगी संरेखण गी मैन्युअल रूप कन्नै जां कस्टम जावास्क्रिप्ट कन्नै हल करने दी लोड़ ऐ.

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

बटन समूह शैलियां ते मार्कअप पर आधारित, अस आसानी कन्नै इक स्प्लिट बटन बनाई सकने आं। विभाजित बटनें च बक्खी दा इक मानक कार्रवाई ते संदर्भ लिंक कन्नै सज्जे पास्से इक ड्रॉपडाउन टॉगल दी सुविधा ऐ।

साइज दे

अतिरिक्त बटन वर्गें दा उपयोग करो .btn-mini, .btn-small, जां .btn-largeआकार देने लेई।

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

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

अस इक दुए बटन कार्रवाई प्रदान करने आस्तै सामान्य बटन ड्रॉपडाउन पर विस्तार करदे आं जेह् ड़ी इक बक्ख ड्रॉपडाउन ट्रिगर दे रूप च कम्म करदी ऐ।

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

ड्रॉपअप मेनू

ड्रॉपडाउन मेनू गी बी निचले थमां उप्पर टॉगल कीता जाई सकदा ऐ .dropdown-menu. एह् दी दिशा गी फ्लिप करग .caretते मेनू गी अपने आपै गी दुबारा स्थापत करग तां जे उप्पर थमां हेठ जाने दी बजाय थल्लै थमां उप्पर चली सकै।

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

शक्तिशाली बेस क्लास

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

कदूं इस्तेमाल करना

टैब ते गोलियां सामग्री दे खंडें लेई जां सरबंधत सामग्री दे पन्नें दे बीच नेविगेट करने लेई शानदार न।

घटक संरेखण करना

nav लिंक गी संरेखित करने लेई, .pull-leftजां .pull-rightउपयोगिता वर्गें दा इस्तेमाल करो. दौनें वर्गें गी निर्दिश्ट दिशा च इक CSS फ्लोट जोड़ेआ जाग।

बेसिक टैब

लिंक दा इक रेगुलर लेओ <ul>ते जोड़ो .nav-tabs:

• घर
• प्रोफाइल
• संदेश

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

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

उसी एचटीएमएल लैओ, पर .nav-pillsइसदे बजाय इस्तेमाल करो:

• घर
• प्रोफाइल
• संदेश

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

'एम्' गी किस चाल्ली ढेर करना ऐ

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

ढेर हो गए टैब

• घर
• प्रोफाइल
• संदेश

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

ढेर की गोलियां

• घर
• प्रोफाइल
• संदेश

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

अमीर मेनू आसान बनाया

बूटस्ट्रैप टैब ते गोलियां च ड्रॉपडाउन मेनू सुपर आसान न ते सिर्फ थोड़ा अतिरिक्त एचटीएमएल ते इक हल्का jQuery प्लगइन दी लोड़ ऐ।

बूटस्ट्रैप च ड्रॉपडाउन शुरू करने पर डॉक्स पढ़ने आस्तै जावास्क्रिप्ट पृष्ठ पर जाओ .

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

• घर
• मदाद
• ड्रॉपडाउन
  • हरकत
  • इक होर कर्म
  • कुछ और यहां
  • अलग कर दी लिंक

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

ड्रॉपडाउन कन्नै गोलियां

• घर
• मदाद
• ड्रॉपडाउन
  • हरकत
  • इक होर कर्म
  • कुछ और यहां
  • अलग कर दी लिंक

<ul class = "नव नव-गोलियाँ" > 
  <ली वर्ग = "ड्रॉपडाउन" > ऐ 
    <a class = "ड्रॉपडाउन-टॉगल" ऐ। 
       डेटा-टॉगल = "ड्रॉपडाउन" ऐ।
       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 class = "नव-हेडर" > ऐ 
    सूची हेडर
  </li> दा
  <ली वर्ग = "सक्रिय" > ऐ 
    <a href = "#" > घर </a> ऐ 
  </li> दा
  <ली> दा
    <a href = "#" > लाइब्रेरी </a> ऐ 
  </li> दा
  ...
</ul> दा

चिह्नों के साथ उदाहरण

उसी उदाहरण, पर <i>आइकनें लेई टैग कन्नै।

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

क्या शामिल ऐ

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

उंदे बश्कार बदलना बड़ा सौखा ऐ ते सिर्फ मता घट्ट मार्कअप बदलने दी लोड़ ऐ।

टैब में फीका हो जाओ

टैबें गी फीके करने आस्तै, .fadeहर इक च जोड़ो .tab-pane.

जेक्वेरी प्लगइन दी लोड़ ऐ

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

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

टैबबल उदाहरन

टैबें गी टैब करने योग्य बनाने लेई, .tab-paneहर टैब आस्तै इक यूनिक आईडी कन्नै इक बनाओ ते उनेंगी च लपेटो .tab-content.

दाएं जां बाएं संरेखित टैबें आस्तै, .nav-tabsते .tab-contentच लपेटो .tabbable.

सीधा मार्कअप करना

टैबबल टैबें दा इस्तेमाल करने आस्तै इक रैपिंग डिव, टैबें दा इक सेट, ते सामग्री दे टैबबल फलकें दा इक सेट लोड़चदा ऐ.

<div class = "tabbable" > <!-- सिर्फ बाएं/दाएं टैबें लेई जरूरी ऐ -->  
  <ul class = "नव नव-टैब" > 
    <li class = "सक्रिय" ><a href = "#tab1" डेटा-टॉगल = "टैब" > धारा 1 </a></li>   
    <li><a href = "#tab2" डेटा-टॉगल = "टैब" > खंड 2 </a></li>  
  </ul> दा
  <div वर्ग = "टैब-सामग्री" > 
    <div वर्ग = "टैब-फलक सक्रिय" आईडी = "टैब1" >  
      <p> मैं खंड 1 च ऐं। </p>
    </div> दा
    <div वर्ग = "टैब-फलक" आईडी = "टैब 2" >  
      <p> हाउडी, मैं खंड 2 च हां। </p>
    </div> दा
  </div> दा
</div> दा

नीचे पर टैब

एचटीएमएल दा क्रम फ्लिप करो ते थल्ले टैब लाने आस्तै इक क्लास जोड़ो।

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

बाईं ओर टैब

बाएं पास्से टैब रखने लेई क्लास गी स्वैप करो।

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

दाहिने ओर टैब

दाएं पास्से टैब रखने लेई क्लास गी स्वैप करो।

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

नवबार मचान

नवबार गी स्थिर जां स्थिर प्रदर्शन आस्तै इसगी खरी चाल्ली संरचित करने आस्तै सिर्फ किश दिवें दी लोड़ होंदी ऐ.

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

नवबार तय कीता

नवबार गी व्यूपोर्ट दे शीर्शक जां थल्लै पर इक अतिरिक्त वर्ग कन्नै बाहरले div पर ठीक करो, .navbar.

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

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

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

ब्रांड दा नाम

अपने ब्रांड जां प्रोजेक्ट दा नांऽ दस्सने आस्तै इक साधारण लिंक गी सिर्फ इक एंकर टैग दी लोड़ ऐ।

<a class = "ब्रांड" href = "#" > ऐ  
  प्रोजेक्ट दा नाम
</a> दा

नवबार में रूप

नवबार दे अंदर इक फार्म गी ठीक ढंगै कन्नै स्टाइल करने ते स्थिति देने लेई, उचित वर्गें गी जोड़ो जिऱयां कि हेठ दित्ते गेदे न. डिफाल्ट फार्म आस्तै, शामल करो .navbar-formते या तां .pull-leftजां .pull-rightइसगी ठीक ढंगै कन्नै संरेखित करने आस्तै.

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

होर अनुकूलित सर्च फार्म आस्तै, नवबार च विशेश शैलियें आस्तै इनपुट च .navbar-searchते formच जोड़ो..search-query

<form class = "नवबार-खोज पुल-बाएं" > 
  <इनपुट प्रकार = "पाठ" वर्ग = "खोज-क्वेरी" प्लेसहोल्डर = "खोज" >   
</form> दा

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

अपने टॉपबार च सामग्री दी मात्रा दे आधार उप्पर, तुस प्रतिक्रियाशील विकल्पें गी लागू करना चांह् दे ओ. ऐसा करने आस्तै, अपनी nav सामग्री गी इक युक्त div, .nav-collapse.collapse, च लपेटो ते नवबार टॉगल बटन, .btn-navbar.

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

नव लिंक

नव आइटम गी बिना क्रमबद्ध सूची दे राहें जोड़ना सरल ऐ।

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

तुस इक खाली सूची आइटम ते इक साधारण वर्ग कन्नै अपने नव लिंक च डिवाइडर गी आसानी कन्नै जोड़ सकदे ओ। बस एह् लिंक दे बीच जोड़ो:

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

घटक संरेखण करना

नेव, सर्च फार्म, जां पाठ गी संरेखित करने आस्तै, .pull-leftजां .pull-rightउपयोगिता वर्गें दा इस्तेमाल करो. दौनें वर्गें गी निर्दिश्ट दिशा च इक CSS फ्लोट जोड़ेआ जाग।

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

nav च ड्रॉपडाउन ते ड्रॉपअप जोड़ना सुपर सरल ऐ, पर साढ़े जावास्क्रिप्ट प्लगइन दा इस्तेमाल करने दी लोड़ ऐ .

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

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

नवबार च पाठ

पाठ दी स्ट्रिंग्स गी इक च लपेटो <.navbar-text>, आमतौर पर <p>उचित लीडिंग ते रंग आस्तै इक टैग पर।

इन्हां दा इस्तेमाल क्यों करो

ब्रेडक्रंब नेविगेशन दा इस्तेमाल बरतूनी गी दस्सने दे तरीके दे रूप च कीता जंदा ऐ जे ओह् कुसै ऐप जां साइट दे अंदर कुत्थें न, पर प्राथमिक नेविगेशन आस्तै नेईं। उंदा इस्तेमाल विरल ते संक्षिप्त रक्खो तां जे ओह् मता असरदार होऐ ।

उदाहरण दे

इक गै उदाहरन जिऱयां दस्सेआ गेआ ऐ जे एह् मते सारे पन्नें पर प्रदर्शत होई सकदा ऐ।

• घर

• घर / ऐ।
• लाइब्रेरी

• घर / ऐ।
• लाइब्रेरी / ऐ।
• डेटा

मार्कअप करना

एचटीएमएल लिंक कन्नै तुंदी मानक अनऑर्डर सूची ऐ ।

<ul class = "ब्रेडक्रंब" > ऐ 
  <ली> दा
    <a href = "#" > घर </a> <span वर्ग = "विभाजक" > / </span>   
  </li> दा
  <ली> दा
    <a href = "#" > लाइब्रेरी </a> <span वर्ग = "विभाजक" > / </span>   
  </li> दा
  <li class = "सक्रिय" > डेटा </li> ऐ 
</ul> दा

कदूं इस्तेमाल करना

Rdio थमां प्रेरित अल्ट्रा सरल ते न्यूनतम शैली दा पृष्ठांकन, ऐप ते खोज परिणामें लेई शानदार। बड्डा ब्लॉक छूटना मुश्कल ऐ, आसानी कन्नै स्केल कीता जाई सकदा ऐ, ते बड्डे क्लिक क्षेत्र उपलब्ध करोआंदा ऐ।

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

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

लचीला संरेखण

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

उदाहरण दे

डिफाल्ट पृष्ठांकन घटक लचीला ऐ ते इक नंबर दे बदलावें च कम्म करदा ऐ.

मार्कअप करना

इक च लपेटे दा <div>, पृष्ठांकन सिर्फ इक <ul>.

<div वर्ग = "पृष्ठांकन" > ऐ 
  <उल> दा
    <li><a href = "#" > पिछला </a></li> 
    <ली वर्ग = "सक्रिय" > ऐ 
      <a href = "#" > 1 </a> ऐ 
    </li> दा
    <li><a href = "#" > 2 </a></li> ऐ 
    <li><a href = "#" > 3 </a></li> ऐ 
    <li><a href = "#" > 4 ​​</a></li> ऐ 
    <li><a href = "#" > अगला </a></li> 
  </ul> दा
</div> दा

पेजर दे बारे च

पेजर घटक हल्के मार्कअप ते होर बी हल्के शैलियें कन्नै सरल पृष्ठीकरण कार्यान्वयन आस्तै लिंकें दा इक सेट ऐ। ब्लॉग जां पत्रिकाएं जनेह् साधारण साइटें आस्तै एह् बड़ा शैल ऐ।

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

पेजर लिंक .disabledपृष्ठांकन थमां सामान्य वर्ग दा बी इस्तेमाल करदे न।

डिफ़ॉल्ट उदाहरण ऐ

डिफ़ॉल्ट रूप कन्नै, पेजर लिंकें गी केंद्रत करदा ऐ।

• पिछला
• अगला

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

संरेखित लिंक

वैकल्पिक रूप कन्नै, तुस हर इक लिंक गी बक्ख-बक्ख संरेखित करी सकदे ओ:

• ← पुराना
• नई →

<ul वर्ग = "पेजर" > ऐ 
  <ली वर्ग = "पिछला" > 
    <a href = "#" > & लरर ऐ; पुराना </a> 
  </li> दा
  <ली वर्ग = "अगला" > 
    <a href = "#" > नए → </a> दा 
  </li> दा
</ul> दा

तकरीबन

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

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

बूटस्ट्रैप तुंदी साइट पर सामग्री गी प्रदर्शत करने आस्तै इक हल्के वजन आह् ला, लचीला घटक प्रदान करदा ऐ जिसगी हीरो इकाई आखेआ जंदा ऐ। एह् मार्केटिंग ते सामग्री-भारी साइटें पर खरा कम्म करदा ऐ।

मार्कअप करना

अपनी सामग्री गी लाइक च लपेटो divतां जे:

<div वर्ग = "हीरो-इकाई" > ऐ 
  <h1> हेडिंग </h1> ऐ
  <p> टैगलाइन </p> ऐ
  <p> दा
    <a class = "बीटीएन बीटीएन-प्राथमिक बीटीएन-बड़े" > 
      और जानें
    </a> दा
  </p> दा
</div> दा

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

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

डिफ़ॉल्ट थंबनेल ऐ

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

बेहद अनुकूलन योग्य ऐ

थोह् ड़ी-मती अतिरिक्त मार्कअप कन्नै, थंबनेल च कुसै बी चाल्ली दी HTML सामग्री जि’यां हेडिंग, पैराग्राफ, जां बटन जोड़ना संभव ऐ।

• 

  थंबनेल लेबल

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

  हरकत हरकत

• 

  थंबनेल लेबल

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

  हरकत हरकत

थंबनेल दा इस्तेमाल क्यों करो

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

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

थंबनेल मार्कअप सरल ऐ- ulकिसे बी संख्या च liतत्वें कन्नै इक एह् सब किश ऐ जेह् ड़ी लोड़चदी ऐ। एह् सुपर लचीला बी ऐ, जेह् ड़ा तुंदी सामग्री गी लपेटने आस्तै सिर्फ थोह् ड़ी-मती मार्कअप कन्नै कुसै बी किस्म दी सामग्री दी अनुमति दिंदा ऐ।

ग्रिड स्तंभ आकारें दा उपयोग करदा ऐ

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

मार्कअप दा

जि’यां पैह् ले आखेआ गेआ ऐ, थंबनेल आस्तै लोड़चदा मार्कअप हल्का ते सीधा ऐ। लिंक कीती गेदी छवियें आस्तै डिफ़ॉल्ट सेटअप पर इक नज़र ऐ :

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

थंबनेल च कस्टम HTML सामग्री आस्तै, मार्कअप च थोड़ा बदलाव होंदा ऐ। ब्लॉक स्तर दी सामग्री गी कुतै बी अनुमति देने लेई, अस <a>गी इक <div>पसंद आस्तै स्वैप करदे आं तां:

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

होर मिसाल

तुंदे कोल उपलब्ध बक्ख-बक्ख ग्रिड क्लासें कन्नै अपने सारे विकल्पें दी खोज करो। तुस बक्ख-बक्ख आकारें गी बी मिक्स ते मैच करी सकदे ओ।

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

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

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

कम कोड कन्नै इक होर टिकाऊ घटक आस्तै, असें ब्लॉक अलर्टें, संदेशें गी जेह् ड़े मते पैडिंग कन्नै औंदे न ते आमतौर पर मता पाठ आस्तै विभेदक रूप गी हटाई दित्ता ऐ। क्लास बी बदली गेई ऐ .alert-block.

जावास्क्रिप्ट दे कन्नै शानदार चलदा ऐ

बूटस्ट्रैप इक शानदार jQuery प्लगइन कन्नै औंदा ऐ जेह् ड़ा अलर्ट संदेशें गी समर्थन करदा ऐ, जिस कन्नै उनेंगी खारिज करना तेज़ ते आसान होई जंदा ऐ।

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

उदाहरण दे अलर्ट

अपने संदेश ते इक वैकल्पिक बंद आइकन गी सरल वर्ग कन्नै इक div च लपेटो।

<div वर्ग = "सचेतक" > ऐ 
  <बटन वर्ग = "बंद करो" डेटा-खारिज = "अलर्ट" > × </बटन>  
  <strong> चेतावनी दी ! </strong> बेस्ट चेक यो सेल्फ, तुसीं बहुत अच्छा नहीं लग रहे हो।
</div> दा

सिर ऊपर ! आईओएस डिवाइस href="#"गी अलर्टें गी खारिज करने लेई इक दी लोड़ होंदी ऐ। एंकर बंद आइकनें लेई इसगी ते डेटा विशेषता गी जरूर शामल करो. वैकल्पिक रूप कन्नै, तुस <button>डेटा विशेषता कन्नै इक तत्व दा इस्तेमाल करी सकदे ओ, जेह् ड़ा असें अपने दस्तावेजें आस्तै करने दा विकल्प चुनेआ ऐ. बरतदे बेल्लै <button>तुसेंगी शामल करना होग type="button"जां तुंदे फार्म जमा नेईं करी सकदे न।

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

<div class = "अलर्ट अलर्ट-ब्लॉक" > 
  <a class = "बंद करो" डेटा-खारिज = "अलर्ट" href = "#" > × </a>   
  <h4 class = "अलर्ट-हेडिंग" > चेतावनी ऐ! </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> दा

बंद करो आइकन

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

× ऐ

<बटन वर्ग = "बंद करो" > × </बटन> दा 

जेकर तुस इक एंकर दा इस्तेमाल करना चांह् दे ओ तां आईओएस डिवाइसें गी क्लिक घटनाएं आस्तै इक href="#" दी लोड़ होंदी ऐ.

<a class = "बंद करो" href = "#" > & टाइम्स; </a> दा