आढावा

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

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

डेटा विशेषता

तुम्ही 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
})

सॅनिटायझर

HTML स्वीकारणारे पर्याय सॅनिटाइज करण्यासाठी टूलटिप्स आणि पॉपओव्हर्स आमचे अंगभूत सॅनिटायझर वापरतात.

डीफॉल्ट whiteListमूल्य खालीलप्रमाणे आहे:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

तुम्हाला या डीफॉल्टमध्ये नवीन मूल्ये जोडायची असल्यास तुम्ही whiteListपुढील गोष्टी करू शकता:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

जर तुम्ही आमच्या सॅनिटायझरला बायपास करू इच्छित असाल कारण तुम्ही समर्पित लायब्ररी वापरण्यास प्राधान्य देत असाल, उदाहरणार्थ DOMPurify , तुम्ही खालील गोष्टी करा:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

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

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

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

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

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

संक्रमण 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

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

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>

पर्यायी आकार

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

ग्रिड प्रणाली वापरणे

मॉडेलमध्ये बूटस्ट्रॅप ग्रिड सिस्टीमचा लाभ घेण्यासाठी, फक्त .rows मध्ये नेस्ट करा .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="".

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

पद्धती

.modal(options)

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

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

.modal('toggle')

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

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

.modal('show')

मॅन्युअली एक मॉडेल उघडते. मॉडेल प्रत्यक्षात दर्शविले जाण्यापूर्वी कॉलरकडे परत येते (म्हणजे shown.bs.modalघटना घडण्यापूर्वी).

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

.modal('hide')

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

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

.modal('handleUpdate')

जर एखादा स्क्रोलबार दिसायचा असेल तर त्याला काउंटर करण्यासाठी मॉडेलची स्थिती समायोजित करते, ज्यामुळे मॉडेल डावीकडे उडी मारेल.

जेव्हा मोडल उघडे असताना त्याची उंची बदलते तेव्हाच आवश्यक असते.

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

कार्यक्रम

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

सर्व मॉडेल इव्हेंट्स मॉडेलवरच (म्हणजेच <div class="modal">) उडवले जातात.

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

पर्याय

काहीही नाही

पद्धती

$().dropdown('toggle')

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

कार्यक्रम

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

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

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

ScrollSpy scrollspy.js

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

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

वापर

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

अंमलबजावणीची पद्धत का���ीही असो, 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="".

कार्यक्रम

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

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

उदाहरण टॅब

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

वापर

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

$('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 आणि स्थानिक शीर्षक संचयनासाठी डेटा-विशेषता वापरतात.

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

उदाहरणे

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

स्थिर टूलटिप

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

चार दिशा

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

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

पर्याय

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

पद्धती

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

कार्यक्रम

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

Popovers popover.js

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

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

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

उदाहरणे

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

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

थेट डेमो

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

चार दिशा

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

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

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

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

पुढील क्लिकवर डिसमिस करा

focusवापरकर्त्याने केलेल्या पुढील क्लिकवर पॉपओव्हर्स डिसमिस करण्यासाठी ट्रिगर वापरा .

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

पद्धती

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

कार्यक्रम

$('#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, ते काढून टाकण्यापूर्वी अलर्ट कमी होईल.

कार्यक्रम

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

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

बटणे button.js

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

स्टेटफुल

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

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

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

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

सिंगल टॉगल

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

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

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

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

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

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

पद्धती

$().button('toggle')

टॉगल पुश स्थिती. बटण सक्रिय केले आहे असे स्वरूप देते.

$().button('reset')

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

$().button(string)

कोणत्याही डेटा परिभाषित मजकूर स्थितीत मजकूर स्वॅप करा.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary">
  ...
</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"आवश्यक आहे.

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

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

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

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

वापर

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

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

पद्धती

.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घटना घडण्यापूर्वी) कॉलरकडे परत येते.

कार्यक्रम

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

$('#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 ठेवा आणि ते आपोआप संरेखित आणि स्वरूपित केले जाईल.

प्रथम स्लाइड लेबल

नुल्ला व्हिटे एलिट लिबेरो, फेरेट्रा ऑग्यू मोलिस इंटरडम.

दुसरी स्लाइड लेबल

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

तिसरी स्लाइड लेबल

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

मागील पुढे

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

पद्धती

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

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

.carousel('next')

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

कार्यक्रम

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

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

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

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

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

affix.js _

उदाहरण

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

वापर

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

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

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

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

पद्धती

.affix(options)

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

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

.affix('checkPosition')

संबंधित घटकांची परिमाणे, स्थिती आणि स्क्रोल स्थितीच्या आधारावर अॅफिक्सच्या स्थितीची पुनर्गणना करते. नवीन स्थितीनुसार जोडलेल्या सामग्रीमध्ये .affix, .affix-top, आणि वर्ग जोडले जातात किंवा काढले जातात. .affix-bottomचिकटलेल्या सामग्रीचे परिमाण किंवा लक्ष्य घटक बदलले जातात तेव्हा, चिकटलेल्या सामग्रीचे योग्य स्थान सुनिश्चित करण्यासाठी ही पद्धत कॉल करणे आवश्यक आहे.

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

कार्यक्रम

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