बटन समूह के बा

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

बेहतरीन तरीका के बारे में बतावल गइल बा

बटन समूह आ टूलबार सभ के इस्तेमाल खातिर हमनी के निम्नलिखित दिशानिर्देश सभ के सलाह देत बानी जा:

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

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

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

इहाँ एचटीएमएल एंकर टैग बटन सभ के साथ बनावल मानक बटन समूह के कइसे देखल जाला:

<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.

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

बटन ड्रॉपडाउन के काम करे खातिर बूटस्ट्रैप ड्रॉपडाउन प्लगइन के जरूरत होला।

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

अवलोकन आ उदाहरण दिहल गइल बा

बटन ग्रुप स्टाइल आ मार्कअप के आधार पर हमनी के आसानी से स्प्लिट बटन बना सकेनी जा। स्प्लिट बटन सभ में बाईं ओर एगो मानक क्रिया आ दाहिने ओर एगो ड्रॉपडाउन टॉगल के बिसेसता बा जेह में संदर्भ लिंक सभ के साथ।

साइज के बा

अतिरिक्त बटन वर्ग के उपयोग करीं .btn-mini, .btn-small, या .btn-largeसाइजिंग खातिर।

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

उदाहरण के रूप में मार्कअप के बा

हमनी के सामान्य बटन ड्रॉपडाउन के विस्तार क के दूसरा बटन एक्शन देवेनी जा जवन अलग से ड्रॉपडाउन ट्रिगर के रूप में काम करेला।

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

ड्रॉपअप मेनू बा

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

<div वर्ग = "बीटीएन-समूह ड्रॉपअप" > बा 
  <बटन क्लास = "btn" > ड्रॉपअप </बटन> बा 
  <बटन वर्ग = "बीटीएन ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
    <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> के बा

समृद्ध मेनू आसान बना दिहल गइल

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

बूटस्ट्रैप में ड्रॉपडाउन के इनिशियलाइज करे पर डॉक्स पढ़े खातिर जावास्क्रिप्ट पन्ना पर जाईं .

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

• घर
• मदद
• ड्रॉपडाउन हो गइल बा
  • Action
  • Another action
  • Something else here
  • Separated link

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

ड्रॉपडाउन के साथ गोली

• घर
• मदद
• ड्रॉपडाउन हो गइल बा
  • Action
  • Another action
  • Something else here
  • Separated link

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

एप्लिकेशन-शैली के नेविगेशन के बारे में बतावल गइल बा

नव सूची वैकल्पिक हेडर सभ के साथ 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।

जेक्वेरी प्लगइन के जरूरत बा

सभ टैबेबल टैब हमनी के हल्का जेक्वेरी प्लगइन से संचालित बा। जावास्क्रिप्ट डॉक्स पन्ना पर टैब करे लायक टैब के जीवंत करे के तरीका के बारे में अउरी पढ़ीं .

जावास्क्रिप्ट ले लीं →

टैब करे लायक उदाहरण दिहल गइल बा

टैब के टैब करे लायक बनावे .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 class = "नवबार" > के बा 
  <div वर्ग = "नवबार-आंतरिक" > बा 
    <div वर्ग = "कंटेनर" > के बा 
      ...
    </div> के बा
  </div> के बा
</div> के बा

नवबार के ठीक कर दिहल गइल

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

<div class = "नवबार नवबार-फिक्स्ड-टॉप" > बा 
  ...
</div> के बा

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

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

ब्रांड के नाम बा

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

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

नवबार में फार्म बा

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

<फॉर्म क्लास = "नवबार-फॉर्म पुल-बाँया" > 
  <इनपुट प्रकार = "पाठ" वर्ग = "span2" > बा  
</form> के बा

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

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

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

अपना टॉपबार में सामग्री के मात्रा के आधार पर, रउआँ रिस्पांसिव विकल्प सभ के लागू कइल चाहत होखीं। एकरा खातिर आपन nav सामग्री के एगो में लपेटीं जवना में div, .nav-collapse.collapse, होखे आ नवबार टॉगल बटन, .btn-navbar.

<div class = "नवबार" > के बा 
  <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 वर्ग = "नव-संकुचन" > बा 
        <!-- .नव, .नवबार-खोज, .नवबर-फॉर्म आदि --> के बा
      </div> के बा
 
    </div> के बा
  </div> के बा
</div> के बा

नव लिंक दिहल गइल बा

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

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

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

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

घटक के संरेखण के बारे में बतावल गइल बा

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

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

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

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

जावास्क्रिप्ट ले लीं →

नवबार में पाठ कइल जाला

पाठ के स्ट्रिंग सभ के एगो में लपेटीं <.navbar-text>, आमतौर पर <p>सही लीडिंग आ रंग खातिर टैग पर।

इनकर इस्तेमाल काहें करे के बा

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

उदाहरण खातिर दिहल गइल बा

एकही उदाहरण के देखावल गइल बा जइसे कि ई कई पन्ना सभ पर देखावल जा सके ला।

• घर

• घर / 1999 के बा।
• पुस्तकालय

• घर / 1999 के बा।
• पुस्तकालय के / 1999 में भइल रहे।
• आंकड़ा

मार्कअप कइल गइल बा

एचटीएमएल राउर मानक बिना क्रमबद्ध सूची हवे जेह में लिंक बा।

<ul class = "ब्रेडक्रंब" > के बा 
  <ली> के बा
    <a href = "#" > घर </a> <span class = "विभाजक" > / </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 क्लास = "पेजर" > के बा 
  <li class = "पिछला" > के बा 
    <a href = "#" > &larr के बारे में जानकारी दिहल गइल बा; पुरान </a> के बा 
  </li> के बा
  <li वर्ग = "अगला" > बा 
    <a href = "#" > नया → </a> के बा 
  </li> के बा
</ul> के बा

बारे में

बैज कौनों तरह के संकेतक भा गिनती के देखावे खातिर छोट, सरल घटक होलें। ई आमतौर पर मेल डॉट ऐप नियर ईमेल क्लाइंट सभ में या पुश नोटिफिकेशन खातिर मोबाइल ऐप सभ पर पावल जालें।

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

बूटस्ट्रैप एगो हल्का, लचीला घटक देला जवना के हीरो यूनिट कहल जाला जवन रउरा साइट पर सामग्री देखावेला. मार्केटिंग आ सामग्री से भरपूर साइट पर ई बढ़िया काम करेला.

मार्कअप कइल गइल बा

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

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

h1एगो पन्ना पर सामग्री के खंड सभ के उचित रूप से स्पेस आउट आ सेगमेंट करे खातिर एगो सरल शेल । ई h1's डिफ़ॉल्ट small, तत्व के साथे-साथ अधिकतर अन्य घटक सभ (अतिरिक्त शैली सभ के साथ) के इस्तेमाल क सके ला।

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

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

डिफ़ॉल्ट रूप से, बूटस्ट्रैप के थंबनेल सभ के अइसन बनावल गइल बा कि लिंक कइल गइल छवि सभ के कम से कम जरूरी मार्कअप के साथ देखावल जा सके।

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

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

• 

  थंबनेल लेबल बा

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

  कार्रवाई कार्रवाई

• 

  थंबनेल लेबल बा

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

  कार्रवाई कार्रवाई

थंबनेल के इस्तेमाल काहें करीं

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

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

थंबनेल मार्कअप सरल बा- ulकवनो संख्या में liतत्व वाला एगो के जरूरत बा। इ सुपर लचीला भी बा, जवना से कवनो प्रकार के सामग्री के बस तनी जादा मार्कअप के संगे आपके सामग्री के लपेटे के अनुमति बा।

ग्रिड कॉलम साइज के इस्तेमाल करेला

अंत में, थंबनेल घटक मौजूदा ग्रिड सिस्टम क्लास सभ के इस्तेमाल करे ला-जइसे कि .span2या .span3—थंबनेल आयाम सभ के नियंत्रण खातिर।

मार्कअप के बारे में बतावल गईल बा

जइसन कि पहिले बतावल गइल बा कि थंबनेल खातिर जरूरी मार्कअप हल्का आ सीधा होला. लिंक कइल गइल छवि सभ खातिर डिफ़ॉल्ट सेटअप पर नजर डालल जा रहल बा :

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

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

<ul class = "थंबनेल" > बा 
  <ली वर्ग = "स्पैन3" > के बा 
    <div class = "थंबनेल" > के बा 
      <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 = "बंद करीं" data-dismiss = "अलर्ट" 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 class = "अच्छा" > के बा 
  ...
</div> के बा

आइकन के बंद करीं

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

× के बा

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

आईओएस डिवाइस सभ में क्लिक इवेंट सभ खातिर एगो href="#" के जरूरत होला अगर आप कौनों एंकर के इस्तेमाल कइल पसंद करीं।

<a class = "बंद करीं" href = "#" > × </a> के बा