बटण गट करतात

एक संमिश्र घटक म्हणून एका परस चड बटणां एकठांय जोडपाक बटण गट वापरात. <a>वा <button>घटकांची माळ घेवन त्यो तयार करात .

उत्तम पद्दती

बटण गट आनी साधनपट्टी वापरपाखातीर आमी सकयल दिल्ल्यो मार्गदर्शक तत्वां शिफारस करतात:

• सदांच एकाच बटण गटांत एकूच घटक वापरात, <a>वा <button>.
• एकाच बटण गटांत वेगवेगळ्या रंगांचे बटण मिक्स करूंक नाकात.
• मजकूर सोडून वा ताचे बदला चिन्नां वापरात, पूण योग्य आसल्यार alt आनी शीर्षक मजकूर समाविष्ट करपाची खात्री करात.

ड्रॉपडावन आशिल्ले संबंदीत बटण गट (सकयल पळयात) वेगळे कॉल करपाक जाय आनी सदांच हेतू आशिल्ली वागणूक दाखोवपाक ड्रॉपडावन कॅरेट आसपावपाक जाय.

मुलभूत उदाहरण

एचटीएमएल एंकर टॅग बटणां सयत तयार केल्लो मानक बटण गट कसो सोदता तें पळयात:

<div वर्ग = "बीटीएन-समूह" > 
  <बटण वर्ग = "btn" > 1 </बटण> 
  <बटण वर्ग = "btn" > 2 </बटण> 
  <बटण वर्ग = "btn" > 3 </बटण> 
</div> हें नांव

साधनपट्टीचें उदाहरण

चड गुंतागुंतीच्या घटकांखातीर एकांत संच एकठांय करात <div class="btn-group">.<div class="btn-toolbar">

<div वर्ग = "btn-साधनपट्टी" > 
  <div वर्ग = "बीटीएन-समूह" > 
    ...
  </div> हें नांव
</div> हें नांव

चेकबॉक्स आनी रेडिओ रूची

बटण गट रेडिओ म्हणूनय काम करूंक शकतात, जंय फकत एक बटण सक्रिय आसूं येता, वा चेकबॉक्स, जंय खंयच्याय संख्येन बटण सक्रिय आसूं येता. ते खातीर जावास्क्रिप्ट डॉक्स पळयात .

जावास्क्रिप्ट मेळोवची »

बटण गटांत ड्रॉपडावन

तकली वयर काडटा! ड्रॉपडावन आशिल्ले बटण योग्य रेंडरींग खातीर .btn-groupएक भितर स्वताच्या बटणांत वैयक्तीक रितीन गुठलावंक जाय ..btn-toolbar

नियाळ आनी उदाहरणां

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

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

बटण गटा प्रमाणें, आमचो मार्कअप नेमान बटण मार्कअप वापरता, पूण शैली परिष्कृत करपाक आनी Bootstrap च्या ड्रॉपडावन jQuery प्लगइनाक तेंको दिवपाक मुठीभर जोडणीं सयत.

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

सगळ्या बटण आकारां वांगडा काम करता

बटण ड्रॉपडावन खंयच्याय आकाराचेर काम करतात. तुमचे बटण आकार .btn-large, .btn-small, वा .btn-mini.

जावास्क्रिप्ट जाय

बटण ड्रॉपडावन कार्य करपाक बूटस्ट्रॅप ड्रॉपडावन प्लगइनाची गरज आसता.

कांय प्रकरणांनी-मोबायला सारके-ड्रॉपडावन मेनू व्यूपोर्टा भायर विस्तारतले. तुमकां संरेखण हाताळणीन वा सानुकूल जावास्क्रिप्टान सोडोवपाची गरज आसा.

नियाळ आनी उदाहरणां

बटण गट शैली आनी मार्कअपाचेर उबारून आमी सहजपणान स्प्लिट बटण तयार करूंक शकतात. विभाजीत बटणां डावी वटेन मानक कृती आनी उजवे वटेन संदर्भ दुव्यां सयत ड्रॉपडावन टॉगल दाखयतात.

आकारांचो आस्पाव जाता

अतिरिक्त बटण वर्ग वापरात .btn-mini, .btn-small, वा .btn-largeआकार दिवपाखातीर.

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

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

आमी सामान्य बटण ड्रॉपडावनांचेर विस्तार करतात दुसरी बटण कृती पुरवण करपाक जी वेगळी ड्रॉपडावन ट्रिगर म्हणून काम करता.

<div वर्ग = "बीटीएन-समूह" > 
  <बटण वर्ग = "btn" > कृती </बटण> 
  <बटण वर्ग = "btn ड्रॉपडावन-टॉगल" डेटा-टॉगल = "ड्रॉपडावन" >  
    <span वर्ग = "कॅरेट" </span> 
  </बटण> हें नांव
  <ul वर्ग = "ड्रॉपडावन-मेनू" > 
    <!-- ड्रॉपडावन मेनू दुवे -->
  </ul> हें नांव
</div> हें नांव

ड्रॉपअप मेनू आसात

च्या तात्काळ पालकाक एकूच वर्ग जोडून ड्रॉपडावन मेनू सकयल सावन वयर टॉगल करूंक शकतात .dropdown-menu. तो दिका .caretउलटयतलो आनी मेनू स्वता परतून वयर सकयल वचचे बदला सकयल वयर वचपाक.

<div वर्ग = "btn-समूह ड्रॉपअप" > 
  <बटण वर्ग = "btn" > ड्रॉपअप </बटण> 
  <बटण वर्ग = "btn ड्रॉपडावन-टॉगल" डेटा-टॉगल = "ड्रॉपडावन" >  
    <span वर्ग = "कॅरेट" </span> 
  </बटण> हें नांव
  <ul वर्ग = "ड्रॉपडावन-मेनू" > 
    <!-- ड्रॉपडावन मेनू दुवे -->
  </ul> हें नांव
</div> हें नांव

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

हांगाचे सगळे nav घटक-टॅब, गोळ्या, आनी यादी- वर्गा वरवीं समान बेस मार्कअप आनी शैली वांटतात.nav .

केन्ना वापरप

सामुग्रीच्या विभागां खातीर वा संबंदीत सामुग्रीच्या पानांचेर नेव्हिगेट करपा खातीर टॅब आनी गोळ्या उत्तम आसात.

घटक संरेखण

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

मुळावे टॅब

लिंकांचो रेग्युलर घेवचो <ul>आनी जोडचो .nav-tabs:

• घर
• प्रोफायल
• संदेश

<ul वर्ग = "nav nav-टॅब" > 
  <li वर्ग = "सक्रीय" > 
    <a href = "#" > घर </a> 
  </li> हें नांव
  <li><a href = "#" > ... </a></li> ह्या नांवान वळखतात 
  <li><a href = "#" > ... </a></li> ह्या नांवान वळखतात 
</ul> हें नांव

मुळाव्यो गुळयो

तोच HTML घेयात, पूण .nav-pillsताचे बदला वापरात:

• घर
• प्रोफायल
• संदेश

<ul class = "नव नव-गोळ्या" > 
  <li वर्ग = "सक्रीय" > 
    <a href = "#" > घर </a> 
  </li> हें नांव
  <li><a href = "#" > ... </a></li> ह्या नांवान वळखतात 
  <li><a href = "#" > ... </a></li> ह्या नांवान वळखतात 
</ul> हें नांव

'एम्' कशें स्टॅक करप

टॅब आनी गोळ्या पूर्वनिर्धारीतपणान आडवे आशिल्ल्यान, फकत दुसरो वर्ग जोडात, .nav-stacked, तांकां उबें रांकीत दिसपाक.

स्टॅक केल्ले टॅब

• घर
• प्रोफायल
• संदेश

<ul class = "nav nav-टॅब nav-स्टॅक केल्ले" > 
  ...
</ul> हें नांव

रास केल्लीं गोळ्यां

• घर
• प्रोफायल
• संदेश

<ul class = "नव नव-गोळ्या नव-स्टॅक केल्लीं" > 
  ...
</ul> हें नांव

गिरेस्त मेनू सोंपें केलें

बूटस्ट्रॅप टॅब आनी गोळ्यांतले ड्रॉपडावन मेनू सुपर सोपे आसात आनी फकत मात्शें अतिरिक्त HTML आनी हलके वजनाचे jQuery प्लगइन जाय पडटा.

बूटस्ट्रॅपांत ड्रॉपडावन आरंभ करपाचे डॉक्स वाचपाक जावास्क्रिप्ट पानाचेर वचचें .

ड्रॉपडावन आशिल्ले टॅब

• घर
• आदार
• ड्रॉपडावन करप
  • Action
  • Another action
  • Something else here
  • Separated link

<ul वर्ग = "nav nav-टॅब" > 
  <li वर्ग = "ड्रॉपडावन" > 
    <a class = "ड्रॉपडावन-टॉगल". 
       data-toggle = "ड्रॉपडावन".
       href = "#" > हें नांव
        ड्रॉपडावन करप
        <b वर्ग = "कॅरेट" </b> 
      </a> हें नांव
    <ul वर्ग = "ड्रॉपडावन-मेनू" > 
      <!-- दुवे -->
    </ul> हें नांव
  </li> हें नांव
</ul> हें नांव

ड्रॉपडावन आशिल्लीं गोळ्यां

• घर
• आदार
• ड्रॉपडावन करप
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "नव नव-गोळ्या" > 
  <li वर्ग = "ड्रॉपडावन" > 
    <a class = "ड्रॉपडावन-टॉगल". 
       data-toggle = "ड्रॉपडावन".
       href = "#" > हें नांव
        ड्रॉपडावन करप
        <b वर्ग = "कॅरेट" </b> 
      </a> हें नांव
    <ul वर्ग = "ड्रॉपडावन-मेनू" > 
      <!-- दुवे -->
    </ul> हें नांव
  </li> हें नांव
</ul> हें नांव

ऍप्लिकेशन-शैलीचें नेव्हिगेशन

Nav यादी पर्यायी शीर्षकां सयत nav दुव्यांचो गट तयार करपाचो सोपो आनी सोपो मार्ग पुरवण करतात. OS X च्या Finder सारकिल्या सायडबारांत तांचो वापर चड बरो जाता.

संरचनात्मक नदरेन, ते टॅब आनी गोळ्यां प्रमाणेंच कोर नाव शैलींचेर तयार केल्यात, देखून वापर आनी पसंती सरळ आसा.

चिन्नां सयत

तशेंच नाव यादी चिन्नां सयत सज्ज करप सोंपें आसा. वर्गा वांगडा योग्य <i>टॅग जोडात आनी तुमी सेट जाल्यात.

आडवे विभाजक

वर्गा वांगडा रिकामी वळेरी आयटम तयार करून आडवो विभाजक जोडात .divider, जशें अशें:

<ul वर्ग = "nav नव-सूची" > 
  ...
  <li वर्ग = "विभाजक" </li> 
  ...
</ul> हें नांव

उदाहरण नाव यादी

दुव्यांची वळेरी घेयात आनी जोडात class="nav nav-list":

<ul वर्ग = "nav नव-सूची" > 
  <li वर्ग = "नाव-शीर्षक" > 
    यादी शीर्षक
  </li> हें नांव
  <li वर्ग = "सक्रीय" > 
    <a href = "#" > घर </a> 
  </li> हें नांव
  <ली> हें नांव
    <a href = "#" > लायब्ररी </a> 
  </li> हें नांव
  ...
</ul> हें नांव

चिन्नां आशिल्लें उदाहरण

तेंच उदाहरण, पूण <i>चिन्नां खातीर टॅग आशिल्ले.

<ul वर्ग = "nav नव-सूची" > 
  ...
  <ली> हें नांव
    <a href = "#" > हें नांव 
      <i वर्ग = "चिन्न-पुस्तक" </i> 
      लायब्ररी
    </a> हें नांव
  </li> हें नांव
  ...
</ul> हें नांव

कितें आस्पावलां

टॅबा वरवीं सामुग्री मदीं टॉगल करपाक साद्या प्लगइनान तुमचे टॅब जिवीत हाडात. बूटस्ट्रॅप टॅब करपाक येवपी टॅब चार शैलींनी एकठांय करता: वयर (मुळावें), उजवें, सकयल, आनी डावें.

तांचे मदीं बदलप सोंपें आसता आनी फकत सामकेच उणें मार्कअप बदलचें पडटा.

टॅबांत फिकट जावप

टॅब फीके करपाक, .fadeदरेक जोडात .tab-pane.

jQuery प्लगइनाची गरज आसा

सगळे टॅब करपाक येवपी टॅब आमच्या हलके वजनाच्या jQuery प्लगइनान चालना दितात. जावास्क्रिप्ट डॉक्स पानाचेर टॅब करपाक येवपी टॅब कशे जिवीत हाडचे हाचे विशीं चड वाचात .

जावास्क्रिप्ट मेळोवची →

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

टॅब टॅब करपाक योग्य करपाक, .tab-paneदर एका टॅबा खातीर एक अद्वितीय ID आशिल्लो एक तयार करात आनी तांकां .tab-content.

उजवे वा दावे संरेखित केल्ल्या टॅबांखातीर, .nav-tabsआनी .tab-contentहातूंत गुठलावचें .tabbable.

सरळ मार्कअप करप

टॅब करपाक योग्य टॅब वापरपाक रॅपिंग div, टॅब संच, आनी सामुग्रीच्या टॅब करपाक योग्य फलकांचो संच जाय पडटा.

<div class = "tabbable" > <!-- फकत डाव्या/उजव्या टॅबांक जाय -->  
  <ul वर्ग = "nav nav-टॅब" > 
    <li class = "सक्रीय" ><a href = "#tab1" data-toggle = "टॅब" > विभाग 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "टॅब" > विभाग 2 </a></li>  
  </ul> हें नांव
  <div वर्ग = "टॅब-सामग्री" > 
    <div वर्ग = "टॅब-पॅन सक्रिय" id = "टॅब1" >  
      <p> हांव विभाग 1. </p>
    </div> हें नांव
    <div वर्ग = "टॅब-पॅन" id = "टॅब 2" >  
      <p> हावडी, हांव विभाग 2. </p>
    </div> हें नांव
  </div> हें नांव
</div> हें नांव

सकयल आशिल्ले टॅब

HTML चो क्रम उलटून सकयल टॅब घालपाक एक वर्ग जोडात.

<div class = "टॅबॅबल टॅब-सकयल" > 
  <div वर्ग = "टॅब-सामग्री" > 
    ...
  </div> हें नांव
  <ul वर्ग = "nav nav-टॅब" > 
    ...
  </ul> हें नांव
</div> हें नांव

डावी वटेन टॅब

डाव्या वटेन टॅब घालपाक वर्ग स्वॅप करचो.

<div class = "टॅबॅबल टॅब-डावें" > 
  <ul वर्ग = "nav nav-टॅब" > 
    ...
  </ul> हें नांव
  <div वर्ग = "टॅब-सामग्री" > 
    ...
  </div> हें नांव
</div> हें नांव

उजवे वटेन टॅब

उजवे वटेन टॅब घालपाक वर्ग स्वॅप करचो.

<div class = "टॅबबल टॅब-उजवें" > 
  <ul वर्ग = "nav nav-टॅब" > 
    ...
  </ul> हें नांव
  <div वर्ग = "टॅब-सामग्री" > 
    ...
  </div> हें नांव
</div> हें नांव

नवबार पाळणी

navbar स्थिर वा स्थिर प्रदर्शनाखातीर ताची बरी रचणूक करपाखातीर फकत कांय divs जाय पडटात.

<div वर्ग = "नवबार" > 
  <div वर्ग = "नवबार-अंतर्गत" > 
    <div वर्ग = "कंटेनर" > 
      ...
    </div> हें नांव
  </div> हें नांव
</div> हें नांव

नवबार थारायिल्लें

सगळ्यांत भायल्या div चेर अतिरिक्त वर्गा वांगडा navbar व्ह्यूपोर्टाच्या वयल्या वा सकयल स्थिर करात, .navbar.

<div class = "नवबार नवबार-निश्चीत-शीर्ष" > 
  ...
</div> हें नांव

<div class = "नवबार नवबार-निश्चीत-सकयल" > 
  ...
</div> हें नांव

जेन्ना तुमी नवबार चिकटयतात, तेन्ना सकयल लिपिल्ल्या वाठाराचो हिशोब दिवपाचो उगडास दवरात. 40px वा चड पॅडींग जोडात <body>. कोर बूटस्ट्रॅप CSS उपरांत आनी पर्यायी प्रतिसाद दिवपी CSS पयलीं हें जोडपाची खात्री करात.

ब्रांड नाव

तुमचो ब्रँड वा प्रकल्पाचें नांव दाखोवपाक सादी दुव्याक फकत एंकर टॅग जाय पडटा.

<a class = "ब्रांड" href = "#" >  
  प्रकल्पाचें नांव
</a> हें नांव

नवबारांत फॉर्म तयार करतात

नवबारांत फॉर्म योग्य रितीन स्टायल करपाक आनी स्थापन करपाक, सकयल दाखयल्ले प्रमाणें योग्य वर्ग जोडात. मुलभूत फॉर्माखातीर, समाविष्ट करात .navbar-formआनी एक तर .pull-leftवा .pull-rightताका योग्य रितीन संरेखित करपाक.

<form class = "navbar-फॉर्म पुल-डावें" > 
  <इनपुट प्रकार = "मजकूर" वर्ग = "span2" >  
</form> हें नांव

चड सानुकूल सोद फॉर्मा खातीर, नवबारांत खाशेल्या शैलीं खातीर इनपुटांत .navbar-searchआनी formजोडात ..search-query

<form class = "navbar-सोद पुल-डावें" > 
  <इनपुट प्रकार = "मजकूर" वर्ग = "सोद-क्वेरी" प्लेसहोल्डर = "सोद" >   
</form> हें नांव

पर्यायी प्रतिसाद दिवपी बदल

तुमच्या टॉपबारांतल्या सामुग्रीच्या प्रमाणाचेर आदारून, तुमकां प्रतिसाद दिवपी पर्याय चालीक लावपाचे आसूं येतात. तशें करपाक, तुमची nav सामुग्री आशिल्ल्या div, .nav-collapse.collapse, च्या आदारान गुठलायात आनी navbar टॉगल बटण जोडात, .btn-navbar.

<div वर्ग = "नवबार" > 
  <div वर्ग = "नवबार-अंतर्गत" > 
    <div वर्ग = "कंटेनर" > 
 
      <!-- .btn-navbar संकुचीत केल्ल्या navbar सामुग्रीखातीर टॉगल म्हणून वापरतात -->
      <a class = "btn btn-navbar" डेटा-टॉगल = "संकुचीत" डेटा-लक्ष्य = ".nav-संकुचीत" >   
        <span वर्ग = "चिन्न-पट्टी" </span> 
        <span वर्ग = "चिन्न-पट्टी" </span> 
        <span वर्ग = "चिन्न-पट्टी" </span> 
      </a> हें नांव
 
      <!-- तुमकां दाखोवपाक जाय जाल्यार ब्रँड थंय भायर सोडपाची खात्री करात -->
      <a class = "brand" href = "#" > प्रकल्पाचें नांव </a>  
 
      <!-- तुमकां जाय तें सगळें 940px वा ताचे परस उण्या प्रमाणांत लिपोवप, हांगा भितर दवरात -->
      <div वर्ग = "nav-कोलॅप्स" > 
        <!-- .नव, .नवबार-सोद, .नवबार-फॉर्म इ॰ -->
      </div> हें नांव
 
    </div> हें नांव
  </div> हें नांव
</div> हें नांव

नाव दुवे

Nav आयटम अक्रमीत यादीं वरवीं जोडप सोंपें आसा.

<ul वर्ग = "नव" > 
  <li वर्ग = "सक्रीय" > 
    <a href = "#" > घर </a> 
  </li> हें नांव
  <li><a href = "#" > दुवो </a></li> 
  <li><a href = "#" > दुवो </a></li> 
</ul> हें नांव

तुमी रिकामे यादी आयटम आनी साद्या वर्गा वरवीं तुमच्या nav दुव्यांत डिव्हायडर सहज जोडूंक शकतात. फकत दुव्यां मदीं हें जोडचें:

<ul वर्ग = "नव" > 
  ...
  <li class = "विभाजक-उबें" </li> 
  ...
</ul> हें नांव

घटक संरेखण

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

ड्रॉपडावन मेनू जोडप

nav कडेन ड्रॉपडावन आनी ड्रॉपअप जोडप सुपर सोंपें आसा, पूण आमच्या जावास्क्रिप्ट प्लगइन वापरपाची गरज आसा .

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

जावास्क्रिप्ट मेळोवची →

नवबारांतलो मजकूर

मजकूराचीं स्ट्रिंग्स a <.navbar-text>, चड करून <p>योग्य लीडिंग आनी रंगा खातीर टॅगाचेर गुठलावचीं.

तांचो वापर कित्याक करचो

वापरप्यांक ऍप्लिकेशन वा सायटी भितर खंय आसात तें दाखोवपाचो एक मार्ग म्हणून ब्रेडक्रंब नेव्हिगेशन वापरतात, पूण प्राथमीक नेव्हिगेशनाक न्हय. तांचे वापर चड प्रभावी जावपा खातीर विरळ आनी संक्षिप्त दवरात.

उदाहरणां

एकूच उदाहरण दाखयल्लें जशें तें जायत्या पानांचेर दाखोवंक शकता.

• घर

• घर / 1 .
• लायब्ररी

• घर / 1 .
• ग्रंथालय / 1 .
• डेटा

मार्कअप करप

HTML ही तुमची दुवे आशिल्ली मानक अक्रमबध्द वळेरी आसा.

<ul class = "ब्रेडक्रंब" > 
  <ली> हें नांव
    <a href = "#" > मुखेल </a> <span वर्ग = "विभाजक" > / </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> 
    <li वर्ग = "सक्रीय" > 
      <a href = "#" > 1 </a> हें नांव 
    </li> हें नांव
    <li><a href = "#" > २ </a></li> हें नांव 
    <li><a href = "#" > ३ </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 वर्ग = "आदले" > 
    <a href = "#" > आनी लार; जाण्टे </a> 
  </li> हें नांव
  <li वर्ग = "फुडलें" > 
    <a href = "#" > नवें → </a> हें नांव 
  </li> हें नांव
</ul> हें नांव

संबंदीं

बॅज हे कांय तरेचो निर्देशक वा गणना दाखोवपाखातीर ल्हान, सादे घटक आसतात. ते सादारणपणान Mail.app सारकिल्या ईमेल क्लायंटांनी वा पुश अधिसुचोवण्यां खातीर मोबायल ऍप्लिकेशनां वयल्यान मेळटात.

उपलब्ध वर्ग

बूटस्ट्रॅप तुमच्या साइटचेर सामुग्री दाखोवपाक हीरो युनिट नांवाचो हलको, लवचीक घटक पुरवण करता. मार्केटींग आनी सामुग्री-जड साइटांचेर तो बरो काम करता.

मार्कअप करप

तुमची सामुग्री एके लायकांत गुठलावची divम्हणून:

<div वर्ग = "नायक-एकक" > 
  <h1> शीर्षक </h1>
  <p> टॅगलायन </p>
  <p> हें नांव
    <a class = "btn btn-प्राथमिक बीटीएन-व्हड" > 
      चड जाणून घेयात
    </a> हें नांव
  </p> हें नांव
</div> हें नांव

h1एक पानाचेर सामुग्री विभाग योग्य रितीन स्पेस करपाक आनी विभागपाक एक सादें शेल . तो h1's default small, घटक तशेंच चडशे हेर घटक (अतिरिक्त शैलीं सयत) वापरूंक शकता.

<div class = "पान-शीर्षक" > 
  <h1> उदाहरण पान शीर्षक </h1>
</div> हें नांव

मुलभूत लघुप्रतिमा

पूर्वनिर्धारीतपणान, Bootstrap ची लघुप्रतिमा उण्यांत उणी गरज आशिल्ल्या मार्कअपान दुवो केल्लीं प्रतिमा दाखोवपाक तयार केल्यात.

अत्यंत अनुकूलन करपाक येता

थोडें अतिरिक्त मार्कअप आसल्यार, शीर्षकां, परिच्छेद, वा बटणां सारकिल्या खंयच्याय प्रकारची HTML सामुग्री लघुप्रतिमांत जोडप शक्य आसा.

• 

  लघुप्रतिमा लेबल

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

  कृती कृती

• 

  लघुप्रतिमा लेबल

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

  कृती कृती

लघुप्रतिमा कित्याक वापरात

लघुप्रतिमा (आदीं .media-gridv1.4 मेरेन) फोटो वा व्हिडियोच्या ग्रिड, प्रतिमा सोद परिणाम, किरकोळ उत्पाद, पोर्टफोलियो, आनी हेर जायत्या खातीर बरे आसात. ते दुवे वा स्थिर सामुग्री आसूं येतात.

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

लघुप्रतिमा मार्कअप सादें आसा- ulखंयच्याय संख्येच्या liघटकां सयत एक हें सगळें जाय. तशेंच तो सुपर लवचीक आसा, तुमची सामग्री गुठलावपाक फकत थोडो चड मार्कअप आशिल्ल्या खंयच्याय प्रकारच्या सामुग्रीक परवानगी दिता.

जाळी स्तंभ आकार वापरता

निमाणें, लघुप्रतिमा घटक सद्याचे ग्रिड प्रणाली वर्ग वापरता-जशे .span2वा .span3—लघुप्रतिमा परिमाणांचेर नियंत्रण दवरपाखातीर.

मार्कअप हें

आदीं सांगिल्ले प्रमाण लघुप्रतिमां खातीर गरजेचें मार्कअप हळुवार आनी सरळ आसता. लिंक केल्ल्या प्रतिमां खातीर मुलभूत सेटअप पळयात :

<ul class = "लघुप्रतिमा" > 
  <li वर्ग = "स्पॅन3" > 
    <a href = "#" वर्ग = "लघुप्रतिमा" >  
      <img src = "https://प्लेसहोल्ड.इट/260x180" alt = "" >  
    </a> हें नांव
  </li> हें नांव
  ...
</ul> हें नांव

लघुप्रतिमांतल्या सानुकूल HTML सामुग्री खातीर, मार्कअप मात्सो बदलता. <a>खंयच्याय सुवातेर ब्लॉक पातळेची सामुग्री परवानगी दिवपाक, आमी the for a like so स्वॅप करतात <div>:

<ul class = "लघुप्रतिमा" > 
  <li वर्ग = "स्पॅन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 वर्ग = "सचेतक" > 
  <बटण वर्ग = "बंद करचें" data-dismiss = "अलर्ट" > × </बटण>  
  <strong> शिटकावणी दिता! </strong> बेस्ट चेक यो सेल्फ, तूं चड बरो दिसना.
</div> हें नांव

तकली वयर काडटा! iOS डिव्हायसांक 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> हें नांव

पट्टीदार

पट्टेदार परिणाम तयार करपाखातीर ग्रेडियेंट वापरता (IE ना).

<div class = "प्रगती प्रगती-पट्टीदार" > 
  <div वर्ग = "बार". 
       शैली = " रुंदाय : 20 %; " ></div> 
</div> हें नांव

एनिमेटेड केल्लें

पट्टेदार उदाहरण घेता आनी ताका एनिमेट करता (आयई ना).

<div class = "प्रगती प्रगती-पट्टीदार." 
     सक्रिय" >
  <div वर्ग = "बार". 
       शैली = " रुंदाय : 40 %; " ></div> 
</div> हें नांव

अतिरिक्त रंग

प्रगती पट्टी सुसंगत शैलींखातीर कांय समान बटण आनी सावधान वर्ग वापरतात.

पट्टीदार बार

घन रंगां प्रमाण आमी वेगवेगळे पट्टेदार प्रगती पट्टे केल्यात.

वागणूक

प्रगती पट्टी CSS3 संक्रमण वापरतात, देखून तुमी जावास्क्रिप्ट वरवीं रुंदाय गतिशीलपणान समायोजीत केल्यार, तो सुगमतायेन आकार बदलतलो.

तुमी .activeवर्ग वापरल्यार, तुमचीं .progress-stripedप्रगती पट्टी दाव्यान उजव्यान पट्ट्यांक एनिमेट करतले.

ब्राउझर समर्थन

प्रगती पट्टी तांचे सगळे परिणाम साध्य करपाक CSS3 ग्रेडियेंट, संक्रमण, आनी एनिमेशन वापरतात. IE7-9 वा Firefox च्या पोरन्या आवृत्त्यांनी हीं वैशिश्ट्यां समर्थीत नात.

Opera आनी IE ह्या वेळार एनिमेशनाक तेंको दिना.

वेल्स हांणी केला

घटकाचेर सादो परिणाम म्हणून कुंड वापरून ताका इनसेट परिणाम दिवचो.

<div वर्ग = "बरें" > 
  ...
</div> हें नांव

बंद करचें चिन्ह

मोडल आनी सावधानताय सारकिल्या सामुग्री न्हयकारपा खातीर सामान्य बंद चिन्न वापरात.

× हें नांव

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

तुमी एंकर वापरप पसंत जाल्यार iOS डिव्हायसांक क्लिक घडणुकां खातीर href="#" जाय.

<a class = "बंद करचें" href = "#" > × </a> हें नांव