अवलोकन

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

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

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

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

उस ने कहा, कुछ स्थितियों में इस कार्यक्षमता को बंद करना वांछनीय हो सकता है। इसलिए, हम नामस्थान वाले दस्तावेज़ पर सभी ईवेंट को अनबाइंड करके डेटा विशेषता API को अक्षम करने की क्षमता भी प्रदान करते हैं data-api। यह इस तरह दिखता है:

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

वैकल्पिक रूप से, एक विशिष्ट प्लगइन को लक्षित करने के लिए, बस प्लगइन का नाम नामस्थान के रूप में डेटा-एपीआई नेमस्पेस के साथ शामिल करें:

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

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

हम यह भी मानते हैं कि आपको पूरी तरह से जावास्क्रिप्ट एपीआई के माध्यम से सभी बूटस्ट्रैप प्लगइन्स का उपयोग करने में सक्षम होना चाहिए। सभी सार्वजनिक एपीआई एकल, श्रृंखलाबद्ध तरीके हैं, और संग्रह पर कार्रवाई की गई है।

$('.btn.danger').button('toggle').addClass('fat')

सभी विधियों को एक वैकल्पिक विकल्प ऑब्जेक्ट को स्वीकार करना चाहिए, एक स्ट्रिंग जो किसी विशेष विधि को लक्षित करती है, या कुछ भी नहीं (जो डिफ़ॉल्ट व्यवहार के साथ एक प्लगइन शुरू करती है):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

प्रत्येक प्लगइन एक संपत्ति पर अपने कच्चे कंस्ट्रक्टर को भी उजागर करता Constructorहै: $.fn.popover.Constructor. यदि आप एक विशेष प्लगइन इंस्टेंस प्राप्त करना चाहते हैं, तो इसे सीधे किसी तत्व से पुनर्प्राप्त करें: $('[rel="popover"]').data('popover').

डिफ़ॉल्ट सेटिंग्स

Constructor.DEFAULTSआप प्लगइन के ऑब्जेक्ट को संशोधित करके प्लगइन के लिए डिफ़ॉल्ट सेटिंग्स बदल सकते हैं :

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

कोई विवाद नहीं

कभी-कभी अन्य 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)
  }
})

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

बूटस्ट्रैप के प्रत्येक jQuery प्लगइन के संस्करण को VERSIONप्लगइन के निर्माता की संपत्ति के माध्यम से एक्सेस किया जा सकता है। उदाहरण के लिए, टूलटिप प्लगइन के लिए:

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

जावास्क्रिप्ट अक्षम होने पर कोई विशेष फ़ॉलबैक नहीं

जावास्क्रिप्ट अक्षम होने पर बूटस्ट्रैप के प्लगइन्स विशेष रूप से सुंदर ढंग से वापस नहीं आते हैं। यदि आप इस मामले में उपयोगकर्ता अनुभव की परवाह करते हैं, तो अपने उपयोगकर्ताओं <noscript>को स्थिति की व्याख्या करने के लिए उपयोग करें (और जावास्क्रिप्ट को फिर से कैसे सक्षम करें), और/या अपने स्वयं के कस्टम फ़ॉलबैक जोड़ें।

ट्रांज़िशन ट्रांज़िशन.जेएस

संक्रमण के बारे में

सरल संक्रमण प्रभावों के लिए, transition.jsएक बार अन्य JS फ़ाइलों के साथ शामिल करें। यदि आप संकलित (या छोटा) का उपयोग कर रहे हैं bootstrap.js, तो इसे शामिल करने की कोई आवश्यकता नहीं है—यह पहले से मौजूद है।

अंदर क्या है

transitionEndTransition.js ईवेंट के साथ-साथ CSS ट्रांज़िशन एमुलेटर के लिए एक बुनियादी सहायक है । इसका उपयोग अन्य प्लगइन्स द्वारा CSS ट्रांज़िशन सपोर्ट की जाँच करने और हैंगिंग ट्रांज़िशन को पकड़ने के लिए किया जाता है।

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

निम्नलिखित जावास्क्रिप्ट स्निपेट का उपयोग करके संक्रमणों को विश्व स्तर पर अक्षम किया जा सकता है, जो 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 -->

लाइव डेमो

नीचे दिए गए बटन पर क्लिक करके जावास्क्रिप्ट के माध्यम से एक मोडल टॉगल करें। यह नीचे की ओर खिसकेगा और पृष्ठ के शीर्ष से फीका हो जाएगा।

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

ग्रिड सिस्टम का उपयोग करना

एक मोडल के भीतर बूटस्ट्रैप ग्रिड सिस्टम का लाभ उठाने के लिए, बस .rowके भीतर घोंसला बनाएं .modal-bodyऔर फिर सामान्य ग्रिड सिस्टम कक्षाओं का उपयोग करें।

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

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

बटनों का एक गुच्छा है जो सभी एक ही मोडल को ट्रिगर करते हैं, बस थोड़ा अलग सामग्री के साथ? किस बटन पर क्लिक किया गया था, इसके आधार पर मोडल की सामग्री को बदलने के लिए event.relatedTargetHTML विशेषताओं data-*( संभवतः jQuery के माध्यम से ) का उपयोग करें । विवरण के लिए मोडल इवेंट्स डॉक्स देखें relatedTarget,

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

प्रयोग

मोडल प्लगइन आपकी छिपी सामग्री को डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से मांग पर टॉगल करता है। .modal-openयह डिफ़ॉल्ट स्क्रॉलिंग व्यवहार को ओवरराइड करने के लिए भी जोड़ता है और मोडल के बाहर क्लिक करते समय दिखाए गए मॉडल को खारिज करने के लिए एक क्लिक क्षेत्र प्रदान करने के लिए <body>उत्पन्न करता है ।.modal-backdrop

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

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

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

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

myModalजावास्क्रिप्ट की एक पंक्ति के साथ आईडी के साथ एक मोडल को कॉल करें :

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

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें 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...
})

ड्रॉपडाउन ड्रॉपडाउन.जेएस

उदाहरण

नेवबार, टैब और गोलियों सहित इस साधारण प्लगइन के साथ लगभग किसी भी चीज़ में ड्रॉपडाउन मेनू जोड़ें।

एक नवबार के भीतर

गोलियों के भीतर

प्रयोग

.openडेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से, ड्रॉपडाउन प्लगइन मूल सूची आइटम पर वर्ग को टॉगल करके छिपी हुई सामग्री (ड्रॉपडाउन मेनू) को टॉगल करता है ।

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

नोट: data-toggle="dropdown"एप्लिकेशन स्तर पर ड्रॉपडाउन मेनू बंद करने के लिए विशेषता पर भरोसा किया जाता है, इसलिए इसका हमेशा उपयोग करना एक अच्छा विचार है।

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

data-toggle="dropdown"किसी ड्रॉपडाउन को चालू करने के लिए लिंक या बटन में जोड़ें ।

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

विकल्प

कोई भी नहीं

तरीकों

$().dropdown('toggle')

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

आयोजन

सभी ड्रॉपडाउन घटनाओं को .dropdown-menuमूल तत्व पर सक्रिय किया जाता है।

सभी ड्रॉपडाउन घटनाओं में एक relatedTargetसंपत्ति होती है, जिसका मूल्य टॉगलिंग एंकर तत्व होता है।

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

स्क्रॉलस्पाई स्क्रॉलस्पाई.जेएस

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

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

प्रयोग

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

कार्यान्वयन विधि से कोई फर्क नहीं पड़ता, स्क्रॉलस्पी को position: relative;उस तत्व पर उपयोग की आवश्यकता होती है जिस पर आप जासूसी कर रहे हैं। ज्यादातर मामलों में यह है <body>। के अलावा अन्य तत्वों पर स्क्रॉल करते समय , एक सेट और लागू <body>होना सुनिश्चित करें ।heightoverflow-y: scroll;

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

अपने टॉपबार नेविगेशन में आसानी से स्क्रॉलस्पी व्यवहार जोड़ने data-spy="scroll"के लिए, उस तत्व में जोड़ें जिसे आप जासूसी करना चाहते हैं (आमतौर पर यह होगा <body>)। फिर किसी बूटस्ट्रैप घटक data-targetके मूल तत्व की आईडी या वर्ग के साथ विशेषता जोड़ें।.nav

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

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

अपने सीएसएस में जोड़ने के बाद position: relative;, जावास्क्रिप्ट के माध्यम से स्क्रॉलस्पी को कॉल करें:

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

तरीकों

.scrollspy('refresh')

डीओएम से तत्वों को जोड़ने या हटाने के संयोजन के साथ स्क्रॉलस्पी का उपयोग करते समय, आपको रीफ्रेश विधि को इस तरह कॉल करना होगा:

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

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-, जैसा कि में है data-offset=""।

आयोजन

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

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

उदाहरण टैब

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

प्रयोग

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

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

आप अलग-अलग टैब को कई तरह से सक्रिय कर सकते हैं:

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

मार्कअप

आप किसी भी जावास्क्रिप्ट को लिखे बिना एक टैब या गोली नेविगेशन को केवल निर्दिष्ट करके data-toggle="tab"या data-toggle="pill"किसी तत्व पर सक्रिय कर सकते हैं। टैब में navऔर कक्षाएं जोड़ने से बूटस्ट्रैप टैब स्टाइल लागू होगा , जबकि और कक्षाएं जोड़ने पर पिल स्टाइल लागू होगी ।nav-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

एक टैब तत्व और सामग्री कंटेनर को सक्रिय करता है। टैब में या तो एक 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
})

टूलटिप्स टूलटिप.जेएस

जेसन फ्रेम द्वारा लिखित उत्कृष्ट jQuery.tips प्लगइन से प्रेरित; टूलटिप्स एक अद्यतन संस्करण हैं, जो छवियों पर भरोसा नहीं करते हैं, एनिमेशन के लिए 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()
})

प्रयोग

टूलटिप प्लगइन मांग पर सामग्री और मार्कअप उत्पन्न करता है, और डिफ़ॉल्ट रूप से टूलटिप्स को उनके ट्रिगर तत्व के बाद रखता है।

जावास्क्रिप्ट के माध्यम से टूलटिप को ट्रिगर करें:

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

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें 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…
})

पॉपओवर 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>

प्रयोग

जावास्क्रिप्ट के माध्यम से पॉपओवर सक्षम करें:

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

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें 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…
})

अलर्ट संदेश अलर्ट.जेएस

उदाहरण अलर्ट

इस प्लगइन के साथ सभी अलर्ट संदेशों में बर्खास्तगी कार्यक्षमता जोड़ें।

एक .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…
})

बटन बटन.जेएस

बटन के साथ और अधिक करें। नियंत्रण बटन बताता है या टूलबार जैसे अधिक घटकों के लिए बटनों के समूह बनाता है।

स्टेटफुल

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>

संक्षिप्त करें संक्षिप्त करें.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 जोड़ें। एट्रिब्यूट सीएसएस चयनकर्ता को पतन लागू करने के लिए स्वीकार करता है data-target। कक्षा को संक्षिप्त करने योग्य तत्व में data-targetजोड़ना सुनिश्चित करें । collapseयदि आप इसे डिफ़ॉल्ट रूप से खोलना चाहते हैं, तो अतिरिक्त वर्ग जोड़ें in।

एक संक्षिप्त नियंत्रण में अकॉर्डियन जैसा समूह प्रबंधन जोड़ने के लिए, डेटा विशेषता जोड़ें data-parent="#selector"। इसे क्रिया में देखने के लिए डेमो देखें।

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

इसके साथ मैन्युअल रूप से सक्षम करें:

$('.collapse').collapse()

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें 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…
})

हिंडोला हिंडोला .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 को वहां रखें और यह स्वचालित रूप से संरेखित और स्वरूपित हो जाएगा।

पहला स्लाइड लेबल

नुल्ला विटे एलीट लिबरो, एक फेरेट्रा ऑग मोलिस इंटरडम।

दूसरा स्लाइड लेबल

लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट।

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

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"उपयोग कैरोसल को पेज लोड होने पर एनिमेटिंग के रूप में चिह्नित करने के लिए किया जाता है। इसका उपयोग (अनावश्यक और अनावश्यक) एक ही हिंडोला के स्पष्ट जावास्क्रिप्ट आरंभीकरण के संयोजन में नहीं किया जा सकता है।

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

कैरोसेल को इसके साथ मैन्युअल रूप से कॉल करें:

$('.carousel').carousel()

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें 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

उदाहरण

affix प्लगइन position: fixed;के साथ पाए गए प्रभाव का अनुकरण करते हुए, चालू और बंद टॉगल करता है position: sticky;। दाईं ओर सबनेविगेशन एफिक्स प्लगइन का लाइव डेमो है।

प्रयोग

डेटा विशेषताओं के माध्यम से या अपने स्वयं के जावास्क्रिप्ट के साथ मैन्युअल रूप से एफ़िक्स प्लगइन का उपयोग करें। दोनों ही स्थितियों में, आपको अपनी चिपकाई गई सामग्री की स्थिति और चौड़ाई के लिए CSS प्रदान करनी होगी।

नोट: सफ़ारी रेंडरिंग बग के कारण किसी अपेक्षाकृत स्थित तत्व में निहित तत्व, जैसे खींचे गए या पुश किए गए कॉलम पर एफ़िक्स प्लगइन का उपयोग न करें ।

सीएसएस के माध्यम से पोजिशनिंग

एफिक्स प्लगइन तीन वर्गों के बीच टॉगल करता है, प्रत्येक एक विशेष स्थिति का प्रतिनिधित्व करता है: .affix, .affix-top, और .affix-bottom। position: fixed;वास्तविक स्थिति को .affixसंभालने के लिए आपको इन वर्गों के लिए स्वयं (इस प्लगइन से स्वतंत्र) के अपवाद के साथ शैलियों को प्रदान करना होगा ।

यहां बताया गया है कि एफिक्स प्लगइन कैसे काम करता है:

1. शुरू करने के लिए, प्लगइन यह इंगित करने के लिए जोड़ता .affix-topहै कि तत्व अपनी सबसे ऊपरी स्थिति में है। इस बिंदु पर कोई सीएसएस स्थिति की आवश्यकता नहीं है।
2. जिस तत्व को आप चिपकाना चाहते हैं, उसके पीछे स्क्रॉल करने से वास्तविक एफ़िक्सिंग ट्रिगर हो जाना चाहिए। यह वह जगह है जहां .affixप्रतिस्थापित .affix-topऔर सेट position: fixed;(बूटस्ट्रैप के सीएसएस द्वारा प्रदान किया गया)।
3. .affixयदि एक निचला ऑफ़सेट परिभाषित किया गया है, तो पिछले स्क्रॉलिंग को इसके साथ बदलना चाहिए .affix-bottom। चूंकि ऑफ़सेट वैकल्पिक हैं, इसलिए किसी एक को सेट करने के लिए आपको उपयुक्त सीएसएस सेट करना होगा। इस मामले में, position: absolute;जब आवश्यक हो तो जोड़ें। प्लगइन डेटा विशेषता या जावास्क्रिप्ट विकल्प का उपयोग यह निर्धारित करने के लिए करता है कि तत्व को वहां से कहां रखा जाए।

नीचे दिए गए किसी भी उपयोग विकल्प के लिए अपना सीएसएस सेट करने के लिए उपरोक्त चरणों का पालन करें।

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

किसी भी तत्व में आसानी से प्रत्यय व्यवहार जोड़ने 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"।

तरीकों

.affix(options)

आपकी सामग्री को चिपकाई गई सामग्री के रूप में सक्रिय करता है। एक वैकल्पिक विकल्प स्वीकार करता है object।

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

.affix('checkPosition')

प्रासंगिक तत्वों के आयाम, स्थिति और स्क्रॉल स्थिति के आधार पर प्रत्यय की स्थिति का पुनर्गणना करता है। नई स्थिति के अनुसार चिपकाई गई सामग्री में , , और कक्षाएं जोड़ी जाती हैं या हटा दी जाती .affixहैं .affix-top। .affix-bottomचिपकाई गई सामग्री की सही स्थिति सुनिश्चित करने के लिए, जब भी चिपकाई गई सामग्री या लक्ष्य तत्व के आयाम बदले जाते हैं, तो इस पद्धति को कॉल करने की आवश्यकता होती है।

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

आयोजन

बूटस्ट्रैप का एफ़िक्स प्लगइन एफ़िक्स कार्यक्षमता में हुक करने के लिए कुछ घटनाओं को उजागर करता है।