अवलोकन कइल जाव

व्यक्तिगत भा संकलित कइल जाव

प्लगइन सभ के अलग-अलग शामिल कइल जा सके ला (बूटस्ट्रैप के अलग-अलग *.jsफाइल सभ के इस्तेमाल से), या एक साथ सभ के (उपयोग से bootstrap.jsया मिनिफाइड bootstrap.min.jsकइल)।

डेटा के विशेषता के बारे में बतावल गइल बा

रउआँ सभ बूटस्ट्रैप प्लगइन सभ के इस्तेमाल बिशुद्ध रूप से मार्कअप एपीआई के माध्यम से बिना जावास्क्रिप्ट के एक लाइन लिखले क सकत बानी। ई बूटस्ट्रैप के पहिला श्रेणी के एपीआई हवे आ प्लगइन के इस्तेमाल करत घरी ई रउरा पहिला विचार करे के चाहीं.

कहल जा सकेला कि कुछ स्थिति में एह कार्यक्षमता के बंद कइल वांछनीय हो सकेला. एह से, हमनी के , के साथ नेमस्पेस कइल गइल दस्तावेज पर सभ घटना सभ के अनबाइंड क के डेटा एट्रिब्यूट एपीआई के अक्षम करे के क्षमता भी उपलब्ध करावे लीं data-api। ई अइसन लउकत बा:

$(document).off('.data-api')

एकरे अलावा, कौनों बिसेस प्लगइन के लक्ष्य बनावे खातिर, बस प्लगइन के नाँव के नेमस्पेस के रूप में डेटा-एपीआई नेमस्पेस के साथ एह तरीका से शामिल करीं:

$(document).off('.alert.data-api')

प्रोग्रामेटिक एपीआई के बा

हमनी के इहो मानना ​​बा कि रउरा सभे बूटस्ट्रैप प्लगइन के इस्तेमाल विशुद्ध रूप से जावास्क्रिप्ट एपीआई के माध्यम से करे में सक्षम होखे के चाहीं. सभ सार्वजनिक एपीआई सभ सिंगल, चेन करे लायक तरीका हवें, आ ओह संग्रह के वापस करे लें जेह पर कार्रवाई कइल गइल बा।

$('.btn.danger').button('toggle').addClass('fat')

सभ तरीका सभ के कौनों वैकल्पिक विकल्प ऑब्जेक्ट, कौनों स्ट्रिंग जे कौनों खास तरीका के लक्ष्य बनावे ला, या कुछ ना (जवन डिफ़ॉल्ट व्यवहार के साथ प्लगइन के सुरुआत करे) के स्वीकार करे के चाहीं:

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

हर प्लगइन एगो Constructorगुण पर भी आपन कच्चा कंस्ट्रक्टर के उजागर करेला: $.fn.popover.Constructor. अगर रउआँ कवनो खास प्लगइन इंस्टेंस पावल चाहत बानी, त ओकरा के सीधे कवनो तत्व से रिट्रीव करीं: $('[rel="popover"]').data('popover').

डिफ़ॉल्ट सेटिंग्स के बा

रउआँ प्लगइन के Constructor.DEFAULTSऑब्जेक्ट के संशोधित क के कौनों प्लगइन खातिर डिफ़ॉल्ट सेटिंग बदल सकत बानी:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

कवनो टकराव नइखे

कई बेर बूटस्ट्रैप प्लगइन सभ के इस्तेमाल अउरी यूआई फ्रेमवर्क सभ के साथ कइल जरूरी हो जाला। एह हालात में नेमस्पेस के टक्कर कबो-कबो हो सके ला। अगर अइसन होखे त रउआँ .noConflictओह प्लगइन के कॉल कर सकेनी जेकर मान वापस कइल चाहत बानी।

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

घटनाक्रम के बारे में बतावल गइल बा

बूटस्ट्रैप अधिकतर प्लगइन सभ के बिसेस क्रिया सभ खातिर कस्टम इवेंट उपलब्ध करावे ला। आमतौर पर ई सभ अव्यय आ भूतकाल के रूप में आवे लें - जहाँ कौनों घटना के सुरुआत में अव्यय (ex. ) के ट्रिगर कइल जाला, आ कौनों क्रिया के पूरा होखे पर showएकर भूतकाल के कर्मधारय रूप (ex. ) के ट्रिगर कइल जाला।shown

3.0.0 के रूप में, सभ बूटस्ट्रैप इवेंट सभ के नेमस्पेस कइल गइल बा।

सभ अव्यय घटना preventDefaultकार्यक्षमता प्रदान करेला। एह से कवनो क्रिया के शुरू होखे से पहिले ओकरा निष्पादन के रोके के क्षमता मिलेला।

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

सेनेटाइजर के इस्तेमाल कइल जाला

टूलटिप्स आ पोपोवर हमनी के बिल्ट-इन सेनेटाइजर के इस्तेमाल ओह विकल्पन के सेनेटाइज करे खातिर करेला जवन एचटीएमएल के स्वीकार करेला.

डिफ़ॉल्ट whiteListमान निम्नलिखित बा:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

अगर रउआँ एह डिफ़ॉल्ट में नया मान जोड़ल चाहत बानी त रउआँ whiteListनिम्नलिखित कर सकत बानी:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

अगर रउआ हमनी के सेनेटाइजर के बाईपास करे के चाहत बानी काहे कि रउआ एगो समर्पित लाइब्रेरी के इस्तेमाल कइल पसंद करेनी, उदाहरण खातिर DOMPurify , त रउआ निम्नलिखित काम करे के चाहीं:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

संस्करण के नंबर दिहल गइल बा

बूटस्ट्रैप के हर jQuery प्लगइन के संस्करण के VERSIONप्लगइन के कंस्ट्रक्टर के प्रॉपर्टी के माध्यम से एक्सेस कइल जा सकेला। उदाहरण खातिर, टूलटिप प्लगइन खातिर:

$.fn.tooltip.Constructor.VERSION // => "3.4.1"

जावास्क्रिप्ट अक्षम होखे पर कवनो खास फॉलबैक ना होखी

बूटस्ट्रैप के प्लगइन खास तौर प जब जावास्क्रिप्ट अक्षम होखेला त ओकरा के खास तौर प शानदार तरीका से वापस ना गिरेला। अगर रउआँ एह मामला में प्रयोगकर्ता अनुभव के परवाह करीं, त <noscript>अपना प्रयोगकर्ता लोग के स्थिति के समझावे खातिर (आ जावास्क्रिप्ट के दोबारा सक्षम करे के तरीका) के इस्तेमाल करीं, आ/या आपन खुद के कस्टम फॉलबैक जोड़ीं।

संक्रमण संक्रमण.जेएस के बा

संक्रमण के बारे में बा

सरल संक्रमण प्रभाव खातिर, transition.jsएक बेर बाकी जेएस फाइल सभ के साथ शामिल करीं। अगर आप संकलित (या मिनीफाइड) के इस्तेमाल कर रहल बानी bootstrap.js, एकरा के शामिल करे के जरूरत नइखे—ई पहिले से बा।

भीतर का बा

Transition.js इवेंट सभ खातिर एगो बेसिक हेल्पर हवे आ transitionEndसाथ ही साथ एगो CSS ट्रांजिशन एमुलेटर भी हवे। एकर इस्तेमाल बाकी प्लगइन सभ द्वारा CSS संक्रमण समर्थन के जांच करे खातिर आ लटकत संक्रमण सभ के पकड़े खातिर कइल जाला।

संक्रमण के अक्षम कइल जा रहल बा

संक्रमण सभ के निम्नलिखित जावास्क्रिप्ट स्निपेट के इस्तेमाल से ग्लोबल रूप से अक्षम कइल जा सके ला, जवन लोड भइला के बाद transition.js(या bootstrap.jsया bootstrap.min.js, जइसन कि मामला हो सके ला) आवे के चाहीं:

$.support.transition = false

मोडल मोडल.जेएस के बा

मोडल सभ के सुव्यवस्थित, बाकी लचीला, डायलॉग प्रॉम्प्ट सभ के साथ न्यूनतम जरूरी कामकाज आ स्मार्ट डिफ़ॉल्ट सभ के साथ।

एचटीएमएल 5 अपना सिमेंटिक्स के कइसे परिभाषित करे ला एकरे कारण, autofocusबूटस्ट्रैप मोडल सभ में एचटीएमएल एट्रिब्यूट के कौनों परभाव ना पड़े ला। इहे प्रभाव हासिल करे खातिर कुछ कस्टम जावास्क्रिप्ट के इस्तेमाल करीं:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

उदाहरण खातिर दिहल गइल बा

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

हेडर, बॉडी, आ पाद लेख में एक्शन सभ के सेट के साथ एगो रेंडर कइल मोडल।

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

लाइव डेमो बा

नीचे दिहल बटन पर क्लिक क के जावास्क्रिप्ट के माध्यम से कवनो मोडल के टॉगल करीं। ई नीचे सरक जाई आ पन्ना के ऊपर से फीका पड़ जाई.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

वैकल्पिक आकार के बा

मोडल सभ के दू गो वैकल्पिक आकार होलें, संशोधक वर्ग सभ के माध्यम से उपलब्ध बाड़ें जिनहन के एगो पर रखल जा सके ला .modal-dialog।

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

एनीमेशन के हटा दिहल जाव

मोडल सभ खातिर जे खाली देखे खातिर फीका होखे के बजाय लउके लें, .fadeअपना मोडल मार्कअप से क्लास हटाईं।

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

ग्रिड सिस्टम के इस्तेमाल करत बानी

एगो मोडल के भीतर बूटस्ट्रैप ग्रिड सिस्टम के फायदा उठावे खातिर, बस .rowके भीतर s के नेस्ट .modal-bodyकरीं आ ओकरा बाद सामान्य ग्रिड सिस्टम क्लास सभ के इस्तेमाल करीं।

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

ट्रिगर बटन के आधार पर मोडल सामग्री में बदलाव कइल

बटन के एगो गुच्छा बा जवन सभ एकही मोडल के ट्रिगर करेला, बस तनिका अलग सामग्री के संगे? मोडल के सामग्री में बदलाव करे खातिर event.relatedTargetआ एचटीएमएल data-*बिसेसता सभ के इस्तेमाल करीं (संभवतः jQuery के माध्यम से ) जे एह बात पर निर्भर करे ला कि कवन बटन पर क्लिक कइल गइल रहे। पर विस्तार से जाने खातिर मोडल इवेंट डॉक्स देखल जाव relatedTarget,

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

प्रयोग के बारे में बतावल गइल बा

मोडल प्लगइन मांग पर, डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से, आपके छिपल सामग्री के टॉगल क देला। ई डिफ़ॉल्ट स्क्रॉलिंग व्यवहार के ओवरराइड करे खातिर भी जोड़ देला आ मोडल के बाहर क्लिक करे पर देखावल गइल मोडल सभ के खारिज करे खातिर क्लिक क्षेत्र उपलब्ध करावे खातिर a जनरेट .modal-openकरे ला ।<body>.modal-backdrop

डेटा विशेषता के माध्यम से कइल जाला

जावास्क्रिप्ट लिखले बिना कवनो मोडल के सक्रिय करीं. बटन नियर नियंत्रक तत्व पर सेट data-toggle="modal"करीं, एकरे साथ data-target="#foo"या href="#foo"टॉगल करे खातिर कौनों बिसेस मोडल के लक्ष्य बनावे खातिर।

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

जावास्क्रिप्ट के माध्यम से कइल जाला

myModalजावास्क्रिप्ट के एकल लाइन के साथ आईडी वाला मोडल के कॉल करीं :

$('#myModal').modal(options)

विकल्प बा

विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-, जइसे कि में data-backdrop=""।

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

विधियन के बारे में बतावल गइल बा

.modal(options)

मोडल के रूप में राउर सामग्री के सक्रिय करेला। एगो वैकल्पिक विकल्प स्वीकार करेला object.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

मैन्युअल रूप से एगो मोडल के टॉगल करेला। मोडल के वास्तव में देखावल भा छिपावे से पहिले (यानी shown.bs.modalया hidden.bs.modalघटना होखे से पहिले) कॉलर के वापस आ जाला।

$('#myModal').modal('toggle')

.modal('show')

मैन्युअल रूप से एगो मोडल खोलेला। मोडल के वास्तव में देखावल जाए से पहिले (यानी shown.bs.modalघटना होखे से पहिले) कॉलर के वापस आ जाला।

$('#myModal').modal('show')

.modal('hide')

मैन्युअल रूप से एगो मोडल के छिपा देला। मोडल के वास्तव में छिपावे से पहिले (यानी hidden.bs.modalघटना होखे से पहिले) कॉलर के वापस आ जाला।

$('#myModal').modal('hide')

.modal('handleUpdate')

मोडल के पोजीशनिंग के रिएडजस्ट क के कवनो स्क्रॉलबार के काउंटर करे ला अगर कवनो स्क्रॉलबार लउके के चाहीं, जवना से मोडल बाईं ओर कूद जाई.

तबे जरूरत होला जब खुलल रहला पर मोडल के ऊंचाई बदल जाला.

$('#myModal').modal('handleUpdate')

घटनाक्रम के बारे में बतावल गइल बा

बूटस्ट्रैप के मोडल क्लास मोडल फंक्शनलिटी में हुक करे खातिर कुछ इवेंट के उजागर करेला।

सभ मोडल घटना सभ के खुद मोडल पर (यानी पर <div class="modal">) फायर कइल जाला।

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

ड्रॉपडाउन ड्रॉपडाउन.जेएस के बा

उदाहरण खातिर दिहल गइल बा

एह साधारण प्लगइन से लगभग कवनो चीज में ड्रॉपडाउन मेनू जोड़ीं, जवना में नवबार, टैब, आ गोली शामिल बा.

एगो नवबार के भीतर

गोली के भीतर बा

प्रयोग के बारे में बतावल गइल बा

.openडेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से, ड्रॉपडाउन प्लगइन पैरेंट लिस्ट आइटम पर क्लास के टॉगल क के छिपल सामग्री (ड्रॉपडाउन मेनू) के टॉगल करे ला।

मोबाइल डिवाइस प ड्रॉपडाउन खोलला से .dropdown-backdropमेनू के बाहर टैप करे के समय ड्रॉपडाउन मेनू बंद करे खाती टैप एरिया के रूप में जोड़ल जाला, जवन कि सही आईओएस सपोर्ट खाती जरूरी बा। मतलब कि खुला ड्रॉपडाउन मेनू से अलग ड्रॉपडाउन मेनू में जाए खातिर मोबाइल प एक्स्ट्रा टैप करे के पड़ी।

नोट: data-toggle="dropdown"एट्रिब्यूट पर कौनों एप्लीकेशन लेवल पर ड्रॉपडाउन मेनू बंद करे खातिर भरोसा कइल जाला, एह से हमेशा एकर इस्तेमाल कइल एगो बढ़िया बिचार बा।

डेटा विशेषता के माध्यम से कइल जाला

data-toggle="dropdown"ड्रॉपडाउन के टॉगल करे खातिर कवनो लिंक भा बटन में जोड़ीं .

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

लिंक बटन के साथ यूआरएल के बरकरार रखे खातिर, के data-targetबजाय एट्रिब्यूट के इस्तेमाल करीं href="#"।

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

जावास्क्रिप्ट के माध्यम से कइल जाला

जावास्क्रिप्ट के माध्यम से ड्रॉपडाउन के कॉल करीं:

$('.dropdown-toggle').dropdown()

विकल्प बा

कवनो ना

विधियन के बारे में बतावल गइल बा

$().dropdown('toggle')

कवनो दिहल नवबार भा टैब कइल नेविगेशन के ड्रॉपडाउन मेनू के टॉगल करे ला।

घटनाक्रम के बारे में बतावल गइल बा

सभ ड्रॉपडाउन इवेंट .dropdown-menu's मूल तत्व पर फायर कइल जाला।

सभ ड्रॉपडाउन इवेंट सभ में एगो relatedTargetप्रॉपर्टी होला, जेकर मान टॉगलिंग एंकर तत्व होला।

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

स्क्रॉलस्पाई के बा scrollspy.js के बा

नवबार में उदाहरण बा

स्क्रॉलस्पाई प्लगइन स्क्रॉल के स्थिति के आधार पर नेव टारगेट के स्वचालित रूप से अपडेट करे खातिर बा। नवबार के नीचे वाला इलाका के स्क्रॉल करीं आ सक्रिय क्लास बदलत देखीं. ड्रॉपडाउन सब आइटम के भी हाइलाइट कईल जाई।

प्रयोग के बारे में बतावल गइल बा

सापेक्षिक स्थिति के जरूरत बा

चाहे लागू करे के तरीका कवनो होखे, scrollspy के इस्तेमाल position: relative;ओह तत्व पर के जरूरत बा जवना पर रउआ जासूसी कर रहल बानी। अधिकतर मामिला में ई <body>. जब , के अलावा अन्य तत्वन पर स्क्रॉलस्पाइइंग <body>करीं, त निश्चित रूप से heightसेट होखे आ overflow-y: scroll;लागू करीं।

डेटा विशेषता के माध्यम से कइल जाला

अपना टॉपबार नेविगेशन में आसानी से स्क्रॉलस्पी व्यवहार जोड़ल जा सके ला, data-spy="scroll"ओह तत्व में जोड़ीं जेकरा पर रउआँ जासूसी कइल चाहत बानी (सबसे आम तौर पर ई होखी <body>)। एकरा बाद कवनो बूटस्ट्रैप घटक data-targetके पैरेंट तत्व के आईडी भा क्लास के संगे एट्रिब्यूट के जोड़ल जाला।.nav

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

जावास्क्रिप्ट के माध्यम से कइल जाला

अपना सीएसएस में जोड़ला के बाद position: relative;जावास्क्रिप्ट के माध्यम से स्क्रॉलस्पाई के कॉल करीं:

$('body').scrollspy({ target: '#navbar-example' })

विधियन के बारे में बतावल गइल बा

.scrollspy('refresh')

जब DOM से तत्व जोड़ल भा हटावे के संगे scrollspy के इस्तेमाल कइल जाला, त रउआँ के रिफ्रेश तरीका के अइसे कॉल करे के पड़ी:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

विकल्प बा

विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-, जइसे कि में data-offset=""।

घटनाक्रम के बारे में बतावल गइल बा

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

टॉगल करे लायक टैब tab.js बा

उदाहरण के टैब बा

स्थानीय सामग्री के फलक के माध्यम से संक्रमण में त्वरित, गतिशील टैब कार्यक्षमता जोड़ीं, उहो ड्रॉपडाउन मेनू के माध्यम से। नेस्टेड टैब के समर्थन नइखे कइल गइल।

प्रयोग के बारे में बतावल गइल बा

जावास्क्रिप्ट के माध्यम से टैब करे लायक टैब के सक्षम करीं (हर टैब के अलग-अलग सक्रिय करे के जरूरत बा):

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

रउआँ कई तरीका से अलग-अलग टैब सभ के सक्रिय क सकत बानी:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

मार्कअप कइल गइल बा

रउआँ बिना कवनो जावास्क्रिप्ट लिखले टैब भा गोली नेविगेशन के सक्रिय क सकत बानी खाली निर्दिष्ट क के data-toggle="tab"भा data-toggle="pill"कवनो तत्व पर। navटैब में and nav-tabsक्लास जोड़ला से ulबूटस्ट्रैप टैब स्टाइलिंग लागू होई , जबकि navand nav-pillsक्लास जोड़ला से पिल स्टाइलिंग लागू होई .

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

फीका प्रभाव पड़ जाला

टैब के फीका होखे खातिर, .fadeहर एक में जोड़ीं .tab-pane। पहिला टैब फलक में भी .inशुरुआती सामग्री के देखाई देवे के पड़ी।

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

विधियन के बारे में बतावल गइल बा

$().tab

एगो टैब तत्व आ सामग्री कंटेनर के सक्रिय करेला। टैब में या त एगो data-targetया hrefएगो कंटेनर नोड के लक्ष्य बनावे वाला DOM में होखे के चाहीं। उपर दिहल उदाहरण सभ में, टैब सभ बिसेसता वाला <a>s बाड़ें।data-toggle="tab"

.tab('show')

दिहल गइल टैब के चुन के ओकरा से जुड़ल सामग्री देखावेला. कवनो अउरी टैब जवन पहिले चुनल गइल रहे ऊ अनचयनित हो जाला आ ओकरा से जुड़ल सामग्री छिपा दिहल जाला. टैब फलक के वास्तव में देखावल जाए से पहिले (यानी shown.bs.tabघटना होखे से पहिले) कॉलर के वापस आ जाला।

$('#someTab').tab('show')

घटनाक्रम के बारे में बतावल गइल बा

नया टैब देखावे के समय, घटना सभ निम्नलिखित क्रम में फायर करे लीं:

1. hide.bs.tab(वर्तमान सक्रिय टैब पर)
2. show.bs.tab(देखावल जाए वाला टैब पर)
3. hidden.bs.tab(पिछला सक्रिय टैब पर, उहे जवन hide.bs.tabघटना खातिर रहे)
4. shown.bs.tab(नव-सक्रिय अभी-अभी देखावल गइल टैब पर, उहे जवन show.bs.tabघटना खातिर बा)

अगर कवनो टैब पहिले से सक्रिय ना रहे त hide.bs.tabआ hidden.bs.tabइवेंट फायर ना कइल जाई.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

टूलटिप्स टूलटिप.जेएस के बा

जेसन फ्रेम द्वारा लिखल गइल बेहतरीन jQuery.tipsy प्लगइन से प्रेरित; टूलटिप एगो अपडेट कइल संस्करण हवे, जवन छवि पर निर्भर ना होला, एनीमेशन खातिर CSS3 के इस्तेमाल करे ला आ लोकल टाइटिल स्टोरेज खातिर डेटा-एट्रिब्यूट सभ के इस्तेमाल करे ला।

शून्य लंबाई वाला टाइटिल वाला टूलटिप कबो ना देखावल जाला।

उदाहरण खातिर दिहल गइल बा

टूलटिप देखे खातिर नीचे दिहल लिंक सभ पर होवर करीं:

स्थिर टूलटिप के बा

चार गो विकल्प उपलब्ध बा: ऊपर, दाहिना, नीचे, आ बाएँ संरेखित।

चार गो दिशा-निर्देश बा

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

प्रयोग के बारे में बतावल गइल बा

टूलटिप प्लगइन मांग पर सामग्री आ मार्कअप पैदा करे ला आ डिफ़ॉल्ट रूप से टूलटिप सभ के इनहन के ट्रिगर तत्व के बाद रखे ला।

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

$('#example').tooltip(options)

मार्कअप कइल गइल बा

टूलटिप खातिर जरूरी मार्कअप खाली एगो dataएट्रिब्यूट होला आ titleएचटीएमएल तत्व पर रउआँ चाहत बानी कि टूलटिप होखे। टूलटिप के जनरेट कइल मार्कअप काफी सरल होला, हालाँकि एकरा खातिर एगो स्थिति के जरूरत जरूर होला (डिफ़ॉल्ट रूप से, topप्लगइन द्वारा सेट कइल गइल)।

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

विकल्प बा

विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-, जइसे कि में data-animation=""।

विधियन के बारे में बतावल गइल बा

$().tooltip(options)

एगो तत्व संग्रह से एगो टूलटिप हैंडलर संलग्न करेला।

.tooltip('show')

कवनो तत्व के टूलटिप के खुलासा करेला। टूलटिप के वास्तव में देखावे से पहिले (यानी shown.bs.tooltipघटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के टूलटिप के "मैनुअल" ट्रिगरिंग मानल जाला। शून्य लंबाई वाला टाइटिल वाला टूलटिप कबो ना देखावल जाला।

$('#element').tooltip('show')

.tooltip('hide')

कवनो तत्व के टूलटिप के छिपा देला। टूलटिप के वास्तव में छिपावे से पहिले (यानी कि...hidden.bs.tooltip घटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के टूलटिप के "मैनुअल" ट्रिगरिंग मानल जाला।

$('#element').tooltip('hide')

.tooltip('toggle')

कवनो तत्व के टूलटिप के टॉगल करेला। टूलटिप के वास्तव में देखावल भा छिपावे से पहिले (यानी shown.bs.tooltipया hidden.bs.tooltipघटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के टूलटिप के "मैनुअल" ट्रिगरिंग मानल जाला।

$('#element').tooltip('toggle')

.tooltip('destroy')

कवनो तत्व के टूलटिप के छिपा के नष्ट कर देला। टूलटिप जे डेलिगेशन के इस्तेमाल करे लें (जे विकल्प के इस्तेमाल सेselector बनावल जालें ) के वंशज ट्रिगर तत्व सभ पर अलग-अलग नष्ट ना कइल जा सके ला।

$('#element').tooltip('destroy')

घटनाक्रम के बारे में बतावल गइल बा

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

पोपोवर्स पोपोवर डॉट जेएस के बा

द्वितीयक जानकारी के आवास खातिर कवनो तत्व में सामग्री के छोट-छोट ओवरले जोड़ीं, जइसे कि आईपैड पर बा।

पोपोवर जिनहन के टाइटिल आ सामग्री दुनों शून्य लंबाई के होखे, कबो ना देखावल जाला।

$(function () {
  $('[data-toggle="popover"]').popover()
})

उदाहरण खातिर दिहल गइल बा

स्थिर पोपोवर के बा

चार गो विकल्प उपलब्ध बा: ऊपर, दाहिना, नीचे, आ बाएँ संरेखित।

लाइव डेमो बा

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

चार गो दिशा-निर्देश बा

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

अगिला क्लिक पर खारिज कर दीं

focusउपयोगकर्ता के अगिला क्लिक पर पॉपओवर के खारिज करे खातिर ट्रिगर के इस्तेमाल करीं।

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

प्रयोग के बारे में बतावल गइल बा

जावास्क्रिप्ट के माध्यम से पॉपओवर सक्षम करीं:

$('#example').popover(options)

विकल्प बा

विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-, जइसे कि में data-animation=""।

विधियन के बारे में बतावल गइल बा

$().popover(options)

एगो तत्व संग्रह खातिर पोपोवर के आरंभ करे ला।

.popover('show')

एगो तत्व के पोपोवर के खुलासा करेला। पॉपओवर के वास्तव में देखावे से पहिले (यानी shown.bs.popoverघटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के पोपोवर के "मैनुअल" ट्रिगरिंग मानल जाला। पोपोवर जिनहन के टाइटिल आ सामग्री दुनों शून्य लंबाई के होखे, कबो ना देखावल जाला।

$('#element').popover('show')

.popover('hide')

कवनो तत्व के पोपोवर के छिपा देला। पॉपओवर के वास्तव में छिपावे से पहिले (यानी कि ...hidden.bs.popover घटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के पोपोवर के "मैनुअल" ट्रिगरिंग मानल जाला।

$('#element').popover('hide')

.popover('toggle')

कवनो तत्व के पॉपओवर के टॉगल करेला। पॉपओवर के वास्तव में देखावल भा छिपावे से पहिले (यानी shown.bs.popoverया hidden.bs.popoverघटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के पोपोवर के "मैनुअल" ट्रिगरिंग मानल जाला।

$('#element').popover('toggle')

.popover('destroy')

कवनो तत्व के पोपोवर के छिपा के नष्ट कर देला. डेलिगेशन के इस्तेमाल करे वाला पोपोवर सभ (जे विकल्प के इस्तेमाल सेselector बनावल जालें ) के वंशज ट्रिगर तत्व सभ पर अलग-अलग नष्ट ना कइल जा सके ला।

$('#element').popover('destroy')

घटनाक्रम के बारे में बतावल गइल बा

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

अलर्ट संदेश alert.js के बा

उदाहरण के अलर्ट बा

एह प्लगइन के साथ सभ अलर्ट संदेशन में डिस्मिस कार्यक्षमता जोड़ीं।

बटन के इस्तेमाल करत घरी .closeऊ के पहिला बच्चा होखे के चाहीं .alert-dismissibleआ मार्कअप में ओकरा से पहिले कवनो टेक्स्ट सामग्री ना आ सके.

प्रयोग के बारे में बतावल गइल बा

बस data-dismiss="alert"अपना बंद बटन में जोड़ दीं जेहसे कि स्वचालित रूप से अलर्ट बंद कार्यक्षमता मिल सके. अलर्ट बंद कईला से ओकरा के डीओएम से हटा दिहल जाला।

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

बंद होखे के समय आपके अलर्ट एनीमेशन के इस्तेमाल करावे खातिर, सुनिश्चित करीं कि ओह लोग पर .fadeआ .inक्लास पहिले से लागू बा।

विधियन के बारे में बतावल गइल बा

$().alert()

वंशज तत्वन पर क्लिक घटना खातिर एगो अलर्ट सुनावेला जवना में data-dismiss="alert"विशेषता बा। (डेटा-एपीआई के ऑटो-इनिशियलाइजेशन के इस्तेमाल करत घरी जरूरी नइखे।)

$().alert('close')

कवनो अलर्ट के डीओएम से हटा के बंद कर देला। अगर के .fadeआ ....in क्लास मौजूद होखे तब हटावे से पहिले अलर्ट फीका हो जाई।

घटनाक्रम के बारे में बतावल गइल बा

बूटस्ट्रैप के अलर्ट प्लगइन अलर्ट कार्यक्षमता में हुक करे खातिर कुछ घटना के उजागर करेला।

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

बटन बटन.जेएस के बा

बटन के साथे अउरी काम करीं। कंट्रोल बटन स्टेट करे ला या टूलबार नियर अउरी कंपोनेंट सभ खातिर बटन सभ के समूह बनावे ला।

स्टेटफुल के बा

data-loading-text="Loading..."बटन पर लोडिंग स्टेट के इस्तेमाल करे खातिर जोड़ीं ।

ई फीचर v3.3.5 से पदावनत बा आ v4 में हटा दिहल गइल बा।

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

एकल टॉगल कइल जाला

data-toggle="button"एके बटन पर टॉगलिंग के सक्रिय करे खातिर जोड़ीं .

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

चेकबॉक्स / रेडियो के बा

अपना-अपना शैली में टॉगलिंग के सक्षम करे data-toggle="buttons"खातिर एगो युक्त चेकबॉक्स भा रेडियो इनपुट में जोड़ीं ।.btn-group

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Radio 3
  </label>
</div>

विधियन के बारे में बतावल गइल बा

$().button('toggle')

पुश स्टेट के टॉगल करेला। बटन के अइसन रूप देला कि ऊ सक्रिय हो गइल बा.

$().button('reset')

बटन के स्थिति रीसेट करे ला - पाठ के मूल पाठ में अदला-बदली करे ला। ई तरीका एसिंक्रोनस होला आ रीसेटिंग वास्तव में पूरा होखे से पहिले रिटर्न हो जाला।

$().button(string)

टेक्स्ट के कौनों भी डेटा परिभाषित टेक्स्ट स्टेट में स्वैप करे ला।

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

संकुचित करीं collapse.js

लचीला प्लगइन जवन आसान टॉगल व्यवहार खातिर मुट्ठी भर क्लास के उपयोग करेला।

उदाहरण

क्लास बदलाव के माध्यम से कौनों अउरी तत्व के देखावे आ छिपावे खातिर नीचे दिहल बटन सभ पर क्लिक करीं:

• .collapseसामग्री के छिपावेला
• .collapsingसंक्रमण के दौरान लागू कइल जाला
• .collapse.inसामग्री देखावत बा

रउआँ विशेषता वाला लिंक के इस्तेमाल कर सकत बानी href, या विशेषता वाला बटन के इस्तेमाल कर सकत बानी data-target। दुनो मामला में, द data-toggle="collapse"के जरूरत बा।

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

अकॉर्डियन के उदाहरण दिहल गइल बा

पैनल घटक के साथ अकॉर्डियन बनावे खातिर डिफ़ॉल्ट संकुचन व्यवहार के विस्तार करीं।

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

.panel-bodys के s के साथ स्वैप आउट कइल भी संभव बा .list-group।

प्रयोग के बारे में बतावल गइल बा

पतन प्लगइन भारी उठावे के संभाले खातिर कुछ क्लास सभ के इस्तेमाल करे ला:

• .collapseसामग्री के छिपा देला
• .collapse.inसामग्री के देखावत बा
• .collapsingसंक्रमण शुरू होखे पर जोड़ल जाला, आ खतम होखे पर हटा दिहल जाला

ई कक्षा 2018 में मिल सकेला component-animations.less।

डेटा विशेषता के माध्यम से कइल जाला

बस तत्व में data-toggle="collapse"आ एगो जोड़ल जाव data-targetजेहसे कि कवनो संकुचित तत्व के नियंत्रण स्वचालित रूप से असाइन कइल जा सके. एट्रिब्यूट एगो CSS चयनकर्ता के स्वीकार करे ला जेकरा data-targetपर संकुचन लागू कइल जा सके ला। collapseसंकुचित तत्व में क्लास के जरूर जोड़ल जाला । अगर रउआँ चाहत बानी कि ई डिफ़ॉल्ट रूप से खुलल होखे, त अतिरिक्त क्लास जोड़ीं in।

अकॉर्डियन नियर समूह प्रबंधन के संकुचित नियंत्रण में जोड़े खातिर, डेटा विशेषता जोड़ीं data-parent="#selector"। एकरा के एक्शन में देखे खातिर डेमो के देखल जाव.

जावास्क्रिप्ट के माध्यम से कइल जाला

के साथ मैन्युअल रूप से सक्षम करीं:

$('.collapse').collapse()

विकल्प बा

विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-, जइसे कि में data-parent=""।

विधियन के बारे में बतावल गइल बा

.collapse(options)

रउरा सामग्री के एगो संकुचित तत्व के रूप में सक्रिय करेला. एगो वैकल्पिक विकल्प स्वीकार करेला object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

कवनो संकुचित तत्व के देखावल भा छिपावे खातिर टॉगल करे ला। संकुचित तत्व के वास्तव में देखावल भा छिपावे से पहिले (यानी shown.bs.collapseया hidden.bs.collapseघटना होखे से पहिले) कॉलर के वापस आ जाला।

.collapse('show')

एगो संकुचित तत्व देखावेला। संकुचित तत्व के वास्तव में देखावल जाए से पहिले (यानी shown.bs.collapseघटना होखे से पहिले) कॉलर के वापस आ जाला।

.collapse('hide')

एगो संकुचित तत्व के छिपावेला। संकुचित तत्व के वास्तव में छिपावे से पहिले (यानी hidden.bs.collapseघटना होखे से पहिले) कॉलर के वापस आ जाला।

घटनाक्रम के बारे में बतावल गइल बा

बूटस्ट्रैप के कोलैप्स क्लास कोलैप्स फंक्शनलिटी में हुक करे खातिर कुछ इवेंट के उजागर करेला।

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

हिंडोला हिंडोला.जेएस के बा

तत्व सभ के माध्यम से साइकिल चलावे खातिर एगो स्लाइड शो घटक, जइसे कि हिंडोला। नेस्टेड हिंडोला के समर्थन नइखे कइल गइल।

उदाहरण खातिर दिहल गइल बा

पिछिला अगिला

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

वैकल्पिक कैप्शन दिहल गइल बा

.carousel-captionकवनो के भीतर तत्व के साथ आसानी से अपना स्लाइड में कैप्शन जोड़ीं .item. ओहिजा भीतर लगभग कवनो वैकल्पिक एचटीएमएल राखीं आ ऊ अपने आप संरेखित आ फॉर्मेट हो जाई.

पहिला स्लाइड लेबल बा

नुल्ला विटा एलिट लिबेरो, एगो फारेट्रा औग मोलिस इंटरडम।

दूसरा स्लाइड लेबल बा

लोरेम इप्सम डोलोर बइठल अमेट, कॉन्सेक्टेटर एडिपिसिंग एलिट।

तीसरी स्लाइड लेबल बा

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

पिछिला अगिला

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

प्रयोग के बारे में बतावल गइल बा

कई गो हिंडोला के बा

हिंडोला नियंत्रण के सही तरीका से काम करे खातिर idसबसे बाहरी कंटेनर (the ) पर एगो के इस्तेमाल के जरूरत होला । .carouselकई गो हिंडोला जोड़त घरी, भा हिंडोला के बदलत घरी id, संबंधित नियंत्रण सभ के अपडेट जरूर करीं।

डेटा विशेषता के माध्यम से कइल जाला

हिंडोला के स्थिति के आसानी से नियंत्रित करे खातिर डेटा विशेषता के इस्तेमाल करीं। data-slideकीवर्ड prevया next, के स्वीकार करेला, जवन स्लाइड के स्थिति के ओकर वर्तमान स्थिति के सापेक्ष बदल देला। वैकल्पिक रूप से, data-slide-toहिंडोला में कच्चा स्लाइड इंडेक्स पास करे खातिर इस्तेमाल करीं data-slide-to="2", जवन स्लाइड के स्थिति के एगो खास इंडेक्स में शिफ्ट क देला जवन से शुरू होला 0।

एट्रिब्यूट के data-ride="carousel"इस्तेमाल पन्ना लोड से शुरू होखे वाला हिंडोला के एनिमेटिंग के रूप में चिन्हित करे खातिर कइल जाला। एकर इस्तेमाल एकही हिंडोला के (फालतू आ अनावश्यक) स्पष्ट जावास्क्रिप्ट इनिशियलाइजेशन के संयोजन में ना कइल जा सके ला।

जावास्क्रिप्ट के माध्यम से कइल जाला

हिंडोला के मैन्युअल रूप से कॉल करीं:

$('.carousel').carousel()

विकल्प बा

विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-, जइसे कि में data-interval=""।

विधियन के बारे में बतावल गइल बा

.carousel(options)

एक वैकल्पिक विकल्प के साथ हिंडोला के आरंभ करेला objectआ आइटम के माध्यम से साइकिल चलावे शुरू करेला।

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

बाईं ओर से दाएं हिंडोला आइटम के माध्यम से चक्र।

.carousel('pause')

हिंडोला के आइटम के माध्यम से साइकिल चलावे से रोक देला।

.carousel(number)

हिंडोला के एगो खास फ्रेम (0 आधारित, सरणी के समान) में चक्र करे ला।

.carousel('prev')

पिछला आइटम पर चक्कर लगावेला।

.carousel('next')

अगिला आइटम पर चक्कर लगावेला।

घटनाक्रम के बारे में बतावल गइल बा

बूटस्ट्रैप के हिंडोला क्लास हिंडोला के कार्यक्षमता में हुक करे खातिर दू गो घटना के उजागर करेला।

दुनों इवेंट में निम्नलिखित अतिरिक्त गुण बाड़ें:

• direction: हिंडोला जवना दिशा में फिसल रहल बा (या त "left"या "right").
• relatedTarget: DOM तत्व जवन सक्रिय आइटम के रूप में जगह पर सरकावल जा रहल बा।

सभ हिंडोला घटना सभ के खुद हिंडोला पर (यानी पर <div class="carousel">) फायर कइल जाला।

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

affix.js लगावल जाला

उदाहरण

एफिक्स प्लगइन position: fixed;चालू आ बंद टॉगल करेला, जवन कि के साथ मिलल प्रभाव के अनुकरण करेला position: sticky;। दाहिने ओर के सबनेविगेशन एफिक्स प्लगइन के लाइव डेमो हवे।

प्रयोग के बारे में बतावल गइल बा

डेटा एट्रिब्यूट के माध्यम से या मैन्युअल रूप से अपना जावास्क्रिप्ट के साथ एफिक्स प्लगइन के इस्तेमाल करीं। दुनों स्थिति में, रउआँ के अपना चिपकल सामग्री के स्थिति आ चौड़ाई खातिर सीएसएस देवे के पड़ी।

नोट: सफारी रेंडरिंग बग के कारण अपेक्षाकृत स्थिति वाला तत्व में निहित तत्व पर एफिक्स प्लगइन के इस्तेमाल मत करीं, जइसे कि खींचल भा धक्का दिहल कॉलम ।

सीएसएस के माध्यम से पोजीशनिंग कइल जा रहल बा

एफिक्स प्लगइन तीन गो क्लास सभ के बीच टॉगल करे ला, हर क्लास कौनों खास स्टेट के प्रतिनिधित्व करे ला: .affix, .affix-top, आ .affix-bottom. रउआँ के शैली सभ के उपलब्ध करावे के पड़ी, position: fixed;on के अपवाद के छोड़ के .affix, एह क्लास सभ खातिर खुद (एह प्लगइन से स्वतंत्र) वास्तविक स्थिति सभ के संभाले खातिर।

इहाँ एफिक्स प्लगइन के काम कईसे होखेला:

1. शुरू करे खातिर प्लगइन जोड़ देला.affix-top ई बतावे खातिर जोड़ देला कि तत्व अपना ऊपर-सबसे ऊपर के स्थिति में बा। एह बिंदु पर कवनो सीएसएस पोजीशनिंग के जरूरत नइखे।
2. जवना तत्व के रउआ संलग्न कइल चाहत बानी ओकरा से आगे स्क्रॉल कइला से वास्तविक चिपकावे के ट्रिगर होखे के चाहीं। इहे उ .affixजगह ह जहाँ बदलेला .affix-topआ सेट करेला position: fixed;(बूटस्ट्रैप के सीएसएस द्वारा उपलब्ध करावल गइल)।
3. अगर नीचे के ऑफसेट परिभाषित कइल गइल बा, ओकरा से आगे स्क्रॉल कइला पर एकरा .affixके .affix-bottom. चूँकि ऑफसेट वैकल्पिक होला, एक सेट करे खातिर रउआँ के उचित सीएसएस सेट करे के पड़ी। एह हालत में position: absolute;जरूरत पड़ला पर जोड़ दीं. प्लगइन डेटा एट्रिब्यूट भा जावास्क्रिप्ट विकल्प के इस्तेमाल से ई तय करे ला कि ओहिजा से तत्व के कहाँ रखल जाय।

नीचे दिहल गइल कौनों भी प्रयोग विकल्प खातिर आपन CSS सेट करे खातिर उपर दिहल चरण सभ के पालन करीं।

डेटा विशेषता के माध्यम से कइल जाला

कवनो तत्व में आसानी से एफिक्स व्यवहार जोड़ल data-spy="affix"जाव त बस ओह तत्व में जोड़ दीं जवना के रउरा जासूसी कइल चाहत बानी. कवनो तत्व के पिनिंग कब टॉगल करे के बा, ई परिभाषित करे खातिर ऑफसेट के इस्तेमाल करीं।

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

जावास्क्रिप्ट के माध्यम से कइल जाला

जावास्क्रिप्ट के माध्यम से एफिक्स प्लगइन के कॉल करीं:

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

विकल्प बा

विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-, जइसे कि में data-offset-top="200"।

विधियन के बारे में बतावल गइल बा

.affix(options)

रउरा सामग्री के चिपकल सामग्री के रूप में सक्रिय करेला. एगो वैकल्पिक विकल्प स्वीकार करेला object.

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

संबंधित तत्व सभ के आयाम, स्थिति, आ स्क्रॉल स्थिति के आधार पर प्रत्यय के स्थिति के पुनर्गणना करे ला। , .affix, .affix-topआ .affix-bottomक्लास सभ के नया स्टेट के अनुसार चिपकल सामग्री में जोड़ल जाला या हटावल जाला। जब भी चिपकल सामग्री भा लक्ष्य तत्व के आयाम बदलल जाला तब एह तरीका के बोलावे के जरूरत होला, ताकि चिपकल सामग्री के सही स्थिति सुनिश्चित कइल जा सके।

$('#myAffix').affix('checkPosition')

घटनाक्रम के बारे में बतावल गइल बा

बूटस्ट्रैप के एफिक्स प्लगइन एफिक्स फंक्शनलिटी में हुक करे खातिर कुछ घटना के उजागर करेला।