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

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

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

संकलित जावास्क्रिप्ट के इस्तेमाल करत बानी

दुनु bootstrap.jsbootstrap.min.jsएके फाइल में सगरी प्लगइन शामिल बा. खाली एगो के शामिल करीं.

प्लगइन के निर्भरता के बारे में बतावल गइल बा

कुछ प्लगइन आ सीएसएस घटक अन्य प्लगइन सभ पर निर्भर करे लें। अगर रउआँ प्लगइन सभ के अलग-अलग शामिल करीं, डॉक्स में एह निर्भरता सभ के जांच जरूर करीं। इहो ध्यान दीं कि सभ प्लगइन jQuery पर निर्भर करे लें (एकर मतलब बा कि प्लगइन फाइल सभ से पहिले jQuery के शामिल कइल जरूरी बा)। हमनी से सलाह लींbower.json कि jQuery के कवन संस्करण समर्थित बा।

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

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

कहल जा सकेला कि कुछ स्थिति में एह कार्यक्षमता के बंद कइल वांछनीय हो सकेला. एह से, हमनी के , के साथ नेमस्पेस कइल गइल दस्तावेज पर सभ घटना सभ के अनबाइंड क के डेटा एट्रिब्यूट एपीआई के अक्षम करे के क्षमता भी उपलब्ध करावे लीं 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
})

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

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

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

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

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

थर्ड पार्टी लाइब्रेरी के बारे में बतावल गइल बा

बूटस्ट्रैप आधिकारिक तौर पर प्रोटोटाइप भा जेक्वेरी यूआई नियर थर्ड पार्टी जावास्क्रिप्ट लाइब्रेरी सभ के सपोर्ट ना करे ला । बावजूद .noConflictआ नेमस्पेस कइल घटना सभ, संगतता के समस्या हो सके लीं जिनहन के रउआँ के अपना दम पर ठीक करे के जरूरत बा।

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

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

सरल संक्रमण प्रभाव खातिर, 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>

मोडल के सुलभ बनावल जाव

role="dialog"aria-labelledby="...", मोडल टाइटिल के संदर्भ देत, के .modal, आ खुद role="document"में जोड़ल जरूर करीं ।.modal-dialog

एकरे अलावा, रउआँ आपन मोडल डायलॉग के बिबरन aria-describedbyon के साथ दे सकत बानी .modal

यूट्यूब वीडियो के एम्बेड कइल जा रहल बा

यूट्यूब वीडियो के मोडल में एम्बेड करे खातिर बूटस्ट्रैप में ना होखे वाला अतिरिक्त जावास्क्रिप्ट के जरूरत होला ताकि प्लेबैक के स्वचालित रूप से रोकल जा सके आ अउरी बहुत कुछ। अधिक जानकारी खातिर ई सहायक स्टैक ओवरफ्लो पोस्ट देखीं ।

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

मोडल सभ के दू गो वैकल्पिक आकार होलें, संशोधक वर्ग सभ के माध्यम से उपलब्ध बाड़ें जिनहन के एगो पर रखल जा सके ला .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 bs-example-modal-lg" 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 bs-example-modal-sm" 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=""

नांव किसिम बाकी बिबरन
पृष्ठभूमि के बा बूलियन भा स्ट्रिंग के कहल जाला'static' सच एगो मोडल-बैकग्राउंड तत्व शामिल बा। एकरे अलावा, अइसन बैकग्राउंड खातिर निर्दिष्ट करीं staticजे क्लिक पर मोडल बंद ना करे।
कीबोर्ड के बारे में बतावल गइल बा बूलियन के बा सच एस्केप की दबावे पर मोडल बंद कर देला
देखायीं बूलियन के बा सच इनिशियलाइज होखे पर मोडल देखावे ला।
दूर में स्थित राह गलत

ई विकल्प v3.3.0 से पदावनत बा आ v4 में हटा दिहल गइल बा। हमनी के एकरे बजाय क्लाइंट-साइड टेम्पलेटिंग या डेटा बाइंडिंग फ्रेमवर्क के इस्तेमाल करे के सलाह देत बानी जा, या खुद jQuery.load के कॉल करीं।

अगर रिमोट यूआरएल दिहल गइल होखे तब सामग्री के एक बेर jQuery के तरीका के माध्यम से लोड कइल जाई आ div loadमें इंजेक्ट कइल जाई । .modal-contentअगर आप डेटा-एपीआई के इस्तेमाल कर रहल बानी, आप वैकल्पिक रूप hrefसे दूरस्थ स्रोत निर्दिष्ट करे खातिर एट्रिब्यूट के इस्तेमाल कर सकत बानी। एकर एगो उदाहरण नीचे देखावल गइल बा:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

घटना के प्रकार बा बिबरन
शो.बीएस.मोडल के बा showइंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला। अगर क्लिक के कारण होखे तब क्लिक कइल तत्व relatedTargetघटना के गुण के रूप में उपलब्ध होला।
देखावल गइल बा.बीएस.मोडल ई इवेंट तब फायर कइल जाला जब मोडल के प्रयोगकर्ता के देखाई देवे वाला बनावल जाला (CSS संक्रमण पूरा होखे के इंतजार करी)। अगर क्लिक के कारण होखे तब क्लिक कइल तत्व relatedTargetघटना के गुण के रूप में उपलब्ध होला।
छिपावे के.बीएस.मोडल के बा ई इवेंट तुरंत फायर हो जाला जब hideइंस्टेंस मेथड के कॉल हो जाला।
छिपल.बीएस.मोडल के बा ई इवेंट तब फायर कइल जाला जब मोडल के प्रयोगकर्ता से छिपावल खतम हो जाला (CSS संक्रमण पूरा होखे के इंतजार करी)।
लोड हो गइल बा.बीएस.मोडल ई इवेंट तब फायर कइल जाला जब मोडल remoteविकल्प के इस्तेमाल से सामग्री लोड कइले होखे।
$('#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()

data-toggle="dropdown"अभी भी जरूरी बा

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

कवनो ना

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

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

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

घटना के प्रकार बा बिबरन
शो.बीएस.ड्रॉपडाउन के बारे में बतावल गइल बा शो इंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला।
देखावल गइल बा.bs.ड्रॉपडाउन ई इवेंट तब फायर कइल जाला जब ड्रॉपडाउन के प्रयोगकर्ता के देखाई पड़े ला (CSS संक्रमण सभ के इंतजार करी, पूरा होखे खातिर)।
छिपावे के बा.बीएस.ड्रॉपडाउन ई इवेंट तुरंत फायर हो जाला जब हिड इंस्टेंस मेथड के कॉल हो जाला।
छिपल.बीएस.ड्रॉपडाउन बा ई इवेंट तब फायर कइल जाला जब ड्रॉपडाउन के प्रयोगकर्ता से छिपावल खतम हो जाला (CSS संक्रमण के इंतजार करी, पूरा होखे खातिर)।
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

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

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

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

@मोट

विज्ञापन लेगिंग कीतार, ब्रंच आईडी कला पार्टी डोलर श्रम। पिचफोर्क yr एनिम लो-फाई से पहिले कि उ लोग क्वि बिक गईल। टम्बलर फार्म-टू-टेबल साइकिल के अधिकार जवन भी होखे। अनिम केफियेह कार्लेस कार्डिगन के बा। Velit seitan mcsweeney के फोटो बूथ 3 भेड़िया चंद्रमा irure। Cosby स्वेटर लोमो जीन शॉर्ट्स, विलियम्सबर्ग हुडी न्यूनतम qui आप शायद इनके बारे में नहीं सुनले होखब एट कार्डिगन ट्रस्ट फंड culpa बायोडीजल वेस एंडरसन सौंदर्यशास्त्र। निहिल गोदना एक्यूसमस, क्रेड विडंबना बायोडीजल केफियेह कारीगर उल्लमको परिणाम।

@mdo के बा

वेनियम मार्फा मूंछ स्केटबोर्ड, एडिपिसिसिंग फ्यूजियाट वेलिट पिचफोर्क दाढ़ी। फ्रीगन दाढ़ी aliqua cupidat mcsweeney के वेरो के बा। कामदेवताट चार लोको निसी, ईए हेल्वेटिका नुला कार्लेस। गोदना गोदवले कॉस्बी स्वेटर फूड ट्रक, मैकस्वीनी के क्विस गैर फ्रीगन विनाइल। लो-फाई वेस एंडरसन +1 सार्टोरियल के बा। कार्लेस गैर सौंदर्य व्यायाम क्विस जेंट्रिफाई के बा। ब्रुकलिन adipisicing शिल्प बियर वाइस केतार deserunt के बा।

एगो

ओकेकैट कमोडो एलिक्वा डेलेक्टस के नाम से जानल जाला। फैप शिल्प बियर deserunt स्केटबोर्ड ईए के बा। लोमो साइकिल अधिकार adipisicing बान्ह मी, वेलिट ईए सुंट अगिला स्तर लोकावोरे एकल-मूल कॉफी में मैग्ना वेनियम। उच्च जीवन आईडी विनाइल, इको पार्क consequat quis aliquip बान्ह मी पिचफोर्क। वेरो वीएचएस एस्ट एडिपिसिंग के बा। Consectetur nisi DIY न्यूनतम दूत बैग बा। में क्रेडिट पूर्व, टिकाऊ delectus consectetur फैनी पैक आईफोन बा।

दु

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

केतार ट्वी ब्लॉग, कुलपा दूत बैग मारफा जवन भी डेलेक्टस फूड ट्रक। सपिएंटे सिंथ आईडी असुमेंडा के बा। Locavore sed helvetica क्लिच विडंबना, थंडरकैट्स रउआ शायद ओह लोग के बारे में नइखीं सुनले consequat हुडी लस मुक्त लो-फाई फैप aliquip। Labore कुलीन placeat से पहिले कि उ लोग बिक गईल, टेरी रिचर्डसन proident ब्रंच nesciunt quis cosby स्वेटर pariatur keffiyeh उत helvetica कारीगर। कार्डिगन शिल्प बियर सेइटन रेडीमेड वेलिट के बा। वीएचएस चैम्ब्रे लैबोरिस टेम्पोर वेनियम के बा। एनिम मोलिट मिनी कोमोडो उल्लमको थंडरकैट्स के बा।

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

बूटस्ट्रैप nav के जरूरत बा

स्क्रॉलस्पाई में वर्तमान में सक्रिय लिंक सभ के सही तरीका से हाइलाइट करे खातिर बूटस्ट्रैप nav घटक के इस्तेमाल के जरूरत बा।

हल करे लायक आईडी टारगेट के जरूरत बा

नवबार लिंक में हल करे लायक आईडी टारगेट होखे के चाहीं. उदाहरण खातिर, a <a href="#home">home</a>के डीओएम में कुछ चीज से मेल खाए के चाहीं जइसे कि <div id="home"></div>.

गैर- :visibleलक्ष्य तत्वन के अनदेखी कइल गइल

लक्ष्य तत्व जे :visiblejQuery के अनुसार ना होखे, के अनदेखी कइल जाई आ इनहन के संबंधित nav आइटम सभ के कबो हाइलाइट ना कइल जाई।

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

चाहे लागू करे के तरीका कवनो होखे, 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=""

नांव किसिम बाकी बिबरन
ऑफसेट हो गइल बा संख्या 10 के बा स्क्रॉल के स्थिति के गणना करत घरी ऊपर से ऑफसेट करे खातिर पिक्सेल।

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

घटना के प्रकार बा बिबरन
सक्रिय.बीएस.स्क्रॉलस्पी के कइल जाला ई इवेंट तब फायर हो जाला जब भी स्क्रॉलस्पी द्वारा कवनो नया आइटम सक्रिय हो जाला।
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

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

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

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

कच्चा डेनिम रउआ शायद इनका बारे में ना सुनले होखब जीन शॉर्ट्स ऑस्टिन। नेस्सिउंट टोफू स्टंपटाउन एलिक्वा, रेट्रो सिंथ मास्टर सफाई। मूंछ क्लिच टेम्पर, विलियम्सबर्ग कार्ल्स शाकाहारी हेल्वेटिका। Reprehenderit कसाई रेट्रो केफियेह ड्रीमकैचर सिंथ के बा। कॉस्बी स्वेटर ईयू बान्ह मी, क्यूई इरुरे टेरी रिचर्डसन पूर्व स्क्वीड। एलिक्विप प्लेसेट साल्विया सिलम आईफोन के बा। Seitan aliquip quis कार्डिगन अमेरिकी परिधान, कसाई voluptate निसी क्वी।

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

टैब कइल नेविगेशन के विस्तार करेला

ई प्लगइन टैब कइल नेविगेशन घटक के बिस्तार क के टैब करे लायक इलाका सभ के जोड़ देला।

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

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

$('#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.tabhidden.bs.tabइवेंट फायर ना कइल जाई.

घटना के प्रकार बा बिबरन
देखावल जाव.बी.एस.टैब ई इवेंट टैब शो पर फायर होला, बाकिर नया टैब देखावे से पहिले. सक्रिय टैब आ पिछला सक्रिय टैब (अगर उपलब्ध होखे) के क्रमशः लक्षित करे खातिर event.targetआ के इस्तेमाल करीं ।event.relatedTarget
देखावल गइल बा.bs.tab ई इवेंट टैब देखावे के बाद टैब शो पर फायर हो जाला। सक्रिय टैब आ पिछला सक्रिय टैब (अगर उपलब्ध होखे) के क्रमशः लक्षित करे खातिर event.targetआ के इस्तेमाल करीं ।event.relatedTarget
छिपावे के बा.बीएस.टैब ई इवेंट तब फायर हो जाला जब नया टैब देखावे के होला (आ एह तरीका से पिछला सक्रिय टैब के छिपावे के होला)। वर्तमान सक्रिय टैब आ जल्दिए सक्रिय होखे वाला नया टैब के क्रमशः लक्षित करे खातिर event.targetआ के इस्तेमाल करीं .event.relatedTarget
छिपल.बीएस.टैब के बा ई इवेंट नया टैब देखावे के बाद फायर हो जाला (आ एह तरीका से पिछला सक्रिय टैब के छिपावल जाला)। पिछला सक्रिय टैब आ नया सक्रिय टैब के क्रमशः लक्षित करे खातिर event.targetआ के इस्तेमाल करीं .event.relatedTarget
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

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

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

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

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

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

टाइट पैंट नेक्स्ट लेवल केफियेह आप शायद इनका बारे में नईखी सुनले। फोटो बूथ दाढ़ी कच्चे डेनिम लेटरप्रेस शाकाहारी दूत बैग स्टंपटाउन। फार्म-टू-टेबल seitan, mcsweeney के फिक्सी टिकाऊ क्विनोआ 8-बिट अमेरिकी परिधान में टेरी रिचर्डसन विनाइल चैम्ब्रे बा। दाढ़ी स्टंपटाउन, कार्डिगन बान्ह मी लोमो थंडरकैट्स। टोफू बायोडीजल विलियम्सबर्ग मार्फा, चार लोको mcsweeney के साफ शाकाहारी chambray। एगो वास्तव में विडंबनापूर्ण कारीगर जवन भी keytar , scenester खेत-से-मेज banksy ऑस्टिन ट्विटर संभाल freegan cred कच्चा डेनिम एकल-मूल कॉफी वायरल।

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

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

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

<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>

ऑप्ट-इन के कार्यक्षमता बा

प्रदर्शन के कारण से, टूलटिप आ पोपोवर डेटा-एपिस ऑप्ट-इन बा, मतलब कि रउआँ के खुद एकरा के इनिशियलाइज करे के पड़ी .

पन्ना पर मौजूद सगरी टूलटिप सभ के इनिशियलाइज करे के एगो तरीका ई होखी कि इनहन के data-toggleबिसेसता के आधार पर चुनल जाय:

$(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>

कई लाइन के लिंक दिहल गइल बा

कई बेर रउरा हाइपरलिंक में टूलटिप जोड़ल चाहत बानी जवन कई गो लाइनन के लपेटेला. टूलटिप प्लगइन के डिफ़ॉल्ट व्यवहार एकरा के क्षैतिज आ लंबवत रूप से केंद्रित कइल होला। एकरा white-space: nowrap;से बचे खातिर अपना एंकर में जोड़ दीं.

बटन समूह, इनपुट समूह, आ टेबल सभ में टूलटिप सभ खातिर बिसेस सेटिंग के जरूरत होला

.btn-groupजब a या an के भीतर तत्व सभ पर टूलटिप सभ के इस्तेमाल कइल जाला .input-group, या टेबल से संबंधित तत्व सभ पर ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), रउआँ के विकल्प निर्दिष्ट करे के पड़ी container: 'body'(नीचे दस्तावेजीकरण कइल गइल बा) ताकि अनचाहा दुष्प्रभाव (जइसे कि तत्व के चौड़ा होखे आ/ या टूलटिप के ट्रिगर होखे पर ओकर गोल कोना खो दिहल)।

छिपल तत्वन पर टूलटिप देखावे के कोशिश मत करीं

$(...).tooltip('show')जब लक्ष्य तत्व होखे तब आह्वान कइला display: none;से टूलटिप के गलत स्थिति में रखल जाई।

कीबोर्ड आ सहायक तकनीक के उपयोगकर्ता लोग खातिर सुलभ टूलटिप्स

कीबोर्ड से नेविगेट करे वाला प्रयोगकर्ता लोग खातिर, आ खासतौर पर सहायक तकनीक सभ के प्रयोगकर्ता लोग खातिर, रउआँ के खाली कीबोर्ड पर केंद्रित तत्व सभ में टूलटिप जोड़ल जाय जइसे कि लिंक, फॉर्म कंट्रोल, या कौनों tabindex="0"बिसेसता वाला कौनों मनमानी तत्व।

अक्षम तत्व सभ पर टूलटिप सभ खातिर रैपर तत्व सभ के जरूरत होला

a disabledया .disabledतत्व में टूलटिप जोड़ें खातिर, तत्व के a के अंदर डाल दीं <div>आ एकरे बजाय टूलटिप के ओह पर लागू <div>करीं।

विकल्प बा

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

नांव किसिम बाकी बिबरन
एनीमेशन के बारे में बतावल गइल बा बूलियन के बा सच टूलटिप पर एगो सीएसएस फेड संक्रमण लागू करीं
कंटेनर के बा तार के बा | गलत गलत

टूलटिप के कवनो खास तत्व में जोड़ देला। उदाहरण खातिर : container: 'body'. ई विकल्प खासतौर पर एह मायने में उपयोगी बा कि ई रउआँ के टूलटिप के ट्रिगरिंग तत्व के लगे दस्तावेज के प्रवाह में रखे के इजाजत देला - जवन विंडो के आकार बदले के दौरान टूलटिप के ट्रिगरिंग तत्व से दूर तैरे से रोकी।

देरी नंबर के बा | वस्तु 0 के बा

टूलटिप (ms) देखावे आ छिपावे में देरी - मैनुअल ट्रिगर प्रकार पर लागू ना होला

अगर कवनो नंबर सप्लाई कइल गइल बा त छिपावे/देखावे दुनु पर देरी लगावल जाला

वस्तु संरचना के बारे में बतावल गइल बा:delay: { "show": 500, "hide": 100 }

एचटीएमएल के बा बूलियन के बा गलत टूलटिप में एचटीएमएल डालल जाला। अगर गलत बा, त jQuery के textतरीका के इस्तेमाल DOM में सामग्री डाले खातिर कइल जाई। अगर रउरा एक्सएसएस हमला से चिंतित बानी त पाठ के इस्तेमाल करीं.
प्लेसमेंट के बा तार के बा | परोजन 'ऊपर'

टूलटिप के स्थिति कईसे कईल जाला - ऊपर | नीचे के बा | छोड़ के बा | सही बा | ऑटो के बा।
जब "ऑटो" निर्दिष्ट कइल जाई तब ई टूलटिप के डायनामिक रूप से रिओरिएंट करी। उदाहरण खातिर, अगर प्लेसमेंट "ऑटो लेफ्ट" होखे तब टूलटिप जब संभव होखे तब बाईं ओर देखावल जाई, ना त ई दाहिने ओर देखावल जाई।

जब कौनों फंक्शन के इस्तेमाल प्लेसमेंट के निर्धारण करे खातिर कइल जाला तब ओकरा के टूलटिप DOM नोड के पहिला आर्गुमेंट के रूप में आ ट्रिगरिंग एलिमेंट DOM नोड के दूसरा के रूप में बोलावल जाला। thisसंदर्भ टूलटिप इंस्टेंस पर सेट कइल गइल बा ।

चयनकर्ता के बा डोरी गलत अगर कौनों चयनकर्ता दिहल गइल होखे तब टूलटिप ऑब्जेक्ट सभ के निर्दिष्ट लक्ष्य सभ के सौंप दिहल जाई। ब्यवहार में एकर इस्तेमाल डायनामिक एचटीएमएल सामग्री के टूलटिप जोड़े में सक्षम बनावे खातिर कइल जाला। एगो जानकारी भरल उदाहरण देखल जाव .
टेम्पलेट के बारे में बतावल गइल बा डोरी '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

टूलटिप बनावत घरी इस्तेमाल करे खातिर बेस एचटीएमएल।

टूलटिप के titleइंजेक्ट कइल जाई .tooltip-inner.

.tooltip-arrowटूलटिप के तीर बन जाई।

सबसे बाहरी रैपर तत्व में .tooltipक्लास होखे के चाहीं।

हक तार के बा | परोजन '' के बा।

titleअगर विशेषता मौजूद ना होखे त डिफ़ॉल्ट टाइटल मान ।

अगर कवनो फंक्शन दिहल गइल बा त ओकरा के ओकर thisसंदर्भ ओह तत्व पर सेट क के बोलावल जाई जवना से टूलटिप जुड़ल बा.

ट्रिगर डोरी 'होवर फोकस' के बा। टूलटिप कइसे ट्रिगर होला - पर क्लिक करीं | होवर करे के बा | फोकस करे के बा | हाथ से कईल. रउआँ कई गो ट्रिगर पास कर सकेनी; एकरा के एगो जगह से अलगा कर दीं. manualकवनो दोसरा ट्रिगर से ना जोड़ल जा सके.
व्यूपोर्ट के बा तार के बा | वस्तु के बारे में | परोजन { चयनकर्ता: 'शरीर', गद्दी: 0 } के बा।

टूलटिप के एह तत्व के सीमा के भीतर रखेला। जइसे कि : viewport: '#viewport'भा{ "selector": "#viewport", "padding": 0 }

अगर कवनो फंक्शन दिहल गइल बा त ओकरा के ट्रिगरिंग एलिमेंट DOM नोड के एकमात्र आर्गुमेंट के रूप में बोलावल जाला। thisसंदर्भ टूलटिप इंस्टेंस पर सेट कइल गइल बा ।

अलग-अलग टूलटिप खातिर डेटा विशेषता

अलग-अलग टूलटिप सभ खातिर विकल्प सभ के वैकल्पिक रूप से डेटा एट्रिब्यूट सभ के इस्तेमाल के माध्यम से निर्दिष्ट कइल जा सके ला, जइसे कि ऊपर बतावल गइल बा।

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

$().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')

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

घटना के प्रकार बा बिबरन
show.bs.tooltip के बारे में बतावल गइल बा showइंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला।
देखावल गइल बा.bs.tooltip ई इवेंट तब फायर कइल जाला जब टूलटिप के प्रयोगकर्ता के देखाई पड़े ला (CSS संक्रमण पूरा होखे के इंतजार करी)।
छिपावे के बा.बीएस.टूलटिप ई इवेंट तुरंत फायर हो जाला जब hideइंस्टेंस मेथड के कॉल हो जाला।
छिपल.बीएस.टूलटिप के बा ई इवेंट तब फायर कइल जाला जब टूलटिप के प्रयोगकर्ता से छिपावल खतम हो जाला (CSS संक्रमण पूरा होखे के इंतजार करी)।
डालल गइल बा.बीएस.टूलटिप ई इवेंट ओह show.bs.tooltipइवेंट के बाद फायर कइल जाला जब टूलटिप टेम्पलेट के DOM में जोड़ दिहल जाला।
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

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

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

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

प्लगइन पर निर्भरता के बारे में बतावल गइल बा

पोपोवर्स खातिर टूलटिप प्लगइन के रउरा बूटस्ट्रैप के संस्करण में शामिल करे के पड़ी.

ऑप्ट-इन के कार्यक्षमता बा

प्रदर्शन के कारण से, टूलटिप आ पोपोवर डेटा-एपिस ऑप्ट-इन बा, मतलब कि रउआँ के खुद एकरा के इनिशियलाइज करे के पड़ी .

पन्ना पर सभ पॉपओवर सभ के इनिशियलाइज करे के एगो तरीका ई होखी कि इनहन के data-toggleबिसेसता के आधार पर चुनल जाय:

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

बटन समूह, इनपुट समूह, आ टेबल सभ में पोपोवर सभ खातिर बिसेस सेटिंग के जरूरत होला

.btn-groupजब a या an के भीतर तत्व सभ पर .input-group, या टेबल से संबंधित तत्व सभ पर पॉपओवर के इस्तेमाल कइल जाला ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), रउआँ के विकल्प निर्दिष्ट करे के पड़ी container: 'body'(नीचे दस्तावेजीकरण कइल गइल बा) ताकि अवांछित दुष्प्रभाव से बचे के पड़े (जइसे कि तत्व के चौड़ा होखल आ/ या पोपोवर के ट्रिगर होखे पर आपन गोल कोना खो दिहल)।

छिपल तत्वन पर पोपोवर देखावे के कोशिश मत करीं

$(...).popover('show')जब लक्ष्य तत्व होखे तब आह्वान कइला display: none;से पोपोवर के गलत स्थिति में रखल जाई।

अक्षम तत्वन पर पोपोवर खातिर रैपर तत्वन के जरूरत होला

disableda या तत्व में पोपोवर जोड़े खातिर .disabled, तत्व के a के अंदर डाल दीं <div>आ एकरे बजाय ओह पर पोपोवर लगाईं <div>

कई लाइन के लिंक दिहल गइल बा

कई बेर रउरा हाइपरलिंक में पॉपओवर जोड़ल चाहत बानी जवन कई गो लाइनन के लपेटेला. पॉपओवर प्लगइन के डिफ़ॉल्ट व्यवहार एकरा के क्षैतिज आ लंबवत रूप से केंद्रित कइल होला। एकरा white-space: nowrap;से बचे खातिर अपना एंकर में जोड़ दीं.

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

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

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

पोपोवर टॉप के बा

लोबोर्टिस पर सेड पोसुएरे कॉन्सेक्टेचर एस्ट। एनियन ईयू लियो क्वाम के बा। पेलेंटेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम के बा।

पोपोवर सही बा

लोबोर्टिस पर सेड पोसुएरे कॉन्सेक्टेचर एस्ट। एनियन ईयू लियो क्वाम के बा। पेलेंटेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम के बा।

पोपोवर नीचे के बा

लोबोर्टिस पर सेड पोसुएरे कॉन्सेक्टेचर एस्ट। एनियन ईयू लियो क्वाम के बा। पेलेंटेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम के बा।

पोपोवर चल गइलन

लोबोर्टिस पर सेड पोसुएरे कॉन्सेक्टेचर एस्ट। एनियन ईयू लियो क्वाम के बा। पेलेंटेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम के बा।

लाइव डेमो बा

<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>टैग के ना ,<button> आ रउआँ के role="button"tabindexबिसेसता सभ के भी सामिल करे के पड़ी।

<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=""

नांव किसिम बाकी बिबरन
एनीमेशन के बारे में बतावल गइल बा बूलियन के बा सच पोपोवर पर एगो सीएसएस फेड संक्रमण लागू करीं
कंटेनर के बा तार के बा | गलत गलत

पोपोवर के एगो विशिष्ट तत्व में जोड़ देला। उदाहरण खातिर : container: 'body'. ई विकल्प खासतौर पर एह मायने में उपयोगी बा कि ई रउआँ के ट्रिगरिंग तत्व के लगे दस्तावेज के प्रवाह में पॉपओवर के पोजीशन देवे के इजाजत देला - जवन विंडो रिसाइज के दौरान पॉपओवर के ट्रिगरिंग तत्व से दूर बहे से रोकी।

सामग्री तार के बा | परोजन '' के बा।

data-contentअगर विशेषता मौजूद ना होखे त डिफ़ॉल्ट सामग्री मान ।

अगर कवनो फंक्शन दिहल गइल बा त ओकरा के ओकर thisसंदर्भ ओह तत्व पर सेट क के बोलावल जाई जवना से पोपोवर जुड़ल बा.

देरी नंबर के बा | वस्तु 0 के बा

पोपोवर देखावे आ छिपावे में देरी (ms) - मैनुअल ट्रिगर प्रकार पर लागू ना होला

अगर कवनो नंबर सप्लाई कइल गइल बा त छिपावे/देखावे दुनु पर देरी लगावल जाला

वस्तु संरचना के बारे में बतावल गइल बा:delay: { "show": 500, "hide": 100 }

एचटीएमएल के बा बूलियन के बा गलत पोपोवर में एचटीएमएल डालल जाला। अगर गलत बा, त jQuery के textतरीका के इस्तेमाल DOM में सामग्री डाले खातिर कइल जाई। अगर रउरा एक्सएसएस हमला से चिंतित बानी त पाठ के इस्तेमाल करीं.
प्लेसमेंट के बा तार के बा | परोजन 'ठीक'

पोपोवर के पोजीशन कईसे कईल जाला - टॉप | नीचे के बा | छोड़ के बा | सही बा | ऑटो के बा।
जब "ऑटो" निर्दिष्ट कइल जाई तब ई डायनामिक रूप से पॉपओवर के रिओरिएंट करी। उदाहरण खातिर, अगर प्लेसमेंट "ऑटो लेफ्ट" होखे तब संभव होखे पर पॉपओवर बाईं ओर देखावल जाई, ना त ई दाहिने ओर देखावल जाई।

जब कौनों फंक्शन के इस्तेमाल प्लेसमेंट के निर्धारण करे खातिर कइल जाला तब ओकरा के पॉपओवर DOM नोड के पहिला आर्गुमेंट के रूप में आ ट्रिगरिंग एलिमेंट DOM नोड के दूसरा के रूप में बोलावल जाला। thisसंदर्भ पोपोवर इंस्टेंस पर सेट कइल गइल बा ।

चयनकर्ता के बा डोरी गलत अगर कौनों चयनकर्ता उपलब्ध करावल गइल होखे तब पोपोवर ऑब्जेक्ट सभ के निर्दिष्ट लक्ष्य सभ के सौंप दिहल जाई। ब्यवहार में एकर इस्तेमाल डायनामिक एचटीएमएल सामग्री के पॉपओवर जोड़े में सक्षम बनावे खातिर कइल जाला। एगो जानकारी भरल उदाहरण देखल जाव .
टेम्पलेट के बारे में बतावल गइल बा डोरी '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

पोपोवर बनावे के समय इस्तेमाल करे खातिर एचटीएमएल के आधार बनाईं।

पोपोवर के titleइंजेक्शन लगावल जाई .popover-title.

पोपोवर के contentइंजेक्शन लगावल जाई .popover-content.

.arrowहो जाई पोपोवर के तीर।

सबसे बाहरी रैपर तत्व में .popoverक्लास होखे के चाहीं।

हक तार के बा | परोजन '' के बा।

titleअगर विशेषता मौजूद ना होखे त डिफ़ॉल्ट टाइटल मान ।

अगर कवनो फंक्शन दिहल गइल बा त ओकरा के ओकर thisसंदर्भ ओह तत्व पर सेट क के बोलावल जाई जवना से पोपोवर जुड़ल बा.

ट्रिगर डोरी 'क्लिक करे' के बा। पोपोवर कइसे ट्रिगर होला - क्लिक करीं | होवर करे के बा | फोकस करे के बा | हाथ से कईल. रउआँ कई गो ट्रिगर पास कर सकेनी; एकरा के एगो जगह से अलगा कर दीं. manualकवनो दोसरा ट्रिगर से ना जोड़ल जा सके.
व्यूपोर्ट के बा तार के बा | वस्तु के बारे में | परोजन { चयनकर्ता: 'शरीर', गद्दी: 0 } के बा।

पोपोवर के एह तत्व के सीमा में रखेला। जइसे कि : viewport: '#viewport'भा{ "selector": "#viewport", "padding": 0 }

अगर कवनो फंक्शन दिहल गइल बा त ओकरा के ट्रिगरिंग एलिमेंट DOM नोड के एकमात्र आर्गुमेंट के रूप में बोलावल जाला। thisसंदर्भ पोपोवर इंस्टेंस पर सेट कइल गइल बा ।

अलग-अलग पोपोवर खातिर डेटा विशेषता

अलग-अलग पॉपओवर सभ खातिर विकल्प सभ के वैकल्पिक रूप से डेटा एट्रिब्यूट सभ के इस्तेमाल के माध्यम से निर्दिष्ट कइल जा सके ला, जइसे कि ऊपर बतावल गइल बा।

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

$().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')

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

घटना के प्रकार बा बिबरन
show.bs.popover के बा showइंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला।
देखावल गइल.bs.popover ई इवेंट तब फायर कइल जाला जब पॉपओवर के प्रयोगकर्ता के देखाई देवे वाला बनावल जाला (CSS संक्रमण पूरा होखे के इंतजार करी)।
छिपावे के.बी.एस.पोपओवर के बा ई इवेंट तुरंत फायर हो जाला जब hideइंस्टेंस मेथड के कॉल हो जाला।
छिपल.बीएस.गरीबी के बा ई इवेंट तब फायर कइल जाला जब पॉपओवर के प्रयोगकर्ता से छिपावल खतम हो जाला (CSS संक्रमण पूरा होखे के इंतजार करी)।
डालल गइल बा.बीएस.गरीब ई इवेंट ओह show.bs.popoverइवेंट के बाद फायर कइल जाला जब पॉपओवर टेम्पलेट के DOM में जोड़ दिहल जाला।
$('#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क्लास मौजूद होखे तब हटावे से पहिले अलर्ट फीका हो जाई।

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

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

घटना के प्रकार बा बिबरन
बंद करीं.बीएस.अलर्ट कर दिहल जाव closeइंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला।
बंद हो गइल.बीएस.अलर्ट कइल गइल ई इवेंट तब फायर कइल जाला जब अलर्ट बंद हो जाला (CSS संक्रमण पूरा होखे के इंतजार करी)।
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

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

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

क्रॉस-ब्राउजर के संगतता बा

फायरफॉक्स पन्ना लोड के पार फॉर्म कंट्रोल स्टेट (अक्षमता आ जांच) के बरकरार रखे ला । एकरा खातिर एगो वर्कअराउंड बा कि इस्तेमाल कइल जाव autocomplete="off". देखल जाव मोजिला बग #654072 .

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

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

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

जवन राज्य रउरा पसंद होखे ओकर इस्तेमाल करीं!

एह प्रदर्शन खातिर हमनी के data-loading-textआ , के इस्तेमाल कर रहल बानी जा $().button('loading'), बाकिर ऊ एकमात्र राज्य नइखे जवना के रउरा इस्तेमाल कर सकीलें. एकरा बारे में नीचे $().button(string)दस्तावेज में अउरी देखल जाव .

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

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

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

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

पहिले से टॉगल बटन के जरूरत बा .activeआ ...aria-pressed="true"

प्री-टॉगल बटन खातिर, रउआँ के .activeक्लास आ aria-pressed="true"एट्रिब्यूट के buttonखुद में जोड़ल जरूरी बा।

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

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

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

पहिले से चुनल विकल्प के जरूरत बा.active

पहिले से चुनल विकल्प खातिर, रउआँ के खुद .activeइनपुट के क्लास में जोड़ल जरूरी बा।label

विजुअल चेक स्टेट खाली क्लिक पर अपडेट होला

अगर कौनों चेकबॉक्स बटन के चेक कइल स्टेट बटन clickपर कौनों इवेंट के फायरिंग कइले बिना अपडेट कइल जाला (जइसे कि इनपुट के प्रॉपर्टी <input type="reset">सेट करे के माध्यम से या माध्यम से ), रउआँ के खुद इनपुट पर क्लास के टॉगल करे के पड़ी।checked.activelabel

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

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

$().button('toggle')

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

$().button('reset')

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

$().button(string)

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

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</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"के जरूरत बा।

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<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>

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

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

एनिम परिआतुर क्लिच रिप्रेहेंडरिट, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड। 3 भेड़िया चंद्रमा officia aute, गैर कामदेव स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक क्विनोआ nesciunt लेबरम eiusmod के बा। ब्रंच 3 भेड़िया चंद्रमा टेम्पोर, सुंट एलिक्वा ओकरा पर एगो चिरई डालल स्क्वीड एकल मूल कॉफी nulla assumenda shoreditch एट। निहिल एनिम केफियेह हेल्वेटिका, शिल्प बियर लेबर वेस एंडरसन क्रेड नेसिउंट सेपिएंटे ईए प्रोइडेंट। विज्ञापन शाकाहारी अपवाद कसाई वाइस लोमो। लेगिंग occaecat शिल्प बियर खेत-से-मेज, कच्चा डेनिम सौंदर्य सिंथ nesciunt आप शायद इनके बारे में नहीं सुनले होखब accusamus श्रम टिकाऊ वीएचएस।
एनिम परिआतुर क्लिच रिप्रेहेंडरिट, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड। 3 भेड़िया चंद्रमा officia aute, गैर कामदेव स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक क्विनोआ nesciunt लेबरम eiusmod के बा। ब्रंच 3 भेड़िया चंद्रमा टेम्पोर, सुंट एलिक्वा ओकरा पर एगो चिरई डालल स्क्वीड एकल मूल कॉफी nulla assumenda shoreditch एट। निहिल एनिम केफियेह हेल्वेटिका, शिल्प बियर लेबर वेस एंडरसन क्रेड नेसिउंट सेपिएंटे ईए प्रोइडेंट। विज्ञापन शाकाहारी अपवाद कसाई वाइस लोमो। लेगिंग occaecat शिल्प बियर खेत-से-मेज, कच्चा डेनिम सौंदर्य सिंथ nesciunt आप शायद इनके बारे में नहीं सुनले होखब accusamus श्रम टिकाऊ वीएचएस।
एनिम परिआतुर क्लिच रिप्रेहेंडरिट, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड। 3 भेड़िया चंद्रमा officia aute, गैर कामदेव स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक क्विनोआ nesciunt लेबरम eiusmod के बा। ब्रंच 3 भेड़िया चंद्रमा टेम्पोर, सुंट एलिक्वा ओकरा पर एगो चिरई डालल स्क्वीड एकल मूल कॉफी nulla assumenda shoreditch एट। निहिल एनिम केफियेह हेल्वेटिका, शिल्प बियर लेबर वेस एंडरसन क्रेड नेसिउंट सेपिएंटे ईए प्रोइडेंट। विज्ञापन शाकाहारी अपवाद कसाई वाइस लोमो। लेगिंग occaecat शिल्प बियर खेत-से-मेज, कच्चा डेनिम सौंदर्य सिंथ nesciunt आप शायद इनके बारे में नहीं सुनले होखब accusamus श्रम टिकाऊ वीएचएस।
<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

  • बूटप्लाई के बा
  • एक इटमस एसी फैसिलिन के बा
  • दूसरा इरोस के बा

विस्तार/संकुचन नियंत्रण के सुलभ बनाईं

aria-expandedनियंत्रण तत्व में जरूर जोड़ल जाला। ई बिसेसता स्क्रीन रीडर आ अइसने सहायक तकनीक सभ खातिर संकुचित तत्व के वर्तमान स्थिति के स्पष्ट रूप से परिभाषित करे ला। अगर संकुचित तत्व डिफ़ॉल्ट रूप से बंद बा, त एकर मान aria-expanded="false". inअगर रउआँ क्लास के इस्तेमाल से डिफ़ॉल्ट रूप से डिफ़ॉल्ट रूप से खुला होखे खातिर संकुचित तत्व सेट कइले बानी , aria-expanded="true"एकरे बजाय नियंत्रण पर सेट करीं। प्लगइन एह बिसेसता के स्वचालित रूप से टॉगल क दी जे संकुचित तत्व खोलल गइल बा कि बंद भइल बा कि ना।

एकरे अलावा, अगर राउर नियंत्रण तत्व कौनों एकल संकुचित तत्व के लक्ष्य बनावत बा – यानी कि data-targetबिसेसता कौनों idचयनकर्ता के ओर इशारा करत बा – त आप नियंत्रण तत्व में एगो अतिरिक्त aria-controlsबिसेसता जोड़ सकत बानी, जेह में idसंकुचनीय तत्व के होला। आधुनिक स्क्रीन रीडर आ अइसने सहायक तकनीक सभ एह बिसेसता के इस्तेमाल करे लीं जेह से कि प्रयोगकर्ता लोग के खुद संकुचित तत्व पर सीधे नेविगेट करे खातिर अतिरिक्त शॉर्टकट उपलब्ध करावल जा सके।

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

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

  • .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=""

नांव किसिम बाकी बिबरन
माता-पिता के बा चयनकर्ता के बा गलत अगर कौनों चयनकर्ता दिहल गइल बा, तब निर्दिष्ट पैरेंट के तहत सभ संकुचित तत्व सभ के बंद हो जाई जब ई संकुचित आइटम देखावल जाई। (पारंपरिक अकॉर्डियन व्यवहार के समान - ई panelवर्ग पर निर्भर करे ला)
टॉगल कइल जाला बूलियन के बा सच आह्वान पर संकुचित तत्व के टॉगल करेला

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

.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घटना होखे से पहिले) कॉलर के वापस आ जाला।

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

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

घटना के प्रकार बा बिबरन
शो.बीएस.कलाप्स हो गइल बा showइंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला।
देखावल गइल.bs.collapse ई इवेंट तब फायर कइल जाला जब कौनों संकुचन तत्व के प्रयोगकर्ता के देखाई देवे वाला बनावल गइल होखे (CSS संक्रमण पूरा होखे के इंतजार करी)।
छिपावे के बा.बीएस.संकुचित कर दिहल गइल बा ई इवेंट तुरंत फायर हो जाला जब hideमेथड बोलावल जाला।
छिपल.बीएस.संकुचित हो गइल बा ई घटना तब फायर कइल जाला जब प्रयोगकर्ता से कौनों संकुचन तत्व छिपा दिहल गइल होखे (CSS संक्रमण पूरा होखे के इंतजार करी)।
$('#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. ओहिजा भीतर लगभग कवनो वैकल्पिक एचटीएमएल राखीं आ ऊ अपने आप संरेखित आ फॉर्मेट हो जाई.

<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=""

नांव किसिम बाकी बिबरन
अंतराल के अंतराल के बारे में बतावल गइल बा संख्या 5000 के बा कवनो आइटम के स्वचालित रूप से साइकिल चलावे के बीच देरी करे के समय के मात्रा। अगर झूठ बा त हिंडोला अपने आप साइकिल ना चली।
ठहराव तार के बा | कुछ ना "होवर" के बा। अगर पर सेट कइल गइल बा "hover"त हिंडोला के साइकिल चलावे के mouseenterरोक देला आ पर हिंडोला के साइकिल चलावे के फेर से शुरू कर देला mouseleave. अगर , पर सेट कइल गइल बा null, हिंडोला पर मंडराइत कइला से एकरा के रोकल ना जाई।
लपेटाई बूलियन के बा सच का हिंडोला लगातार साइकिल चलावे के चाहीं भा हार्ड स्टॉप होखे के चाहीं.
कीबोर्ड के बारे में बतावल गइल बा बूलियन के बा सच कीबोर्ड के घटना प हिंडोला के प्रतिक्रिया देवे के चाही कि ना।

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

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

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

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

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

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

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

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

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

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

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

घटना के प्रकार बा बिबरन
स्लाइड.बीएस.हिंडोला के बा ई इवेंट तुरंत फायर हो जाला जब slideइंस्टेंस मेथड के आह्वान कइल जाला।
स्लाइड.बीएस.हिंडोला के बा ई इवेंट तब फायर कइल जाला जब हिंडोला आपन स्लाइड ट्रांजिशन पूरा कर लेला।
$('#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"

नांव किसिम बाकी बिबरन
ऑफसेट हो गइल बा नंबर के बा | फंक्शन के बा | वस्तु 10 के बा स्क्रॉल के स्थिति के गणना करत घरी स्क्रीन से ऑफसेट करे खातिर पिक्सेल। अगर कवनो एक नंबर दिहल गइल बा त ऑफसेट ऊपर आ नीचे दुनु दिशा में लगावल जाई. एगो यूनिक, नीचे आ ऊपर ऑफसेट देवे खातिर बस एगो ऑब्जेक्ट offset: { top: 10 }या offset: { top: 10, bottom: 5 }. जब रउरा कवनो ऑफसेट के डायनामिक गणना करे के जरूरत होखे त कवनो फंक्शन के इस्तेमाल करीं.
लक्ष्य चयनकर्ता के बा | नोड के बा | जेक्वेरी तत्व के बा windowवस्तु के बारे में बतावल गइल बा प्रत्यय के लक्ष्य तत्व निर्दिष्ट करे ला।

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

.affix(options)

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

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

.affix('checkPosition')

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

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

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

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

घटना के प्रकार बा बिबरन
affix.bs.affix के बा ई घटना तत्व के चिपकावे से तुरंत पहिले फायर हो जाला।
चिपकावल गइल बा.बीएस.चिढ़ावल गइल बा ई इवेंट तत्व के चिपकावे के बाद फायर कइल जाला।
affix-top.bs.affix के बारे में बतावल गइल बा ई घटना तत्व के चिपकल-टॉप होखे से तुरंत पहिले फायर हो जाला।
affixed-top.bs.affix के बारे में बतावल गइल बा ई इवेंट तत्व के चिपकल-टॉप होखला के बाद फायर कइल जाला।
affix-bottom.bs.affix के बा ई घटना तत्व के चिपकल-नीचे होखे से तुरंत पहिले फायर हो जाला।
संलग्न-नीचे.बीएस.संलग्न हो गइल बा ई इवेंट तत्व के चिपकल-नीचे होखला के बाद फायर कइल जाला।