बटण गट

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

चांगला सराव

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

• एकाच बटणाच्या गटामध्ये नेहमी समान घटक वापरा <a>किंवा <button>.
• एकाच बटणाच्या गटात वेगवेगळ्या रंगांची बटणे मिसळू नका.
• मजकूराच्या व्यतिरिक्त किंवा त्याऐवजी चिन्ह वापरा, परंतु योग्य असेल तेथे Alt आणि शीर्षक मजकूर समाविष्ट करा.

ड्रॉपडाउनसह संबंधित बटण गट (खाली पहा) स्वतंत्रपणे बोलावले जावे आणि इच्छित वर्तन दर्शवण्यासाठी नेहमी ड्रॉपडाउन कॅरेट समाविष्ट करा.

डीफॉल्ट उदाहरण

अँकर टॅग बटणांसह तयार केलेल्या मानक बटण गटासाठी HTML कसे दिसते ते येथे आहे:

<div वर्ग = "btn-ग्रुप" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

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

अधिक जटिल घटकांसाठी <div class="btn-group">a मध्ये संच एकत्र करा .<div class="btn-toolbar">

<div वर्ग = "btn-टूलबार" > 
  <div वर्ग = "btn-ग्रुप" > 
    ...
  </div>
</div>

चेकबॉक्स आणि रेडिओ फ्लेवर्स

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

जावास्क्रिप्ट मिळवा »

बटण गटांमध्ये ड्रॉपडाउन

सावधान! योग्य रेंडरिंगसाठी ड्रॉपडाउनसह बटणे वैयक्तिकरित्या त्यांच्या .btn-groupस्वतःमध्ये गुंडाळलेली असणे आवश्यक आहे ..btn-toolbar

विहंगावलोकन आणि उदाहरणे

ड्रॉपडाउन मेनू ट्रिगर करण्यासाठी कोणतेही बटण वापरा आणि ते a मध्ये ठेवून .btn-groupआणि योग्य मेनू मार्कअप प्रदान करा.

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

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

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

सर्व बटण आकारांसह कार्य करते

बटण ड्रॉपडाउन कोणत्याही आकारात कार्य करतात. तुमच्या बटणाचा आकार .btn-large, .btn-smallकिंवा .btn-mini.

जावास्क्रिप्ट आवश्यक आहे

बटण ड्रॉपडाउनला कार्य करण्यासाठी बूटस्ट्रॅप ड्रॉपडाउन प्लगइन आवश्यक आहे.

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

विहंगावलोकन आणि उदाहरणे

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

आकार

अतिरिक्त बटण वर्ग वापरा .btn-mini, .btn-smallकिंवा .btn-largeआकारमानासाठी.

<div वर्ग = "btn-ग्रुप" > 
  ...
  <ul class = "ड्रॉपडाउन-मेनू पुल-राइट" > 
    <!-- ड्रॉपडाउन मेनू लिंक्स -->
  </ul>
</div>

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

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

<div वर्ग = "btn-ग्रुप" > 
  <button class = "btn" > क्रिया </button> 
  <button class = "btn dropdown-toggle" data-toggle = "ड्रॉपडाउन" >  
    <span वर्ग = "कॅरेट" ></span> 
  </ बटन>
  <ul class = "ड्रॉपडाउन-मेनू" > 
    <!-- ड्रॉपडाउन मेनू लिंक्स -->
  </ul>
</div>

ड्रॉपअप मेनू

च्या तत्काळ पालकामध्ये एकल वर्ग जोडून ड्रॉपडाउन मेनू तळापासून वर टॉगल केले जाऊ शकतात .dropdown-menu. हे ची दिशा फ्लिप करेल .caretआणि वरच्या खाली ऐवजी तळापासून वर जाण्यासाठी मेनू स्वतःच पुनर्स्थित करेल.

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

शक्तिशाली बेस वर्ग

येथील सर्व एनएव्ही घटक—टॅब, गोळ्या आणि सूची— वर्गात समान बेस मार्कअप आणि शैली शेअर करतात .nav.

कधी वापरायचे

टॅब आणि गोळ्या सामग्रीच्या विभागांसाठी किंवा संबंधित सामग्रीच्या पृष्ठांवर नेव्हिगेट करण्यासाठी उत्तम आहेत.

घटक संरेखन

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

मूलभूत टॅब

<ul>दुवे नियमित घ्या आणि जोडा .nav-tabs:

• मुख्यपृष्ठ
• प्रोफाइल
• संदेश

<ul class = "nav nav-tabs" > 
  <li वर्ग = "सक्रिय" > 
    <a href="#" > होम </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

मूलभूत गोळ्या

तेच एचटीएमएल घ्या, परंतु .nav-pillsत्याऐवजी वापरा:

• मुख्यपृष्ठ
• प्रोफाइल
• संदेश

<ul class = "nav nav-pills" > 
  <li वर्ग = "सक्रिय" > 
    <a href="#" > होम </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

त्यांना कसे स्टॅक करावे

टॅब आणि गोळ्या डीफॉल्टनुसार क्षैतिज असल्याने, .nav-stackedत्यांना अनुलंब स्टॅक केलेले दिसण्यासाठी फक्त दुसरा वर्ग जोडा.

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

• मुख्यपृष्ठ
• प्रोफाइल
• संदेश

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

रचलेल्या गोळ्या

• मुख्यपृष्ठ
• प्रोफाइल
• संदेश

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

श्रीमंत मेनू सोपे केले

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

बूटस्ट्रॅपमध्ये ड्रॉपडाउन सुरू करण्यावरील दस्तऐवज वाचण्यासाठी Javascript पृष्ठावर जा .

ड्रॉपडाउनसह टॅब

• मुख्यपृष्ठ
• मदत करा
• ड्रॉपडाउन
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li वर्ग = "ड्रॉपडाउन" > 
    <a वर्ग = "ड्रॉपडाउन-टॉगल" 
       data-toggle = "ड्रॉपडाउन"
       href = "#" >
        ड्रॉपडाउन
        <b class = "caret" ></b> 
      </a>
    <ul class = "ड्रॉपडाउन-मेनू" > 
      <!-- लिंक्स -->
    </ul>
  </li>
</ul>

ड्रॉपडाउनसह गोळ्या

• मुख्यपृष्ठ
• मदत करा
• ड्रॉपडाउन
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pills" > 
  <li वर्ग = "ड्रॉपडाउन" > 
    <a वर्ग = "ड्रॉपडाउन-टॉगल" 
       data-toggle = "ड्रॉपडाउन"
       href = "#" >
        ड्रॉपडाउन
        <b class = "caret" ></b> 
      </a>
    <ul class = "ड्रॉपडाउन-मेनू" > 
      <!-- लिंक्स -->
    </ul>
  </li>
</ul>

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

एनएव्ही याद्या पर्यायी शीर्षलेखांसह एनएव्ही लिंक्सचे गट तयार करण्याचा एक सोपा आणि सोपा मार्ग प्रदान करतात. ते OS X मधील फाइंडर सारख्या साइडबारमध्ये सर्वोत्तम वापरले जातात.

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

चिन्हांसह

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

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

वर्गासह रिक्त सूची आयटम तयार करून क्षैतिज विभाजक जोडा .divider, जसे की:

<ul class = "nav nav-list" > 
  ...
  <li वर्ग = "विभाजक" ></li> 
  ...
</ul>

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

लिंक्सची यादी घ्या आणि जोडा class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    सूची शीर्षलेख
  </li>
  <li वर्ग = "सक्रिय" > 
    <a href="#" > होम </a> _ _ 
  </li>
  <li>
    <a href="#" > लायब्ररी </a> _ _ 
  </li>
  ...
</ul>

चिन्हांसह उदाहरण

समान उदाहरण, परंतु <i>चिन्हांसाठी टॅगसह.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      लायब्ररी
    </a>
  </li>
  ...
</ul>

काय समाविष्ट आहे

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

त्यांच्यामध्ये बदल करणे सोपे आहे आणि फक्त खूप कमी मार्कअप बदलणे आवश्यक आहे.

टॅबमध्ये फेड

टॅब फेड इन करण्यासाठी, .fadeप्रत्येकामध्ये जोडा .tab-pane.

jQuery प्लगइन आवश्यक आहे

सर्व टॅब करण्यायोग्य टॅब आमच्या लाइटवेट jQuery प्लगइनद्वारे समर्थित आहेत. जावास्क्रिप्ट डॉक्स पृष्ठावर टॅब करण्यायोग्य टॅब कसे जिवंत करावे याबद्दल अधिक वाचा .

जावास्क्रिप्ट मिळवा →

टेबलचे उदाहरण

टॅब टॅब करण्यायोग्य बनवण्यासाठी, .tab-paneप्रत्येक टॅबसाठी एक युनिक आयडी तयार करा आणि त्यात गुंडाळा .tab-content.

उजव्या किंवा डाव्या संरेखित टॅबसाठी, .nav-tabsआणि .tab-contentमध्ये गुंडाळा .tabbable.

सरळ मार्कअप

टॅब करण्यायोग्य टॅब वापरण्यासाठी रॅपिंग div, टॅबचा संच आणि सामग्रीच्या टॅब करण्यायोग्य पॅन्सचा संच आवश्यक आहे.

<div class = "tabbable" > <!-- फक्त डाव्या/उजव्या टॅबसाठी आवश्यक -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > विभाग १ </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > विभाग २ </a></li>  
  </ul>
  <div वर्ग = "टॅब-सामग्री" > 
    <div class = "tab-pane सक्रिय" id = "tab1" >  
      <p> मी विभाग १ मध्ये आहे. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> नमस्कार, मी विभाग २ मध्ये आहे. </p>
    </div>
  </div>
</div>

तळाशी टॅब

HTML चा क्रम फ्लिप करा आणि तळाशी टॅब ठेवण्यासाठी वर्ग जोडा.

<div वर्ग = "टॅब करण्यायोग्य टॅब-खाली" > 
  <div वर्ग = "टॅब-सामग्री" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

डावीकडे टॅब

डावीकडे टॅब ठेवण्यासाठी वर्ग स्वॅप करा.

<div वर्ग = "टॅब करण्यायोग्य टॅब-लेफ्ट" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div वर्ग = "टॅब-सामग्री" > 
    ...
  </div>
</div>

उजवीकडे टॅब

उजवीकडे टॅब ठेवण्यासाठी वर्ग स्वॅप करा.

<div वर्ग = "टॅब करण्यायोग्य टॅब-उजवे" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div वर्ग = "टॅब-सामग्री" > 
    ...
  </div>
</div>

नवबार मचान

नॅव्हबारला स्थिर किंवा स्थिर प्रदर्शनासाठी चांगली रचना करण्यासाठी फक्त काही divs आवश्यक आहेत.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div वर्ग = "कंटेनर" > 
      ...
    </div>
  </div>
</div>

निश्चित नवबार

सर्वात बाहेरील div वर अतिरिक्त वर्गासह व्ह्यूपोर्टच्या वरच्या किंवा खालच्या बाजूस नॅव्हबार निश्चित करा, .navbar.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

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

ब्रँड नाव

तुमचा ब्रँड किंवा प्रोजेक्ट नाव दाखवण्यासाठी साध्या लिंकसाठी फक्त अँकर टॅग आवश्यक आहे.

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

नवबार मध्ये फॉर्म

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

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

अधिक सानुकूलित शोध फॉर्मसाठी, navbar मधील विशेष शैलींसाठी इनपुटमध्ये आणि .navbar-searchजोडा .form.search-query

<फॉर्म वर्ग = "नवबार-शोध पुल-लेफ्ट" > 
  <इनपुट प्रकार = "मजकूर" वर्ग = "शोध-क्वेरी" प्लेसहोल्डर = "शोध" >   
</form>

पर्यायी प्रतिसाद भिन्नता

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

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

एनएव्ही लिंक्स

नेव्ही आयटम अक्रमित सूचीद्वारे जोडणे सोपे आहे.

<ul class = "nav" > 
  <li वर्ग = "सक्रिय" > 
    <a href="#" > होम </a> _ _ 
  </li>
  <li><a href = "#" > लिंक </a></li> 
  <li><a href = "#" > लिंक </a></li> 
</ul>

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

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

घटक संरेखन

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

ड्रॉपडाउन मेनू जोडत आहे

एनएव्हीमध्ये ड्रॉपडाउन आणि ड्रॉपअप जोडणे खूप सोपे आहे, परंतु त्यासाठी आमच्या जावास्क्रिप्ट प्लगइनचा वापर आवश्यक आहे .

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

जावास्क्रिप्ट मिळवा →

navbar मध्ये मजकूर

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

ते का वापरावे

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

उदाहरणे

एकच उदाहरण दर्शविले आहे कारण ते एकाधिक पृष्ठांवर प्रदर्शित केले जाऊ शकते.

• मुख्यपृष्ठ

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

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

मार्कअप

एचटीएमएल ही लिंक असलेली तुमची मानक अक्रमित सूची आहे.

<ul class = "ब्रेडक्रंब" > 
  <li>
    <a href = "#" > घर </a> <span वर्ग = "विभाजक" > / </span>   
  </li>
  <li>
    <a href = "#" > लायब्ररी </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > डेटा </li> 
</ul>

कधी वापरायचे

Rdio द्वारे प्रेरित अल्ट्रा सरलीकृत आणि किमान शैलीबद्ध पृष्ठांकन, अॅप्स आणि शोध परिणामांसाठी उत्तम. मोठा ब्लॉक चुकणे कठीण आहे, सहज स्केलेबल आहे आणि मोठ्या क्लिक क्षेत्रे प्रदान करते.

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

लिंक्स सानुकूल करण्यायोग्य आहेत आणि योग्य वर्गासह अनेक परिस्थितींमध्ये कार्य करतात. .disabledक्लिक न करता येणार्‍या दुव्यांसाठी आणि .activeवर्तमान पृष्ठासाठी.

लवचिक संरेखन

पृष्ठांकन दुव्यांचे संरेखन बदलण्यासाठी दोनपैकी एक पर्यायी वर्ग जोडा: .pagination-centeredआणि .pagination-right.

उदाहरणे

डीफॉल्ट पृष्ठांकन घटक लवचिक आहे आणि अनेक भिन्नतेमध्ये कार्य करतो.

मार्कअप

एक <div>मध्ये गुंडाळलेले, पृष्ठांकन फक्त एक आहे <ul>.

<div वर्ग = "पृष्ठांकन" > 
  <ul>
    <li><a href = "#" > मागील </a></li> 
    <li वर्ग = "सक्रिय" > 
      <a href="#" > 1 </a> _ _ 
    </li>
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > ४ </a></li> 
    <li><a href = "#" > पुढे </a></li> 
  </ul>
</div>

पेजर बद्दल

पेजर घटक हा लाइट मार्कअप आणि अगदी हलक्या शैलीसह साध्या पृष्ठांकन अंमलबजावणीसाठी लिंक्सचा संच आहे. ब्लॉग किंवा मासिके सारख्या साध्या साइटसाठी हे छान आहे.

पर्यायी अक्षम स्थिती

.disabledपेजर लिंक्स पेजनेशनमधून सामान्य वर्ग देखील वापरतात .

डीफॉल्ट उदाहरण

डीफॉल्टनुसार, पेजर लिंक्स केंद्रस्थानी ठेवतात.

• मागील
• पुढे

<ul class = "पेजर" > 
  <li>
    <a href="#" > मागील </a> _ _ 
  </li>
  <li>
    <a href="#" > पुढे </a> _ _ 
  </li>
</ul>

संरेखित दुवे

वैकल्पिकरित्या, तुम्ही प्रत्येक दुव्याला बाजूंना संरेखित करू शकता:

• ← जुने
• नवीन →

<ul class = "पेजर" > 
  <li वर्ग = "मागील" > 
    <a href="#" > & larr ; जुने </a> 
  </li>
  <li वर्ग = "पुढील" > 
    <a href = "#" > नवीन → </a> 
  </li>
</ul>

बद्दल

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

उपलब्ध वर्ग

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

मार्कअप

तुमची सामग्री divअशा प्रकारे गुंडाळा:

<div वर्ग = "नायक-युनिट" > 
  <h1> शीर्षक </h1>
  <p> टॅगलाइन </p>
  <p>
    <a वर्ग = "btn btn-प्राथमिक btn-लार्ज" > 
      अधिक जाणून घ्या
    </a>
  </p>
</div>

h1पृष्ठावरील सामग्रीचे विभाग योग्यरित्या काढण्यासाठी आणि विभाग करण्यासाठी एक साधा शेल . h1हे डीफॉल्ट small, घटक तसेच इतर बहुतेक घटक (अतिरिक्त शैलींसह) वापरू शकते .

<div वर्ग = "पृष्ठ-हेडर" > 
  <h1> उदाहरण पृष्ठ शीर्षलेख </h1>
</div>

डीफॉल्ट लघुप्रतिमा

डीफॉल्टनुसार, बूटस्ट्रॅपची लघुप्रतिमा कमीतकमी आवश्यक मार्कअपसह लिंक केलेल्या प्रतिमा प्रदर्शित करण्यासाठी डिझाइन केलेली आहेत.

अत्यंत सानुकूल करण्यायोग्य

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

• 

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

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.

  कृती कृती

• 

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

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.

  कृती कृती

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

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

साधे, लवचिक मार्कअप

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

ग्रिड स्तंभ आकार वापरते

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

मार्कअप

आधी सांगितल्याप्रमाणे, लघुप्रतिमांसाठी आवश्यक मार्कअप हलके आणि सरळ आहे. लिंक केलेल्या प्रतिमांसाठी डीफॉल्ट सेटअप येथे पहा :

<ul class = "थंबनेल्स" > 
  <li वर्ग = "span3" > 
    <a href = "#" वर्ग = "थंबनेल" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

लघुप्रतिमांमध्ये सानुकूल HTML सामग्रीसाठी, मार्कअप थोडेसे बदलते. कोठेही ब्लॉक लेव्हल सामग्रीला अनुमती देण्यासाठी, आम्ही याप्रमाणे अदलाबदल <a>करतो :<div>

<ul class = "थंबनेल्स" > 
  <li वर्ग = "span3" > 
    <div वर्ग = "थंबनेल" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> थंबनेल लेबल </h5>
      <p> येथे लघुप्रतिमा मथळा... </p>
    </div>
  </li>
  ...
</ul>

आणखी उदाहरणे

तुमच्यासाठी उपलब्ध असलेल्या विविध ग्रिड वर्गांसह तुमचे सर्व पर्याय एक्सप्लोर करा. तुम्ही वेगवेगळे आकार मिक्स आणि मॅच करू शकता.

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

Bootstrap 2 सह, आम्ही बेस क्लास सरलीकृत केला आहे: .alertऐवजी .alert-message. आम्ही किमान आवश्यक मार्कअप देखील कमी केले आहे-नाही <p>डीफॉल्टनुसार आवश्यक आहे, फक्त बाह्य <div>.

एकल इशारा संदेश

कमी कोडसह अधिक टिकाऊ घटकासाठी, आम्ही ब्लॉक अलर्ट, अधिक पॅडिंगसह येणारे संदेश आणि सामान्यत: अधिक मजकूरासाठी वेगळे स्वरूप काढून टाकले आहे. वर्ग देखील मध्ये बदलला आहे .alert-block.

जावास्क्रिप्ट सह उत्तम जाते

बूटस्ट्रॅप एक उत्कृष्ट jQuery प्लगइनसह येतो जे अलर्ट संदेशांना समर्थन देते, त्यांना जलद आणि सुलभपणे डिसमिस करते.

प्लगइन मिळवा »

उदाहरणे सूचना

तुमचा संदेश आणि पर्यायी क्लोज आयकॉन साध्या वर्गासह डिव्हमध्ये गुंडाळा.

<div वर्ग = "सूचना" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> चेतावणी! </strong> स्वतःची उत्तम तपासणी करा, तुम्ही फार चांगले दिसत नाही.
</div>

सावधान! iOS डिव्‍हाइसेसना href="#"अलर्ट डिसमिस करण्‍यासाठी एक आवश्‍यक आहे. अँकर क्लोज आयकॉनसाठी ते आणि डेटा विशेषता समाविष्ट करण्याचे सुनिश्चित करा. वैकल्पिकरित्या, तुम्ही डेटा विशेषता असलेले घटक वापरू शकता <button>, जे आम्ही आमच्या डॉक्ससाठी निवडले आहे. वापरताना <button>, आपण समाविष्ट करणे आवश्यक आहे type="button"किंवा आपले फॉर्म सबमिट करू शकत नाहीत.

दोन पर्यायी वर्गांसह मानक सूचना संदेश सहजपणे विस्तारित करा: .alert-blockअधिक पॅडिंग आणि मजकूर नियंत्रणासाठी आणि .alert-headingजुळणार्‍या शीर्षकासाठी.

<div वर्ग = "अलर्ट अलर्ट-ब्लॉक" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 वर्ग = "अलर्ट-हेडिंग" > चेतावणी! </h4> 
  स्वत: ला उत्तम तपासा, तुम्ही नाही...
</div>

चूक किंवा धोका

<div वर्ग = "सूचना इशारा-त्रुटी" > 
  ...
</div>

यश

<div वर्ग = "सूचना अलर्ट-यशस्वी" > 
  ...
</div>

माहिती

<div वर्ग = "अलर्ट अलर्ट-माहिती" > 
  ...
</div>

बेसिक

उभ्या ग्रेडियंटसह डीफॉल्ट प्रगती बार.

<div वर्ग = "प्रगती" > 
  <div वर्ग = "बार" 
       शैली = " रुंदी : 60 %; " ></div> 
</div>

पट्टेदार

स्ट्रीप इफेक्ट तयार करण्यासाठी ग्रेडियंट वापरते (IE नाही).

<div class = "progress progress-striped" > 
  <div वर्ग = "बार" 
       शैली = " रुंदी : 20 %; " ></div> 
</div>

अॅनिमेटेड

स्ट्रीप केलेले उदाहरण घेते आणि ते अॅनिमेट करते (IE नाही).

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

अतिरिक्त रंग

प्रगती बार सुसंगत शैलींसाठी काही समान बटण आणि अलर्ट वर्ग वापरतात.

पट्टेदार बार

घन रंगांप्रमाणेच, आमच्याकडे विविध स्ट्रीप प्रोग्रेस बार आहेत.

वागणूक

प्रोग्रेस बार CSS3 संक्रमणे वापरतात, त्यामुळे तुम्ही javascript द्वारे रुंदी डायनॅमिकरित्या समायोजित केल्यास, ते सहजतेने आकार बदलेल.

तुम्ही .activeवर्ग वापरल्यास, तुमचे .progress-stripedप्रोग्रेस बार डावीकडून उजवीकडे पट्टे अॅनिमेट करतील.

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

प्रोग्रेस बार त्यांचे सर्व प्रभाव साध्य करण्यासाठी CSS3 ग्रेडियंट, संक्रमण आणि अॅनिमेशन वापरतात. ही वैशिष्ट्ये IE7-9 किंवा Firefox च्या जुन्या आवृत्त्यांमध्ये समर्थित नाहीत.

ऑपेरा आणि IE यावेळी अॅनिमेशनला सपोर्ट करत नाहीत.

विहिरी

एखाद्या घटकावर इनसेट इफेक्ट देण्यासाठी विहीर वापरा.

<div वर्ग = "वेल" > 
  ...
</div>

चिन्ह बंद करा

मॉडेल आणि सूचनांसारखी सामग्री डिसमिस करण्यासाठी जेनेरिक क्लोज आयकॉन वापरा.

×

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

तुम्ही अँकर वापरत असल्‍यास iOS डिव्‍हाइसेसना क्लिक इव्‍हेंटसाठी एक href="#" आवश्‍यक आहे.

<a वर्ग = "बंद करा" href = "#" > × </a>