जावास्क्रिप्ट · बूटस्ट्रैप संस्कृत

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

प्लगिन् व्यक्तिगतरूपेण (Botstrap इत्यस्य व्यक्तिगतसञ्चिकानां उपयोगेन *.js), अथवा सर्वान् एकदा एव (उपयोगेन bootstrap.jsवा लघुकृतं वा ) समाविष्टं कर्तुं शक्यते bootstrap.min.js।

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

उभयम् अपि bootstrap.jsच bootstrap.min.jsएकस्मिन् सञ्चिकायां सर्वाणि प्लगिन्स् समाविष्टानि सन्ति । एक ही समावेश करें।

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

केचन प्लगिन्स् तथा CSS घटकाः अन्येषु प्लगिन्स् इत्यस्य उपरि निर्भराः सन्ति । यदि भवान् प्लगिन्स् व्यक्तिगतरूपेण समावेशयति तर्हि docs मध्ये एतानि आश्रयाणि अवश्यं पश्यतु । इदमपि ज्ञातव्यं यत् सर्वे प्लगिन्स् jQuery इत्यस्य उपरि निर्भराः सन्ति (अस्य अर्थः अस्ति यत् प्लगिन् सञ्चिकाभ्यः पूर्वं jQuery इत्येतत् अवश्यमेव समाविष्टं भवेत् ) । jQuery इत्यस्य के के संस्करणाः समर्थिताः सन्ति इति द्रष्टुं अस्माकं परामर्शं कुर्वन्तु ।bower.json

दत्तांशगुणाः

जावास्क्रिप्ट् इत्यस्य एकां पङ्क्तिं न लिखित्वा विशुद्धतया मार्कअप एपिआइ इत्यस्य माध्यमेन सर्वाणि Bootstrap प्लगिन्स् उपयोक्तुं शक्नुवन्ति । इदं Bootstrap इत्यस्य प्रथमश्रेणीयाः API अस्ति तथा च प्लगिन् इत्यस्य उपयोगं कुर्वन् भवतः प्रथमः विचारः भवितुम् अर्हति ।

तत् उक्तं, केषुचित् परिस्थितिषु एतत् कार्यं निष्क्रियं कर्तुं इष्टं भवेत् । अतः, वयं namespaced with document इत्यत्र सर्वाणि घटनानि अनबाइण्ड् कृत्वा data attribute API इत्येतत् अक्षमीकरणस्य क्षमताम् अपि प्रदामः data-api। एतत् एवं दृश्यते-

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

वैकल्पिकरूपेण, विशिष्टं प्लगिन् लक्ष्यं कर्तुं, केवलं प्लगिन् नाम नामस्थानरूपेण data-api नामस्थानेन सह एतादृशं समावेशयन्तु:

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

data attributes मार्गेण प्रति एलिमेण्ट् केवलं एकं प्लगिन्

एकस्मिन् एव तत्त्वे बहुविधप्लगिन्स् इत्यस्मात् data attributes इत्यस्य उपयोगं न कुर्वन्तु । यथा, बटन् टूल्टिप् अपि च मोडल् टॉग्ल् कर्तुं न शक्नोति । एतत् साधयितुं wrapping element इत्यस्य उपयोगं कुर्वन्तु ।

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

वयम् अपि मन्यामहे यत् भवान् सर्वान् Bootstrap प्लगिन्स् केवलं जावास्क्रिप्ट् एपिआइ मार्गेण उपयोक्तुं समर्थः भवेत् । सर्वे सार्वजनिक एपिआइ एकाः, श्रृङ्खलायोग्याः पद्धतयः सन्ति, तथा च कार्यं कृतं संग्रहं प्रत्यागच्छन्ति ।

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

न विग्रहः

कदाचित् अन्यैः UI frameworks इत्यनेन सह Bootstrap plugins इत्यस्य उपयोगः आवश्यकः भवति । एतेषु परिस्थितिषु नामस्थानस्य टकरावः यदा कदा भवितुं शक्नुवन्ति । यदि एतत् भवति तर्हि भवान् .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 तः सर्वाणि Bootstrap इवेण्ट् नामस्थानानि सन्ति ।

सर्वाणि अव्ययघटनानि preventDefaultकार्यक्षमतां प्रददति। एतेन क्रियायाः आरम्भात् पूर्वं निष्पादनं निवारयितुं क्षमता प्राप्यते ।

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

संस्करण संख्याएँ

Bootstrap इत्यस्य प्रत्येकस्य jQuery प्लगिन् इत्यस्य संस्करणं VERSIONप्लगिन् इत्यस्य कन्स्ट्रक्टर् इत्यस्य गुणद्वारा अभिगन्तुं शक्यते । यथा, टूल्टिप् प्लगिन् कृते :

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

जावास्क्रिप्ट् अक्षमीकरणे विशेषः फॉलबैक् नास्ति

जावास्क्रिप्ट् अक्षमीकरणसमये बूटस्ट्रैप् इत्यस्य प्लगिन्स् विशेषतया ललितरूपेण न पतन्ति । यदि भवान् अस्मिन् सन्दर्भे उपयोक्तृ-अनुभवस्य चिन्तां करोति तर्हि स्वप्रयोक्तृभ्यः <noscript>स्थितिं व्याख्यातुं (तथा च जावास्क्रिप्ट् पुनः कथं सक्षमीकरणं कर्तव्यम् इति) उपयुञ्जीत, तथा/वा स्वकीयानि कस्टम्-फॉलबैक् योजयन्तु

तृतीयपक्षीयपुस्तकालयाः

बूटस्ट्रैप् आधिकारिकतया तृतीयपक्षस्य जावास्क्रिप्ट् पुस्तकालयानाम् समर्थनं न करोति यथा Prototype अथवा jQuery UI । अपि .noConflictच नामान्तरितघटनानां, संगततासमस्याः भवितुम् अर्हन्ति येषां समाधानं भवद्भिः स्वयमेव करणीयम् ।

संक्रमणानां विषये

सरलसंक्रमणप्रभावानाम् कृते transition.jsअन्येषां JS सञ्चिकानां पार्श्वे एकवारं समावेशयन्तु । यदि भवान् संकलितं (अथवा लघुकृतं) उपयुज्यते तर्हि bootstrap.jsएतत् समावेशयितुं आवश्यकता नास्ति—इदं पूर्वमेव अस्ति ।

अन्तः किम् अस्ति

transitionEndTransition.js इत्येतत् घटनानां कृते मूलभूतः सहायकः अस्ति तथा च CSS संक्रमणस्य अनुकरणकः अस्ति । अन्यैः प्लगिन्स् द्वारा CSS संक्रमणसमर्थनस्य जाँचार्थं तथा लम्बमानसंक्रमणानि ग्रहीतुं तस्य उपयोगः भवति ।

संक्रमणानि अक्षमीकरणम्

निम्नलिखित जावास्क्रिप्ट् स्निपेट् इत्यस्य उपयोगेन संक्रमणानि वैश्विकरूपेण निष्क्रियं कर्तुं शक्यन्ते, यत् transition.js(अथवा bootstrap.jsअथवा bootstrap.min.js, यथा स्यात्) लोड् कृतस्य अनन्तरं अवश्यमेव आगन्तुं शक्यते:

$.support.transition = false

मोडल्स् सुव्यवस्थिताः, परन्तु लचीलाः, न्यूनतम-आवश्यक-कार्यक्षमतायाः स्मार्ट-पूर्वनिर्धारित-सहिताः संवाद-प्रोम्प्ट् भवन्ति ।

अनेकाः मुक्ताः मोडाल्स् समर्थिताः न सन्ति

अन्यः दृश्यमानः अस्ति चेत् एकं मोडल् न उद्घाटयतु इति अवश्यं कुर्वन्तु । एकस्मिन् समये एकादशाधिकं मोडल् दर्शयितुं कस्टम् कोड् आवश्यकम् अस्ति ।

HTML5 इत्यनेन स्वस्य शब्दार्थं कथं परिभाषयति इति कारणतः autofocusBootstrap modals इत्यत्र HTML विशेषतायाः कोऽपि प्रभावः नास्ति । समानं प्रभावं प्राप्तुं, किञ्चित् कस्टम् जावास्क्रिप्ट् उपयुज्यताम् :

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

उदाहरणानि

स्थिर उदाहरण

पादलेखे शीर्षकं, शरीरं, क्रियासमूहः च सह रेण्डर्ड् मोडल् ।

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

लाइव डेमो

अधोलिखितं बटन् नुत्वा जावास्क्रिप्ट् मार्गेण एकं मोडल् टॉग् कुर्वन्तु । पृष्ठस्य उपरितः अधः स्लाइड् कृत्वा क्षीणं भविष्यति ।

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

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

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

मोडल्स् द्वौ वैकल्पिकौ आकारौ स्तः, एकस्मिन् स्थापनार्थं परिवर्तकवर्गाणां माध्यमेन उपलभ्यन्ते .modal-dialog।

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

<div class="modal fade 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>

जालप्रणाल्याः उपयोगेन

एकस्य मोडलस्य अन्तः Bootstrap जालप्रणाल्याः लाभं ग्रहीतुं, केवलं .rows अन्तः nest .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, इत्यस्य विषये विवरणार्थं Modal Events docs पश्यन्तु ।

...अधिक बटन...

<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इदं to <body>override default scrolling behavior इत्यत्र अपि योजयति तथा .modal-backdropच modal इत्यस्य बहिः क्लिक् करणसमये दर्शितानां मोडाल्स् इत्यस्य निराकरणार्थं क्लिक् क्षेत्रं प्रदातुं a जनयति ।

डेटा विशेषताओं के माध्यम से

जावास्क्रिप्ट् लिखित्वा विना एकं मोडल् सक्रियं कुर्वन्तु। 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 attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-backdrop=""।

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
पृष्ठभूमिः	बूलेन वा तारः`'static'`	सत्यम्‌	एकं मोडल-पृष्ठभूमितत्त्वं समावेशयति। वैकल्पिकरूपेण, `static`एकस्य पृष्ठभूमिस्य कृते निर्दिशतु यत् क्लिक् इत्यत्र मोडल् न बन्दं करोति ।
कीबोर्ड	बूलियन इति	सत्यम्‌	escape कील दबाने पर मोडल बन्द करता है
दर्शयतु	बूलियन इति	सत्यम्‌	आरम्भे मोडल दर्शयति ।
दूरस्थ	पथं	असत्य	एषः विकल्पः v3.3.0 तः अप्रचलितः अस्ति तथा च v4 मध्ये निष्कासितः अस्ति । वयं तस्य स्थाने क्लायन्ट्-साइड् टेम्पलेटिङ्ग् अथवा डाटा बाइण्डिङ्ग् फ्रेमवर्क् इत्यस्य उपयोगं कर्तुं, अथवा jQuery.load इत्येतत् स्वयमेव आह्वयितुं अनुशंसयामः । यदि दूरस्थं URL प्रदत्तं भवति तर्हि jQuery इत्यस्य पद्धतिद्वारा एकवारं सामग्री लोड् भवति तथा च div `load`मध्ये इन्जेक्ट् भवति । `.modal-content`यदि भवान् data-api इत्यस्य उपयोगं करोति `href`तर्हि दूरस्थस्रोतं निर्दिष्टुं वैकल्पिकरूपेण विशेषतायाः उपयोगं कर्तुं शक्नोति । अस्य उदाहरणं अधः दर्शितम् अस्ति । `<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>`

विधियाँ

`.modal(options)`

भवतः सामग्रीं मोडलरूपेण सक्रियं करोति। एकं वैकल्पिकं विकल्पं स्वीकुर्वति object.

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

`.modal('toggle')`

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

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

`.modal('show')`

मैन्युअल् रूपेण एकं मोडल् उद्घाटयति। मोडालस्य वास्तविकरूपेण दर्शितस्य पूर्वं (अर्थात् shown.bs.modalघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति ।

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

`.modal('hide')`

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

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

`.modal('handleUpdate')`

एकः दृश्यमानः भवेत् चेत् स्क्रॉलबारस्य प्रतिकारार्थं मोडलस्य स्थितिं पुनः समायोजयति, यत् मोडलस्य वामभागे कूर्दनं करिष्यति ।

केवलं तदा आवश्यकं यदा मोडलस्य ऊर्ध्वता परिवर्तते यदा सः उद्घाटितः अस्ति।

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

घटनाः

बूटस्ट्रैप् इत्यस्य मोडलवर्गः मोडलकार्यक्षमतायां हुक् करणाय कतिपयानि घटनानि उजागरयति ।

सर्वाणि मोडलघटनानि मोडलस्यैव उपरि (अर्थात् <div class="modal">) प्रज्वलितानि भवन्ति ।

घटना प्रकार	वर्णनम्‌
show.bs.modal इति दर्शयतु	एषा घटना तत्क्षणमेव प्रज्वलति यदा `show`दृष्टान्तविधिः आह्वयते । यदि क्लिक् कारणेन भवति तर्हि क्लिक् कृतं तत्त्वं `relatedTarget`घटनायाः गुणरूपेण उपलभ्यते ।
दर्शितम्.bs.modal	इदं घटना तदा प्रज्वलितं भवति यदा मोडल् उपयोक्त्रे दृश्यमानं कृतम् अस्ति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) । यदि क्लिक् कारणेन भवति तर्हि क्लिक् कृतं तत्त्वं `relatedTarget`घटनायाः गुणरूपेण उपलभ्यते ।
hide.bs.modal इति	इदं घटना तत्क्षणमेव प्रज्वलितं भवति यदा उदाहरणविधिः `hide`आहूता अस्ति ।
छिपे हुए.bs.modal	इदं घटना तदा प्रज्वलितं भवति यदा मोडल् उपयोक्त्रेण गोपनीयं समाप्तं भवति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) ।
लोड किया गया.bs.modal	`remote`यदा मोडालः विकल्पस्य उपयोगेन सामग्रीं लोड् कृतवान् तदा एषा घटना प्रज्वलिता भवति ।

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

उदाहरणानि

एतेन सरलेन प्लगिन् इत्यनेन प्रायः किमपि मध्ये ड्रॉप् डाउन मेनू योजयन्तु, यत्र navbar, tabs, pills च सन्ति ।

गोल्यः अन्तः

प्रयोगः

.opendata attributes अथवा JavaScript इत्यस्य माध्यमेन, ड्रॉप् डाउन प्लगिन् मातापितृसूची मदस्य उपरि वर्गं टॉगल कृत्वा गुप्तसामग्री (ड्रॉपडाउन मेनू) टॉगलं करोति ।

.dropdown-backdropमोबाईल-उपकरणेषु, एकं ड्रॉप्-डाउन् उद्घाट्य मेनू-बहिः टैप्-करणसमये ड्रॉप्-डाउन-मेनू-निरोधाय एकं टैप्-क्षेत्रं योजयति, यत् समुचित-iOS-समर्थनस्य आवश्यकता अस्ति अस्य अर्थः अस्ति यत् खुले ड्रॉप् डाउन मेनूतः भिन्न ड्रॉप् डाउन मेनू मध्ये स्विच् कर्तुं मोबाईले अतिरिक्तं टैप् करणीयम् अस्ति।

नोट्: 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>

लिङ्क् बटन् इत्यनेन सह URL अक्षुण्णानि स्थापयितुं, इत्यस्य 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-api इत्यस्य उपयोगं करोति वा इति न data-toggle="dropdown"कृत्वा, ड्रॉप्डाउन् इत्यस्य ट्रिगर एलिमेण्ट् इत्यत्र सर्वदा उपस्थितः भवितुम् आवश्यकम् अस्ति ।

विकल्पाः

न कश्चित्

विधियाँ

`$().dropdown('toggle')`

दत्तस्य नवबारस्य अथवा ट्याब्ड् नेविगेशनस्य ड्रॉप्डाउन मेनू टॉग्ल् करोति ।

घटनाः

.dropdown-menuसर्वाणि ड्रॉपडाउन इवेण्ट् 's parent एलिमेण्ट् इत्यत्र प्रज्वलिताः भवन्ति ।

सर्वेषु ड्रॉप्डाउन इवेण्ट्स् मध्ये एकः relatedTargetगुणः भवति, यस्य मूल्यं टॉग्लिंग् एङ्कर् एलिमेण्ट् अस्ति ।

घटना प्रकार	वर्णनम्‌
show.bs.dropdown इति दर्शयतु	show instance मेथड् आह्वयते चेत् एषा इवेण्ट् तत्क्षणमेव प्रज्वलति ।
दर्शितम्.bs.dropdown	इदं घटना तदा प्रज्वलितं भवति यदा ड्रॉपडाउन् उपयोक्त्रे दृश्यमानं कृतम् अस्ति (CSS संक्रमणानां प्रतीक्षां करिष्यति, पूर्णं कर्तुं) ।
hide.bs.ड्रॉपडाउन	यदा hide instance मेथड् आहूतम् अस्ति तदा एतत् इवेण्ट् तत्क्षणमेव प्रज्वलितं भवति ।
hidden.bs.ड्रॉपडाउन	इदं घटना तदा प्रज्वलितं भवति यदा उपयोक्त्रेण गोपनं समाप्तं भवति (CSS संक्रमणानां प्रतीक्षां करिष्यति, पूर्णं कर्तुं) ।

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

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

ScrollSpy प्लगइन स्क्रॉल स्थिति के आधार पर स्वचालित रूप से nav लक्ष्य अद्यतन करने के लिए है। navbar इत्यस्य अधः क्षेत्रं स्क्रॉल कृत्वा सक्रियवर्गस्य परिवर्तनं पश्यन्तु । ड्रॉप् डाउन उप आइटम्स् अपि हाइलाइट् भविष्यन्ति।

@स्थूलः

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

@मडो

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

एकम्‌

Occaecat commodo एलिक्वा डेलेक्टस। Fap शिल्प बियर deserunt स्केटबोर्ड ईए. लोमो साईकिल अधिकार adipisicing banh mi, velit ea sunt अगले स्तर locavore एकल-मूल कॉफी में magna veniam. उच्च जीवन आईडी vinyl, प्रतिध्वनि पार्क consequat quis aliquip banh mi pitchfork. वेरो VHS est adipisicing. Consectetur nisi DIY न्यूनतम दूत बैग। Cred पूर्व में, टिकाऊ delectus consectetur फैनी पैक iphone.

द्वि

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.

Keytar twee blog, culpa दूत बैग marfa जो भी delectus खाद्य ट्रक। Sapiente सिन्थ इड असुमेण्डा। Locavore sed helvetica cliche विडंबना, thundercats आप शायद उनके बारे में नहीं सुना है consequat hoodie लस-मुक्त लो-फाई fap aliquip. Labore अभिजात वर्ग placeat पहले वे बेच दिया, टेरी रिचर्डसन proident ब्रंच nesciunt quis cosby स्वेटर pariatur keffiyeh उत helvetica कारीगर. कार्डिगन शिल्प बियर seitan रेडीमेड velit. VHS chambray laboris अस्थायी veniam. Anim mollit न्यूनतम commodo उल्लमको गरज बिल्लियों।

प्रयोगः

Bootstrap nav इत्यस्य आवश्यकता अस्ति

Scrollspy इत्यस्य सम्प्रति सक्रियलिङ्कानां सम्यक् प्रकाशनार्थं Bootstrap nav घटकस्य उपयोगः आवश्यकः अस्ति ।

समाधानयोग्य आईडी लक्ष्य आवश्यक है

नवबार लिङ्केषु समाधानयोग्याः id लक्ष्याणि भवितुमर्हन्ति । यथा, a <a href="#home">home</a>इत्यस्य DOM इत्यस्मिन् किमपि अनुरूपं भवितुमर्हति यथा <div id="home"></div>.

अ- `:visible`लक्ष्य तत्वों को उपेक्षित किया गया

:visiblejQuery इत्यस्य अनुसारं न सन्ति ये लक्ष्यतत्त्वानि उपेक्षितानि भविष्यन्ति तथा च तेषां तत्सम्बद्धानि nav वस्तूनि कदापि प्रकाशितानि न भविष्यन्ति ।

सापेक्षिक स्थितिकरणस्य आवश्यकता भवति

कार्यान्वयनविधिः किमपि न भवतु, scrollspy इत्यस्य उपयोगः आवश्यकः position: relative;भवति यस्मिन् तत्त्वे भवन्तः गुप्तचर्याम् कुर्वन्ति । अधिकतया एतत् <body>. , इत्यस्मात् परं तत्त्वेषु स्क्रॉलस्पाइङ्गं कुर्वन् , सेट् <body>अवश्यं कृत्वा प्रयुक्तं कुर्वन्तु ।heightoverflow-y: scroll;

डेटा विशेषताओं के माध्यम से

स्वस्य topbar नेविगेशनं प्रति scrollspy व्यवहारं सुलभतया योजयितुं, data-spy="scroll"यस्मिन् तत्त्वं गुप्तचरयितुम् इच्छति तस्मिन् तत्त्वे योजयन्तु (अधिकांशतः एतत् स्यात् <body>) । data-targetततः कस्यापि Bootstrap .navघटकस्य parent element इत्यस्य ID अथवा class इत्यनेन सह attribute योजयन्तु ।

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;जावास्क्रिप्ट् मार्गेण scrollspy आह्वयन्तु :

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

विधियाँ

`.scrollspy('refresh')`

DOM तः एलिमेण्ट्स् योजयितुं वा निष्कासयितुं वा सह scrollspy इत्यस्य उपयोगं कुर्वन् भवद्भिः refresh मेथड् इत्येतत् एवं आह्वयितुं आवश्यकं भविष्यति:

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

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-offset=""।

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
offset इति	संख्या	१०	स्क्रॉलस्य स्थितिं गणयन्ते सति उपरितः ऑफसेट् कर्तुं पिक्सेल्।

घटनाः

घटना प्रकार	वर्णनम्‌
सक्रिय करें.bs.scrollspy	यदा कदापि नूतनं वस्तु scrollspy द्वारा सक्रियं भवति तदा एषा घटना अग्निम् अङ्गीकुर्वति ।

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

उदाहरण ट्याब्स्

स्थानीयसामग्रीणां फलकद्वारा संक्रमणार्थं द्रुतं, गतिशीलं ट्याब् कार्यक्षमतां योजयन्तु, ड्रॉपडाउन मेनूद्वारा अपि । नेस्टेड् ट्याब्स् समर्थिताः न सन्ति ।

कच्चा डेनिम भवन्तः सम्भवतः तेषां विषये न श्रुतवन्तः jean shorts Austin. Nesciunt टोफू stumptown aliqua, रेट्रो सिंथ मास्टर सफाई. मूंछ क्लिच अस्थायी, विलियम्सबर्ग कार्ल्स शाकाहारी helvetica. Reprehenderit कसाई रेट्रो keffiyeh सपना पकड़ने वाला synth. Cosby स्वेटर eu banh mi, qui irure टेरी रिचर्डसन पूर्व स्क्वीड. Aliquip placeat साल्विया सिलम iphone. 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.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

ट्याब्ड् नेविगेशनं विस्तारयति

एतत् प्लगिन् टैब्- युक्तं नेविगेशन-घटकं टैब- योग्य-क्षेत्राणि योजयितुं विस्तारयति ।

प्रयोगः

जावास्क्रिप्ट् मार्गेण टैब-योग्य-ट्याब्स् सक्षमीकरणं कुर्वन्तु (प्रत्येकं ट्याब् व्यक्तिगतरूपेण सक्रियीकरणस्य आवश्यकता अस्ति):

$('#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क्लास् योजयित्वा ulBootstrap ट्याब् स्टाइलिंग्nav प्रयोज्यते , तथा च and 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`

एकं ट्याब् एलिमेण्ट् तथा सामग्रीपात्रं सक्रिययति । ट्याब् मध्ये DOM मध्ये एकं पात्रं नोड् लक्ष्यं कृत्वा एकं data-targetवा एकं वा भवितव्यम् । hrefउपर्युक्तेषु उदाहरणेषु ट्याब्स् विशेषतायुक्ताः <a>s भवन्ति ।data-toggle="tab"

`.tab('show')`

दत्तं ट्याब् चित्वा तस्य सम्बद्धां सामग्रीं दर्शयति । अन्यः कोऽपि ट्याब् यः पूर्वं चयनितः आसीत् सः अचयनितः भवति तस्य सम्बद्धा सामग्री च गोपनीया भवति । ट्याब् फलकं वास्तवतः दर्शितस्य पूर्वं (अर्थात् shown.bs.tabघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति ।

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

घटनाः

नूतनं ट्याब् दर्शयन्ते सति घटनाः निम्नलिखितक्रमेण प्रज्वालयन्ति ।

hide.bs.tab(वर्तमान सक्रिय ट्याब् पर)
show.bs.tab(दर्शनीय-ट्याब् पर)
hidden.bs.tab(पूर्व सक्रिय ट्याब् मध्ये, hide.bs.tabघटनायाः कृते एव)
shown.bs.tab(नव-सक्रिय-अधुना-दर्शित-ट्याब्-मध्ये, show.bs.tabघटनायाः कृते एव)

यदि पूर्वमेव कोऽपि ट्याब् सक्रियः नासीत्, तर्हि hide.bs.taband hidden.bs.tabइवेण्ट्स् न प्रज्वलिताः भविष्यन्ति ।

घटना प्रकार	वर्णनम्‌
show.bs.tab इति दर्शयतु	इदं इवेण्ट् ट्याब् शो इत्यत्र अग्निम् अङ्गीकुर्वति, परन्तु नूतनं ट्याब् दर्शितस्य पूर्वं । सक्रिय ट्याब् तथा पूर्व सक्रिय ट्याब् (यदि उपलब्ध है) को क्रमशः लक्षित करने के लिए `event.target`और का प्रयोग करें ।`event.relatedTarget`
दर्शितम्.bs.tab	एतत् इवेण्ट् ट्याब् दर्शितस्य अनन्तरं tab show इत्यत्र प्रज्वलितं भवति । सक्रिय ट्याब् तथा पूर्व सक्रिय ट्याब् (यदि उपलब्ध है) को क्रमशः लक्षित करने के लिए `event.target`और का प्रयोग करें ।`event.relatedTarget`
hide.bs.tab इति	यदा नूतनं ट्याब् दर्शितव्यं भवति (एवं च पूर्व सक्रिय ट्याब् गोपनीयं भवति) तदा एषा घटना प्रज्वलति । वर्तमान सक्रिय ट्याब् तथा नूतन शीघ्र सक्रिय ट्याब् को क्रमशः लक्षित करने के लिए `event.target`और का प्रयोग करें ।`event.relatedTarget`
hidden.bs.tab इति	नूतनं ट्याब् दर्शितस्य अनन्तरं (एवं च पूर्वसक्रिय ट्याब् निगूढं भवति) इयं घटना प्रज्वलति । पूर्वसक्रियट्याब् `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 प्लगइन द्वारा प्रेरित; Tooltips एकं अद्यतनं संस्करणम् अस्ति, यत् चित्रेषु न अवलम्बते, एनिमेशनस्य कृते CSS3 इत्यस्य उपयोगं करोति, स्थानीयशीर्षकभण्डारणार्थं च data-attributes इत्यस्य उपयोगं करोति ।

शून्य-दीर्घता-शीर्षक-युक्ताः उपकरण-टिप्स् कदापि न प्रदर्शिताः भवन्ति ।

उदाहरणानि

उपकरणसूचनानि द्रष्टुं अधोलिङ्कानि उपरि माउसं कुर्वन्तु:

चत्वारः विकल्पाः उपलभ्यन्ते : उपरि, दक्षिणं, अधः, वामं च संरेखितम् ।

चत्वारि दिशः

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

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

कार्यप्रदर्शनकारणात्, Tooltip तथा Popover data-apis इत्येतौ opt-in अस्ति, अर्थात् भवान् स्वयमेव तान् आरभणीयम् .

पृष्ठे सर्वाणि साधनसूचनानि आरम्भयितुं एकः उपायः स्यात् यत् तेषां data-toggleविशेषताद्वारा चयनं करणीयम्:

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

प्रयोगः

टूल्टिप् प्लगिन् आग्रहेण सामग्रीं मार्कअपं च जनयति, पूर्वनिर्धारितरूपेण च तेषां ट्रिगर एलिमेण्ट् इत्यस्य अनन्तरं टूल्टिप् स्थापयति ।

जावास्क्रिप्ट् मार्गेण टूलटिप् ट्रिगरं कुर्वन्तु:

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

मार्कअप

टूल्टिप् कृते आवश्यकं मार्कअपं केवलं dataएट्रिब्यूट् भवति तथा titleच HTML एलिमेण्ट् इत्यत्र भवान् टूल्टिप् प्राप्तुम् इच्छति । टूल्टिप् इत्यस्य उत्पन्नं मार्कअपं तु सरलं भवति, यद्यपि तस्य कृते स्थितिः आवश्यकी भवति (पूर्वनिर्धारितरूपेण, topप्लगिन् द्वारा सेट् भवति) ।

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

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

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-animation=""।

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
एनिमेशन	बूलियन इति	सत्यम्‌	टूल्टिप् मध्ये CSS fade संक्रमणं प्रयोजयन्तु
पात्रम्	तार \| असत्य	असत्य	विशिष्टे तत्त्वे टूल्टिप् योजयति । उदाहरणम् : `container: 'body'`. एषः विकल्पः विशेषतया उपयोगी अस्ति यत् एतत् भवन्तं ट्रिगरिंग् एलिमेण्ट् इत्यस्य समीपे दस्तावेजस्य प्रवाहे टूल्टिप् स्थापयितुं शक्नोति - यत् विण्डो आकारान्तरणस्य समये टूल्टिप् ट्रिगरिंग् एलिमेण्ट् इत्यस्मात् दूरं प्लवितुं न शक्नोति
विलम्बः	संख्या \| वस्तु	०	टूल्टिप् (ms) दर्शयितुं गोपयितुं च विलम्बः - मैनुअल् ट्रिगर प्रकारस्य कृते न प्रवर्तते यदि सङ्ख्या प्रदत्ता भवति तर्हि hide/show इति द्वयोः कृते विलम्बः प्रयुक्तः भवति वस्तुसंरचना अस्ति : १.`delay: { "show": 500, "hide": 100 }`
html	बूलियन इति	असत्य	टूल्टिप् मध्ये HTML सम्मिलितं कुर्वन्तु । यदि मिथ्या अस्ति तर्हि DOM मध्ये सामग्रीं सम्मिलितुं jQuery इत्यस्य `text`विधिः उपयुज्यते । यदि भवान् XSS आक्रमणानां विषये चिन्तितः अस्ति तर्हि पाठस्य उपयोगं कुर्वन्तु।
स्थापनम्	तार \| नियोग	'उपरितन'	टूलटिप् - शीर्षं कथं स्थापयितव्यम् \| तले \| वाम \| सम्यक् \| auto. यदा "auto" निर्दिष्टं भवति तदा तत् गतिशीलरूपेण tooltip पुनः उन्मुखं करिष्यति । यथा, यदि placement "auto left" अस्ति तर्हि tooltip सम्भवसमये वामभागे प्रदर्शयिष्यति, अन्यथा दक्षिणं प्रदर्शयिष्यति । यदा कश्चन फंक्शन् प्लेसमेण्ट् निर्धारयितुं प्रयुक्तः भवति तदा तत् tooltip DOM node इत्यनेन प्रथमं आर्गुमेण्ट् रूपेण, ट्रिगरिंग एलिमेण्ट् DOM node इत्यनेन च द्वितीयं कृत्वा आह्वयते । सन्दर्भः `this`tooltip instance इत्यत्र सेट् भवति ।
चयनकर्ता	सूत्र	असत्य	यदि चयनकर्ता प्रदत्तः अस्ति तर्हि निर्दिष्टलक्ष्याणां कृते टूल्टिप् ऑब्जेक्ट्स् प्रत्यायिताः भविष्यन्ति । व्यवहारे, एतस्य उपयोगः गतिशील HTML सामग्रीं टूल्टिप् योजितं कर्तुं सक्षमीकरणाय भवति । एतत् एकं च सूचनाप्रदं उदाहरणं पश्यन्तु .
टेम्पलेट	सूत्र	`'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'`	टूलटिप् निर्मायन्ते सति उपयोक्तुं HTML आधारं कुर्वन्तु । tooltip's इत्यस्य `title`अन्तः प्रविष्टं भविष्यति `.tooltip-inner`। `.tooltip-arrow`टूल्टिप् इत्यस्य बाणः भविष्यति। बाह्यतमस्य आवरणतत्त्वस्य `.tooltip`वर्गः भवेत् ।
शीर्षक	तार \| नियोग	'' इति ।	`title`यदि विशेषता नास्ति तर्हि पूर्वनिर्धारितं शीर्षकमूल्यम् । `this`यदि कश्चन फंक्शन् दत्तः अस्ति तर्हि तस्य reference set इत्यनेन सह तस्य एलिमेण्ट् इत्यस्य आह्वानं भविष्यति यस्मिन् टूल्टिप् संलग्नम् अस्ति ।
प्रवर्त्यम्	सूत्र	'होवर फोकस' इति ।	टूलटिप् कथं ट्रिगर भवति - \| भ्रमति \| फोकस \| शास्त्र। भवान् बहुविधं ट्रिगरं उत्तीर्णं कर्तुं शक्नोति; तान् अन्तरिक्षेण पृथक् कुर्वन्तु। `manual`अन्येन कस्यचित् उत्प्रेरकेन सह संयोजितुं न शक्यते।
दृश्यस्थानम्	तार \| वस्तु \| नियोग	{ चयनकर्ता: 'शरीर', गद्दी: 0 }	अस्य तत्त्वस्य सीमायाः अन्तः टूल्टिप् स्थापयति । उदाहरण : `viewport: '#viewport'`वा`{ "selector": "#viewport", "padding": 0 }` यदि कश्चन फंक्शन् दत्तः अस्ति तर्हि तस्य एकमात्रं आर्गुमेण्ट् इति ट्रिगरिंग् एलिमेण्ट् DOM node इत्यनेन सह आह्वयते । सन्दर्भः `this`tooltip instance इत्यत्र सेट् भवति ।

विधियाँ

`$().tooltip(options)`

एलिमेण्ट्-सङ्ग्रहे टूल्टिप्-हन्डलर् संलग्नं करोति ।

`.tooltip('show')`

एकस्य तत्त्वस्य टूल्टिप् प्रकाशयति । टूल्टिप् वास्तवतः दर्शितस्य पूर्वं (अर्थात् shown.bs.tooltipघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । इदं टूल्टिप् इत्यस्य "मैनुअल्" ट्रिगरिंग् इति मन्यते । शून्य-दीर्घता-शीर्षक-युक्ताः उपकरण-टिप्स् कदापि न प्रदर्शिताः भवन्ति ।

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

`.tooltip('hide')`

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

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

`.tooltip('toggle')`

कस्यचित् एलिमेण्ट् इत्यस्य टूल्टिप् टॉग्ल् करोति । टूल्टिप् वास्तवतः दर्शितस्य वा गोपनीयस्य वा पूर्वं (अर्थात् shown.bs.tooltipor hidden.bs.tooltipइवेण्ट् इत्यस्य भवितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । इदं टूल्टिप् इत्यस्य "मैनुअल्" ट्रिगरिंग् इति मन्यते ।

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

`.tooltip('destroy')`

कस्यचित् तत्त्वस्य टूल्टिप् गोपयति, नष्टं च करोति । प्रत्यायोजनस्य उपयोगं कुर्वन्ति उपकरणटिप्स् (यत् विकल्पस्य उपयोगेन निर्मिताः सन्ति ) selectorवंशज -उद्दीपक-तत्त्वेषु व्यक्तिगतरूपेण नष्टुं न शक्यन्ते ।

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

घटनाः

घटना प्रकार	वर्णनम्‌
show.bs.tooltip इति दर्शयतु	एषा घटना तत्क्षणमेव प्रज्वलति यदा `show`दृष्टान्तविधिः आह्वयते ।
दर्शितम्.bs.tooltip	यदा उपकरणटिप् उपयोक्त्रे दृश्यमानं कृतम् अस्ति तदा एषा घटना प्रज्वलिता भवति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) ।
hide.bs.tooltip इति	इदं घटना तत्क्षणमेव प्रज्वलितं भवति यदा उदाहरणविधिः `hide`आहूता अस्ति ।
hidden.bs.tooltip इति	यदा उपकरणटिप् उपयोक्त्रेण गोपनीयं समाप्तं भवति तदा एषा घटना प्रज्वलिता भवति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) ।
सम्मिलितम्.bs.tooltip	`show.bs.tooltip`यदा DOM मध्ये tooltip template योजितं भवति तदा घटनायाः अनन्तरं एषा घटना निष्कासिता भवति ।

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

गौणसूचनायाः आवासार्थं कस्मिन् अपि तत्त्वे iPad इत्यत्र इव सामग्रीयाः लघु-आच्छादनानि योजयन्तु ।

येषां शीर्षकं सामग्री च शून्य-दीर्घता भवति तेषां पोपोवर्सः कदापि न प्रदर्शिताः भवन्ति ।

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

कार्यप्रदर्शनकारणात्, Tooltip तथा Popover data-apis इत्येतौ opt-in अस्ति, अर्थात् भवान् स्वयमेव तान् आरभणीयम् .

पृष्ठे सर्वान् popovers आरम्भयितुं एकः उपायः स्यात् तेषां data-toggleविशेषताद्वारा चयनं करणीयम्:

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

उदाहरणानि

चत्वारः विकल्पाः उपलभ्यन्ते : उपरि, दक्षिणं, अधः, वामं च संरेखितम् ।

लाइव डेमो

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

चत्वारि दिशः

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

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

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

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

अग्रिमे क्लिक् कृत्वा निष्कासयन्तु

focusउपयोक्ता यत् अग्रिमे क्लिक् करोति तस्मिन् popovers निष्कासयितुं ट्रिगरस्य उपयोगं कुर्वन्तु ।

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

प्रयोगः

जावास्क्रिप्ट् मार्गेण popovers सक्षमं कुर्वन्तु:

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

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-animation=""।

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
एनिमेशन	बूलियन इति	सत्यम्‌	popover मध्ये CSS fade संक्रमणं प्रयोजयन्तु
पात्रम्	तार \| असत्य	असत्य	विशिष्टतत्त्वे पोपोवरं योजयति । उदाहरणम् : `container: 'body'`. एषः विकल्पः विशेषतया उपयोगी अस्ति यत् एतत् भवन्तं ट्रिगरिंग-तत्त्वस्य समीपे दस्तावेजस्य प्रवाहे पोपोवरं स्थापयितुं शक्नोति - यत् विण्डो-आकार-परिवर्तनस्य समये पोपोवरं ट्रिगरिंग-तत्त्वात् दूरं प्लवितुं न निवारयिष्यति
विषयः	तार \| नियोग	'' इति ।	`data-content`यदि विशेषता नास्ति तर्हि पूर्वनिर्धारितं सामग्रीमूल्यम् । यदि कश्चन फंक्शन् दत्तः अस्ति तर्हि तत् तस्य `this`reference सेट् कृत्वा तस्मिन् तत्त्वे आहूयते यस्मिन् पोपोवरः संलग्नः अस्ति ।
विलम्बः	संख्या \| वस्तु	०	popover (ms) दर्शयितुं गोपनं च विलम्बः - मैनुअल् ट्रिगर प्रकारस्य कृते न प्रवर्तते यदि सङ्ख्या प्रदत्ता भवति तर्हि hide/show इति द्वयोः कृते विलम्बः प्रयुक्तः भवति वस्तुसंरचना अस्ति : १.`delay: { "show": 500, "hide": 100 }`
html	बूलियन इति	असत्य	popover मध्ये HTML सम्मिलितं कुर्वन्तु । यदि मिथ्या अस्ति तर्हि DOM मध्ये सामग्रीं सम्मिलितुं jQuery इत्यस्य `text`विधिः उपयुज्यते । यदि भवान् XSS आक्रमणानां विषये चिन्तितः अस्ति तर्हि पाठस्य उपयोगं कुर्वन्तु।
स्थापनम्	तार \| नियोग	'दक्षिणः'	पोपोवर - शीर्ष को कैसे रखें \| तले \| वाम \| सम्यक् \| auto. यदा "auto" निर्दिष्टं भवति तदा तत् गतिशीलरूपेण popover पुनः उन्मुखं करिष्यति । यथा, यदि स्थापनं "auto left" अस्ति तर्हि सम्भवसमये popover वामभागे प्रदर्शयिष्यति, अन्यथा दक्षिणं प्रदर्शयिष्यति । यदा कश्चन फंक्शन् प्लेसमेण्ट् निर्धारयितुं उपयुज्यते तदा तत् popover DOM नोड् इत्यनेन सह प्रथमं आर्गुमेण्ट् रूपेण, ट्रिगरिंग एलिमेण्ट् DOM नोड् इत्यनेन च द्वितीयं कृत्वा आह्वयते । सन्दर्भः `this`popover दृष्टान्तं प्रति सेट् भवति ।
चयनकर्ता	सूत्र	असत्य	यदि चयनकर्ता प्रदत्तः अस्ति तर्हि निर्दिष्टलक्ष्यं प्रति popover वस्तुनि प्रत्यायिताः भविष्यन्ति । व्यवहारे, एतस्य उपयोगः गतिशील HTML सामग्रीं popovers योजयितुं सक्षमीकरणाय भवति । एतत् एकं च सूचनाप्रदं उदाहरणं पश्यन्तु .
टेम्पलेट	सूत्र	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'`	popover इत्यस्य निर्माणकाले उपयोक्तुं HTML आधारं कुर्वन्तु । पोपोवरस्य `title`अन्तः प्रविष्टं भविष्यति `.popover-title`. पोपोवरस्य `content`अन्तः प्रविष्टं भविष्यति `.popover-content`. `.arrow`पोपोवरस्य बाणः भविष्यति। बाह्यतमस्य आवरणतत्त्वस्य `.popover`वर्गः भवेत् ।
शीर्षक	तार \| नियोग	'' इति ।	`title`यदि विशेषता नास्ति तर्हि पूर्वनिर्धारितं शीर्षकमूल्यम् । यदि कश्चन फंक्शन् दत्तः अस्ति तर्हि तत् तस्य `this`reference सेट् कृत्वा तस्मिन् तत्त्वे आहूयते यस्मिन् पोपोवरः संलग्नः अस्ति ।
प्रवर्त्यम्	सूत्र	'क्लिक्' इति ।	popover कथं प्रवर्तते - क्लिक् कुर्वन्तु \| भ्रमति \| फोकस \| शास्त्र। भवान् बहुविधं ट्रिगरं उत्तीर्णं कर्तुं शक्नोति; तान् अन्तरिक्षेण पृथक् कुर्वन्तु। `manual`अन्येन कस्यचित् उत्प्रेरकेन सह संयोजितुं न शक्यते।
दृश्यस्थानम्	तार \| वस्तु \| नियोग	{ चयनकर्ता: 'शरीर', गद्दी: 0 }	अस्य तत्त्वस्य सीमायाः अन्तः पोपोवरं स्थापयति । उदाहरण : `viewport: '#viewport'`वा`{ "selector": "#viewport", "padding": 0 }` यदि कश्चन फंक्शन् दत्तः अस्ति तर्हि तस्य एकमात्रं आर्गुमेण्ट् इति ट्रिगरिंग् एलिमेण्ट् DOM node इत्यनेन सह आह्वयते । सन्दर्भः `this`popover दृष्टान्तं प्रति सेट् भवति ।

विधियाँ

`$().popover(options)`

एकस्य तत्वसङ्ग्रहस्य कृते popovers आरभते ।

`.popover('show')`

एकस्य तत्त्वस्य पोपोवरं प्रकाशयति। popover यथार्थतः दर्शितस्य पूर्वं (अर्थात् shown.bs.popoverघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । एतत् पोपोवरस्य "मैनुअल्" ट्रिगरिंग् इति मन्यते । येषां शीर्षकं सामग्री च शून्य-दीर्घता भवति तेषां पोपोवर्सः कदापि न प्रदर्शिताः भवन्ति ।

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

`.popover('hide')`

एकस्य तत्त्वस्य पोपोवरं गोपयति। पोपोवरस्य वास्तविकरूपेण गोपनीयत्वात् पूर्वं (अर्थात् hidden.bs.popoverघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । एतत् पोपोवरस्य "मैनुअल्" ट्रिगरिंग् इति मन्यते ।

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

`.popover('toggle')`

एकस्य तत्त्वस्य popover इत्येतत् टॉगल करोति । पोपोवरस्य वास्तविकरूपेण दर्शितस्य वा गोपनीयस्य वा पूर्वं (अर्थात् shown.bs.popoverअथवा hidden.bs.popoverघटनायाः भवितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । एतत् पोपोवरस्य "मैनुअल्" ट्रिगरिंग् इति मन्यते ।

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

`.popover('destroy')`

एकस्य तत्त्वस्य पोपोवरं गोपयति, नाशयति च। प्रतिनिधिमण्डलस्य उपयोगं कुर्वन्तः पोपोवर्स् (यत् विकल्पस्य उपयोगेन निर्मिताः सन्ति ) selectorवंशज -उद्दीपक-तत्त्वेषु व्यक्तिगतरूपेण नष्टं कर्तुं न शक्यते ।

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

घटनाः

घटना प्रकार	वर्णनम्‌
show.bs.popover इति दर्शयतु	एषा घटना तत्क्षणमेव प्रज्वलति यदा `show`दृष्टान्तविधिः आह्वयते ।
दर्शितम्.bs.popover	इदं घटना तदा प्रज्वलितं भवति यदा popover उपयोक्त्रे दृश्यमानं कृतम् अस्ति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) ।
hide.bs.popover इति	इदं घटना तत्क्षणमेव प्रज्वलितं भवति यदा उदाहरणविधिः `hide`आहूता अस्ति ।
गुप्त.ब्स्.दरिद्रम्	इदं घटनां तदा प्रज्वलितं भवति यदा popover उपयोक्त्रेण गोपनीयं समाप्तं भवति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) ।
सम्मिलितम्।ब्स्.दरिद्रम्	इदं इवेण्ट् इवेण्ट् इत्यस्य अनन्तरं `show.bs.popover`यदा popover टेम्पलेट् DOM मध्ये योजितं भवति तदा निष्कासितम् अस्ति ।

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

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

एतेन प्लगिन् इत्यनेन सर्वेषु अलर्टसन्देशेषु dismiss कार्यक्षमतां योजयन्तु ।

बटनस्य उपयोगं कुर्वन् .close, तत् प्रथमं बालकं भवितुमर्हति .alert-dismissibleतथा च मार्कअप मध्ये तस्मात् पूर्वं कोऽपि पाठसामग्री न आगन्तुं शक्नोति ।

पवित्र गुआकामोल ! Best check yo self, त्वं बहु उत्तमं न दृश्यते।

अहो स्नैप ! भवतः त्रुटिः प्राप्ता!

एतत् तत् च परिवर्त्य पुनः प्रयासं कुर्वन्तु। Duis mollis, est गैर commodo luctus, nisi erat porttitor ligula, eget lacinia odio सेम nec अभिजात वर्ग. Cras mattis consectetur पुरुष बैठा amet fermentum.

प्रयोगः

केवलं स्वस्य close बटन् मध्ये योजयन्तु data-dismiss="alert"यत् स्वयमेव alert close कार्यक्षमतां दातुं शक्नुवन्ति। अलर्ट् बन्दं कृत्वा तत् DOM तः निष्कासयति ।

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

समापनसमये भवतः अलर्ट्स् एनिमेशनस्य उपयोगं कर्तुं, सुनिश्चितं कुर्वन्तु यत् तेषु पूर्वमेव .fadeand .inवर्गाः प्रयुक्ताः सन्ति ।

विधियाँ

`$().alert()`

वंशजतत्त्वेषु क्लिक् इवेण्ट् इत्यस्य कृते अलर्ट् श्रोतुं करोति येषु data-dismiss="alert"विशेषता अस्ति । (data-api इत्यस्य स्वतः आरम्भीकरणस्य उपयोगं कुर्वन् आवश्यकं नास्ति।)

`$().alert('close')`

DOM तः निष्कास्य अलर्ट् बन्दं करोति । यदि तत्वे .fadeand .inवर्गाः सन्ति तर्हि तस्य निष्कासनात् पूर्वं अलर्ट् क्षीणं भविष्यति ।

घटनाः

Bootstrap इत्यस्य alert plugin इत्यनेन alert कार्यक्षमतायाः हुक् करणाय कतिपयानि घटनानि प्रकाश्यन्ते ।

घटना प्रकार	वर्णनम्‌
बंद करें.bs.alert	एषा घटना तत्क्षणमेव प्रज्वलति यदा `close`दृष्टान्तविधिः आह्वयते ।
बन्द.bs.alert	यदा अलर्ट् बन्दं जातं तदा एषा घटना प्रज्वलिता भवति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) ।

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

बटन्स् इत्यनेन अधिकं कुर्वन्तु। नियन्त्रणबटनं वदति अथवा उपकरणपट्टिका इत्यादीनां अधिकघटकानाम् कृते बटनसमूहान् रचयति ।

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

Firefox पृष्ठभारयोः मध्ये रूपनियन्त्रणस्थितयः (अक्षमता तथा जाँचः) स्थास्यति . अस्य कृते एकः कार्यपरिहारः अस्ति यत् autocomplete="off". देखें मोजिला बग # 654072 .

राज्यपूर्णः

data-loading-text="Loading..."बटन् उपरि लोडिंग् स्टेट् इत्यस्य उपयोगाय योजयन्तु ।

एतत् विशेषता v3.3.5 तः अप्रचलितम् अस्ति तथा च v4 मध्ये निष्कासितम् अस्ति ।

यत् राज्यं रोचते तस्य प्रयोगं कुर्वन्तु!

अस्य प्रदर्शनस्य कृते वयं and इत्यस्य उपयोगं कुर्मः 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"विशेषणं च buttonyourself इत्यत्र योजयितव्यम् ।

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

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

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

पूर्वचयनितविकल्पानां आवश्यकता अस्ति`.active`

पूर्वचयनितविकल्पानां कृते, भवन्तः स्वयमेव .activeinput's मध्ये वर्गं योजयितुं labelशक्नुवन्ति ।

दृश्यपरीक्षाकृता अवस्था केवलं क्लिक् कृत्वा अद्यतनं भवति

यदि चेकबॉक्स बटनस्य चेक् कृता स्थितिः बटन् clickउपरि घटनां प्रहारं विना अद्यतनं भवति (उदा . इनपुट् <input type="reset">इत्यस्य गुणं सेट् कृत्वा माध्यमेन वा माध्यमेन वा checked), तर्हि भवन्तः स्वयमेव .activeइनपुट् इत्यस्य वर्गं टॉगल कर्तुं प्रवृत्ताः भविष्यन्तिlabel

चेकबॉक्स 1 (पूर्व-परीक्षित) . चेकबॉक्स 2 चेकबॉक्स 3

<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 कृते transitions प्लगिन् भवतः Bootstrap संस्करणे समाविष्टं कर्तुं आवश्यकम् अस्ति ।

उदाहरण

वर्गपरिवर्तनद्वारा अन्यं तत्त्वं दर्शयितुं गोपयितुं च अधोलिखितानि बटन्स् नुदन्तु:

.collapseसामग्रीं गोपयति
.collapsingसंक्रमणकाले प्रयुक्तः भवति
.collapse.inसामग्रीं दर्शयति

hrefभवान् विशेषतायुक्तं लिङ्क्, अथवा विशेषतायुक्तं बटन् उपयोक्तुं शक्नोति data-target। उभयत्र data-toggle="collapse"अपेक्षितम् इति ।

href इत्यनेन सह लिङ्क्

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>

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

फलकघटकेन सह अकॉर्डियनं निर्मातुं पूर्वनिर्धारितं संकुचनव्यवहारं विस्तारयन्तु ।

संकुचित समूह मद # 1

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

संकुचित समूह मद # 2

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

संकुचित समूह मद # 3

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

<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 इत्यनेन सह स्वैप् आउट् कर्तुं अपि शक्यते .list-group।

संकुचनीय सूची समूह

बूटप्लाई
एकं इत्मुस् ac facilin
द्वितीय एरोस

पादलेखः

expand/collapse नियन्त्रणानि सुलभानि कुर्वन्तु

aria-expandedनियन्त्रणतत्त्वे अवश्यं योजयन्तु । एतत् विशेषता स्क्रीन रीडर् तथा तत्सदृशसहायकप्रौद्योगिकीनां कृते संकुचनीयतत्त्वस्य वर्तमानस्थितिं स्पष्टतया परिभाषयति । यदि संकुचनीयं तत्त्वं पूर्वनिर्धारितरूपेण निमीलितं भवति तर्हि तस्य मूल्यं भवितव्यम् aria-expanded="false"। inयदि भवान् वर्गस्य उपयोगेन पूर्वनिर्धारितरूपेण संकुचनीयं तत्त्वं उद्घाटयितुं सेट् aria-expanded="true"कृतवान् तर्हि तस्य स्थाने नियन्त्रणे सेट् कुर्वन्तु । प्लगिन् स्वयमेव एतत् विशेषतां टोग्ल् करिष्यति यत् संकुचनीयं तत्त्वं उद्घाटितं वा बन्दं वा कृतम् अस्ति वा न वा इति आधारेण ।

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

प्रयोगः

पतनप्लगिन् भारी उत्थापनं नियन्त्रयितुं कतिपयान् वर्गान् उपयुज्यते:

.collapseसामग्रीं गोपयति
.collapse.inसामग्रीं दर्शयति
.collapsingसंक्रमणस्य आरम्भे योजितः भवति, समाप्तौ च निष्कासितः भवति

एते वर्गाः component-animations.less.

डेटा विशेषताओं के माध्यम से

केवलं संकुचनीयस्य तत्त्वस्य नियन्त्रणं स्वयमेव नियुक्तुं एलिमेण्ट् मध्ये data-toggle="collapse"तथा a योजयन्तु । विशेषणं संकुचनं प्रयोक्तुं CSS चयनकर्तारं स्वीकुर्वति data-target। संकुचनीयतत्त्वे data-targetवर्गं अवश्यं योजयन्तु । collapseयदि भवान् इदं पूर्वनिर्धारितरूपेण उद्घाटितुम् इच्छति तर्हि अतिरिक्तवर्गं योजयन्तु in.

संकुचनीयनियन्त्रणे accordion-सदृशं समूहप्रबन्धनं योजयितुं, data attribute योजयन्तु data-parent="#selector"। एतत् कार्ये द्रष्टुं डेमो पश्यन्तु।

जावास्क्रिप्ट् मार्गेण

सह मैन्युअल् रूपेण सक्षमं कुर्वन्तु:

$('.collapse').collapse()

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-parent=""।

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
माता पिता	चयनकर्ता	असत्य	यदि चयनकर्ता प्रदत्तः अस्ति, तर्हि निर्दिष्टस्य मातापितृणां अधः सर्वे संकुचनीयाः तत्त्वानि बन्दं भविष्यन्ति यदा एतत् संकुचनीयं द्रव्यं दर्शितं भवति । (पारम्परिक-अकॉर्डियन-व्यवहारस्य सदृशम् - एतत् वर्गाश्रितम् अस्ति `panel`)
toggle इति	बूलियन इति	सत्यम्‌	आह्वानसमये संकुचनीयं तत्त्वं टॉगलं करोति

विधियाँ

`.collapse(options)`

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

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

`.collapse('toggle')`

एकं संकुचनीयं तत्त्वं दर्शितं वा गुप्तं वा प्रति टॉगलं करोति । संकुचनीयतत्त्वस्य वास्तविकरूपेण दर्शितस्य वा गोपनस्य वा पूर्वं (अर्थात् shown.bs.collapseor hidden.bs.collapseघटनायाः भवितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति ।

`.collapse('show')`

संकुचनीयं तत्त्वं दर्शयति । संकुचनीयतत्त्वस्य वास्तविकरूपेण दर्शितस्य पूर्वं (अर्थात् shown.bs.collapseघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति ।

`.collapse('hide')`

संकुचनीयं तत्त्वं गोपयति । संकुचनीयतत्त्वस्य वास्तविकरूपेण गोपनात् पूर्वं (अर्थात् hidden.bs.collapseघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति ।

घटनाः

Bootstrap इत्यस्य collapse वर्गः collapse कार्यक्षमतायाः हुक् करणाय कतिपयानि घटनानि उजागरयति ।

घटना प्रकार	वर्णनम्‌
show.bs.collapse इति दर्शयतु	एषा घटना तत्क्षणमेव प्रज्वलति यदा `show`दृष्टान्तविधिः आह्वयते ।
दर्शितम्.bs.collapse इति	इदं घटना तदा प्रज्वलितं भवति यदा उपयोक्त्रे दृश्यमानं संकुचनतत्त्वं कृतम् अस्ति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) ।
hide.bs.collapse इति	`hide`विधि आहूते सद्यः एषा घटना प्रज्वलिता भवति ।
hidden.bs.collapse इति	एषा घटना तदा प्रज्वलितः भवति यदा उपयोक्त्रेण संक्षेपतत्त्वं निगूढं भवति (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>

सुलभता मुद्दा

हिंडोलाघटकः सामान्यतया सुलभतामानकानां अनुरूपः नास्ति । यदि भवन्तः अनुपालनस्य आवश्यकतां अनुभवन्ति तर्हि कृपया स्वस्य सामग्रीं प्रस्तुत्य अन्यविकल्पान् विचारयन्तु ।

Internet Explorer 8 & 9 इत्यस्मिन् संक्रमण-एनिमेशनं समर्थितम् नास्ति

बूटस्ट्रैप् केवलं स्वस्य एनिमेशन्स् कृते CSS3 इत्यस्य उपयोगं करोति, परन्तु Internet Explorer 8 & 9 आवश्यकानि CSS गुणाः समर्थयन्ति न । एवं एतेषां ब्राउजर्-प्रयोगे स्लाइड्-ट्रांजिशन-एनिमेषन् न भवन्ति । संक्रमणानां कृते jQuery-आधारितं fallbacks न समाविष्टं कर्तुं वयं इच्छया निर्णयं कृतवन्तः ।

प्रारम्भिक सक्रिय तत्व आवश्यक है

एकस्मिन् स्लाइड् मध्ये .activeवर्गं योजयितुं आवश्यकम् अस्ति । अन्यथा हिंडोला न दृश्यते ।

ग्लिफिकॉन् चिह्नानि आवश्यकानि न सन्ति

नियन्त्रणानां कृते .glyphicon .glyphicon-chevron-leftand .glyphicon .glyphicon-chevron-rightवर्गाणां आवश्यकता नास्ति इति अनिवार्यम् । बूटस्ट्रैप् प्रदाति .icon-prevतथा .icon-nextसाधारण यूनिकोड विकल्प के रूप में।

वैकल्पिक कैप्शन

.carousel-captionकस्यचित् अन्तः तत्त्वेन सह सहजतया स्वस्य स्लाइड् मध्ये कैप्शन् योजयन्तु .item. तत्र अन्तः प्रायः किमपि वैकल्पिकं HTML स्थापयन्तु ततः स्वयमेव संरेखितं प्रारूपितं च भविष्यति ।

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

प्रयोगः

अनेक हिंडोला

हिंडोलाः सम्यक् कार्यं कर्तुं हिंडोलानियन्त्रणानां कृते बाह्यतमपात्रे id(the ) इत्यस्य उपयोगस्य आवश्यकता भवति । .carouselबहुविधं हिंडोला योजयति समये, अथवा हिंडोला परिवर्तयति समये id, प्रासंगिकनियन्त्रणानि अवश्यमेव अद्यतनं कुर्वन्तु ।

डेटा विशेषताओं के माध्यम से

हिंडोलायाः स्थितिं सुलभतया नियन्त्रयितुं data attributes इत्यस्य उपयोगं कुर्वन्तु । data-slideकीवर्ड prevअथवा next, को स्वीकार करता है, जो इसकी वर्तमान स्थिति के सापेक्ष स्लाइड स्थिति को परिवर्तित करता है। वैकल्पिकरूपेण, data-slide-toकच्चा स्लाइड अनुक्रमणिका हिंडोला - मध्ये पारयितुं उपयुज्यताम् data-slide-to="2", यत् स्लाइड् स्थानं , इत्यनेन आरभ्यते विशेषसूचकाङ्कं प्रति स्थानान्तरयति 0।

data-ride="carousel"पृष्ठभारात् आरभ्य हिंडोलाम् एनिमेट् इति चिह्नितुं विशेषणस्य उपयोगः भवति । एकस्यैव हिंडोलायाः (अनावश्यकं च अनावश्यकं च) स्पष्टजावास्क्रिप्ट् आरम्भीकरणेन सह संयोजनेन तस्य उपयोगः कर्तुं न शक्यते ।

जावास्क्रिप्ट् मार्गेण

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

$('.carousel').carousel()

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-interval=""।

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
अन्तरालम्	संख्या	५०००	स्वयमेव कस्यचित् वस्तुनः सायकलीकरणस्य मध्ये विलम्बस्य समयस्य परिमाणम् । यदि मिथ्या अस्ति तर्हि हिंडोला स्वयमेव चक्रं न करिष्यति।
विराम	तार \| लुप्तमूल्य	"मण्डप" इति ।	यदि सेट् भवति तर्हि `"hover"`हिंडोलाया: चक्रचालनं विरामयति `mouseenter`तथा च हिंडोलाया: चक्रचालनं पुनः आरभते `mouseleave`\| यदि , इति सेट् भवति `null`तर्हि हिंडोलायाम् उपरि भ्रमन् तत् विरामं न करिष्यति ।
उपवे	बूलियन इति	सत्यम्‌	किं हिंडोले निरन्तरं चक्रं कर्तव्यं वा कठिनविरामं वा भवेत्।
कीबोर्ड	बूलियन इति	सत्यम्‌	कीबोर्ड-घटनासु हिंडोला प्रतिक्रियां दातव्या वा इति।

विधियाँ

`.carousel(options)`

वैकल्पिकविकल्पैः सह हिंडोलाम् objectआरभते तथा च वस्तूनाम् माध्यमेन सायकलयानं आरभते।

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

`.carousel('cycle')`

वामतः दक्षिणत: हिंडोलावस्तूनाम् माध्यमेन चक्रं करोति।

`.carousel('pause')`

हिंडोला वस्तुओं के माध्यम से साइकिल चलाने से रोकता है।

`.carousel(number)`

हिंडोलाम् एकं विशेषं फ्रेम (0 आधारितं, सरणीसदृशम्) प्रति चक्रं करोति ।

`.carousel('prev')`

पूर्ववस्तुं प्रति चक्रं करोति।

`.carousel('next')`

अग्रिम मदं प्रति चक्रं करोति।

घटनाः

बूटस्ट्रैप् इत्यस्य हिंडोलावर्गः हिंडोलाकार्यक्षमतायां हुकिंग् कर्तुं द्वौ घटनाद्वयं प्रकाशयति ।

उभयोः घटनायोः निम्नलिखित अतिरिक्तगुणाः सन्ति ।

direction: हिंडोला यस्मिन् दिशि स्खलति (वा "left"वा "right") ।
relatedTarget: सक्रियवस्तुरूपेण स्थाने स्खलितं भवति यत् DOM तत्त्वं ।

सर्वाणि हिंडोलाघटनानि हिंडोलायां एव (अर्थात् <div class="carousel">) प्रज्वलितानि भवन्ति ।

घटना प्रकार	वर्णनम्‌
slide.bs.हिंडोला	एषा घटना तत्क्षणमेव प्रज्वलति यदा `slide`दृष्टान्तविधिः आह्वयते ।
slid.bs.हिंडोला	इदं घटना तदा प्रज्वलितं भवति यदा हिंडोला स्वस्य स्लाइड् संक्रमणं सम्पन्नं करोति ।

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

उदाहरण

affix प्लगिन् position: fixed;चालू अवरुद्धं च भवति, इत्यनेन सह प्राप्तस्य प्रभावस्य अनुकरणं करोति position: sticky;। दक्षिणभागे उपसञ्चारः प्रत्ययप्लगिन् इत्यस्य लाइव् डेमो अस्ति ।

प्रयोगः

data attributes मार्गेण अथवा स्वस्य JavaScript इत्यनेन सह मैन्युअल् रूपेण affix plugin इत्यस्य उपयोगं कुर्वन्तु । उभयत्र भवद्भिः स्वस्य संलग्नसामग्रीस्थापनस्य विस्तारस्य च कृते CSS अवश्यं प्रदातव्यम् ।

नोट्: Safari rendering bug इत्यस्य कारणात् तुल्यकालिकरूपेण स्थिते तत्त्वे, यथा pulled अथवा pushed इति स्तम्भे, समाविष्टे तत्त्वे affix plugin इत्यस्य उपयोगं न कुर्वन्तु

CSS मार्गेण स्थितिकरणम्

प्रत्ययप्लगिन् त्रयाणां वर्गानां मध्ये टॉगलं करोति, प्रत्येकं विशेषस्थितिं प्रतिनिधियति: .affix, .affix-top, तथा च .affix-bottom। position: fixed;भवद्भिः शैल्याः, on अपवादरूपेण .affix, एतेषां वर्गानां कृते स्वयमेव (अस्मात् प्लगिन्-तः स्वतन्त्रः) वास्तविकस्थानानि नियन्त्रयितुं प्रदातव्यानि ।

अत्र affix plugin कथं कार्यं करोति इति दर्शितम् अस्ति ।

आरम्भार्थं प्लगिन् .affix-topतत्त्वस्य शीर्ष-अत्यन्तस्थाने अस्ति इति सूचयितुं योजयति । अस्मिन् क्षणे CSS-स्थापनस्य आवश्यकता नास्ति ।
भवन्तः संलग्नं कर्तुम् इच्छन्ति तत् तत्त्वम् अतीत्य स्क्रॉल करणेन वास्तविकं संलग्नीकरणं प्रेरयितव्यम् । अत्रैव .affixप्रतिस्थापयति .affix-topसेट् च करोति position: fixed;(Bootstrap इत्यस्य CSS द्वारा प्रदत्तम्) ।
यदि अधः आफ्सेट् परिभाषितं भवति तर्हि तस्य स्थाने स्क्रॉल कृत्वा तस्य स्थाने .affixस्थापयितव्यम् .affix-bottom। यतः offsets वैकल्पिकाः सन्ति, एकं सेट् कृत्वा भवन्तः समुचितं CSS सेट् कर्तुं आवश्यकम् अस्ति । एवं सति position: absolute;आवश्यके सति योजयन्तु । ततः तत्त्वं कुत्र स्थापयितव्यम् इति निर्धारयितुं प्लगिन् data attribute अथवा JavaScript विकल्पस्य उपयोगं करोति ।

अधोलिखितानां उपयोगविकल्पानां मध्ये एकस्य अपि कृते स्वस्य CSS सेट् कर्तुं उपर्युक्तानि पदानि अनुसृत्य कार्यं कुर्वन्तु ।

डेटा विशेषताओं के माध्यम से

कस्मिन् अपि तत्त्वे सहजतया affix व्यवहारं योजयितुं, केवलं data-spy="affix"यस्मिन् तत्त्वे भवन्तः गुप्तचरं कर्तुम् इच्छन्ति तस्मिन् तत्त्वे योजयन्तु । कदा कस्यचित् तत्त्वस्य पिनिंग् टॉग्ल् करणीयम् इति परिभाषितुं offsets इत्यस्य उपयोगं कुर्वन्तु ।

<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 attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-offset-top="200"।

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
offset इति	संख्या \| कार्य \| वस्तु	१०	स्क्रॉलस्य स्थितिं गणयन्ते सति स्क्रीनतः ऑफसेट् कर्तुं पिक्सेलः। यदि एकः सङ्ख्या प्रदत्ता अस्ति तर्हि उपरि अधः च दिशि अपि आफ्सेट् प्रयुक्तं भविष्यति । एकं अद्वितीयं, अधः उपरि च offset प्रदातुं केवलं एकं वस्तु `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')

घटनाः

Bootstrap इत्यस्य affix प्लगिन् affix कार्यक्षमतायां हुक् करणाय कतिपयानि घटनानि उजागरयति ।

घटना प्रकार	वर्णनम्‌
affix.bs.affix इति	एषा घटना तत्वस्य संलग्नतायाः पूर्वमेव अग्निः प्रज्वलति ।
affixed.bs.affix इति	तत्त्वस्य संलग्नीकरणानन्तरं एषा घटना प्रज्वलिता भवति ।
affix-top.bs.affix इति	एषा घटना तत्क्षणं तत्त्वस्य affixed-top भवितुं पूर्वं अग्निम् अङ्गीकुर्वति।
affixed-top.bs.affix इति	एतत् घटना तत्त्वस्य affixed-top कृते अनन्तरं प्रज्वलितं भवति ।
प्रत्यय-अधः.bs.affix	एषा घटना तत्क्षणं तत्त्वस्य संलग्न-अधः भवितुं पूर्वमेव अग्निम् अङ्गीकुर्वति।
अनुक्त-तल.ब्स्.प्रत्ययः	तत्त्वस्य संलग्न-तलस्य अनन्तरं एषा घटना प्रज्वलिता भवति ।

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

अवलोकनम्

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

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

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

दत्तांशगुणाः

data attributes मार्गेण प्रति एलिमेण्ट् केवलं एकं प्लगिन्

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

पूर्वनिर्धारित सेटिंग्स्

न विग्रहः

घटनाः

संस्करण संख्याएँ

जावास्क्रिप्ट् अक्षमीकरणे विशेषः फॉलबैक् नास्ति

तृतीयपक्षीयपुस्तकालयाः

संक्रमणाः transition.js

संक्रमणानां विषये

अन्तः किम् अस्ति

संक्रमणानि अक्षमीकरणम्

मोडल modal.js

अनेकाः मुक्ताः मोडाल्स् समर्थिताः न सन्ति

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

मोबाईल उपकरण चेतावनी

उदाहरणानि

स्थिर उदाहरण

लाइव डेमो

मोडल सुलभ बनाएँ

यूट्यूब विडियो एम्बेड करना

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

एनिमेशन को हटा दें

जालप्रणाल्याः उपयोगेन

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

प्रयोगः

डेटा विशेषताओं के माध्यम से

जावास्क्रिप्ट् मार्गेण

विकल्पाः

विधियाँ

.modal(options)

.modal('toggle')

.modal('show')

.modal('hide')

.modal('handleUpdate')

घटनाः

ड्रॉपडाउन्स dropdown.js

उदाहरणानि

एक नवबार के अन्दर

गोल्यः अन्तः

प्रयोगः

डेटा विशेषताओं के माध्यम से

जावास्क्रिप्ट् मार्गेण

data-toggle="dropdown"अद्यापि आवश्यकम्

विकल्पाः

विधियाँ

$().dropdown('toggle')

घटनाः

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

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

@स्थूलः

@मडो

एकम्‌

द्वि

three

प्रयोगः

Bootstrap nav इत्यस्य आवश्यकता अस्ति

समाधानयोग्य आईडी लक्ष्य आवश्यक है

अ- :visibleलक्ष्य तत्वों को उपेक्षित किया गया

सापेक्षिक स्थितिकरणस्य आवश्यकता भवति

डेटा विशेषताओं के माध्यम से

जावास्क्रिप्ट् मार्गेण

विधियाँ

.scrollspy('refresh')

विकल्पाः

घटनाः

टॉगल करने योग्य ट्याब्स tab.js

उदाहरण ट्याब्स्

ट्याब्ड् नेविगेशनं विस्तारयति

प्रयोगः

मार्कअप

फीका प्रभाव

विधियाँ

$().tab

`.modal(options)`

`.modal('toggle')`

`.modal('show')`

`.modal('hide')`

`.modal('handleUpdate')`

`data-toggle="dropdown"`अद्यापि आवश्यकम्

`$().dropdown('toggle')`

अ- `:visible`लक्ष्य तत्वों को उपेक्षित किया गया

`.scrollspy('refresh')`

`$().tab`

`.tab('show')`

`$().tooltip(options)`

`.tooltip('show')`

`.tooltip('hide')`

`.tooltip('toggle')`

`.tooltip('destroy')`

`$().popover(options)`

`.popover('show')`

`.popover('hide')`

`.popover('toggle')`

`.popover('destroy')`

`$().alert()`

`$().alert('close')`