आढावा

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

प्लगइन वैयक्तिकरित्या समाविष्ट केले जाऊ शकतात (बूटस्ट्रॅपच्या वैयक्तिक *.jsफाइल्स वापरून), किंवा सर्व एकाच वेळी (वापरून bootstrap.jsकिंवा मिनिफाइड bootstrap.min.js).

संकलित JavaScript वापरणे

दोन्ही bootstrap.jsआणि bootstrap.min.jsएकाच फाईलमध्ये सर्व प्लगइन असतात. फक्त एक समाविष्ट करा.

प्लगइन अवलंबित्व

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

डेटा विशेषता

तुम्ही JavaScript ची एक ओळ न लिहिता मार्कअप API द्वारे सर्व बूटस्ट्रॅप प्लगइन पूर्णपणे वापरू शकता. हे बूटस्ट्रॅपचे प्रथम श्रेणी API आहे आणि प्लगइन वापरताना तुमचा प्रथम विचार केला पाहिजे.

ते म्हणाले, काही परिस्थितींमध्ये ही कार्यक्षमता बंद करणे इष्ट असू शकते. म्हणून, आम्ही सोबत असलेल्या दस्तऐवजाच्या नेमस्पेसवरील सर्व इव्हेंट्स अनबाइंड करून डेटा विशेषता API अक्षम करण्याची क्षमता देखील प्रदान करतो data-api. हे असे दिसते:

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

वैकल्पिकरित्या, विशिष्ट प्लगइनला लक्ष्य करण्यासाठी, फक्त प्लगइनचे नाव नेमस्पेस म्हणून डेटा-एपीआय नेमस्पेससह समाविष्ट करा:

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

डेटा विशेषतांद्वारे प्रति घटक फक्त एक प्लगइन

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

प्रोग्रामॅटिक API

आम्हाला विश्वास आहे की तुम्ही JavaScript API द्वारे सर्व बूटस्ट्रॅप प्लगइन पूर्णपणे वापरण्यास सक्षम असाल. सर्व सार्वजनिक 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

संघर्ष नाही

कधीकधी इतर UI फ्रेमवर्कसह बूटस्ट्रॅप प्लगइन वापरणे आवश्यक असते. या परिस्थितीत, नेमस्पेसची टक्कर अधूनमधून होऊ शकते. असे झाल्यास, तुम्ही .noConflictज्या प्लगइनचे मूल्य परत करू इच्छिता त्यावर कॉल करू शकता.

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

कार्यक्रम

बूटस्ट्रॅप बहुतेक प्लगइनच्या अद्वितीय क्रियांसाठी सानुकूल इव्हेंट प्रदान करते. सामान्यतः, हे अनंत आणि भूतकाळातील कृदंत स्वरूपात येतात - जिथे अनंत (उदा. show) एखाद्या घटनेच्या प्रारंभी shownट्रिगर केले जाते आणि कृती पूर्ण झाल्यावर त्याचे भूतकाळातील कृदंत स्वरूप (उदा.) ट्रिगर केले जाते.

3.0.0 पर्यंत, सर्व बूटस्ट्रॅप इव्हेंट नेमस्पेस आहेत.

सर्व अनंत घटना preventDefaultकार्यक्षमता प्रदान करतात. हे कृती सुरू होण्यापूर्वी त्याची अंमलबजावणी थांबविण्याची क्षमता प्रदान करते.

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

आवृत्ती क्रमांक

VERSIONप्रत्येक बूटस्ट्रॅपच्या jQuery प्लगइनची आवृत्ती प्लगइनच्या कन्स्ट्रक्टरच्या मालमत्तेद्वारे ऍक्सेस केली जाऊ शकते . उदाहरणार्थ, टूलटिप प्लगइनसाठी:

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

JavaScript अक्षम असताना कोणतेही विशेष फॉलबॅक नाहीत

जेव्हा JavaScript अक्षम असते तेव्हा बूटस्ट्रॅपचे प्लगइन विशेषतः सुंदरपणे मागे पडत नाहीत. तुम्हाला या प्रकरणात वापरकर्त्याच्या अनुभवाची काळजी असल्यास, तुमच्या वापरकर्त्यांना <noscript>परिस्थिती (आणि JavaScript पुन्हा सक्षम कसे करावे) समजावून सांगण्यासाठी आणि/किंवा तुमचे स्वतःचे सानुकूल फॉलबॅक जोडा.

तृतीय-पक्ष लायब्ररी

बूटस्ट्रॅप प्रोटोटाइप किंवा jQuery UI सारख्या तृतीय-पक्ष JavaScript लायब्ररींना अधिकृतपणे समर्थन देत नाही . इव्हेंट आणि नेमस्पेस असूनही .noConflict, सुसंगतता समस्या असू शकतात ज्यांचे निराकरण तुम्हाला स्वतः करावे लागेल.

संक्रमण transition.js

संक्रमणांबद्दल

साध्या संक्रमण प्रभावांसाठी, transition.jsइतर JS फायलींसोबत एकदा समाविष्ट करा. जर तुम्ही संकलित (किंवा मिनिफाइड) वापरत असाल तर bootstrap.js, हे समाविष्ट करण्याची गरज नाही—ते आधीपासून आहे.

आत काय आहे

Transition.js हा transitionEndकार्यक्रमांसाठी मूलभूत मदतनीस तसेच CSS संक्रमण एमुलेटर आहे. CSS संक्रमण समर्थन तपासण्यासाठी आणि हँगिंग संक्रमणे पकडण्यासाठी इतर प्लगइनद्वारे याचा वापर केला जातो.

संक्रमणे अक्षम करत आहे

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

$.support.transition = false

मॉडेल्स modal.js

मॉडेल्स सुव्यवस्थित, परंतु लवचिक, किमान आवश्यक कार्यक्षमतेसह आणि स्मार्ट डीफॉल्टसह संवाद प्रॉम्प्ट करतात.

एकाधिक खुले मॉडेल समर्थित नाहीत

एखादे मॉडेल अजून दृश्यमान असताना उघडू नये याची खात्री करा. एका वेळी एकापेक्षा जास्त मॉडेल दाखवण्यासाठी सानुकूल कोड आवश्यक आहे.

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

मॉडेलचे स्वरूप आणि/किंवा कार्यक्षमतेवर परिणाम करणारे इतर घटक टाळण्यासाठी आपल्या दस्तऐवजात नेहमी मॉडेलचा HTML कोड उच्च-स्तरीय स्थानावर ठेवण्याचा प्रयत्न करा.

मोबाइल डिव्हाइस चेतावणी

मोबाईल डिव्हाइसेसवर मॉडेल्स वापरण्याबाबत काही चेतावणी आहेत. तपशीलांसाठी आमचे ब्राउझर समर्थन दस्तऐवज पहा.

HTML5 त्याचे शब्दार्थ कसे परिभाषित करते त्यामुळे, autofocusबूटस्ट्रॅप मॉडेल्समध्ये HTML विशेषताचा कोणताही प्रभाव पडत नाही. समान प्रभाव प्राप्त करण्यासाठी, काही सानुकूल JavaScript वापरा:

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

थेट डेमो

खालील बटणावर क्लिक करून JavaScript द्वारे मॉडेल टॉगल करा. ते खाली सरकले जाईल आणि पृष्ठाच्या शीर्षस्थानी फिकट होईल.

<!-- 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="...".modalrole="document".modal-dialog

aria-describedbyयाव्यतिरिक्त, तुम्ही वर सह तुमच्या मोडल संवादाचे वर्णन देऊ शकता .modal.

YouTube व्हिडिओ एम्बेड करत आहे

मोडल्समध्ये YouTube व्हिडिओ एम्बेड करण्यासाठी आपोआप प्लेबॅक आणि बरेच काही थांबवण्यासाठी बूटस्ट्रॅपमध्ये नसलेली अतिरिक्त JavaScript आवश्यक आहे. अधिक माहितीसाठी हे उपयुक्त स्टॅक ओव्हरफ्लो पोस्ट पहा .

पर्यायी आकार

मॉडेल्सचे दोन पर्यायी आकार आहेत, जे मॉडिफायर क्लासेसद्वारे उपलब्ध आहेत .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करा .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 -->

थोड्या वेगळ्या सामग्रीसह, सर्व समान मॉडेल ट्रिगर करणार्‍या बटणांचा समूह आहे? कोणत्या बटणावर क्लिक केले आहे त्यानुसार मॉडेलमधील सामग्री बदलण्यासाठी HTML विशेषता (शक्यतो jQuery द्वारेevent.relatedTarget ) वापरा . वरील तपशीलांसाठी मॉडेल इव्हेंट डॉक्स पहा ,data-*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)
})

वापर

मॉडेल प्लगइन डेटा विशेषता किंवा JavaScript द्वारे मागणीनुसार तुमची लपवलेली सामग्री टॉगल करते. हे डिफॉल्ट स्क्रोलिंग वर्तन ओव्हरराइड .modal-openकरण्यासाठी जोडते आणि मॉडेलच्या बाहेर क्लिक करताना दर्शविलेले मॉडेल डिसमिस करण्यासाठी क्लिक क्षेत्र प्रदान करते.<body>.modal-backdrop

डेटा विशेषतांद्वारे

JavaScript न लिहिता एक मॉडेल सक्रिय करा. कंट्रोलर घटकावर सेट करा data-toggle="modal", जसे की बटणासह, टॉगल करण्यासाठी data-target="#foo"किंवा href="#foo"विशिष्ट मॉडेल लक्ष्य करण्यासाठी.

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

JavaScript द्वारे

myModalJavaScript च्या एका ओळीसह id सह मॉडेल कॉल करा :

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

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-backdrop="".

नाव प्रकार डीफॉल्ट वर्णन
पार्श्वभूमी बुलियन किंवा स्ट्रिंग'static' खरे मॉडेल-बॅकड्रॉप घटक समाविष्ट करते. वैकल्पिकरित्या, staticएका पार्श्वभूमीसाठी निर्दिष्ट करा जे क्लिकवर मॉडेल बंद करत नाही.
कीबोर्ड बुलियन खरे एस्केप की दाबल्यावर मॉडेल बंद करते
दाखवा बुलियन खरे आरंभ केल्यावर मॉडेल दाखवते.
दूरस्थ मार्ग खोटे

हा पर्याय v3.3.0 पासून नापसंत आहे आणि v4 मध्ये काढला गेला आहे. आम्ही त्याऐवजी क्लायंट-साइड टेम्प्लेटिंग किंवा डेटा बाइंडिंग फ्रेमवर्क वापरण्याची किंवा jQuery.load स्वतःला कॉल करण्याची शिफारस करतो.

रिमोट URL प्रदान केल्यास, सामग्री 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.bs.modal showजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो . क्लिकमुळे झाले असल्यास, क्लिक केलेला घटक relatedTargetइव्हेंटची मालमत्ता म्हणून उपलब्ध असतो.
दाखवले आहे.bs.modal जेव्हा मॉडेल वापरकर्त्यासाठी दृश्यमान केले जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). क्लिकमुळे झाले असल्यास, क्लिक केलेला घटक relatedTargetइव्हेंटची मालमत्ता म्हणून उपलब्ध असतो.
hide.bs.modal hideजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच काढला जातो .
hidden.bs.modal जेव्हा मॉडेल वापरकर्त्यापासून लपविले जाणे पूर्ण केले जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
loaded.bs.modal remoteजेव्हा मॉडेलने पर्याय वापरून सामग्री लोड केली तेव्हा हा कार्यक्रम काढला जातो .
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

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

नॅव्हबार, टॅब आणि गोळ्यांसह या साध्या प्लगइनसह जवळजवळ कोणत्याही गोष्टीमध्ये ड्रॉपडाउन मेनू जोडा.

नवबाराच्या आत

गोळ्या आत

.openडेटा विशेषता किंवा 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>

JavaScript द्वारे

JavaScript द्वारे ड्रॉपडाउन कॉल करा:

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

data-toggle="dropdown"अजूनही आवश्यक आहे

तुम्ही तुमच्या ड्रॉपडाउनला JavaScript द्वारे कॉल करत असलात किंवा त्याऐवजी डेटा-एपीआय वापरत असलात तरीही, data-toggle="dropdown"ड्रॉपडाउनच्या ट्रिगर घटकावर नेहमीच उपस्थित असणे आवश्यक आहे.

काहीही नाही

दिलेल्या नॅव्हबार किंवा टॅब केलेल्या नेव्हिगेशनचा ड्रॉपडाउन मेनू टॉगल करते.

सर्व ड्रॉपडाउन इव्हेंट्सच्या .dropdown-menuमूळ घटकावर फायर केले जातात.

सर्व ड्रॉपडाउन इव्हेंटमध्ये relatedTargetगुणधर्म असतात, ज्याचे मूल्य टॉगलिंग अँकर घटक असते.

कार्यक्रमाचा प्रकार वर्णन
show.bs.ड्रॉपडाउन जेव्हा शो उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो.
दाखवले.bs.ड्रॉपडाउन जेव्हा ड्रॉपडाउन वापरकर्त्यासाठी दृश्यमान केले जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
hide.bs.ड्रॉपडाउन जेव्हा लपवा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच काढला जातो.
hidden.bs.dropdown जेव्हा ड्रॉपडाउन वापरकर्त्यापासून लपविले जाणे पूर्ण केले जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

नवबारमधील उदाहरण

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

@फॅट

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ते विकले जाण्यापूर्वी. Tumblr फार्म-टू-टेबल सायकल अधिकार काहीही असो. Anim keffiyeh carles cardigan. Velit seitan mcsweeney चे फोटो बूथ 3 wolf moon irure. Cosby sweater lomo jean shorts, Williamsburg hoodie minim qui तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल आणि कार्डिगन ट्रस्ट फंड कल्पा बायोडिझेल वेस एंडरसन सौंदर्यशास्त्र. निहिल टॅटू अक्यूसमस, क्रेड आयरनी बायोडिझेल केफीयेह कारागीर उल्लामको परिणाम.

@mdo

वेनिअम मारफा मिश्या स्केटबोर्ड, अॅडिपिसिसिंग फ्यूगिएट वेलीट पिचफोर्क दाढी. फ्रीगन दाढी अलिक्वा कपिडॅटॅट मॅकस्वीनीचा वेरो. क्युपिडाट चार लोको निसी, ईए हेल्वेटिका नुल्ला कार्ल्स. टॅटू कॉस्बी स्वेटर फूड ट्रक, mcsweeney's quis non freegan vinyl. लो-फाय वेस अँडरसन +1 सारटोरियल. कार्लेस नॉन एस्थेटिक एक्सरसिटेशन quis gentrify. ब्रुकलिन अॅडिपिसिसिंग क्राफ्ट बिअर व्हाइस कीटार डेझरंट.

एक

Occaecat commodo aliqua delectus. फॅप क्राफ्ट बिअर डेझरंट स्केटबोर्ड ईए. लोमो सायकल राइट्स अॅडिपिसिसिंग बॅन मी, वेलीट ईए सन नेक्स्ट लेव्हल लोकाव्होर सिंगल-ओरिजिन कॉफी इन मॅग्ना व्हेनिअम. हाय लाइफ आयडी विनाइल, इको पार्क कॉन्सेक्वॅट क्विस अलिक्विप बॅन मी पिचफोर्क. व्हेरो व्हीएचएस हे ऍडिपिसिसिंग आहे. DIY किमान मेसेंजर बॅग कनेक्ट करा. क्रेडिट एक्स इन, शाश्वत डिलेक्टस कॉन्सेक्टुर फॅनी पॅक आयफोन.

दोन

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 ब्लॉग, culpa मेसेंजर बॅग marfa जे काही delectus अन्न ट्रक. Sapiente synth id गृहीत धरा. Locavore sed helvetica cliche irony, thundercats तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल हूडी ग्लूटेन-फ्री lo-fi fap aliquip. टेरी रिचर्डसन प्रॉडेंट ब्रंच नेसियंट क्विस कॉस्बी स्वेटर पॅरियातूर केफियेह यूट हेल्वेटिका आर्टिसन हे विकले जाण्यापूर्वीच लेबर एलिट प्लेसॅट. कार्डिगन क्राफ्ट बिअर सीटन रेडीमेड वेलीट. व्हीएचएस चेंब्रे श्रमिक टेम्पर व्हेनिअम. अनिम मॉलिट मिनिम कमोडो उल्लाम्को गडगडाट.

वापर

बूटस्ट्रॅप एनएव्ही आवश्यक आहे

सक्रिय लिंक्सच्या योग्य हायलाइटिंगसाठी Scrollspy ला सध्या बूटस्ट्रॅप एनएव्ही घटक वापरणे आवश्यक आहे.

निराकरण करण्यायोग्य आयडी लक्ष्य आवश्यक आहे

नवबार लिंक्समध्ये निराकरण करण्यायोग्य आयडी लक्ष्य असणे आवश्यक आहे. उदाहरणार्थ, <a href="#home">home</a>DOM मधील एखाद्या गोष्टीशी संबंधित असणे आवश्यक आहे जसे की <div id="home"></div>.

:visibleलक्ष्य नसलेल्या घटकांकडे दुर्लक्ष केले

:visiblejQuery नुसार नसलेल्या लक्ष्य घटकांकडे दुर्लक्ष केले जाईल आणि त्यांच्याशी संबंधित एनएव्ही आयटम कधीही हायलाइट केले जाणार नाहीत.

सापेक्ष स्थिती आवश्यक आहे

अंमलबजावणीची पद्धत काहीही असो, scrollspy ला position: relative;तुम्ही ज्या घटकाची हेरगिरी करत आहात त्याचा वापर आवश्यक आहे. बहुतेक प्रकरणांमध्ये हे आहे <body>. व्यतिरिक्त इतर घटकांवर स्क्रोलस्पायिंग करताना , एक सेट आणि लागू <body>असल्याची खात्री करा .heightoverflow-y: scroll;

डेटा विशेषतांद्वारे

तुमच्या टॉपबार नेव्हिगेशनमध्ये सहजपणे स्क्रोलस्पाय वर्तन जोडण्यासाठी, data-spy="scroll"तुम्ही ज्या घटकावर टेहळणी करू इच्छिता त्यात जोडा (बहुधा हे असेल <body>). data-targetनंतर कोणत्याही बूटस्ट्रॅप घटकाच्या मूळ घटकाच्या ID किंवा वर्गासह विशेषता जोडा .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>

JavaScript द्वारे

तुमच्या CSS मध्ये जोडल्यानंतर position: relative;, JavaScript द्वारे scrollspy ला कॉल करा:

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

पद्धती

.scrollspy('refresh')

DOM मधील घटक जोडणे किंवा काढून टाकणे याच्या संयोगाने scrollspy वापरताना, तुम्हाला याप्रमाणे रीफ्रेश पद्धत कॉल करणे आवश्यक आहे:

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

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-offset="".

नाव प्रकार डीफॉल्ट वर्णन
ऑफसेट संख्या 10 स्क्रोलच्या स्थितीची गणना करताना वरून ऑफसेट करण्यासाठी पिक्सेल.

कार्यक्रम

कार्यक्रमाचा प्रकार वर्णन
activate.bs.scrollspy स्क्रोलस्पायने नवीन आयटम सक्रिय केल्यावर हा कार्यक्रम सुरू होतो.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

टॉगल करण्यायोग्य टॅब tab.js

उदाहरण टॅब

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

रॉ डेनिम तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल जीन शॉर्ट्स ऑस्टिन. Nesciunt tofu stumptown aliqua, retro synth master cleanse. मिश्या क्लिच टेम्पर, विलियम्सबर्ग कार्ल्स व्हेगन हेल्वेटिका. Reprehenderit butcher retro keffiyeh dreamcatcher synth. कॉस्बी स्वेटर ईयू बान्ह मी, क्वि इरुरे टेरी रिचर्डसन माजी स्क्विड. एलिक्विप प्लेसॅट सॅल्व्हिया सिलम आयफोन. Seitan aliquip quis cardigan American apparel, butcher 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.

टॅब केलेले नेव्हिगेशन वाढवते

हे प्लगइन टॅब करण्यायोग्य क्षेत्रे जोडण्यासाठी टॅब केलेले नेव्हिगेशन घटक वाढवते.

वापर

JavaScript द्वारे टॅब करण्यायोग्य टॅब सक्षम करा (प्रत्येक टॅब स्वतंत्रपणे सक्रिय करणे आवश्यक आहे):

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

मार्कअप

तुम्ही कोणतेही JavaScript न लिहिता टॅब किंवा पिल नेव्हिगेशन सक्रिय करू शकता फक्त एक घटक निर्दिष्ट करून data-toggle="tab"किंवा त्यावर. टॅबमध्ये आणि वर्ग data-toggle="pill"जोडल्याने बूटस्ट्रॅप टॅब स्टाइल लागू होईल, आणि वर्ग जोडल्यास पिल स्टाइलिंग लागू होईल .navnav-tabsulnavnav-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')

कार्यक्रम

नवीन टॅब दाखवताना, इव्हेंट खालील क्रमाने सुरू होतात:

  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इव्हेंट फायर केले जाणार नाहीत.

कार्यक्रमाचा प्रकार वर्णन
show.bs.tab हा कार्यक्रम टॅब शोवर सुरू होतो, परंतु नवीन टॅब दाखवण्यापूर्वी. सक्रिय टॅब आणि मागील सक्रिय टॅब (उपलब्ध असल्यास) अनुक्रमे वापरा event.targetआणि लक्ष्यित करा.event.relatedTarget
दाखवले.bs.tab टॅब दर्शविल्यानंतर हा कार्यक्रम टॅब शोवर सुरू होतो. सक्रिय टॅब आणि मागील सक्रिय टॅब (उपलब्ध असल्यास) अनुक्रमे वापरा 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
})

टूलटिप्स tooltip.js

जेसन फ्रेमने लिहिलेल्या उत्कृष्ट jQuery.tipsy प्लगइनद्वारे प्रेरित; टूलटिप्स ही एक अद्ययावत आवृत्ती आहे, जी प्रतिमांवर अवलंबून नाही, अॅनिमेशनसाठी CSS3 आणि स्थानिक शीर्षक संचयनासाठी डेटा-विशेषता वापरतात.

शून्य-लांबीच्या शीर्षकांसह टूलटिप्स कधीही प्रदर्शित केल्या जात नाहीत.

उदाहरणे

टूलटिप पाहण्यासाठी खालील लिंकवर फिरवा:

घट्ट पँट पुढील स्तरावर केफियेह तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल. फोटो बूथ दाढी कच्ची डेनिम लेटरप्रेस शाकाहारी मेसेंजर बॅग स्टंपटाउन. फार्म-टू-टेबल सीटन, मॅकस्वेनीच्या फिक्सी सस्टेनेबल क्विनोआ 8-बिट अमेरिकन अ‍ॅपेरलमध्ये टेरी रिचर्डसन विनाइल चेंब्रे आहे. दाढी स्टंपटाऊन, कार्डिगन्स बन मी लोमो थंडरकॅट्स. टोफू बायोडिझेल विलियम्सबर्ग मार्फा, चार लोको मॅकस्वीनी क्लीन्स व्हेगन चेंब्रे. एक खरोखर उपरोधिक कारागीर काहीही असो कीटार, सीनस्टर फार्म-टू-टेबल बँक्सी ऑस्टिन ट्विटर हँडल फ्रीगन क्रेड रॉ डेनिम सिंगल-ओरिजिन कॉफी व्हायरल.

स्थिर टूलटिप

चार पर्याय उपलब्ध आहेत: वर, उजवीकडे, तळाशी आणि डावीकडे संरेखित.

चार दिशा

<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()
})

वापर

टूलटिप प्लगइन मागणीनुसार सामग्री आणि मार्कअप तयार करते आणि डीफॉल्टनुसार त्यांच्या ट्रिगर घटकानंतर टूलटिप ठेवते.

JavaScript द्वारे टूलटिप ट्रिगर करा:

$('#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"विशेषता असलेल्या कोणत्याही अनियंत्रित घटकांमध्ये टूलटिप जोडल्या पाहिजेत.

अक्षम घटकांवरील टूलटिपसाठी रॅपर घटक आवश्यक आहेत

disabledएक किंवा घटकामध्ये टूलटिप जोडण्यासाठी .disabled, a च्या आत घटक ठेवा आणि त्याऐवजी <div>टूलटिप लागू करा .<div>

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-animation="".

नाव प्रकार डीफॉल्ट वर्णन
अॅनिमेशन बुलियन खरे टूलटिपवर CSS फेड संक्रमण लागू करा
कंटेनर स्ट्रिंग | खोटे खोटे

विशिष्ट घटकास टूलटिप जोडते. उदाहरण: container: 'body'. हा पर्याय विशेषतः उपयुक्त आहे कारण तो तुम्हाला दस्तऐवजाच्या प्रवाहात ट्रिगरिंग घटकाजवळ टूलटिप ठेवण्याची परवानगी देतो - जे विंडो रिसाइज दरम्यान टूलटिपला ट्रिगरिंग घटकापासून दूर जाण्यापासून प्रतिबंधित करेल.

विलंब संख्या | वस्तू 0

टूलटिप (ms) दर्शविण्यास आणि लपविण्यास विलंब - मॅन्युअल ट्रिगर प्रकारावर लागू होत नाही

जर नंबर दिला असेल तर, लपवा/शो या दोन्हीसाठी विलंब लागू केला जातो

ऑब्जेक्ट संरचना आहे:delay: { "show": 500, "hide": 100 }

html बुलियन खोटे टूलटिपमध्ये HTML घाला. असत्य असल्यास, textDOM मध्ये सामग्री घालण्यासाठी jQuery ची पद्धत वापरली जाईल. तुम्हाला XSS हल्ल्यांबद्दल काळजी वाटत असल्यास मजकूर वापरा.
प्लेसमेंट स्ट्रिंग | कार्य 'शीर्ष'

टूलटिप कसे ठेवावे - शीर्ष | तळाशी | डावीकडे | बरोबर | ऑटो
जेव्हा "स्वयं" निर्दिष्ट केले जाते, तेव्हा ते डायनॅमिकपणे टूलटिपला पुनर्स्थित करेल. उदाहरणार्थ, जर प्लेसमेंट "स्वयं डावीकडे" असेल, तर टूलटिप शक्य असेल तेव्हा डावीकडे प्रदर्शित होईल, अन्यथा उजवीकडे प्रदर्शित होईल.

जेव्हा एखादे फंक्शन स्थान निश्चित करण्यासाठी वापरले जाते, तेव्हा त्याला टूलटिप DOM नोडला त्याचा पहिला युक्तिवाद म्हणून आणि ट्रिगरिंग घटक DOM नोडला दुसरा म्हणून म्हटले जाते. thisसंदर्भ टूलटिप उदाहरणावर सेट केला आहे .

निवडकर्ता स्ट्रिंग खोटे निवडक प्रदान केल्यास, टूलटिप ऑब्जेक्ट्स निर्दिष्ट लक्ष्यांना सुपूर्द केले जातील. व्यवहारात, डायनॅमिक HTML सामग्री टूलटिप जोडण्यासाठी सक्षम करण्यासाठी याचा वापर केला जातो. हे आणि एक माहितीपूर्ण उदाहरण पहा .
टेम्पलेट स्ट्रिंग '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

टूलटिप तयार करताना वापरण्यासाठी बेस HTML.

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

.tooltip-arrowटूलटिपचा बाण होईल.

सर्वात बाहेरील आवरण घटकामध्ये .tooltipवर्ग असावा.

शीर्षक स्ट्रिंग | कार्य ''

titleविशेषता उपस्थित नसल्यास डीफॉल्ट शीर्षक मूल्य .

एखादे फंक्शन दिले असल्यास, ते thisटूलटिप संलग्न केलेल्या घटकास त्याच्या संदर्भासह कॉल केले जाईल.

ट्रिगर स्ट्रिंग 'फोकस फिरवा' टूलटिप कशी ट्रिगर केली जाते - क्लिक करा | फिरवा | फोकस | मॅन्युअल तुम्ही एकाधिक ट्रिगर्स पास करू शकता; त्यांना एका जागेसह वेगळे करा. manualइतर कोणत्याही ट्रिगरसह एकत्र केले जाऊ शकत नाही.
व्ह्यूपोर्ट स्ट्रिंग | ऑब्जेक्ट | कार्य { सिलेक्टर: 'बॉडी', पॅडिंग: 0 }

टूलटिप या घटकाच्या मर्यादेत ठेवते. उदाहरण: viewport: '#viewport'किंवा{ "selector": "#viewport", "padding": 0 }

एखादे फंक्शन दिले असल्यास, त्यास ट्रिगरिंग एलिमेंट DOM नोडचा एकमेव युक्तिवाद म्हणून कॉल केला जातो. thisसंदर्भ टूलटिप उदाहरणावर सेट केला आहे .

वैयक्तिक टूलटिपसाठी डेटा विशेषता

वर सांगितल्याप्रमाणे वैयक्तिक टूलटिपसाठी पर्याय डेटा विशेषतांच्या वापराद्वारे निर्दिष्ट केले जाऊ शकतात.

पद्धती

$().tooltip(options)

घटक संकलनासाठी टूलटिप हँडलर संलग्न करते.

.tooltip('show')

घटकाची टूलटिप प्रकट करते. टूलटिप प्रत्यक्षात दाखवण्यापूर्वी कॉलरकडे परत येते (म्हणजे shown.bs.tooltipइव्हेंट होण्यापूर्वी). हे टूलटिपचे "मॅन्युअल" ट्रिगरिंग मानले जाते. शून्य-लांबीच्या शीर्षकांसह टूलटिप्स कधीही प्रदर्शित केल्या जात नाहीत.

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

.tooltip('hide')

घटकाची टूलटिप लपवते. टूलटिप प्रत्यक्षात लपविण्याआधी कॉलरकडे परत येते (म्हणजे hidden.bs.tooltipघटना घडण्यापूर्वी). हे टूलटिपचे "मॅन्युअल" ट्रिगरिंग मानले जाते.

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

.tooltip('toggle')

घटकाची टूलटिप टॉगल करते. टूलटिप प्रत्यक्षात दाखविण्याआधी किंवा लपविण्याआधी कॉलरकडे परत येते (म्हणजे shown.bs.tooltipकिंवा hidden.bs.tooltipघटना घडण्यापूर्वी). हे टूलटिपचे "मॅन्युअल" ट्रिगरिंग मानले जाते.

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

.tooltip('destroy')

घटकाची टूलटिप लपवते आणि नष्ट करते. डेलिगेशन वापरणाऱ्या टूलटिप्स (ज्या पर्याय वापरून तयार केल्या जातात ) selectorवंशज ट्रिगर घटकांवर वैयक्तिकरित्या नष्ट केल्या जाऊ शकत नाहीत.

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

कार्यक्रम

कार्यक्रमाचा प्रकार वर्णन
show.bs.tooltip showजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो .
दाखवले.bs.टूलटिप जेव्हा टूलटिप वापरकर्त्यासाठी दृश्यमान केली जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
hide.bs.tooltip hideजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच काढला जातो .
hidden.bs.tooltip जेव्हा टूलटिप वापरकर्त्यापासून लपविणे पूर्ण होते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
inserted.bs.tooltip show.bs.tooltipजेव्हा टूलटिप टेम्प्लेट DOM मध्ये जोडले जाते तेव्हा हा इव्हेंट इव्हेंटनंतर काढला जातो .
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

गृहनिर्माण दुय्यम माहितीसाठी कोणत्याही घटकामध्ये iPad वरील सामग्रीचे छोटे आच्छादन जोडा.

ज्यांचे शीर्षक आणि आशय शून्य-लांबीचे आहेत असे पॉपओव्हर्स कधीही प्रदर्शित होत नाहीत.

प्लगइन अवलंबित्व

Popovers ला टूलटिप प्लगइन तुमच्या बूटस्ट्रॅपच्या आवृत्तीमध्ये समाविष्ट करणे आवश्यक आहे.

निवड कार्यक्षमता

कार्यप्रदर्शन कारणांसाठी, टूलटिप आणि पॉपओव्हर डेटा-एपीआय निवडले आहेत, म्हणजे तुम्ही ते स्वतःच सुरू केले पाहिजेत .

पृष्ठावरील सर्व पॉपओव्हर्स सुरू करण्याचा एक मार्ग म्हणजे त्यांना त्यांच्या data-toggleगुणधर्मानुसार निवडणे:

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

बटण गट, इनपुट गट आणि सारण्यांमधील पॉपओव्हरसाठी विशेष सेटिंग आवश्यक आहे

.btn-groupa किंवा an मधील घटकांवर .input-groupकिंवा टेबलशी संबंधित घटकांवर ( <td>, <th>, <tr>, , <thead>, <tbody>, ) popovers वापरताना , अवांछित साइड इफेक्ट्स (जसे की घटक विस्तृत होत जाणे आणि/) टाळण्यासाठी <tfoot>तुम्हाला पर्याय (खाली दस्तऐवजीकरण) निर्दिष्ट करावा लागेल . container: 'body'किंवा पॉपओव्हर ट्रिगर झाल्यावर त्याचे गोलाकार कोपरे गमावणे).

लपविलेल्या घटकांवर पॉपओव्हर दर्शविण्याचा प्रयत्न करू नका

$(...).popover('show')जेव्हा लक्ष्य घटक असेल तेव्हा आवाहन केल्याने पॉपओव्हर display: none;चुकीच्या पद्धतीने स्थित होईल.

अक्षम घटकांवरील पॉपओव्हर्ससाठी रॅपर घटकांची आवश्यकता असते

disabledएक किंवा घटकामध्ये पॉपओव्हर जोडण्यासाठी .disabled, a च्या आत घटक ठेवा आणि त्याऐवजी <div>पॉपओव्हर लागू करा .<div>

एकाधिक-लाइन दुवे

काहीवेळा तुम्हाला एका हायपरलिंकमध्ये पॉपओव्हर जोडायचा आहे जो एकाधिक ओळी गुंडाळतो. पॉपओव्हर प्लगइनचे डीफॉल्ट वर्तन हे क्षैतिज आणि अनुलंब मध्यभागी ठेवणे आहे. white-space: nowrap;हे टाळण्यासाठी तुमच्या अँकरमध्ये जोडा .

उदाहरणे

स्थिर पॉपओव्हर

चार पर्याय उपलब्ध आहेत: वर, उजवीकडे, तळाशी आणि डावीकडे संरेखित.

पॉपओव्हर टॉप

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. पेलेंटेस्क ऑर्नारे सेम लॅसिनिया क्वाम वेनेनाटिस वेस्टिबुलम.

Popover उजवीकडे

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. पेलेंटेस्क ऑर्नारे सेम लॅसिनिया क्वाम वेनेनाटिस वेस्टिबुलम.

पॉपओव्हर तळाशी

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. पेलेंटेस्क ऑर्नारे सेम लॅसिनिया क्वाम वेनेनाटिस वेस्टिबुलम.

पॉपओव्हर बाकी

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. पेलेंटेस्क ऑर्नारे सेम लॅसिनिया क्वाम वेनेनाटिस वेस्टिबुलम.

थेट डेमो

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

वापर

JavaScript द्वारे popovers सक्षम करा:

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

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-animation="".

नाव प्रकार डीफॉल्ट वर्णन
अॅनिमेशन बुलियन खरे पॉपओव्हरवर CSS फेड संक्रमण लागू करा
कंटेनर स्ट्रिंग | खोटे खोटे

एका विशिष्ट घटकाला पॉपओव्हर जोडते. उदाहरण: container: 'body'. हा पर्याय विशेषतः उपयुक्त आहे कारण तो तुम्हाला दस्तऐवजाच्या प्रवाहात ट्रिगरिंग घटकाजवळ पॉपओव्हर ठेवण्याची परवानगी देतो - जे विंडोच्या आकार बदलादरम्यान पॉपओव्हरला ट्रिगरिंग घटकापासून दूर जाण्यापासून प्रतिबंधित करेल.

सामग्री स्ट्रिंग | कार्य ''

data-contentविशेषता उपस्थित नसल्यास डीफॉल्ट सामग्री मूल्य .

एखादे फंक्शन दिले असल्यास, ते thisपॉपओव्हर संलग्न केलेल्या घटकाच्या संदर्भासह कॉल केले जाईल.

विलंब संख्या | वस्तू 0

पॉपओव्हर (ms) दर्शविण्यास आणि लपविण्यास विलंब - मॅन्युअल ट्रिगर प्रकारावर लागू होत नाही

जर नंबर दिला असेल तर, लपवा/शो या दोन्हीसाठी विलंब लागू केला जातो

ऑब्जेक्ट संरचना आहे:delay: { "show": 500, "hide": 100 }

html बुलियन खोटे पॉपओव्हरमध्ये HTML घाला. असत्य असल्यास, textDOM मध्ये सामग्री घालण्यासाठी jQuery ची पद्धत वापरली जाईल. तुम्हाला XSS हल्ल्यांबद्दल काळजी वाटत असल्यास मजकूर वापरा.
प्लेसमेंट स्ट्रिंग | कार्य 'बरोबर'

पॉपओव्हर कसे ठेवावे - टॉप | तळाशी | डावीकडे | बरोबर | ऑटो
जेव्हा "स्वयं" निर्दिष्ट केले जाते, तेव्हा ते पॉपओव्हर डायनॅमिकपणे पुनर्स्थित करेल. उदाहरणार्थ, प्लेसमेंट "ऑटो लेफ्ट" असल्यास, पॉपओव्हर शक्य असेल तेव्हा डावीकडे प्रदर्शित होईल, अन्यथा उजवीकडे प्रदर्शित होईल.

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

निवडकर्ता स्ट्रिंग खोटे निवडक प्रदान केले असल्यास, पॉपओव्हर ऑब्जेक्ट्स निर्दिष्ट लक्ष्यांना सुपूर्द केले जातील. प्रॅक्टिसमध्ये, हे डायनॅमिक HTML सामग्री पॉपओवर जोडण्यासाठी सक्षम करण्यासाठी वापरले जाते. हे आणि एक माहितीपूर्ण उदाहरण पहा .
टेम्पलेट स्ट्रिंग '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

पॉपओव्हर तयार करताना वापरण्यासाठी बेस HTML.

पॉपओव्हर titleमध्ये इंजेक्ट केले जाईल .popover-title.

पॉपओव्हर contentमध्ये इंजेक्ट केले जाईल .popover-content.

.arrowपॉपओव्हरचा बाण होईल.

सर्वात बाहेरील आवरण घटकामध्ये .popoverवर्ग असावा.

शीर्षक स्ट्रिंग | कार्य ''

titleविशेषता उपस्थित नसल्यास डीफॉल्ट शीर्षक मूल्य .

एखादे फंक्शन दिले असल्यास, ते thisपॉपओव्हर संलग्न केलेल्या घटकाच्या संदर्भासह कॉल केले जाईल.

ट्रिगर स्ट्रिंग 'क्लिक करा' पॉपओव्हर कसे ट्रिगर केले जाते - क्लिक करा | फिरवा | फोकस | मॅन्युअल तुम्ही एकाधिक ट्रिगर्स पास करू शकता; त्यांना एका जागेसह वेगळे करा. manualइतर कोणत्याही ट्रिगरसह एकत्र केले जाऊ शकत नाही.
व्ह्यूपोर्ट स्ट्रिंग | ऑब्जेक्ट | कार्य { सिलेक्टर: 'बॉडी', पॅडिंग: 0 }

पॉपओव्हर या घटकाच्या मर्यादेत ठेवते. उदाहरण: viewport: '#viewport'किंवा{ "selector": "#viewport", "padding": 0 }

एखादे फंक्शन दिले असल्यास, त्यास ट्रिगरिंग एलिमेंट DOM नोडचा एकमेव युक्तिवाद म्हणून कॉल केला जातो. thisसंदर्भ पॉपओव्हर उदाहरणावर सेट केला आहे .

वैयक्तिक पॉपओव्हर्ससाठी डेटा विशेषता

वर सांगितल्याप्रमाणे वैयक्तिक पॉपओव्हरसाठी पर्याय डेटा विशेषतांच्या वापराद्वारे निर्दिष्ट केले जाऊ शकतात.

पद्धती

$().popover(options)

घटक संकलनासाठी पॉपओव्हर्स आरंभ करते.

.popover('show')

घटकाचे पॉपओव्हर प्रकट करते. पॉपओव्हर प्रत्यक्षात दाखवण्यापूर्वी कॉलरकडे परत येतो (म्हणजे shown.bs.popoverइव्हेंट होण्यापूर्वी). हे पॉपओव्हरचे "मॅन्युअल" ट्रिगरिंग मानले जाते. ज्यांचे शीर्षक आणि आशय शून्य-लांबीचे आहेत असे पॉपओव्हर्स कधीही प्रदर्शित होत नाहीत.

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

.popover('hide')

घटकाचे पॉपओव्हर लपवते. पॉपओव्हर प्रत्यक्षात लपविण्याआधी कॉलरकडे परत येतो (म्हणजे hidden.bs.popoverइव्हेंट होण्यापूर्वी). हे पॉपओव्हरचे "मॅन्युअल" ट्रिगरिंग मानले जाते.

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

.popover('toggle')

घटकाचे पॉपओव्हर टॉगल करते. पॉपओव्हर प्रत्यक्षात दर्शविले किंवा लपवले जाण्यापूर्वी कॉलरकडे परत येते (म्हणजे shown.bs.popoverकिंवा hidden.bs.popoverघटना घडण्यापूर्वी). हे पॉपओव्हरचे "मॅन्युअल" ट्रिगरिंग मानले जाते.

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

.popover('destroy')

घटकाचे पॉपओव्हर लपवते आणि नष्ट करते. डेलिगेशन वापरणारे पॉपओवर (जे पर्याय वापरून तयार केले जातात ) selectorवंशज ट्रिगर घटकांवर वैयक्तिकरित्या नष्ट केले जाऊ शकत नाहीत.

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

कार्यक्रम

कार्यक्रमाचा प्रकार वर्णन
show.bs.popover showजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो .
दाखवले.bs.popover जेव्हा वापरकर्त्यासाठी पॉपओव्हर दृश्यमान केले जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
hide.bs.popover hideजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच काढला जातो .
hidden.bs.popover जेव्हा पॉपओव्हर वापरकर्त्यापासून लपवून ठेवणे पूर्ण होते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
inserted.bs.popover show.bs.popoverजेव्हा पॉपओव्हर टेम्पलेट DOM मध्ये जोडले गेले तेव्हा हा कार्यक्रम इव्हेंटनंतर काढला जातो .
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

सूचना संदेश alert.js

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

या प्लगइनसह सर्व अलर्ट संदेशांमध्ये डिसमिस कार्यक्षमता जोडा.

बटण वापरताना .close, ते चे पहिले मूल असणे आवश्यक .alert-dismissibleआहे आणि मार्कअपमध्ये त्याच्या आधी कोणतीही मजकूर सामग्री येऊ शकत नाही.

वापर

data-dismiss="alert"आपोआप अलर्ट क्लोज कार्यक्षमता देण्यासाठी फक्त तुमच्या क्लोज बटणावर जोडा . सूचना बंद केल्याने ते DOM मधून काढून टाकले जाते.

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

DOM मधून अॅलर्ट काढून टाकून बंद करते. .fadeघटकावर आणि वर्ग उपस्थित असल्यास .in, ते काढून टाकण्यापूर्वी अलर्ट कमी होईल.

कार्यक्रम

बूटस्ट्रॅप चे अॅलर्ट प्लगइन अॅलर्ट फंक्शनॅलिटीमध्ये जोडण्यासाठी काही इव्हेंट्स उघड करते.

कार्यक्रमाचा प्रकार वर्णन
close.bs.alert closeजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो .
बंद.bs.alert जेव्हा इशारा बंद केला जातो तेव्हा हा कार्यक्रम उडवला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

बटणे button.js

बटणांसह अधिक करा. कंट्रोल बटण स्टेटस किंवा टूलबार सारख्या अधिक घटकांसाठी बटणांचे गट तयार करा.

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

फायरफॉक्स पृष्ठ लोडवर नियंत्रण स्थिती (अक्षमता आणि तपासणी) कायम ठेवते . यासाठी एक उपाय वापरणे आवश्यक आहे autocomplete="off". Mozilla बग #654072 पहा .

स्टेटफुल

data-loading-text="Loading..."बटणावर लोडिंग स्थिती वापरण्यासाठी जोडा .

हे वैशिष्ट्य v3.3.5 पासून नापसंत केले आहे आणि v4 मध्ये काढले गेले आहे.

तुम्हाला आवडेल ते राज्य वापरा!

या प्रात्यक्षिकाच्या फायद्यासाठी, आम्ही वापरत आहोत data-loading-textआणि $().button('loading'), परंतु तुम्ही फक्त तेच राज्य वापरू शकत नाही. खाली दस्तऐवजात याबद्दल अधिक पहा$().button(string) .

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

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

सिंगल टॉगल

data-toggle="button"एका बटणावर टॉगलिंग सक्रिय करण्यासाठी जोडा .

प्री-टॉगल केलेल्या बटणांना आवश्यक आहे .activeआणिaria-pressed="true"

.activeप्री-टॉगल केलेल्या बटणांसाठी, तुम्ही स्वतःला वर्ग आणि aria-pressed="true"विशेषता जोडणे आवश्यक आहे button.

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

चेकबॉक्स / रेडिओ

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

पूर्वनिवडलेले पर्याय आवश्यक आहेत.active

पूर्वनिवड केलेल्या पर्यायांसाठी, तुम्ही स्वतः .activeइनपुटमध्ये वर्ग जोडला पाहिजे.label

व्हिज्युअल चेक केलेली स्थिती फक्त क्लिकवर अपडेट केली जाते

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

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

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

पॅनेल घटकासह एकॉर्डियन तयार करण्यासाठी डीफॉल्ट संकुचित वर्तन वाढवा.

Anim pariatur cliche reprehenderit, enim eiusmod High Life Accusamus Terry richardson Ad Squid. 3 वुल्फ मून ऑफिशिया ऑट, नॉन कपिडॅटॅट स्केटबोर्ड डोलर ब्रंच. अन्न ट्रक quinoa nesciunt laborum eiusmod. ब्रंच 3 वुल्फ मून टेम्पोर, सनट एलिक्वा त्यावर एक पक्षी ठेवतो स्क्विड सिंगल-ओरिजिन कॉफी नुल्ला असुमेन्डा शोरेडिच एट. निहिल अॅनिम केफियेह हेल्वेटिका, क्राफ्ट बिअर लेबर वेस एंडरसन क्रेड नेसियंट सेपिएन्ट ईए प्रोडेंट. अॅड व्हेगन अपवाद बुचर व्हाइस लोमो. Leggings occaecat क्राफ्ट बिअर फार्म-टू-टेबल, रॉ डेनिम एस्थेटिक सिंथ नेसियंट आपण कदाचित त्यांच्याबद्दल ऐकले नसेल.
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.
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 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.

  • Bootply
  • One itmus ac facilin
  • Second eros

विस्तारित/संकुचित नियंत्रणे प्रवेशयोग्य बनवा

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

याव्यतिरिक्त, जर तुमचा नियंत्रण घटक एकाच संकुचित घटकाला लक्ष्य करत असेल - म्हणजे data-targetविशेषता निवडकर्त्याकडे निर्देश करत असेल तर - तुम्ही नियंत्रण घटकामध्ये एक अतिरिक्त विशेषता idजोडू शकता , ज्यामध्ये संकुचित करण्यायोग्य घटकाचा समावेश आहे. आधुनिक स्क्रीन रीडर आणि तत्सम सहाय्यक तंत्रज्ञान वापरकर्त्यांना थेट संकुचित घटकावर नेव्हिगेट करण्यासाठी अतिरिक्त शॉर्टकट प्रदान करण्यासाठी या गुणधर्माचा वापर करतात.aria-controlsid

वापर

कोलॅप्स प्लगइन हेवी लिफ्टिंग हाताळण्यासाठी काही वर्गांचा वापर करते:

  • .collapseसामग्री लपवते
  • .collapse.inसामग्री दाखवते
  • .collapsingजेव्हा संक्रमण सुरू होते तेव्हा जोडले जाते आणि ते पूर्ण झाल्यावर काढले जाते

हे वर्ग मध्ये आढळू शकतात component-animations.less.

डेटा विशेषतांद्वारे

संकुचित करण्यायोग्य घटकाचे नियंत्रण स्वयंचलितपणे नियुक्त करण्यासाठी घटकामध्ये फक्त data-toggle="collapse"आणि a जोडा. कोलॅप्स लागू करण्यासाठी विशेषता CSS निवडक स्वीकारते data-target. संकुचित घटकामध्ये data-targetवर्ग जोडण्याची खात्री करा . collapseतुम्हाला ते डीफॉल्ट उघडायचे असल्यास, अतिरिक्त वर्ग जोडा in.

संकुचित नियंत्रणामध्ये एकॉर्डियन-सारखे गट व्यवस्थापन जोडण्यासाठी, डेटा विशेषता जोडा data-parent="#selector". हे कृतीत पाहण्यासाठी डेमोचा संदर्भ घ्या.

JavaScript द्वारे

यासह व्यक्तिचलितपणे सक्षम करा:

$('.collapse').collapse()

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये 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.collaps showजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो .
दाखवले.bs.collaps जेव्हा संकुचित घटक वापरकर्त्यासाठी दृश्यमान केला जातो तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
hide.bs.collaps hideपद्धत कॉल केल्यावर हा कार्यक्रम ताबडतोब उडाला आहे.
hidden.bs.collaps जेव्हा संकुचित घटक वापरकर्त्यापासून लपविला जातो तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

कॅरोसेल carousel.js

कॅरोसेल सारख्या घटकांमधून सायकल चालवण्यासाठी स्लाइडशो घटक. नेस्टेड कॅरोसेल समर्थित नाहीत.

<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. तेथे जवळपास कोणताही पर्यायी HTML ठेवा आणि ते आपोआप संरेखित आणि स्वरूपित केले जाईल.

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

अनेक कॅरोसेल

कॅरोसेल नियंत्रणे योग्यरितीने कार्य करण्यासाठी idकॅरोसेलला सर्वात बाहेरील कंटेनर (द ) चा वापर करणे आवश्यक आहे. .carouselएकाधिक कॅरोसेल जोडताना, किंवा कॅरोसेल बदलताना id, संबंधित नियंत्रणे अद्यतनित करण्याचे सुनिश्चित करा.

डेटा विशेषतांद्वारे

कॅरोसेलची स्थिती सहजपणे नियंत्रित करण्यासाठी डेटा विशेषता वापरा. data-slideकीवर्ड स्वीकारते prevकिंवा next, जे स्‍लाइड पोझिशनला त्‍याच्‍या सध्‍याच्‍या स्‍थितीशी संबंधित बदलते. वैकल्पिकरित्या, data-slide-toकॅरोसेलमध्ये रॉ स्लाइड इंडेक्स पास करण्यासाठी वापरा data-slide-to="2", जे स्लाईडची स्थिती एका विशिष्ट निर्देशांकात हलवते ज्यापासून सुरुवात होते 0.

data-ride="carousel"पृष्‍ठ लोडपासून सुरू होणार्‍या अॅनिमेटिंग म्‍हणून कॅरोसेल चिन्हांकित करण्‍यासाठी विशेषता वापरली जाते . हे समान कॅरोसेलच्या (अनावश्यक आणि अनावश्यक) स्पष्ट JavaScript इनिशिएलायझेशनसह संयोजनात वापरले जाऊ शकत नाही.

JavaScript द्वारे

यासह कॅरोसेलला मॅन्युअली कॉल करा:

$('.carousel').carousel()

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-interval="".

नाव प्रकार डीफॉल्ट वर्णन
मध्यांतर संख्या 5000 एखादी वस्तू आपोआप सायकल चालवण्‍यामध्‍ये विलंब लागणारा वेळ. असत्य असल्यास, कॅरोसेल आपोआप सायकल करणार नाही.
विराम द्या स्ट्रिंग | निरर्थक "होव्हर" वर सेट केल्यास "hover", कॅरोसेलच्या सायकलिंगला विराम देतो mouseenterआणि कॅरोसेलचे सायकलिंग चालू सुरू करतो mouseleave. वर सेट केल्यास null, कॅरोसेलवर फिरल्याने ते थांबणार नाही.
लपेटणे बुलियन खरे कॅरोसेलने सतत सायकल चालवली पाहिजे की कठीण थांबे आहेत.
कीबोर्ड बुलियन खरे कॅरोसेलने कीबोर्ड इव्हेंटवर प्रतिक्रिया द्यावी की नाही.

पर्यायी पर्यायांसह कॅरोसेल objectसुरू करते आणि आयटममधून सायकल चालवण्यास सुरुवात करते.

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

कॅरोसेल आयटममधून डावीकडून उजवीकडे सायकल.

कॅरोसेलला आयटममधून सायकल चालवण्यापासून थांबवते.

कॅरोसेलला एका विशिष्‍ट फ्रेमवर (0 आधारित, अॅरे प्रमाणे) सायकल करते.

मागील आयटमवर सायकल.

पुढील आयटमवर सायकल.

बूटस्ट्रॅपचा कॅरोसेल क्लास कॅरोसेल कार्यक्षमतेमध्ये जोडण्यासाठी दोन इव्हेंट्स उघड करतो.

दोन्ही घटनांमध्ये खालील अतिरिक्त गुणधर्म आहेत:

  • direction: कॅरोसेल ज्या दिशेने सरकत आहे (एकतर "left"किंवा "right").
  • relatedTarget: सक्रिय आयटम म्हणून जागी सरकलेला DOM घटक.

सर्व कॅरोसेल इव्हेंट्स कॅरोसेलवरच (म्हणजे <div class="carousel">) फायर केले जातात.

कार्यक्रमाचा प्रकार वर्णन
slide.bs.carousel ही घटना ताबडतोब सुरू होते जेव्हा slideउदाहरण पद्धत लागू केली जाते.
slid.bs.carousel कॅरोसेलने स्‍लाइड संक्रमण पूर्ण केल्‍यावर हा इव्‍हेंट फायर केला जातो.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

affix.js _

उदाहरण

position: fixed;सह सापडलेल्या प्रभावाचे अनुकरण करून, affix प्लगइन चालू आणि बंद टॉगल करते position: sticky;. उजवीकडील सबनेव्हिगेशन हे ऍफिक्स प्लगइनचे थेट डेमो आहे.


वापर

डेटा विशेषतांद्वारे किंवा तुमच्या स्वतःच्या JavaScript द्वारे अॅफिक्स प्लगइन वापरा.दोन्ही परिस्थितींमध्ये, तुम्ही तुमच्या जोडलेल्या सामग्रीची स्थिती आणि रुंदीसाठी CSS प्रदान करणे आवश्यक आहे.

टीप: सफारी रेंडरिंग बगमुळे ओढलेल्या किंवा पुश केलेल्या स्तंभासारख्या तुलनेने स्थानबद्ध घटकामध्ये असलेल्या घटकावर अॅफिक्स प्लगइन वापरू नका. .

CSS द्वारे पोझिशनिंग

अ‍ॅफिक्स प्लगइन तीन वर्गांमध्ये टॉगल करते, प्रत्येक विशिष्ट स्थितीचे प्रतिनिधित्व करते: .affix, .affix-top, आणि .affix-bottom. position: fixed;तुम्ही on च्या अपवादासह, शैली प्रदान करणे आवश्यक आहे.affixवास्तविक पोझिशन्स हाताळण्यासाठी तुम्ही स्वतः या वर्गांसाठी (या प्लगइनपासून स्वतंत्र) ऑनचा

अॅफिक्स प्लगइन कसे कार्य करते ते येथे आहे:

  1. प्रारंभ करण्यासाठी, प्लगइन जोडते.affix-topप्रारंभ करण्यासाठी, घटक त्याच्या सर्वोच्च स्थानावर आहे हे दर्शवण्यासाठीया टप्प्यावर CSS पोझिशनिंग आवश्यक नाही.
  2. तुम्हाला चिकटवायचे असलेल्या घटकाच्या मागे स्क्रोल केल्याने वास्तविक अॅफिक्सिंग ट्रिगर केले पाहिजे. येथेच .affixबदलते .affix-topआणि सेट करते position: fixed;(बूटस्ट्रॅपच्या CSS द्वारे प्रदान केलेले).
  3. .affixजर तळाचा ऑफसेट परिभाषित केला असेल, तर स्क्रोल करताना ते सोबत बदलले पाहिजे .affix-bottom. ऑफसेट पर्यायी असल्याने, एक सेट करण्यासाठी तुम्हाला योग्य CSS सेट करणे आवश्यक आहे. या प्रकरणात, position: absolute;आवश्यक तेव्हा जोडा. तेथून घटक कुठे ठेवायचा हे ठरवण्यासाठी प्लगइन डेटा विशेषता किंवा JavaScript पर्याय वापरते.

खालीलपैकी कोणत्याही वापर पर्यायांसाठी तुमचा CSS सेट करण्यासाठी वरील पायऱ्या फॉलो करा.

डेटा विशेषतांद्वारे

कोणत्याही घटकावर सहजतेने affix वर्तन जोडण्यासाठी, फक्त data-spy="affix"तुम्ही ज्या घटकाची हेरगिरी करू इच्छिता त्यात जोडा. घटकाचे पिनिंग कधी टॉगल करायचे ते परिभाषित करण्यासाठी ऑफसेट वापरा.

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

JavaScript द्वारे

JavaScript द्वारे affix प्लगइनवर कॉल करा:

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

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-offset-top="200".

नाव प्रकार डीफॉल्ट वर्णन
ऑफसेट संख्या | कार्य | वस्तू 10 स्क्रोलच्या स्थितीची गणना करताना स्क्रीनवरून ऑफसेट करण्यासाठी पिक्सेल. एकच संख्या प्रदान केल्यास, ऑफसेट वरच्या आणि खालच्या दोन्ही दिशांना लागू केला जाईल. एक अद्वितीय, तळ आणि शीर्ष ऑफसेट प्रदान करण्यासाठी फक्त एक ऑब्जेक्ट प्रदान करा 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 हा इव्हेंट घटक चिकटवण्याआधी लगेच फायर होतो.
affixed.bs.affix घटक चिकटवल्यानंतर हा कार्यक्रम उडाला आहे.
affix-top.bs.affix हा इव्हेंट घटक शीर्षस्थानी चिकटवण्याआधी लगेच सुरू होतो.
affixed-top.bs.affix घटक शीर्षस्थानी चिकटवल्यानंतर हा कार्यक्रम काढला जातो.
affix-bottom.bs.affix हा इव्हेंट घटक तळाशी चिकटवण्याआधी लगेच फायर होतो.
affixed-bottom.bs.affix घटक तळाशी चिकटवल्यानंतर हा कार्यक्रम काढला जातो.