बटन समूह

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

सर्वोत्तम प्रथाएँ

हम बटन समूह आ टूलबार कें उपयोग करय कें लेल निम्नलिखित दिशा निर्देशक कें सिफारिश करय छी:

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

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

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

एतय एचटीएमएल एंकर टैग बटन के साथ निर्मित मानक बटन समूह केना देखै छै:

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

ड्रॉपअप मेनू

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

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

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

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

कब प्रयोग करब

टैब आ गोली सामग्री कें खंडक कें लेल या संबंधित सामग्री कें पन्नाक कें बीच नेविगेट करय कें लेल बढ़िया छै.

घटक संरेखण

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

बेसिक टैब

लिंक के एकटा रेगुलर लिय <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>

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

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

बूटस्ट्रैप मे ड्रॉपडाउन कें आरंभ करय पर डॉक्स पढ़य कें लेल जावास्क्रिप्ट पृष्ठ पर जाउ .

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

• घर
• सहायता
• ड्रॉपडाउन
  • कार्य
  • एकटा आर क्रिया
  • एतय किछु आओर
  • अलग कड़ी

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

क्षैतिज विभाजक

क्लास के साथ एकटा खाली सूची आइटम बना क एकटा क्षैतिज विभाजक जोड़ू .divider, जेना कि:

<ul class = "नव नव-सूची" > 
  ...
  <li class = "विभाजक" </li> 
  ...
</ul>

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

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

की शामिल अछि

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

एहि सभक बीच बदलब आसान अछि आ मात्र बहुत कम मार्कअप बदलबाक आवश्यकता अछि ।

टैब में फीका पड़ें

टैब के फीका करय लेल, .fadeप्रत्येक मे जोड़ू .tab-pane.

jQuery प्लगइन के आवश्यकता अछि

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

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

टैबबल उदाहरण

.tab-paneटैब कें टैब करय योग्य बनावा कें लेल, हर टैब कें लेल एकटा यूनिक आईडी कें साथ बनाऊं आ ओकरा मे लपेटूं .tab-content.

दाहिना वा बामा संरेखित टैब क लेल, .nav-tabsआओर .tab-contentमे लपेटू .tabbable.

सीधा मार्कअप

टैबेबल टैब कें उपयोग करय कें लेल एकटा रैपिंग div, टैब कें एकटा सेट, आ सामग्री कें टैबेबल फलक कें एकटा सेट कें आवश्यकता होयत छै.

<div class = "tabbable" > <!-- केवल बामा/दाहिना टैब क लेल आवश्यक -->  
  <ul class = "नव नव-टैब" > 
    <li class = "सक्रिय" ><a href = "#tab1" data-toggle = "टैब" > खंड 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "टैब" > खंड 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 वर्ग = "नवबार-आन्तरिक" > 
    <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 = "नवबार-खोज पुल-बाम" > 
  <input type = "text" 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>

अहां एकटा खाली सूची आइटम आ एकटा सरल क्लास सं आसानी सं अपन नव लिंक मे डिवाइडर जोड़ सकय छी. बस लिंक के बीच ई जोड़ू:

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

घटक संरेखण

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

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

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

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

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

नवबार में पाठ

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

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

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

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

एकटा उदाहरण जेना देखाओल गेल अछि जेना ई अनेक पृष्ठक पार प्रदर्शित भ' सकैत अछि |

• घर

• घर / 1।
• पुस्तकालय

• घर / 1।
• पुस्तकालय / २.
• डाटा

मार्कअप

एचटीएमएल लिंकक संग अहाँक मानक अक्रमित सूची अछि ।

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

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

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

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

.disabledपेजर लिंक पृष्ठांकन स सामान्य वर्ग क सेहो उपयोग करैत अछि ।

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

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

• पहिलुका
• अगिला

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

संरेखित लिंक

वैकल्पिक रूप सँ, अहाँ प्रत्येक लिंक केँ साइड मे संरेखित क' सकैत छी:

• ← पुरान
• नयाँ →

<ul वर्ग = "पेजर" > 
  <li class = "पिछला" > 
    <a href = "#" > एवं आर; पुरान </a> 
  </li>
  <li class = "अगला" > 
    <a href = "#" > नवीनतम → </a> 
  </li>
</ul>

विषय में

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

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

बूटस्ट्रैप एकटा हल्का, लचीला घटक प्रदान करयत छै जेकरा हीरो यूनिट कहल जायत छै जे अहां कें साइट पर सामग्री कें प्रदर्शन करयत छै. मार्केटिंग आओर कंटेंट-हेवी साइट पर ई नीक काज करैत अछि.

मार्कअप

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

<div वर्ग = "नायक-इकाई" > 
  <h1> शीर्षक </h1>
  <p> टैगलाइन </p>
  <p>
    <a class = "btn btn-प्राथमिक btn-बड़े" > 
      और जानें
    </a>
  </p>
</div>

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

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

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

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

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

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

• 

  थंबनेल लेबल

  क्रास जस्टो ओडियो, डापिबस एसी फैसिलिसिस में, एगेस्टास एगेट क्वाम। डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस। नुल्लम आईडी डोलोर आईडी निभ 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 वर्ग = "थंबनेल" > 
      <img src = "https://प्लेसहोल्ड.इट/260x180" alt = "" >  
      <h5> थंबनेल लेबल </h5>
      <p> थंबनेल कैप्शन एतहि... </p>
    </div>
  </li>
  ...
</ul>

अधिक उदाहरण

अहां कें लेल उपलब्ध विभिन्न ग्रिड क्लास कें साथ अपन सबटा विकल्पक कें खोज करूं. अहां अलग-अलग साइज के सेहो मिला सकय छी आओर मिला सकय छी.

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

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

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

कम कोड वाला अधिक टिकाऊ घटक लेली, हम ब्लॉक अलर्ट, संदेश जे अधिक पैडिंग आरू आम तौर पर अधिक पाठ के साथ आबै छै, के लेलऽ विभेदक रूप क॑ हटाय देल॑ छै । क्लास सेहो बदलि क .alert-block.

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

बूटस्ट्रैप एकटा बढ़िया jQuery प्लगइन कें साथ आबै छै जे अलर्ट संदेशक कें समर्थन करयत छै, जेकरा खारिज करनाय जल्दी आ आसान बनायत छै.

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

उदाहरण अलर्ट

सरल वर्ग के साथ एक div में अपने संदेश और एक वैकल्पिक बंद आइकन लपेटें |

<div वर्ग = "सचेतक" > 
  <button class = "बंद" data-dismiss = "सचेतक" > × </बटन>  
  <strong> चेतावनी! </strong> बेस्ट चेक यो सेल्फ, अहाँ बेसी नीक नहि लागि रहल छी।
</div>

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

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

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

अतिरिक्त रंग

प्रगति बार सुसंगत शैलीक कें लेल किछु एकहि बटन आ अलर्ट वर्गक कें उपयोग करयत छै.

धारीदार सलाखों

ठोस रंग के समान, हम विभिन्न धारीदार प्रगति बार रखने हैं |

व्यवहार

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

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

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

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

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

वेल्स

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

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

बंद आइकन

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

×

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

आईओएस डिवाइस कें क्लिक घटनाक कें लेल एकटा href="#" कें आवश्यकता होयत छै अगर अहां एंकर कें उपयोग करय कें बजाय.

<a class = "बंद" href = "#" > & समय; </a>