नियाळ

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

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

संकलित जावास्क्रिप्ट वापरून

दोनूय bootstrap.jsआनी bootstrap.min.jsसगळे प्लगइन एकाच फायलीन आसतात. फकत एकूच आस्पाव करचो.

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

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

डेटा गुणधर्म

तुमी सगळे Bootstrap प्लगइन शुध्दपणान मार्कअप API वरवीं वापरूं येतात, जावास्क्रिप्टाची एकूय ओळ बरयनासतना. हो Bootstrap चो पयल्या दर्जाचो API आसा आनी प्लगइन वापरतना तुमचो पयलो विचार आसपाक जाय.

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

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

पर्यायीपणान, विशिश्ट प्लगइनाक लक्ष्य करपाक, फकत प्लगइनाचे नांव नांवस्थान म्हणून डेटा-api नांवस्थाना वांगडा अशे तरेन समाविष्ट करात:

$(document).off('.alert.data-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 फ्रेमवर्कां वांगडा Bootstrap प्लगइन वापरप गरजेचें आसता. ह्या परिस्थितींत, नेमस्पेस टक्कर केन्ना केन्नाय जावंक शकता. अशें जाल्यार, तुमकां .noConflictमोल परत करपाक जाय आशिल्ल्या प्लगइनाचेर तुमी कॉल करूंक शकतात.

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

घडणुको

बूटस्ट्रॅप चडशा प्लगइनांच्या खाशेल्या कृतींखातीर सानुकूल घडणुको पुरवण करता. सादारणपणान हीं अव्यय आनी भूतकाळांत येतात - जंय अव्यय (ex. show) घडणुकेच्या सुरवेक सुरू जाता, आनी ताचें भूतकाळांतलें रूप (ex. shown) क्रिया पुराय जातकच सुरू जाता.

3.0.0 प्रमाणें, सगळ्यो बूटस्ट्रॅप घडणुको नेमस्पेस केल्यात.

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

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

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

Bootstrap च्या दरेक jQuery प्लगइनाची आवृत्ती VERSIONप्लगइनाच्या कंस्ट्रक्टराच्या गुणधर्मांतल्यान ऍक्सॅस करूंक शकता. देखीक, टूलटिप प्लगइन खातीर:

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

जावास्क्रिप्ट अक्षम केल्यार खाशेले फॉलबॅक नात

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

तिसऱ्या पक्षाचीं वाचनालयां

बूटस्ट्रॅप अधिकृतपणान प्रोटोटायप वा jQuery UI सारकिल्या तिसऱ्या पक्षाच्या जावास्क्रिप्ट लायब्ररींक तेंको दिना . घडणुको आसून लेगीत .noConflictआनी नावस्पेस केल्लीं, सुसंगती समस्या आसूं येतात जी तुमकां स्वता सुटावी करची पडटली.

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

संक्रमणां विशीं

साद्या संक्रमण प्रभावां खातीर, transition.jsहेर JS फायलीं वांगडा एकदां समाविष्ट करात. तुमी संकलित (वा ल्हान केल्लें) वापरतात जाल्यार bootstrap.js, हें समाविष्ट करपाची गरज ना-तें पयलींच आसा.

भितर कितें आसा

Transition.js हो transitionEndघडणुकांखातीर मुळावो मदतगार तशेंच CSS संक्रमण एमुलेटर आसा. CSS संक्रमण समर्थन तपासपाक आनी फांशी संक्रमण पकडपाक हेर प्लगइनांनी ताचो वापर केला.

संक्रमणां अक्षम करप

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

$.support.transition = false

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

मोडल सुगम, पूण लवचीक, उण्यांत उणी गरज आशिल्ली कार्यक्षमताय आनी स्मार्ट मुलभूत आशिल्ले संवाद प्रॉम्प्ट आसात.

एका परस चड उक्ते मोडल समर्थीत नात

दुसरो दिसता आसतना मोडल उगडचो न्हय हाची खात्री करात. एका वेळार एका परस चड मोडल दाखोवपाक सानुकूल कोड जाय पडटा.

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

मोडलाच्या दिसपाचेर आनी/वा कार्यक्षमतेक परिणाम करपी हेर घटक टाळपाखातीर तुमच्या दस्तावेजांत मोडलाचो HTML कोड सदांच वयल्या पांवड्यावेल्या सुवातेर दवरपाचो यत्न करात.

मोबायल डिव्हायसाची खबरदारी

मोबायल डिव्हायसांचेर मोडल वापरपा संबंदी कांय सावधानताय आसात. तपशीलां खातीर आमचे ब्राउझर आदार डॉक्स पळयात.

HTML5 आपली अर्थशास्त्र कशी व्याख्या करता ताका लागून, autofocusHTML गुणधर्माचो बूटस्ट्रॅप मोडलांत कसलोच परिणाम जायना. तोच परिणाम मेळोवपाखातीर, कांय सानुकूल जावास्क्रिप्ट वापरात:

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

उदाहरणां

स्थिर उदाहरण

तळभागांत हेडर, बॉडी, आनी कृतीचो संच आशिल्लो रेंडर केल्लो मोडल.

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

लायव्ह डेमो

सकयल दिल्ल्या बटणाचेर क्लिक करून जावास्क्रिप्ट वरवीं मोडल टॉगल करात. तो सकयल सरकतलो आनी पानाच्या वयल्या भागांतल्यान भितर फीको जातलो.

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

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

मोडल सुलभ करप

role="dialog"आनी aria-labelledby="...", मोडल शीर्षकाचो संदर्भ दिवन, to , .modalआनी स्वताक जोडपाची खात्री करात .role="document".modal-dialog

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

युट्युब व्हिडियो एम्बेड करप

YouTube व्हिडियो मोडलांत एम्बेड करपाक आपोआप प्लेबॅक थांबवपाक Bootstrap त नाशिल्ली अतिरिक्त 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>

जाळी पद्दत वापरून

मोडला भितर 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, .

...आनीक बटण...
<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करपाक जोडटा आनी मोडला भायर क्लिक करतना दाखयल्ले मोडल काडून उडोवपाखातीर क्लिक क्षेत्र पुरवण करपाक a तयार करता.<body>.modal-backdrop

डेटा गुणधर्मां वरवीं

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

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

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

myModalजावास्क्रिप्टाच्या एकाच ओळीन id आशिल्ल्या मोडलाक कॉल करात :

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

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-backdrop="".

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

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

रिमोट URL दिल्यार, jQuery च्या पद्दती वरवीं एक फावट सामुग्री लोड जातली आनी div loadत इंजेक्शन दितले . .modal-contentतुमी data-api वापरतात जाल्यार, तुमी पर्यायीपणान hrefरिमोट स्रोत निर्देशीत करपाक गुणधर्म वापरूं येता. हाचें एक उदाहरण सकयल दाखयलां:

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

पद्दती

तुमची सामग्री मोडल म्हणून सक्रिय करता. एक पर्यायी पर्याय स्वीकारता object.

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

हाताळणीन एक मोडल टॉगल करता. मोडल प्रत्यक्षांत दाखोवचे पयलीं वा लिपोवचे पयलीं (म्हळ्यार shown.bs.modalवा hidden.bs.modalघडणूक घडचे पयलीं) कॉलराक परतता.

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

हाताळणीन एक मोडल उगडटा. मोडल प्रत्यक्षांत दाखोवचे पयलीं (म्हळ्यार shown.bs.modalघडणूक घडचे पयलीं) कॉलराक परतता.

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

हाताळणीन एक मोडल लिपयता. मोडल प्रत्यक्षांत लिपचे पयलीं (म्हळ्यार hidden.bs.modalघडणूक घडचे पयलीं) कॉलराक परतता.

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

एक दिसपाक जाय जाल्यार स्क्रोलबाराक प्रतिकार करपाक मोडलाची स्थिती परतून समायोजीत करता, जे मोडल डावी वटेन उडी मारपाक शकता.

उक्ते आसतना मोडलाची उंचाय बदलता तेन्नाच गरज आसता.

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

घडणुको

बूटस्ट्रॅपाचो मोडल वर्ग मोडल कार्यक्षमतायांत हुक करपाखातीर कांय घडणुको उक्ती करता.

सगळ्यो मोडल घडणुको मोडलाचेरच (म्हळ्यार <div class="modal">) फायर करतात.

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

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

ह्या साद्या प्लगइनान लागीं लागीं खंयच्याय वस्तूक ड्रॉपडावन मेनू जोडात, तातूंत नवबार, टॅब, आनी गोळ्यांचो आस्पाव आसा.

एक नवबार भितर

गोळ्यां भितर

.openडेटा गुणधर्म वा जावास्क्रिप्ट वरवीं, ड्रॉपडावन प्लगइन पालक यादी आयटमाचेर वर्ग टॉगल करून लिपिल्ली सामुग्री (ड्रॉपडावन मेनू) टॉगल करता .

मोबायल डिव्हायसांचेर, ड्रॉपडावन उगडप .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"अजूनय गरज आसा

तुमी तुमच्या ड्रॉपडावनाक जावास्क्रिप्ट वरवीं कॉल करतात वा ताचे बदला डेटा-api वापरतात हाची पर्वा करिनासतना, data-toggle="dropdown"ड्रॉपडावनाच्या ट्रिगर घटकाचेर सदांच हाजीर आसप गरजेचें आसा.

कांयच ना

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

सगळ्यो ड्रॉपडावन घडणुको .dropdown-menu's पालक घटकाचेर फायर करतात.

सगळ्या ड्रॉपडावन घडणुकांक एक relatedTargetगुणधर्म आसता, जाचें मोल टॉगलिंग एंकर घटक आसा.

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

स्क्रोलस्पाय scrollspy.js

नवबारांत उदाहरण

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

@चरबी

जाहिरात लेगिंग keytar, ब्रंच आयडी कला पार्टी dolor laboure. पिचफोर्क yr enim लो-फाय ते विकून सोंपचे पयलीं qui. टम्बलर फार्म-टू-टेबल सायकल हक्क कितेंय आसूं. अनिम केफियेह कार्लेस कार्डिगन. Velit seitan mcsweeney च्या फोटो बूथ 3 वाग चंद्र irure. Cosby स्वेटर लोमो जीन शॉर्ट्स, विल्यम्सबर्ग हुडी मिनिम qui तुमी घडये तांचे विशीं आयकूं नात एट कार्डिगन ट्रस्ट फंड culpa बायोडीझेल wes anderson सौंदर्यशास्त्र. निहिल गोंदलेले accusamus, cred विडंबना बायोडीझेल keffiyeh कारागीर ullamco consequat.

@mdo हांणी केला

वेनियम मार्फा मिश्यो स्केटबोर्ड, adipisicing fugiat velit पिचफोर्क दाढ़ी. फ्रीगन दाढी aliqua cupidatat mcsweeney च्या vero. कामदेवताट चार लोको निसी, ईए हेल्व्हेटिका नुल्ला कार्लेस. गोंदण केल्लो कॉस्बी स्वेटर फूड ट्रक, mcsweeney's quis नॉन फ्रीगन विनाइल. लो-फाय वेस अँडरसन +1 सार्टोरियल. कार्लेस बिगर सौंदर्य व्यायाम quis gentrify. ब्रुकलीन adipisicing क्राफ्ट बियर वाइस keytar deserunt.

एक

ओकेकॅट कोमोडो अॅलिक्वा डेलेक्टस. फॅप क्राफ्ट बियर deserunt स्केटबोर्ड ईए. लोमो सायकल हक्क adipisicing बान्ह मी, velit ea sunt फुडले पातळे locavore एकल-मूल कॉफी in magna veniam. उच्च जीवन आयडी विनाइल, इको पार्क consequat quis aliquip बान्ह मी पिचफोर्क. वेरो व्हीएचएस एस्ट एडिपिसिसिंग. Consectetur nisi DIY किमान संदेशवाहक बॅग. Cred ex in, टिकावू delectus consectetur फॅनी पॅक आयफोन.

दोन

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

three

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

केतार ट्वी ब्लॉग, कुलपा संदेशवाहक बॅग मार्फा कितेंय डिलेक्टस खाद्य ट्रक. सॅपिएंटे सिंथ आयडी अॅसुमेंडा. Locavore sed helvetica cliche विडंबना, थंडरकॅट्स तुमी घडये तांचे विशीं आयकूं नात consequat hoodie ग्लुटेन-मुक्त लो-फाय fap aliquip. Labore एलिट placeat ते विकले पयलीं, टेरी रिचर्डसन proident ब्रंच nesciunt quis cosby स्वेटर pariatur keffiyeh ut helvetica कारागीर. कार्डिगन क्राफ्ट बियर seitan रेडीमेड velit. व्हीएचएस चॅम्ब्रे लाबोरिस टेम्पोर व्हेनिअम. अनिम मोलिट मिनिमा कोमोडो उल्लमको थंडरकॅट्स.

वापर

बूटस्ट्रॅप 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;

डेटा गुणधर्मां वरवीं

तुमच्या टॉपबार नेव्हिगेशनांत scrollspy वर्तन सहज जोडपाक, 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>

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

तुमच्या CSS मदीं जोडल्या उपरांत position: relative;, जावास्क्रिप्ट वरवीं स्क्रोलस्पायक कॉल करात:

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

पद्दती

.scrollspy('refresh')

DOM वयल्यान घटक जोडपाक वा काडपा वांगडा scrollspy वापरतना, तुमकां रिफ्रेश पद्दत अशे तरेन कॉल करची पडटली:

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

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-offset="".

नांव प्रकार डिफॉल्ट वर्णन
ऑफसेट करप आंकडो १० हें नांव स्क्रोलाची सुवात मेजतना वयल्यान ऑफसेट करपाक पिक्सेल.

घडणुको

इव्हेंट प्रकार वर्णन
सक्रिय करप.bs.scrollspy जेन्ना जेन्ना स्क्रोलस्पाय कडल्यान नवी वस्त सक्रिय जाता तेन्ना ही घडणूक फायर जाता.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

टॉगल करपाक येवपी टॅब tab.js

उदाहरण टॅब

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

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

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

टॅब केल्लें नेव्हिगेशन विस्तारता

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

वापर

जावास्क्रिप्ट वरवीं टॅब करपाक येवपी टॅब सक्षम करात (दरेक टॅब वैयक्तीकपणान सक्रिय करपाची गरज आसा):

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

तुमी जायत्या तरांनी वैयक्तीक टॅब सक्रिय करूंक शकतात:

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

मार्कअप करप

data-toggle="tab"तुमी फकत स्पश्ट करून वा data-toggle="pill"घटकाचेर कसलीच जावास्क्रिप्ट बरयनासतना टॅब वा पिल नेव्हिगेशन सक्रिय करूंक शकतात . navटॅबांत and nav-tabsवर्ग जोडल्यार ulबूटस्ट्रॅप टॅब स्टायलिंग लागू जातली , जाल्यार navand nav-pillsवर्ग जोडल्यार पिल स्टायलिंग लागू जातली .

<div>

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

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

</div>

फेड इफेक्ट

टॅब फीके करपाक, .fadeदरेक जोडात .tab-pane. पयल्या टॅब फलकांतय .inसुरवातीची आशय दिसपाक जाय.

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

पद्दती

$().tab

टॅब घटक आनी सामुग्री कंटेनर सक्रिय करता. टॅबांत एक तर एक data-targetवा एक hrefलक्ष्य करपी एक कंटेनर नोड DOM त आसपाक जाय. वयल्या उदाहरणांनी, टॅब हे गुणधर्म आशिल्ले <a>s आसात.data-toggle="tab"

.tab('show')

दिल्लो टॅब निवडटा आनी ताचे संबंदीत आशय दाखयता. आदीं निवडिल्लो हेर खंयचोय टॅब निवडूंक नाशिल्लो जाता आनी ताची संबंदीत आशय लिपता. टॅब फलक प्रत्यक्षांत दाखोवचे पयलीं (म्हळ्यार shown.bs.tabघडणूक घडचे पयलीं) कॉलराक परतता.

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

घडणुको

नवो टॅब दाखयतना, घडणुको सकयल दिल्ल्या क्रमांकान फायर करतात:

  1. hide.bs.tab(सद्याच्या सक्रिय टॅबाचेर)
  2. show.bs.tab(दाखोवपाच्या टॅबाचेर)
  3. hidden.bs.tab(फाटल्या सक्रिय टॅबाचेर, hide.bs.tabघडणुके खातीर आशिल्लोच)
  4. shown.bs.tabshow.bs.tab(नव्यान-सक्रीय नुस्तें दाखयल्ल्या टॅबाचेर, घडणुके खातीर तसोच )

जर खंयचोच टॅब पयलींच सक्रिय नाशिल्लो जाल्यार, मागीर hide.bs.tabआनी hidden.bs.tabघडणुको फायर करच्यो नात.

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

साधन टिप्स tooltip.js

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

शून्य लांबाय शीर्षकां आशिल्लीं साधनटिप केन्नाच दाखयना.

उदाहरणां

साधनसुचोवण्यो पळोवपाक सकयल दिल्ल्या दुव्यांचेर होवर करात:

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

स्थिर साधनटिप

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

चार दिकां

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

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

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

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

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

कार्यक्षमताय कारणांक लागून, Tooltip आनी Popover data-apis ऑप्ट-इन आसात, म्हळ्यार तुमी स्वता तांकां आरंभ करपाक जाय .

पानाचेर सगळ्यो टूलटिप्स आरंभ करपाचो एक मार्ग म्हणल्यार तांच्या data-toggleगुणधर्मा प्रमाणें तीं निवडप:

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

वापर

साधन टिप प्लगइन मागणीचेर सामुग्री आनी मार्कअप तयार करता, आनी पूर्वनिर्धारीतपणान साधन टिपां तांच्या ट्रिगर घटका उपरांत दवरता.

जावास्क्रिप्ट वरवीं टूलटिप ट्रिगर करात:

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

मार्कअप करप

टूलटिपा खातीर गरजेचो मार्कअप फकत एक dataगुणधर्म आसा आनी titleHTML घटकाचेर तुमकां टूलटिप आसपाक जाय. टूलटिपाचो निर्माण केल्लो मार्कअप मातसो सोपो आसा, जरी ताका एक सुवात जाय पडटा (मुळाव्यान, topप्लगइनान सेट केला).

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

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

एका परस चड ओळींच्यो दुवे

केन्ना केन्नाय तुमकां जायत्यो ओळी गुठलावपी हायपरलिंकांत टूलटिप जोडपाक जाय. टूलटिप प्लगइनाची मुलभूत वागणूक म्हळ्यार ताका आडवें आनी उबें केंद्रीत करप. white-space: nowrap;हें टाळपा खातीर तुमच्या एंकरांत जोडचें .

बटण गट, इनपुट गट, आनी कोश्टकांतल्या साधनटिपांक खाशेली सेटिंग जाय पडटा

.btn-groupa वा an भितरल्या घटकांचेर .input-group, वा कोश्टक संबंदीत घटकांचेर ( <td>, <th>, <tr>, <thead>, <tbody>, ) साधनसुचोवण्यो वापरतना <tfoot>, तुमकां container: 'body'नाका आशिल्ले दुश्परिणाम टाळपाक पर्याय निर्देशीत करचो पडटलो (सकयल दस्तावेजीत केला) (देखीक घटक रूंद वाडटा आनी/ वा टूलटिप ट्रिगर करतना ताचे वाटकुळे कोनशे गमावप).

लिपिल्ल्या घटकांचेर साधनसुचोवण्यो दाखोवपाचो यत्न करचो न्हय

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

कीबोर्ड आनी सहाय्यक तंत्रज्ञान वापरप्यां खातीर सुलभ साधनसुचोवण्यो

tabindex="0"कीबोर्डान नेव्हिगेट करपी वापरप्यां खातीर, आनी खासा करून सहाय्यक तंत्रज��ञानाच्या वापरप्यां खातीर, तुमी फकत दुवे, फॉर्म नियंत्रण, वा गुणधर्म आशिल्ल्या खंयच्याय मनमानी घटक अशा कीबोर्ड-केंद्रीत करपाक येवपी घटकांक साधनसुचोवण्यो जोडपाक जाय .

अक्षम घटकांचेर साधनटिपांक रॅपर घटकांची गरज आसता

disableda वा .disabledघटकाक टूलटिप जोडपाक , घटक a च्या भितर दवरात आनी ताचे बदला <div>टूलटिप ताचेर लागू करात .<div>

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-animation="".

नांव प्रकार डिफॉल्ट वर्णन
एनिमेशन करप बूलियन हें नांव खरें साधनटिपाचेर CSS फेड संक्रमण लागू करात
आयदनांत घालतात तार | फट फट

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

कळाव संख्या | ऑब्जॅक्ट ० आनी ०

साधनटिप दाखोवपाक आनी लिपोवपाक कळाव (ms) - हाताळणी ट्रिगर प्रकाराक लागू जायना

क्रमांक पुरवण केल्यार, लिपोवप/दाखोवप ह्या दोनूय गजालींक विलंब लागू जाता

वस्तूची रचणूक अशी आसा: १.delay: { "show": 500, "hide": 100 }

एचटीएमएल हें नांव बूलियन हें नांव फट टूलटिपांत HTML घालात. textखोटें आसल्यार, DOM त सामुग्री घालपाखातीर jQuery ची पद्दत वापरतले. XSS हल्ल्याचो हुस्को आसल्यार मजकूर वापरात.
प्लेसमेंट करप तार | कार्य 'वयर'

टूलटिप कशें स्थापन करचें - वयर | तळें | उवें | उजवें | ऑटो.
जेन्ना "auto" निर्देशीत केला, तेन्ना तो साधनटिपाक गतिशीलपणान परतून दितले. देखीक, प्लेसमेंट "ऑटो डावें" आसल्यार, साधनटिप शक्य आसल्यार डावी वटेन दाखयतले, नाजाल्यार तो उजवे वटेन दाखयतले.

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

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

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

दुय्यम म्हायती दवरपा खातीर खंयच्याय घटकाक, iPad चेर आशिल्ल्या प्रमाणें, सामुग्रीचे ल्हान आच्छादन जोडात.

ज्या पोपोव्हरांचें शीर्षक आनी आशय दोनूय शून्य लांबायेचे आसतात, ते केन्नाच दाखोवंक नात.

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

Popovers तुमच्या Bootstrap आवृत्तींत टूलटिप प्लगइन समाविष्ट करपाची गरज आसा.

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

कार्यक्षमताय कारणांक लागून, Tooltip आनी Popover data-apis ऑप्ट-इन आसात, म्हळ्यार तुमी स्वता तांकां आरंभ करपाक जाय .

पानाचेर सगळे पॉपओव्हर आरंभ करपाचो एक मार्ग म्हणल्यार तांच्या data-toggleगुणधर्मा प्रमाणें निवडप:

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

बटण गट, इनपुट गट, आनी कोश्टकांत पॉपओव्हरांक खाशेली सेटिंग जाय पडटा

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

लिपल्ले घटकांचेर पोपोव्हर दाखोवपाचो यत्न करचो न्हय

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

अपंग घटकांचेर पॉपओवरांक रॅपर घटकांची गरज आसता

disableda वा .disabledघटकाक पॉपओवर जोडपाक , a च्या भितर घटक दवरात आनी ताचे बदला <div>ताचेर पॉपओवर लागू करात .<div>

एका परस चड ओळींच्यो दुवे

केन्ना केन्नाय तुमकां जायतीं ओळीं गुठलायता अशा हायपरलिंकांत पॉपओवर जोडपाक जाय. पॉपओवर प्लगइनाची मुलभूत वागणूक म्हळ्यार ताका आडवें आनी उबें केंद्रीत करप. white-space: nowrap;हें टाळपा खातीर तुमच्या एंकरांत जोडचें .

उदाहरणां

स्थिर पोपोवर

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

पोपोवर टॉप

लोबोर्टिस हांगा सेड पोसुएरे कॉन्सेक्टेचर एस्ट. एनियन यु लियो क्वाम. पेलेन्टेस्क ऑर्नारे सेम लॅसिनिया क्वाम व्हेनेनेटिस वेस्टिबुलम.

पोपोवर बरोबर

लोबोर्टिस हांगा सेड पोसुएरे कॉन्सेक्टेचर एस्ट. एनियन यु लियो क्वाम. पेलेन्टेस्क ऑर्नारे सेम लॅसिनिया क्वाम व्हेनेनेटिस वेस्टिबुलम.

पोपोवर तळें

लोबोर्टिस हांगा सेड पोसुएरे कॉन्सेक्टेचर एस्ट. एनियन यु लियो क्वाम. पेलेन्टेस्क ऑर्नारे सेम लॅसिनिया क्वाम व्हेनेनेटिस वेस्टिबुलम.

पोपोवर गेलो

लोबोर्टिस हांगा सेड पोसुएरे कॉन्सेक्टेचर एस्ट. एनियन यु लियो क्वाम. पेलेन्टेस्क ऑर्नारे सेम लॅसिनिया क्वाम व्हेनेनेटिस वेस्टिबुलम.

लायव्ह डेमो

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

चार दिकां

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

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

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

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

फुडल्या क्लिकाचेर डिसमिस करात

focusवापरपी केल्ल्या फुडल्या क्लिकाचेर पॉपओव्हर काडून उडोवपाक ट्रिगर वापरात .

फुडल्या क्लिकाचेर डिसमिस करपाक विशिश्ट मार्कअप जाय

<a>योग्य क्रॉस-ब्राउझर आनी क्रॉस-प्लॅटफॉर्म वर्तना खातीर, तुमी टॅग वापरपाक जाय, टॅग न्हय , आनी तुमी आनी गुणधर्मांचोय <button>आस्पाव करचो पडटलो .role="button"tabindex

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

वापर

जावास्क्रिप्ट वरवीं पॉपओव्हर सक्षम करात:

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

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-animation="".

नांव प्रकार डिफॉल्ट वर्णन
एनिमेशन करप बूलियन हें नांव खरें पॉपओवराक CSS फेड संक्रमण लागू करात
आयदनांत घालतात तार | फट फट

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

सामुग्री तार | कार्य '' हें .

data-contentगुणधर्म हाजीर ना जाल्यार मुलभूत सामुग्री मोल .

फंक्शन दिल्लें आसल्यार, तें thisपोपोव्हर जोडिल्ल्या घटकाक ताचो संदर्भ सेट करून कॉल करतले.

कळाव संख्या | ऑब्जॅक्ट ० आनी ०

पॉपओवर दाखोवपाक आनी लिपोवपाक कळाव (ms) - हाताळणी ट्रिगर प्रकाराक लागू जायना

क्रमांक पुरवण केल्यार, लिपोवप/दाखोवप ह्या दोनूय गजालींक विलंब लागू जाता

वस्तूची रचणूक अशी आसा: १.delay: { "show": 500, "hide": 100 }

एचटीएमएल हें नांव बूलियन हें नांव फट पॉपओवरांत एचटीएमएल घालात. textखोटें आसल्यार, DOM त सामुग्री घालपाखातीर 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 वापरप्याक पॉपओव्हर दिसपाक लायल्यार ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले).
hide.bs.popover हें नांव hideदृष्टांत पद्दत कॉल केल्या उपरांत ही घडणूक रोखडीच फायर जाता .
लिपलां.बीएस.गरीबी वापरप्या कडल्यान लिपोवपाचें पॉपओवर सोंपतकच ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले).
घालून.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घटकाचेर and वर्ग हाजीर आसल्यार .in, तो काडचे पयलीं इशारो फीको जातलो.

घडणुको

Bootstrap चें सावधान प्लगइन सावधान कार्यक्षमतेक हुक करपा खातीर कांय घडणुको उक्ती करता.

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

बटणां बटण.जेएस

बटणां वरवीं चड करचें. नियंत्रण बटण राज्य करता वा साधनपट्टी सारकिल्या चड घटकांखातीर बटणांचे गट तयार करतात.

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

Firefox पान लोडांतल्यान फॉर्म नियंत्रण स्थिती (अक्षमता आनी तपासणी) तिगून उरता . हाचे खातीर एक उपाय म्हणल्यार वापरप autocomplete="off". पळयात मोझिला बग # 654072 .

राज्यपूर्ण

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

हें वैशिश्ट्य v3.3.5 सावन नाका आशिल्लें आनी v4 त काडून उडयलां.

तुमकां आवडटा ती राज्य वापरात!

ह्या निदर्शना खातीर, आमी वापरतात data-loading-textआनी $().button('loading'), पूण तें एकूच राज्य न्हय तुमी वापरूं येता. हाचेर सकयल $().button(string)दस्तावेजीकरणांत चड पळयात .

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

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

एकूच टॉगल करप

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

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

पूर्व-टॉगल केल्ल्या बटणां खातीर, तुमी .activeवर्ग आनी aria-pressed="true"गुणधर्म buttonस्वता कडेन जोडपाक जाय.

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

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

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

पूर्वनिवडिल्ल्या पर्यायांची गरज आसा.active

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

दृश्य तपासलेली स्थिती फकत क्लिकाचेर अद्ययावत केल्या

चेकबॉक्स बटणाची तपासणी केल्ली स्थिती बटणाचेर घडणूक फायर करिनासतना अद्ययावत clickकेल्यार (देखीक इनपुटाचो गुणधर्म <input type="reset">सेट करपा वरवीं वा वरवीं ), तुमकां स्वता इनपुटाचेर वर्ग टॉगल करचो पडटलो .checked.activelabel

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

पद्दती

$().button('toggle')

पुश स्टेट टॉगल करता. बटणाक तें सक्रिय केलां अशें दिसप दिता.

$().button('reset')

बटण स्थिती रिसेट करता - मजकूर मूळ मजकूरांत स्वॅप करता. ही पद्दत अतुल्यकालिक आसा आनी रिसेटिंग प्रत्यक्षांत पुराय जावचे पयलीं परत येता.

$().button(string)

खंयच्याय डेटा व्याख्या केल्ल्या मजकूर स्थितींत मजकूर स्वॅप करता.

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

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

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

सोप्या टॉगल वर्तना खातीर मुठीभर वर्गांचो वापर करपी लवचीक प्लगइन.

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

संकुचीत करपाक संक्रमण प्लगइन तुमच्या बूटस्ट्रॅपाच्या आवृत्तींत आस्पाव करपाची गरज आसा.

उदारण

वर्ग बदला वरवीं दुसरो घटक दाखोवपाक आनी लिपोवपाक सकयल दिल्ल्या बटणां क्लिक करात:

  • .collapseसामुग्री लिपयता
  • .collapsingसंक्रमणाच्या वेळार लागू करतात
  • .collapse.inआशय दाखयता

तुमी गुणधर्म आशिल्ली दुवो वापरूं येता href, वा गुणधर्म आशिल्लें बटण वापरूं येता data-target. दोनूय प्रकरणांत, द data-toggle="collapse"हें गरजेचें आसा.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

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

पॅनल घटका वांगडा एक अकॉर्डियन तयार करपाक मुलभूत संकुचीत वर्तन विस्तारात.

Anim pariatur क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड. 3 वाग चंद्र officia aute, गैर cupidat स्केटबोर्ड dolor ब्रंच. खाद्य ट्रक क्विनोआ nesciunt laborum eiusmod. ब्रंच 3 वाग चंद्र टेम्पोर, sunt aliqua ताचेर एक सुकणें घालें स्क्वीड एकल-मूल कॉफी nulla assumenda shoreditch इ. निहिल अनिम केफियेह हेल्वेटिका, क्राफ्ट बियर लाबर वेस अँडरसन cred nesciunt sapiente ea proident. जाहिरात वेगन एक्सेप्टर कसाई उप लोमो. लेगिंग्स occaecat क्राफ्ट बियर फार्म-टू-टेबल, कच्चे डेनिम सौंदर्य सिंथ nesciunt तुमी घडये तांचे विशीं आयकूं नात accusamus labore टिकावू व्हीएचएस.
Anim pariatur क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड. 3 वाग चंद्र officia aute, गैर cupidat स्केटबोर्ड dolor ब्रंच. खाद्य ट्रक क्विनोआ nesciunt laborum eiusmod. ब्रंच 3 वाग चंद्र टेम्पोर, sunt aliqua ताचेर एक सुकणें घालें स्क्वीड एकल-मूल कॉफी nulla assumenda shoreditch इ. निहिल अनिम केफियेह हेल्वेटिका, क्राफ्ट बियर लाबर वेस अँडरसन cred nesciunt sapiente ea proident. जाहिरात वेगन एक्सेप्टर कसाई उप लोमो. लेगिंग्स occaecat क्राफ्ट बियर फार्म-टू-टेबल, कच्चे डेनिम सौंदर्य सिंथ nesciunt तुमी घडये तांचे विशीं आयकूं नात accusamus labore टिकावू व्हीएचएस.
Anim pariatur क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड. 3 वाग चंद्र officia aute, गैर cupidat स्केटबोर्ड dolor ब्रंच. खाद्य ट्रक क्विनोआ nesciunt laborum eiusmod. ब्रंच 3 वाग चंद्र टेम्पोर, sunt aliqua ताचेर एक सुकणें घालें स्क्वीड एकल-मूल कॉफी nulla assumenda shoreditch इ. निहिल अनिम केफियेह हेल्वेटिका, क्राफ्ट बियर लाबर वेस अँडरसन cred nesciunt sapiente ea proident. जाहिरात वेगन एक्सेप्टर कसाई उप लोमो. लेगिंग्स occaecat क्राफ्ट बियर फार्म-टू-टेबल, कच्चे डेनिम सौंदर्य सिंथ nesciunt तुमी घडये तांचे विशीं आयकूं नात accusamus labore टिकावू व्हीएचएस.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

तशेंच .panel-bodys कडेन .list-groups स्वॅप करप शक्य आसा.

  • बूटप्लाय हें नांव
  • एक इटमस एसी फेसिलीन
  • दुसरो इरोस

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

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 जोडून data-targetआपोआप संकुचीत करपाक येवपी घटकाचें नियंत्रण नेमपाक. गुणधर्म data-targetसंकुचीत लागू करपाक CSS निवडक स्वीकारता. collapseसंकुचीत करपाक येवपी घटकांत वर्ग जोडपाची खात्री करात . तुमकां तो पूर्वनिर्धारीत उगडपाक जाय जाल्यार, अतिरिक्त वर्ग जोडात in.

संकुचीत नियंत्रणांत अकॉर्डियन-सारकें गट वेवस्थापन जोडपाक, डेटा गुणधर्म जोडात data-parent="#selector". हें कृतींत पळोवपाक डेमो पळयात.

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

हाताळणी करून सक्षम करात:

$('.collapse').collapse()

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-parent="".

नांव प्रकार डिफॉल्ट वर्णन
पालक निवडक अशें म्हण्टात फट जर एक निवडपी पुरवण केला जाल्यार, मागीर ही संकुचीत करपाक येवपी वस्तू दाखयल्यार निर्दिश्ट पालकाच्या खाला सगळे संकुचीत घटक बंद जातले. (पारंपारीक अकॉर्डियन वर्तना सारकें - हें panelवर्गाचेर आदारून आसता)
टॉगल करप बूलियन हें नांव खरें आवाहनाचेर संकुचीत करपाक येवपी घटक टॉगल करता

पद्दती

.collapse(options)

तुमची सामुग्री संकुचीत करपाक येवपी घटक म्हणून सक्रिय करता. एक पर्यायी पर्याय स्वीकारता object.

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

.collapse('toggle')

दाखोवपाक वा लिपोवन दवरपाक संकुचीत करपाक येवपी घटक टॉगल करता. संकुचीत करपाक येवपी घटक प्रत्यक्षांत दाखोवचे पयलीं वा लिपोवचे पयलीं (म्हळ्यार वा घडणूक घडचे पयलीं) कॉलराक परतता .shown.bs.collapsehidden.bs.collapse

.collapse('show')

संकुचीत करपाक येवपी घटक दाखयता. संकुचीत करपाक येवपी घटक प्रत्यक्षांत दाखोवचे पयलीं (म्हळ्यार shown.bs.collapseघडणूक घडचे पयलीं) कॉलराक परतता.

.collapse('hide')

संकुचीत करपाक येवपी घटक लिपयता. संकुचीत करपाक येवपी घटक प्रत्यक्षांत लिपचे पयलीं (म्हळ्यार...hidden.bs.collapse घडणूक घडचे पयलीं) कॉलराक परतता.

घडणुको

बूटस्ट्रॅपाचो कोसळपाचो वर्ग कोळसो कार्यक्षमतेक हुक करपाखातीर कांय घडणुको उक्ती करता.

इव्हेंट प्रकार वर्णन
शो.बीएस.कोलाप्स करप showदृष्टांत पद्दत कॉल करतना ही घडणूक रोखडीच फायर जाता .
दाखयलां.bs.collapse वापरप्याक कोसळपी घटक दिसपाक लायल्यार ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले).
लिपोवप.bs.collapse करप hideपद्दत आपयल्या उपरांत ही घडणूक रोखडीच फायर करतात .
लिपलां.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>

पर्यायी मथळां

.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-slideकीवर्ड स्वीकारता prevवा next, जे स्लाइड स्थिती ताच्या सद्याच्या स्थितीच्या सापेक्ष बदलता. पर्यायीपणान, वापरात data-slide-toएक कच्चो स्लाइड निर्देशांक हिंडोळाक पास करपाक data-slide-to="2", जो स्लाइड सुवात एका विशिश्ट निर्देशांकांत सुरू करता0 .

data-ride="carousel"पान लोड जावपाचेर सुरू जावपी हिंडोला एनिमेट म्हणून चिन्न करपाखातीर गुणधर्म वापरतात . एकाच हिंडोळ्याच्या (अनावश्यक आनी गरजे भायर) स्पश्ट जावास्क्रिप्ट आरंभीकरणा वांगडा ताचो वापर करूंक मेळना.

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

हिंडोळाक हाताळणीन कॉल करात:

$('.carousel').carousel()

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-interval="".

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

एक पर्यायी पर्यायां सयत हिंडोला आरंभ करता objectआनी आयटमांतल्यान सायकल चलोवंक सुरवात करता.

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

हिंडोळाच्या वस्तूंतल्यान डाव्यान उजव्यान सायकल करता.

वस्तूंतल्यान सायकल चलोवपी हिंडोळाक आडायता.

हिंडोलाक एका विशिश्ट फ्रेमाक (0 आदारीत, ऍरे सारकें) चक्र करता.

फाटल्या वस्तू कडेन चक्रां करता.

फुडल्या आयटमाचेर चक्रां करता.

बूटस्ट्रॅपाचो हिंडोला वर्ग हिंडोला कार्यक्षमतायांत हुक करपा खातीर दोन घडणुको उक्ती करता.

दोनूय घडणुकांक फुडले अतिरिक्त गुणधर्म आसात:

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

सगळ्यो हिंडोलाच्यो घडणुको हिंडोलाचेरूच (म्हळ्यार <div class="carousel">) उडयतात.

इव्हेंट प्रकार वर्णन
स्लाइड.बीएस.हिंडोला slideदृष्टांत पद्दत आवाहन करतना ही घडणूक रोखडीच फायर जाता .
स्लाइड.बीएस.हिंडोळ हिंडोला आपलें स्लाइड संक्रमण पुराय जातकच ही इव्हेंट फायर करतात.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

affix.js हें जोडचें

उदारण

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


वापर

डेटा गुणधर्मां वरवीं वा तुमच्या स्वताच्या जावास्क्रिप्टा वरवीं हाताळणी करून प्रत्यय प्लगइन वापरात.दोनूय परिस्थितींत, तुमच्या चिकटयल्ल्या सामुग्रीची सुवात आनी रुंदाये खातीर तुमी CSS दिवंक जाय.

टिप: Safari रेंडरींग बगाक लागून, तुलनात्मक रितीन स्थितींत आशिल्ल्या घटकांत आशिल्ल्या घटकाचेर, जशे की ओडून घेतिल्ल्या वा धक्को दिल्ल्या स्तंभाचेर, ऍफिक्स प्लगइन वापरूं नाकात .

सीएसएस वरवीं पोझिशनिंग करप

ऍफिक्स प्लगइन तीन वर्गां मदीं टॉगल करता, दरेक एका विशिश्ट स्थितीचें प्रतिनिधित्व करता: .affix, .affix-top, आनी .affix-bottom. तुमी शैली दिवंक जाय, position: fixed;चालू सोडल्यार.affix सोडल्यार , ह्या वर्गांखातीर स्वता (ह्या प्लगइनांतल्यान स्वतंत्र) प्रत्यक्ष स्थिती हाताळपाखातीर.

ऍफिक्स प्लगइन कशें काम करता तें पळयात:

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

सकयल दिल्ल्या वापर पर्यायां मदल्या खंयच्याय एका खातीर तुमचो CSS सेट करपाक वयलीं पावलां पाळचीं.

डेटा गुणधर्मां वरवीं

खंयच्याय घटकाक सहजपणान affix वर्तन जोडपाक, फकत data-spy="affix"तुमकां गुप्तचर करपाक जाय आशिल्ल्या घटकाक जोडात. घटकाचें पिनिंग केन्ना टॉगल करचें हाची व्याख्या करपाक ऑफसेट वापरात.

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

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

जावास्क्रिप्ट वरवीं प्रत्यय प्लगइनाक कॉल करात:

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

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-offset-top="200".

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

पद्दती

.affix(options)

तुमची सामुग्री चिकटिल्ली सामुग्री म्हणून सक्रिय करता. एक पर्यायी पर्याय स्वीकारता object.

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

.affix('checkPosition')

संबंदीत घटकांच्या परिमाण, सुवात आनी स्क्रोल स्थितीचेर आदारीत प्रत्ययाची स्थिती परतून मेजता. , .affix, .affix-topआनी .affix-bottomवर्ग नव्या स्थिती प्रमाणें जोडिल्ल्या सामुग्रींत जोडटात वा काडून उडयतात. जेन्ना केन्नाय चिकटयल्ल्या आशयाचे वा लक्ष्य घटकाचे परिमाण बदलतात तेन्ना ही पद्दत आपोवपाची गरज आसता, चिकटयल्ल्या आशयाची योग्य सुवात सुनिश्चीत करपाखातीर.

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

घडणुको

Bootstrap चें affix प्लगइन affix कार्यक्षमतेक हुक करपाखातीर कांय घडणुको उक्ती करता.

इव्हेंट प्रकार वर्णन
affix.bs.affix हें नांव ही घडणूक घटक चिकटयचे पयलीं रोखडीच फायर जाता.
चिकटयल्लें.bs.affix घटक चिकटयल्या उपरांत ही घडणूक फायर करतात.
affix-top.bs.अॅफिक्स ही घडणूक घटक चिकटवचे पयलीं रोखडीच फायर जाता-टॉप.
affixed-top.bs.अॅफिक्स घटक चिकटयल्या उपरांत ही घडणूक फायर जाता-टॉप.
affix-तळाक.bs.affix ही घडणूक घटक चिकटयले-तळें जावचे पयलीं रोखडीच फायर जाता.
संलग्न-सकयल.bs.affix घटक affixed-bottom केल्या उपरांत ही घडणूक फायर करतात.