अवलोकन

व्यक्तिगत या संकलित

प्लगइन कें व्यक्तिगत रूप सं शामिल कैल जा सकय छै (बूटस्ट्रैप कें व्यक्तिगत *.jsफाइल कें उपयोग करयत), या एकहि बेर मे सबटा (उपयोग करयत bootstrap.jsया मिनीफाइड करयत) शामिल कैल जा सकय छै bootstrap.min.js.

संकलित जावास्क्रिप्ट का प्रयोग

दुनू bootstrap.jsआओर bootstrap.min.jsएकटा फाइल मे सभ प्लगइन समाहित अछि. एकटा मात्र शामिल करू।

प्लगइन निर्भरता

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

डेटा विशेषताएँ

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

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

घटनाक्रम

बूटस्ट्रैप अधिकांश प्लगइन कें अद्वितीय क्रियाक कें लेल कस्टम घटना प्रदान करयत छै. सामान्यतः ई सब अव्यय आ भूतकाल रूप मे अबैत अछि - जतय showकोनो घटनाक आरम्भ मे अव्यय (ex. ) ट्रिगर होइत अछि , आ ओकर भूतपूर्व कर्मधारय रूप (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

मोडल मोडल.जेएस

मोडल सुव्यवस्थित, मुदा लचीला, संवाद संकेत न्यूनतम आवश्यक कार्यक्षमता आ स्मार्ट डिफ़ॉल्ट कें साथ छै.

एक सँ बेसी खुजल मोडल समर्थित नहि अछि

जाबत दोसर एखनो देखाइत अछि ताबत कोनो मोडल नहि खोलब सुनिश्चित करू। एक बेर मे एक सं बेसि मोडल देखाबय कें लेल कस्टम कोड कें आवश्यकता होयत छै.

मोडल मार्कअप प्लेसमेंट

हमेशा कोनों मोडल कें एचटीएमएल कोड कें अपन दस्तावेज मे शीर्ष-स्तरीय स्थिति मे रखय कें कोशिश करूं ताकि मोडल कें रूप आ/अथवा कार्यक्षमता कें प्रभावित करय वाला अन्य घटक सं बचल जा सकय.

मोबाइल डिवाइस के चेतावनी

मोबाइल डिवाइस पर मोडल के उपयोग के संबंध मे किछ चेतावनी अछि. विस्तार सँ जानकारी लेल हमर ब्राउज़र समर्थन डॉक्स देखू.

HTML5 अपनऽ शब्दार्थ क॑ कोना परिभाषित करै छै, एकरऽ कारण, autofocusHTML विशेषता केरऽ बूटस्ट्रैप मोडल म॑ कोनो प्रभाव नै पड़ै छै । समान प्रभाव प्राप्त करबाक लेल, किछु कस्टम जावास्क्रिप्ट क उपयोग करू:

$('#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आरू HTML 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)
})

प्रयोग

मोडल प्लगइन मांग पर, डाटा विशेषता या जावास्क्रिप्ट कें माध्यम सं, अहां कें छिपल सामग्री कें टॉगल करयत छै. .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जावास्क्रिप्ट के एकल लाइन के साथ id के साथ एक मोडल कॉल करें:

$('#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घटना के गुण के रूप मँ उपलब्ध छै.
देखाओल गेल.bs.modal इ घटना तखन फायर कैल जायत छै जखन मोडल कें उपयोगकर्ता कें लेल दृश्यमान बना देल गेल छै (सीएसएस संक्रमण पूरा हुअ कें इंतजार करतय). यदि क्लिक के कारण छै, त क्लिक करलौ गेलौ तत्व relatedTargetघटना के गुण के रूप मँ उपलब्ध छै.
छिपाएँ.बीएस.मोडल ई घटना तुरंत फायर कएल जाइत अछि जखन hideइंस्टेंस मेथड कॉल कएल गेल अछि.
छिपल.बीएस.मोडल ई घटना तखन फायर कएल जाइत अछि जखन मोडल उपयोगकर्ता सँ नुकाएब समाप्त भ' जाइत अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत)।
लोड कएल गेल.bs.modal ई घटना तखन फायर कएल जाइत अछि जखन मोडल 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.dropdown ई घटना तखन फायर कएल जाइत अछि जखन ड्रॉपडाउन उपयोगकर्ताक लेल दृश्यमान बनाओल गेल अछि (सीएसएस संक्रमणक प्रतीक्षा करत, पूरा करबाक लेल)।
छिपाएँ.bs.ड्रॉपडाउन ई घटना तुरंत फायर कएल जाइत अछि जखन hide instance मेथड कॉल कएल गेल अछि.
छिपल.बीएस.ड्रॉपडाउन ई घटना तखन फायर कएल जाइत अछि जखन ड्रॉपडाउन उपयोगकर्ता सँ नुकाएब समाप्त भ' जाइत अछि (CSS संक्रमणक प्रतीक्षा करत, पूरा करबाक लेल)।
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

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

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

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

@मोट

विज्ञापन लेगिंग keytar, ब्रंच आईडी कला पार्टी dolor labore। पिचफोर्क yr enim लो-फाई से पहले वे बिक चुके qui. टम्बलर फार्म-टू-टेबल साइकिल अधिकार जे किछु। अनिम केफियेह कार्लेस कार्डिगन। Velit seitan mcsweeney के फोटो बूथ 3 भेड़िया चंद्रमा irure. Cosby स्वेटर लोमो जीन शॉर्ट्स, विलियम्सबर्ग हुडी न्यूनतम qui आप शायद उनके एट कार्डिगन ट्रस्ट फंड culpa बायोडीजल वेस एंडरसन सौंदर्यशास्त्र के बारे में नहीं सुनने हैं | निहिल गोदना accusamus, cred विडंबना बायोडीजल keffiyeh कारीगर ullamco consequat |

@ mdo

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

एकटा

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

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

प्रयोग

बूटस्ट्रैप nav के आवश्यकता अछि

स्क्रॉलस्पाई कें लेल वर्तमान मे सक्रिय लिंक कें सही हाइलाइट करय कें लेल बूटस्ट्रैप nav घटक कें उपयोग कें आवश्यकता छै.

समाधान योग्य आईडी लक्ष्य आवश्यक अछि

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

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

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

सापेक्षिक स्थिति के आवश्यकता अछि

कोनो भी कार्यान्वयन विधि, scrollspy के उपयोग के आवश्यकता छै position: relative;पर तत्व पर जेकरा पर आप जासूसी करी रहलऽ छै. अधिकांश मामला मे इ <body>. , के अलावा अन्य तत्वों पर स्क्रॉलस्पाइइंग करते समय , एक सेट <body>अवश्य रखें और लागू करें |heightoverflow-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>

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

अपन CSS मे जोड़लाक बाद 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

उदाहरण टैब

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

कच्चा डेनिम अहाँ शायद हुनका सब के बारे में नै सुनने होयब जीन शॉर्ट्स ऑस्टिन। Nesciunt टोफू स्टंपटाउन aliqua, रेट्रो सिंथ मास्टर सफाई। मूंछ क्लिच अस्थायी, विलियम्सबर्ग कार्ल्स शाकाहारी helvetica. Reprehenderit कसाई रेट्रो keffiyeh ड्रीमकैचर सिंथ। कोस्बी स्वेटर ईयू बान्ह मी, क्यूई इरुरे टेरी रिचर्डसन पूर्व स्क्वीड। Aliquip placeat साल्विया सिलम आईफोन। Seitan aliquip quis कार्डिगन अमेरिकी परिधान, कसाई voluptate nisi qui.

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टैब में आ nav-tabsक्लास जोड़ला सं ulबूटस्ट्रैप टैब स्टाइलिंग लागू होयत , जखन कि navnav-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टारगेटिंग एकटा कंटेनर नोड कें डीओएम मे होबाक चाही. उपरोक्त उदाहरणों में, टैब विशेषताओं <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घटना सभ केँ फायर नहि कएल जाएत.

घटना प्रकार वर्णन
देखाउ.बीएस.टैब ई घटना टैब शो पर फायर करैत अछि, मुदा नव टैब देखाबय सं पहिने. क्रमशः सक्रिय टैब आ पिछला सक्रिय टैब (यदि उपलब्ध छै) कें लक्षित करय कें लेल 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 के fixie टिकाऊ quinoa 8-बिट अमेरिकी परिधान एक टेरी रिचर्डसन विनाइल chambray अछि. दाढ़ी स्टंपटाउन, कार्डिगन बान्ह मी लोमो थंडरकैट्स। टोफू बायोडीजल विलियम्सबर्ग मार्फा, चार लोको 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विशेषता अछि आ titleHTML तत्व पर अहाँ चाहैत छी जे टूलटिप हो | टूलटिप केरऽ जेनरेट करलऽ गेलऽ मार्कअप काफी सरल छै, हालांकि एकरा लेली एगो स्थिति केरऽ आवश्यकता जरूर छै (डिफ़ॉल्ट रूप स॑, 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-groupa या an कें भीतर तत्वक पर टूलटिप्स कें उपयोग करयत समय .input-group, या तालिका सं संबंधित तत्वक पर ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), अहां कें container: 'body'अवांछित दुष्प्रभावक सं बचय कें लेल विकल्प (नीचा दस्तावेजबद्ध) निर्दिष्ट करय कें होयत (जैना तत्व कें व्यापक बढ़नाय आ/ या टूलटिप कें ट्रिगर करय पर ओकर गोल कोना कें खोनाय)।

नुकायल तत्व पर टूलटिप देखाबय के कोशिश नहि करू

$(...).tooltip('show')लक्ष्य तत्व जखन अछि तखन आह्वान display: none;करब टूलटिप केँ गलत स्थिति मे राखि देत.

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

कीबोर्ड सं नेविगेट करय वाला उपयोगकर्ताक कें लेल, आ विशेष रूप सं सहायक प्रौद्योगिकी कें उपयोगकर्ताक कें लेल, अहां कें केवल कीबोर्ड-केंद्रित करय योग्य तत्वक जैना लिंक, फॉर्म नियंत्रण, या कोनों tabindex="0"विशेषता वाला कोनों मनमाना तत्व मे टूलटिप्स जोड़बाक चाही.

अक्षम तत्वक पर टूलटिप्स कें लेल रैपर तत्वक कें आवश्यकता होयत छै

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

विकल्प

विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-, मे संलग्न करू , जेना data-animation="".

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

टूलटिप क' कोनो विशिष्ट तत्व मे जोड़ैत अछि. जेना : container: 'body'. इ विकल्प विशेष रूप सं उपयोगी छै की इ अहां कें टूलटिप कें ट्रिगरिंग तत्व कें पास दस्तावेज कें प्रवाह मे स्थित करय कें अनुमति देयत छै - जे विंडो आकार बदलय कें दौरान टूलटिप कें ट्रिगरिंग तत्व सं दूर तैरय सं रोकतय.

देरी नम्बर | वस्तु

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

यदि कोनों नंबर सप्लाई कैल गेल छै, त नुका/देखाउ दूनू पर विलंब लागू कैल जायत छै

वस्तु संरचना अछि : १.delay: { "show": 500, "hide": 100 }

एचटीएमएल बूलियन झूठ टूलटिप मे एचटीएमएल डालू। यदि गलत छै, त jQuery कें textविधि कें उपयोग DOM मे सामग्री डालय कें लेल करल जैतय. यदि अहाँ XSS हमला के बारे में चिंतित छी त पाठ के प्रयोग करू.
प्लेसमेंट के लिये तार | आयोजन 'शिखर'

टूलटिप को कैसे पोजीशन दें - टॉप | नीचे | बाएँ | सही | ऑटो।
जखन "ऑटो" निर्दिष्ट कएल गेल अछि, तखन ई गतिशील रूप सँ टूलटिप केँ पुनः उन्मुख करत. जेना, यदि प्लेसमेंट "ऑटो लेफ्ट" अछि, त' टूलटिप संभव भेला पर बामा दिस प्रदर्शित करत, अन्यथा ई दाहिना दिस प्रदर्शित करत.

जब॑ कोनों फंक्शन क॑ प्लेसमेंट निर्धारित करै लेली प्रयोग करलऽ जाय छै त॑ ओकरा टूलटिप 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 ई घटना तखन फायर कएल जाइत अछि जखन टूलटिप उपयोगकर्ताक लेल दृश्यमान बनाओल गेल अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत)।
छिपाएँ.बीएस.टूलटिप ई घटना तुरंत फायर कएल जाइत अछि जखन hideइंस्टेंस मेथड कॉल कएल गेल अछि.
छिपल.बीएस.टूलटिप ई घटना तखन फायर कएल जाइत अछि जखन टूलटिप उपयोगकर्ता सँ नुकाएब समाप्त भ' जाइत अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत)।
सम्मिलित.बी.एस.टूलटिप ई घटना घटना के बाद फायर करलऽ जाय छै show.bs.tooltipजब॑ टूलटिप टेम्पलेट क॑ DOM म॑ जोड़लऽ गेलऽ छै ।
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

पोपोवर्स पोपोवर.जेएस

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

पोपोवर जिनकर शीर्षक आ सामग्री दुनू शून्य-लंबाई अछि, कहियो प्रदर्शित नहि होइत अछि ।

प्लगइन निर्भरता

पोपोवर्स कें लेल टूलटिप प्लगइन कें बूटस्ट्रैप कें अहां कें संस्करण मे शामिल करनाय आवश्यक छै.

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

प्रदर्शन कारण सं, टूलटिप आ पॉपओवर डाटा-एपीआई ऑप्ट-इन छै, मतलब अहां कें ओकरा स्वयं आरंभ करनाय होयत .

कोनो पृष्ठ पर सभ पॉपओवर के आरंभ करबाक एकटा तरीका ई होयत जे ओकरा ओकर data-toggleविशेषता द्वारा चुनल जाय:

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

बटन समूह, इनपुट समूह, आ तालिका मे पॉपओवर कें विशेष सेटिंग कें आवश्यकता होयत छै

.btn-groupएक या एक के भीतर तत्वों पर .input-group, या तालिका-संबंधित तत्वों पर ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>) पर पोपोवरों का उपयोग करते समय , आपको container: 'body'अवांछित दुष्प्रभावों (जैसे तत्व व्यापक बढ़ना और/ या पोपोवर ट्रिगर भेला पर ओकर गोल-गोल कोन खोएब)।

नुकायल तत्व पर पोपोवर देखाबय के कोशिश नहि करू

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

अक्षम तत्वक पर पोपोवर्स कें लेल रैपर तत्वक कें आवश्यकता होयत छै

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

बहु-पंक्तिक लिंक

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

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

स्थिर पोपोवर

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

पोपोवर टॉप

लोबोर्टिस पर सेड posuere consectetur एस्ट। एनियन ईउ लियो क्वाम। Pellentesque ornare सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम।

पोपोवर ठीके

लोबोर्टिस पर सेड posuere consectetur एस्ट। एनियन ईउ लियो क्वाम। Pellentesque ornare सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम।

पोपोवर नीचे

लोबोर्टिस पर सेड posuere consectetur एस्ट। एनियन ईउ लियो क्वाम। Pellentesque ornare सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम।

पोपोवर चलि गेल

लोबोर्टिस पर सेड posuere consectetur एस्ट। एनियन ईउ लियो क्वाम। Pellentesque ornare सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम।

लाइव डेमो

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

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

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

सामग्री तार | आयोजन '' .

data-contentयदि विशेषता मौजूद नहि अछि त' पूर्वनिर्धारित सामग्री मान .

यदि कोनो फंक्शन देल गेल अछि त' ओकरा अपन thisसंदर्भ सेट क' क' ओहि तत्व पर कॉल कएल जाएत जाहि सं पोपोवर संलग्न अछि.

देरी नम्बर | वस्तु

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

यदि कोनों नंबर सप्लाई कैल गेल छै, त नुका/देखाउ दूनू पर विलंब लागू कैल जायत छै

वस्तु संरचना अछि : १.delay: { "show": 500, "hide": 100 }

एचटीएमएल बूलियन झूठ पोपोवर मे एचटीएमएल डालू। यदि गलत छै, त jQuery कें textविधि कें उपयोग DOM मे सामग्री डालय कें लेल करल जैतय. यदि अहाँ XSS हमला के बारे में चिंतित छी त पाठ के प्रयोग करू.
प्लेसमेंट के लिये तार | आयोजन 'ठीक'

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

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

घटनाक्रम

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

घटना प्रकार वर्णन
बंद करू.bs.alert closeइंस्टेंस मेथड कें कॉल करय पर इ घटना तुरंत फायर भ जायत छै.
बंद.बी.एस.अलर्ट ई घटना तखन फायर कएल जाइत अछि जखन अलर्ट बंद भ' गेल अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत).
$('#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"एकटा बटन पर टॉगलिंग सक्रिय करबाक लेल जोड़ू .

पूर्व-टॉगल बटन आवश्यकता अछि .activearia-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>

अकॉर्डियन उदाहरण

पैनल घटक क' संग एकटा अकॉर्डियन बनेबाक लेल डिफ़ॉल्ट संकुचन व्यवहार केँ विस्तार करू.

एनिम pariatur क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन विज्ञापन स्क्वीड। 3 भेड़िया चंद्रमा officia aute, गैर cupidat स्केटबोर्ड dolor ब्रंच। खाद्य ट्रक quinoa nesciunt laborum eiusmod। ब्रंच 3 भेड़िया चंद्रमा अस्थायी, sunt aliqua डाल एक पक्षी इस पर स्क्वीड एकल-मूल कॉफी nulla assumenda shoreditch एट | निहिल एनिम केफियेह helvetica, शिल्प बियर labore वेस एंडरसन cred nesciunt sapiente ईए proident. विज्ञापन शाकाहारी excepteur कसाई वाइस लोमो। लेगिंग occaecat शिल्प बियर खेत-टू-टेबल, कच्चा डेनिम सौंदर्य सिंथ nesciunt अहाँ शायद हुनका सभक बारे मे नहि सुनने होयब accusamus labore टिकाऊ वीएचएस.
एनिम pariatur क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन विज्ञापन स्क्वीड। 3 भेड़िया चंद्रमा officia aute, गैर cupidat स्केटबोर्ड dolor ब्रंच। खाद्य ट्रक quinoa nesciunt laborum eiusmod। ब्रंच 3 भेड़िया चंद्रमा अस्थायी, sunt aliqua डाल एक पक्षी इस पर स्क्वीड एकल-मूल कॉफी nulla assumenda shoreditch एट | निहिल एनिम केफियेह helvetica, शिल्प बियर labore वेस एंडरसन cred nesciunt sapiente ईए proident. विज्ञापन शाकाहारी excepteur कसाई वाइस लोमो। लेगिंग occaecat शिल्प बियर खेत-टू-टेबल, कच्चा डेनिम सौंदर्य सिंथ nesciunt अहाँ शायद हुनका सभक बारे मे नहि सुनने होयब accusamus labore टिकाऊ वीएचएस.
एनिम pariatur क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन विज्ञापन स्क्वीड। 3 भेड़िया चंद्रमा officia aute, गैर cupidat स्केटबोर्ड dolor ब्रंच। खाद्य ट्रक quinoa nesciunt laborum eiusmod। ब्रंच 3 भेड़िया चंद्रमा अस्थायी, sunt aliqua डाल एक पक्षी इस पर स्क्वीड एकल-मूल कॉफी nulla assumenda shoreditch एट | निहिल एनिम केफियेह helvetica, शिल्प बियर labore वेस एंडरसन cred nesciunt sapiente ईए proident. विज्ञापन शाकाहारी excepteur कसाई वाइस लोमो। लेगिंग occaecat शिल्प बियर खेत-टू-टेबल, कच्चा डेनिम सौंदर्य सिंथ nesciunt अहाँ शायद हुनका सभक बारे मे नहि सुनने होयब accusamus labore टिकाऊ वीएचएस.
<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संक्रमण शुरू भेला पर जोड़ल जाइत अछि, आ समाप्त भेला पर हटा देल जाइत अछि

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

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

नाम प्रकार चुकनाइ वर्णन
ऑफसेट नम्बर | फंक्शन | वस्तु १० स्क्रॉल के स्थिति के गणना करय के समय स्क्रीन सं ऑफसेट करय लेल पिक्सेल. यदि एकटा नंबर देल गेल छै त ऑफसेट ऊपर आ नीचा दूनू दिशा मे लागू कैल जेतय. एकटा अद्वितीय, नीचा आ ऊपर ऑफसेट प्रदान करबाक लेल बस एकटा वस्तु offset: { top: 10 }वा offset: { top: 10, bottom: 5 }. जखन अहां कें कोनों ऑफसेट कें गतिशील रूप सं गणना करय कें जरूरत होयत छै तखन कोनों फंक्शन कें उपयोग करूं.
निशाना चयनकर्ता | नोड | jQuery तत्व 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 के लिये ई घटना तत्व के चिपकय-टॉप करय सं तुरंत पहिने फायर करैत अछि.
संलग्न-शीर्ष.bs.affix ई घटना तत्व के चिपकल-टॉप करला के बाद फायर करलऽ जाय छै.
प्रत्यय-नीचे.bs.प्रत्यय ई घटना तत्व के चिपकय-नीचा करय सं तुरंत पहिने फायर करैत अछि.
संलग्न-नीचे.bs.affix ई घटना तत्व के चिपकल-नीचाँ करला के बाद फायर करलऽ जाय छै.