घटक ऐ

नेविगेशन, अलर्ट, पोपोवर, ते होर मता किश उपलब्ध करोआने लेई बूटस्ट्रैप च दर्जन भर पुन: उपयोग करने योग्य घटक बनाए गेदे न।

बटन दे समूह

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

तुस होर जटिल प्रोजेक्टें लेई <div class="btn-group">इक च सेट बी जोड़ सकदे ओ ।<div class="btn-toolbar">

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

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

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

ते मते सारे समूहें लेई इक टूलबार कन्नै:

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

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

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

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

सिर ऊपर

बटन समूहें लेई सीएसएस इक बक्खरी फाइल च ऐ, बटन-समूह.कम.

बटन ड्रॉपडाउन होंदा ऐ

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

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

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

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

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

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

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

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

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

हल्के डिफ़ॉल्ट इक गै मार्कअप, बक्ख-बक्ख वर्गें

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

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

टैब ते गोलियां क्यों

बूटस्ट्रैप च टैब ते गोलियां इक <ul>गै कोर एचटीएमएल कन्नै इक पर बनाया गेदा ऐ, लिंक दी इक सूची। सिर्फ इक क्लास कन्नै टैब जां गोलियां दे बीच स्वैप करो।

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

बेसिक टैब

लिंक दा इक रेगुलर लेओ <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>ते तुस सेट होई गेदे ओ।

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

लिंक दी इक लिस्ट लैओ ते जोड़ो 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> दा

Tabbable nav जावास्क्रिप्ट दे राहें टैब गी जीवन च लाओ

क्या शामिल ऐ

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

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

टैबबल उदाहरन

.nav-tabsटैब गी टैब करने योग्य बनाने लेई, क्लास कन्नै इक होर डिव च लपेटो .tabbable.

मैं खंड 1 च हां।

हाउडी, मैं सेक्शन 2 च हां।

क्या अप लड़की, ए सेक्शन 3 ऐ।

कस्टम जे क्वेरी प्लगइन

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

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

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

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

<div वर्ग = "टैबबल" > ऐ 
  <ul class = "नव नव-टैब" > 
    <li class = "सक्रिय" ><a href = "#1" डेटा-टॉगल = "टैब" > धारा 1 </a></li>   
    <li><a href = "#2" डेटा-टॉगल = "टैब" > खंड 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> दा

नवबार गी व्यूपोर्ट दे शीर्शक पर फिक्स करने आस्तै, सारें .navbar-fixed-topशा बाहरले div च जोड़ो, .navbar. अपने CSS च, तुसेंगी padding-top: 40px;अपने <body>.

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

ब्रांड दा नाम

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

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

सर्च फार्म

सर्च फार्म क्लास कन्नै नवबार च कस्टम शैलियां हासल करदे न .navbar-search। इसे संरेखित करने के लिए शामिल .pull-leftया .pull-rightपर ।form

<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> दा

ड्रॉपडाउन जोड़ना

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

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

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

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

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

उदाहरण दे

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

मार्कअप करना

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

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

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

पेजर दे बारे च

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

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

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

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

संरेखित लिंक

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

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

लेबल लगाए	मार्कअप करना
डिफाल्ट	`<span class="label">Default</span>`
नमां	`<span class="label label-success">New</span>`
चेतावनी	`<span class="label label-warning">Warning</span>`
जरूरी	`<span class="label label-important">Important</span>`
इन्फो	`<span class="label label-info">Info</span>`

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

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

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

थोह् ड़ी-मती अतिरिक्त मार्कअप कन्नै, थंबनेल च कुसै बी चाल्ली दी 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 वर्ग = "सचेतक" > ऐ 
  <a class = "बंद करो" > × </a> 
  <strong> चेतावनी दी ! </strong> बेस्ट चेक यो सेल्फ, तुसीं बहुत अच्छा नहीं लग रहे हो।
</div> दा

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

× ऐ

चेतावनी!

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

<div class = "अलर्ट अलर्ट-ब्लॉक" > 
  <a class = "बंद करो" > × </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> दा

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

अतिरिक्त रंग

प्रगति पट्टी समान स्टाइलिंग लेई बटन ते अलर्टें दे समान वर्ग दे नांऽ दा उपयोग करदे न।

.progress-info
.progress-success
.progress-danger

वैकल्पिक रूप कन्नै, तुस LESS फाइलें गी अनुकूलित करी सकदे ओ ते अपने रंगें ते आकारें गी रोल करी सकदे ओ।

ब्यहार

प्रगति बार CSS3 संक्रमणें दा उपयोग करदे न, इसलेई जेकर तुस जावास्क्रिप्ट दे राहें चौड़ाई गी गतिशील रूप कन्नै समायोजित करदे ओ तां एह् सुचारू रूप कन्नै आकार बदलग.

जेकर तुस .activeक्लास दा इस्तेमाल करदे ओ तां तुंदी .progress-stripedप्रगति पट्टी बाएं थमां दाएं पट्टियें गी एनिमेट करग।

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

प्रगति बार अपने सारे प्रभावें गी हासल करने लेई CSS3 ढाल, संक्रमण, ते एनीमेशन दा उपयोग करदे न। एह् सुविधां IE7-8 जां फायरफॉक्स दे पुराने संस्करणें च समर्थत नेईं न.

ओपेरा इस समें एनीमेशन गी समर्थन नेईं करदा ऐ।

वेल्स ने दी

कुएं गी इक तत्व पर इक साधारण प्रभाव दे रूप च इस्तेमाल करो तां जे उसी इक इनसेट प्रभाव दित्ता जाई सकै।

देखो, मैं इक कुएं च हां!

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

बिल्ला

अनपढ़ गिनती आस्तै जां इक साधारण संकेतक दे रूप च इक तत्व पर बिल्ला दा इस्तेमाल करो।

<span class = "बिल्ला" > 3 </div> ऐ

बंद करो आइकन

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

× ऐ

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

बटन समूह होर टूलबार-जैसी कार्यक्षमता आस्तै बटनें कन्नै जुड़ो

बटन दे समूह

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

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

सिर ऊपर

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

बटन ड्रॉपडाउन होंदा ऐ

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

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

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

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

हल्के डिफ़ॉल्ट इक गै मार्कअप, बक्ख-बक्ख वर्गें

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

टैब ते गोलियां क्यों

बेसिक टैब

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

स्टैक करने योग्य टैब या गोलियां खड़ी बनाओ

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

ढेर हो गए टैब

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

ड्रॉपडाउन उन्नत नव घटकें लेई

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

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

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

नव सूची सरल ढेर नव बनाओ, साइडबार आस्तै शानदार

एप्लिकेशन-शैली नेविगेशन

आइकनों के साथ

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

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

Tabbable nav जावास्क्रिप्ट दे राहें टैब गी जीवन च लाओ

क्या शामिल ऐ

टैबबल उदाहरन

कस्टम जे क्वेरी प्लगइन

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

किसी भी दिशा में टैब करने योग्य

नीचे पर टैब

बाईं ओर टैब

दाहिने ओर टैब

नवबर जी

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

नवबार मचान

ब्रांड दा नाम

सर्च फार्म

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

नव लिंक

ड्रॉपडाउन जोड़ना

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

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

उदाहरण दे

मार्कअप करना

पेजिंग सामग्री दे माध्यम कन्नै पेजिंग लेई दो विकल्प

मल्टीकॉन-पृष्ठ पृष्ठांकन करना

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

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

लचीला संरेखण

उदाहरण दे

मार्कअप करना

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

पेजर दे बारे च

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

संरेखित लिंक

इनलाइन लेबल लेबल ते एनोटेशन पाठ

थंबनेल छवियां, वीडियो, पाठ, ते होर मते सारे ग्रिड

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

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

थंबनेल लेबल

थंबनेल लेबल

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

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

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

मार्कअप दा

होर मिसाल

सफलता, चेतावनी, ते त्रुटि संदेशें आस्तै शैलियें गी अलर्ट करदा ऐ

हल्के वजन दे डिफ़ॉल्ट

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

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

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

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

चेतावनी!

संदर्भ विकल्प इक अलर्ट दे अर्थ गी बदलने लेई वैकल्पिक वर्गें गी जोड़ो