बटन दे समूह

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

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

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

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

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

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

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

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

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

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

<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

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

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

घटक संरेखण

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>ते तुस सेट होई गेदे ओ।

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

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

क्या शामिल ऐ

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

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

टैबबल उदाहरन

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

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

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

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

निचले हिस्से पर टैब

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

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

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

अपने CSS च, तुसेंगी अपने <body>. कोर बूटस्ट्रैप सीएसएस दे बाद ते वैकल्पिक उत्तरदायी सीएसएस थमां पैह् ले इसगी ज़रूर जोड़ो.

ब्रांड दा नाम

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

<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 class = "चिह्न-पट्टी" </span> 
        <span class = "चिह्न-पट्टी" </span> 
        <span class = "चिह्न-पट्टी" </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> दा

घटक संरेखण

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

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

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

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

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

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

लिंक अनुकूलन योग्य न ते सच्चे वर्ग कन्नै केईं परिस्थितियें च कम्म करदे न। .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> दा

पेजर दे बारे च

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

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

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

• पिछला
• अगला

<उल वर्ग = "पेजर" > ऐ 
  <ली> दा
    <a href = "#" > पिछला </a> 
  </li> दा
  <ली> दा
    <a href = "#" > अगला </a> 
  </li> दा
</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 सामग्री जि’यां हेडिंग, पैराग्राफ, जां बटन जोड़ना संभव ऐ।

• 

  थंबनेल लेबल

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

  हरकत हरकत

• 

  थंबनेल लेबल

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

  हरकत हरकत

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

थंबनेल (पैह् ले .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आस्तै ते इक मिलान हेडिंग आस्तै।

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