घटक

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

बटन समूह

एक समग्र घटक कें रूप मे अनेक बटन कें एक साथ जोड़य कें लेल बटन समूहक कें उपयोग करूं. <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>

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

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

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

सिर ऊपर

बटन समूहक लेल CSS एकटा अलग फाइल मे अछि, button-groups.less.

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

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

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

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

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

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

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

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

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

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

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

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

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

टैब आ गोली किएक

बूटस्ट्रैप म॑ टैब आरू गोली एक <ul>ही कोर एचटीएमएल के साथ, लिंकऽ के सूची प॑ बनलऽ छै । केवल एकटा क्लास कें साथ टैब या गोली कें बीच अदला-बदली करूं.

सामग्री के उप-खंड या संबंधित सामग्री के पन्ना के बीच नेविगेट करय के लेल दुनू विकल्प बढ़िया अछि.

बेसिक टैब

लिंक के एकटा रेगुलर लिय <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>टैग जोड़ू आ अहाँ सेट भ गेलौं।

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

लिंक के लिस्ट ल क जोड़ू 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 मे छी।

हाउडी, हम खंड 2 मे छी।

की अप लड़की, ई धारा 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>

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

नीचाँ पर टैब

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

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

हाउडी, हम सेक्शन बी मे छी।

की अप लड़की, ई सेक्शन सी अछि।

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

बामा कात टैब

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

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

हाउडी, हम सेक्शन बी मे छी।

की अप लड़की, ई सेक्शन सी अछि।

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

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

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

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

हाउडी, हम सेक्शन बी मे छी।

की अप लड़की, ई सेक्शन सी अछि।

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

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

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

नवबार मचान

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

<div वर्ग = "नवबार" > 
  <div वर्ग = "नवबार-आन्तरिक" > 
    <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, मे लपेटू आओर 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>

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

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

<ul वर्ग = "नव" > 
  <li class = "ड्रॉपडाउन" > 
    <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 class = "विभाजक" > / </span>   
  </li>
  <li वर्ग = "सक्रिय" > 
    <a href = "#" > डेटा </a> 
  </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>

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

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

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

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

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

<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">New</span>`
चेतावनी	`<span class="label label-warning">Warning</span>`
महत्वपूर्ण	`<span class="label label-important">Important</span>`
जानकारी	`<span class="label label-info">Info</span>`

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

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

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

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

थंबनेल लेबल

क्रास जस्टो ओडियो, डापिबस एसी फैसिलिसिस में, एगेस्टास एगेट क्वाम। डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस। नुल्लम आईडी डोलोर आईडी निभ 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 class = "थंबनेल" > 
      <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लेल आ एकटा मिलान हेडिंग कें लेल.

चेतावनी!

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

<div class = "सचेतक अलर्ट-ब्लॉक" > 
  <a class = "बंद करू" > × </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>

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

अतिरिक्त रंग

प्रगति बार समान स्टाइलिंग कें लेल बटन आ अलर्ट कें रूप मे किछु समान वर्ग नामक कें उपयोग करयत छै.

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

वैकल्पिक रूप सं, अहां LESS फाइल कें अनुकूलित कयर सकय छी आ अपन रंग आ आकार कें रोल कयर सकय छी.

व्यवहार

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

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

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

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

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

वेल्स

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

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

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

बैज

अपठित गिनती कें लेल या सरल संकेतक कें रूप मे कोनों तत्व पर बैज कें उपयोग करूं.

<span वर्ग = "बिल्ला" > 3 </div>

बंद आइकन

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

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

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

बटन समूह

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

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

सिर ऊपर

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

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

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

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

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

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

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

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

टैब आ गोली किएक

बेसिक टैब

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

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

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

ढेर टैब

ढेर गोलियाँ

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

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

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

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

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

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

आइकन के साथ

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

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

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

की शामिल अछि

टैबबल उदाहरण

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

सीधा मार्कअप

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

नीचाँ पर टैब

बामा कात टैब

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

नवबर

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

नवबार मचान

ब्रांड नाम

खोज फॉर्म

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

नव लिंक

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

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

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

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

मार्कअप

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

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

कब प्रयोग करब

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

लचीला संरेखण

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

मार्कअप

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

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

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

संरेखित लिंक

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

थंबनेल छवि, वीडियो, पाठ, आओर बहुत किछु के ग्रिड

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

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

थंबनेल लेबल

थंबनेल लेबल

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

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

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

मार्कअप के

अधिक उदाहरण

सफलता, चेतावनी, आओर त्रुटि संदेश क लेल शैली कए अलर्ट करैत अछि

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

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

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

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

उदाहरण अलर्ट

चेतावनी!

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