अवलोकन

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

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

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

दोनों bootstrap.jsऔर bootstrap.min.jsएक ही फाइल में सभी प्लगइन्स शामिल हैं। केवल एक शामिल करें।

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

कुछ प्लगइन्स और CSS घटक अन्य प्लगइन्स पर निर्भर करते हैं। यदि आप अलग-अलग प्लगइन्स शामिल करते हैं, तो डॉक्स में इन निर्भरताओं की जांच करना सुनिश्चित करें। यह भी ध्यान दें कि सभी प्लगइन्स jQuery पर निर्भर करते हैं (इसका मतलब है कि प्लगइन फाइलों से पहले jQuery को शामिल किया जाना चाहिए)। यह देखने के लिए हमसे परामर्श करेंbower.json कि jQuery के कौन से संस्करण समर्थित हैं।

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

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

उस ने कहा, कुछ स्थितियों में इस कार्यक्षमता को बंद करना वांछनीय हो सकता है। इसलिए, हम नामस्थान वाले दस्तावेज़ पर सभी ईवेंट को अनबाइंड करके डेटा विशेषता 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
})

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

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

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

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

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

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

बूटस्ट्रैप आधिकारिक तौर पर प्रोटोटाइप या jQuery UI जैसी तृतीय-पक्ष JavaScript लाइब्रेरी का समर्थन नहीं करता है । घटनाओं के नाम के बावजूद .noConflict, संगतता समस्याएं हो सकती हैं जिन्हें आपको स्वयं ठीक करने की आवश्यकता है।

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

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

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

अंदर क्या है

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

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

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

$.support.transition = false

मॉडल modal.js

मॉडल सुव्यवस्थित हैं, लेकिन लचीले हैं, संवाद न्यूनतम आवश्यक कार्यक्षमता और स्मार्ट डिफ़ॉल्ट के साथ संकेत देता है।

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

सुनिश्चित करें कि एक मोडल न खोलें जबकि दूसरा अभी भी दिखाई दे रहा है। एक समय में एक से अधिक मोडल दिखाने के लिए कस्टम कोड की आवश्यकता होती है।

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

मोडल की उपस्थिति और/या कार्यक्षमता को प्रभावित करने वाले अन्य घटकों से बचने के लिए हमेशा अपने दस्तावेज़ में एक मॉडल के HTML कोड को शीर्ष-स्तरीय स्थिति में रखने का प्रयास करें।

मोबाइल डिवाइस चेतावनी

मोबाइल उपकरणों पर मोडल का उपयोग करने के संबंध में कुछ चेतावनी हैं। विवरण के लिए हमारे ब्राउज़र समर्थन दस्तावेज़ देखें।

HTML5 अपने शब्दार्थ को कैसे परिभाषित करता है, इसके कारण autofocusबूटस्ट्रैप मोडल में HTML विशेषता का कोई प्रभाव नहीं पड़ता है। समान प्रभाव प्राप्त करने के लिए, कुछ कस्टम JavaScript का उपयोग करें:

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

उदाहरण

स्थिर उदाहरण

हेडर, बॉडी और फ़ुटर में क्रियाओं के सेट के साथ एक रेंडर किया गया मोडल।

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

लाइव डेमो

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

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

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

मोडल को सुलभ बनाएं

मोडल शीर्षक को , से , और स्वयं में जोड़ना role="dialog"और , जोड़ना सुनिश्चित करें ।aria-labelledby="...".modalrole="document".modal-dialog

aria-describedbyइसके अतिरिक्त, आप ऑन के साथ अपने मोडल डायलॉग का विवरण दे सकते हैं .modal

YouTube वीडियो एम्बेड करना

YouTube वीडियो को मोडल में एम्बेड करने के लिए अतिरिक्त जावास्क्रिप्ट की आवश्यकता होती है, न कि बूटस्ट्रैप में स्वचालित रूप से प्लेबैक को रोकने के लिए और बहुत कुछ। अधिक जानकारी के लिए यह सहायक स्टैक ओवरफ़्लो पोस्ट देखें।

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

मॉडल में दो वैकल्पिक आकार होते हैं, जो संशोधक वर्गों के माध्यम से उपलब्ध होते हैं जिन्हें .modal-dialog.

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

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

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

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

एनिमेशन हटाएं

उन मोडल के लिए जो देखने में फीके होने के बजाय बस दिखाई देते हैं, .fadeअपने मोडल मार्कअप से क्लास को हटा दें।

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

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

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

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

बटनों का एक गुच्छा है जो सभी एक ही मोडल को ट्रिगर करते हैं, बस थोड़ा अलग सामग्री के साथ? किस बटन पर क्लिक किया गया था, इसके आधार पर मोडल की सामग्री को बदलने के लिए 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=""

नाम प्रकार चूक विवरण
पृष्ठभूमि बूलियन या स्ट्रिंग'static' सच एक मोडल-बैकड्रॉप तत्व शामिल है। वैकल्पिक रूप से, उस पृष्ठभूमि के लिए निर्दिष्ट करें staticजो क्लिक पर मोडल को बंद नहीं करता है।
कीबोर्ड बूलियन सच एस्केप कुंजी दबाए जाने पर मोडल बंद कर देता है
प्रदर्शन बूलियन सच प्रारंभ होने पर मोडल दिखाता है।
दूर रास्ता असत्य

यह विकल्प v3.3.0 से हटा दिया गया है और v4 में हटा दिया गया है। हम इसके बजाय क्लाइंट-साइड टेम्प्लेटिंग या डेटा बाइंडिंग फ्रेमवर्क का उपयोग करने या jQuery.load को स्वयं कॉल करने की सलाह देते हैं।

यदि एक दूरस्थ URL प्रदान किया जाता है, तो सामग्री को एक बार jQuery की विधि के माध्यम से लोड किया जाएगा और div में इंजेक्ट किया जाएगा। यदि आप डेटा-एपीआई का उपयोग कर रहे हैं, तो आप वैकल्पिक रूप से दूरस्थ स्रोत को निर्दिष्ट करने के लिए विशेषता का उपयोग कर सकते हैं। इसका एक उदाहरण नीचे दिखाया गया है:load.modal-contenthref

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

तरीकों

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

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

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

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

मैन्युअल रूप से एक मोडल खोलता है। मोडल वास्तव में दिखाया गया है (यानी shown.bs.modalघटना होने से पहले) कॉलर को वापस लौटाता है।

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

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

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

स्क्रॉलबार का सामना करने के लिए मोडल की स्थिति को फिर से समायोजित करता है यदि कोई प्रकट होना चाहिए, जिससे मोडल बाईं ओर कूद जाएगा।

केवल तभी जरूरत होती है जब मोडल की ऊंचाई खुली होने पर बदल जाती है।

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

आयोजन

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

सभी मोडल इवेंट को मोडल पर ही (यानी पर <div class="modal">) निकाल दिया जाता है।

घटना प्रकार विवरण
शो.बीएस.मोडल showइंस्टेंस विधि को कॉल करने पर यह घटना तुरंत सक्रिय हो जाती है। यदि एक क्लिक के कारण होता है, तो क्लिक किया गया तत्व relatedTargetघटना की संपत्ति के रूप में उपलब्ध होता है।
दिखाया गया.बीएस.मोडल यह घटना तब सक्रिय हो जाती है जब मोडल को उपयोगकर्ता के लिए दृश्यमान बना दिया जाता है (सीएसएस संक्रमणों के पूरा होने की प्रतीक्षा करेगा)। यदि एक क्लिक के कारण होता है, तो क्लिक किया गया तत्व relatedTargetघटना की संपत्ति के रूप में उपलब्ध होता है।
छुपाएं.बीएस.मोडल hideइंस्टेंस विधि को कॉल किए जाने पर इस घटना को तुरंत निकाल दिया जाता है।
हिडन.बीएस.मोडल इस घटना को निकाल दिया जाता है जब मोडल उपयोगकर्ता से छुपाया जा रहा है (सीएसएस संक्रमण पूरा होने की प्रतीक्षा करेगा)।
लोडेड.बीएस.मोडल इस घटना को निकाल दिया जाता है जब मोडल ने remoteविकल्प का उपयोग करके सामग्री लोड की है।
$('#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()

data-toggle="dropdown"अभी भी आवश्यक

भले ही आप अपने ड्रॉपडाउन को जावास्क्रिप्ट के माध्यम से कॉल करें या इसके बजाय डेटा-एपीआई का उपयोग करें, data-toggle="dropdown"ड्रॉपडाउन के ट्रिगर तत्व पर हमेशा उपस्थित होना आवश्यक है।

कोई भी नहीं

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

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

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

घटना प्रकार विवरण
शो.बीएस.ड्रॉपडाउन जब शो इंस्टेंस विधि कहा जाता है तो यह घटना तुरंत सक्रिय हो जाती है।
दिखाया गया.bs.ड्रॉपडाउन यह घटना तब सक्रिय होती है जब उपयोगकर्ता को ड्रॉपडाउन दिखाई देता है (सीएसएस संक्रमणों के पूरा होने की प्रतीक्षा करेगा)।
छुपाएं.bs.ड्रॉपडाउन जब छुपा इंस्टेंस विधि कहा जाता है तो इस घटना को तुरंत निकाल दिया जाता है।
छिपा हुआ.bs.ड्रॉपडाउन यह घटना तब सक्रिय होती है जब ड्रॉपडाउन उपयोगकर्ता से छिपा हुआ समाप्त हो जाता है (सीएसएस संक्रमणों के पूरा होने की प्रतीक्षा करेगा)।
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

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

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

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

@मोटा

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

@mdo

वेनियम मार्फा मूंछें स्केटबोर्ड, एडिपिसिसिंग फुगियाट वेलिट पिचफोर्क दाढ़ी। फ़्रीगन बियर्ड एलिका क्यूपिडेटाट मैकस्वीनी का वेरो. कामदेव चार लोको निसी, ईए हेल्वेटिका नल्ला कार्ल्स। टैटू वाला कॉस्बी स्वेटर फूड ट्रक, मैकस्वीनी का क्विस नॉन फ्रीगन विनाइल। लो-फाई वेस एंडरसन +1 सार्टोरियल। कार्ल्स नॉन एस्थेटिक एक्सरसाइज क्विज़ जेंट्रीफाई। ब्रुकलिन एडिपिसिसिंग क्राफ्ट बीयर वाइस कीटर डेसेरुंट।

एक

ओसीकैट कमोडो एलिका डेलेक्टस। फैप क्राफ्ट बियर डेज़रुंट स्केटबोर्ड ईए। लोमो साइकिल राइट्स एडिपिसिसिंग बन मील, वेलिट ईए सनट नेक्स्ट लेवल लोकावोर सिंगल-ओरिजिन कॉफ़ी इन मैग्ना वेनियम। हाई लाइफ आईडी विनाइल, इको पार्क कॉन्सेक्वेट क्विस एलिक्विप बन मील पिचफोर्क। वेरो वीएचएस एस्ट एडिपिसिसिंग। कॉन्सेक्टेटूर निसी DIY मिनिम मैसेंजर बैग। क्रेडिट एक्स इन, सस्टेनेबल डेलेक्टस कॉन्सेक्टेचर फैनी पैक आईफोन।

दो

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

three

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

Keytar twee ब्लॉग, culpa मैसेंजर बैग मारफा जो भी डेलेक्टस फूड ट्रक है। Sapiente synth id ग्रहण. लोकावोर सेड हेल्वेटिका क्लिच विडंबना, थंडरकैट्स जो आपने शायद उनके बारे में नहीं सुना है, परिणामस्वरूप हूडि ग्लूटेन-फ्री लो-फाई फैप एलिक्विप। लैबोरे एलीट प्लेसैट से पहले वे बिक गए, टेरी रिचर्डसन प्रॉडेंट ब्रंच नेस्क्यूंट क्विस कॉस्बी स्वेटर परियातुर केफियेह यूट हेल्वेटिका कारीगर। कार्डिगन क्राफ्ट बीयर सीटन रेडीमेड वेलिट। वीएचएस चेम्ब्रे लेबरिस टेम्पोर वेनिअम। एनिम मोलिट मिनिम कमोडो उलमको थंडरकैट्स।

प्रयोग

बूटस्ट्रैप एनएवी की आवश्यकता है

स्क्रॉलस्पी को वर्तमान में सक्रिय लिंक के उचित हाइलाइटिंग के लिए बूटस्ट्रैप एनएवी घटक के उपयोग की आवश्यकता है।

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

नेवबार लिंक में समाधान योग्य आईडी लक्ष्य होने चाहिए। उदाहरण के लिए, <a href="#home">home</a>डोम में किसी चीज़ के अनुरूप होना चाहिए जैसे <div id="home"></div>.

गैर- :visibleलक्षित तत्वों पर ध्यान नहीं दिया गया

लक्ष्य तत्व जो :visiblejQuery के अनुसार नहीं हैं उन्हें अनदेखा कर दिया जाएगा और उनके संबंधित एनएवी आइटम को कभी भी हाइलाइट नहीं किया जाएगा।

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

कार्यान्वयन विधि से कोई फर्क नहीं पड़ता, स्क्रॉलस्पी को 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=""

नाम प्रकार चूक विवरण
ओफ़्सेट संख्या 10 स्क्रॉल की स्थिति की गणना करते समय ऊपर से ऑफ़सेट करने के लिए पिक्सेल।

आयोजन

घटना प्रकार विवरण
सक्रिय करें.bs.scrollspy जब भी कोई नया आइटम स्क्रॉलस्पी द्वारा सक्रिय हो जाता है तो यह घटना सक्रिय हो जाती है।
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

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

उदाहरण टैब

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

कच्चा डेनिम आपने शायद उनके बारे में नहीं सुना होगा जीन शॉर्ट्स ऑस्टिन। नेस्कियंट टोफू स्टंपटाउन एलिका, रेट्रो सिंथेस मास्टर क्लीन्ज़। मूंछें क्लिच टेम्पोर, विलियम्सबर्ग कार्ल्स वेगन हेल्वेटिका। रेप्रेहेंडरिट कसाई रेट्रो केफियेह ड्रीमकैचर सिंथेस। कॉस्बी स्वेटर यू बान मील, क्वी इरुरे टेरी रिचर्डसन एक्स स्क्वीड। एलिकिप प्लेसैट साल्विया सिलम आईफोन। सीटान एलिक्विप क्विस कार्डिगन अमेरिकन अपैरल, कसाई वोलुप्टेट निसी क्यूई।

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

टैब्ड नेविगेशन बढ़ाता है

यह प्लगइन टैब करने योग्य क्षेत्रों को जोड़ने के लिए टैब्ड नेविगेशन घटक का विस्तार करता है।

प्रयोग

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

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

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

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

मार्कअप

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

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

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

जेसन फ्रेम द्वारा लिखित उत्कृष्ट jQuery.tips प्लगइन से प्रेरित; टूलटिप्स एक अद्यतन संस्करण हैं, जो छवियों पर भरोसा नहीं करते हैं, एनिमेशन के लिए CSS3 का उपयोग करते हैं, और स्थानीय शीर्षक भंडारण के लिए डेटा-विशेषताएं।

शून्य-लंबाई वाले शीर्षक वाले टूलटिप्स कभी प्रदर्शित नहीं होते हैं।

उदाहरण

टूलटिप्स देखने के लिए नीचे दिए गए लिंक पर होवर करें:

अगले स्तर की टाइट पैंट आपने शायद उनके बारे में नहीं सुना होगा। फोटो बूथ दाढ़ी कच्ची डेनिम लेटरप्रेस शाकाहारी मैसेंजर बैग स्टंपटाउन। फार्म-टू-टेबल सीटन, मैकस्वीनी के फिक्स टिकाऊ क्विनोआ 8-बिट अमेरिकी परिधान में टेरी रिचर्डसन विनाइल चेम्ब्रे है। बियर्ड स्टंपटाउन, कार्डिगन बन मील लोमो थंडरकैट्स। टोफू बायोडीजल विलियम्सबर्ग मार्फा, फोर लोको मैकस्वीनी का शुद्ध शाकाहारी चंब्रे। वास्तव में एक विडंबनापूर्ण कारीगर जो कुछ भी कीटर , सीनस्टर फार्म-टू-टेबल बैंकी ऑस्टिन ट्विटर हैंडल फ्रीगन क्रेडिट रॉ डेनिम सिंगल-ओरिजिन कॉफी वायरल।

स्टेटिक टूलटिप

चार विकल्प उपलब्ध हैं: ऊपर, दाएँ, नीचे और बाएँ संरेखित।

चार दिशाएं

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

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

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

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

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

प्रदर्शन कारणों से, टूलटिप और पॉपओवर डेटा-एपिस ऑप्ट-इन हैं, जिसका अर्थ है कि आपको उन्हें स्वयं प्रारंभ करना होगा

किसी पृष्ठ पर सभी टूलटिप्स को प्रारंभ करने का एक तरीका यह होगा कि उन्हें उनकी data-toggleविशेषता के आधार पर चुना जाए:

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

प्रयोग

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

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

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

मार्कअप

टूलटिप के लिए आवश्यक मार्कअप केवल एक dataविशेषता है और titleHTML तत्व पर आप टूलटिप रखना चाहते हैं। टूलटिप का उत्पन्न मार्कअप अपेक्षाकृत सरल है, हालांकि इसके लिए एक स्थिति की आवश्यकता होती है (डिफ़ॉल्ट रूप से, topप्लगइन द्वारा सेट)।

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

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

एकाधिक-पंक्ति लिंक

कभी-कभी आप हाइपरलिंक में एक टूलटिप जोड़ना चाहते हैं जो कई पंक्तियों को लपेटता है। टूलटिप प्लगइन का डिफ़ॉल्ट व्यवहार इसे क्षैतिज और लंबवत रूप से केन्द्रित करना है। white-space: nowrap;इससे बचने के लिए अपने एंकर में शामिल करें ।

बटन समूहों, इनपुट समूहों और तालिकाओं में टूलटिप्स के लिए विशेष सेटिंग की आवश्यकता होती है

.btn-groupa या a के भीतर .input-groupया तालिका-संबंधित तत्वों ( <td>, <th>, <tr>, <thead>, <tbody>, ) के तत्वों पर टूलटिप्स का उपयोग करते समय , आपको अवांछित दुष्प्रभावों से बचने <tfoot>के लिए विकल्प (नीचे प्रलेखित) निर्दिष्ट करना होगा (जैसे कि तत्व व्यापक रूप से बढ़ रहा है और/ container: 'body'या टूलटिप के चालू होने पर इसके गोल कोनों को खोना)।

छिपे हुए तत्वों पर टूलटिप दिखाने की कोशिश न करें

$(...).tooltip('show')लक्ष्य तत्व होने पर display: none;कॉल करने से टूलटिप गलत स्थिति में आ जाएगा।

कीबोर्ड और सहायक प्रौद्योगिकी उपयोगकर्ताओं के लिए सुलभ टूलटिप्स

कीबोर्ड से नेविगेट करने वाले उपयोगकर्ताओं के लिए, और विशेष रूप से सहायक तकनीकों के उपयोगकर्ताओं के लिए, आपको केवल कीबोर्ड-फ़ोकस करने योग्य तत्वों जैसे लिंक, प्रपत्र नियंत्रण, या किसी tabindex="0"विशेषता वाले किसी भी मनमाने तत्व में टूलटिप्स जोड़ना चाहिए।

अक्षम तत्वों पर टूलटिप्स के लिए रैपर तत्वों की आवश्यकता होती है

disabledकिसी या .disabledतत्व में टूलटिप जोड़ने के लिए , तत्व को a के अंदर रखें और इसके बजाय <div>टूलटिप को उस पर लागू करें ।<div>

विकल्प

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

नाम टाइप चूक विवरण
एनीमेशन बूलियन सच टूलटिप पर CSS फ़ेड ट्रांज़िशन लागू करें
पात्र स्ट्रिंग | असत्य असत्य

टूलटिप को एक विशिष्ट तत्व में जोड़ता है। उदाहरण container: 'body':। यह विकल्प विशेष रूप से उपयोगी है क्योंकि यह आपको टूलटिप को ट्रिगरिंग तत्व के पास दस्तावेज़ के प्रवाह में रखने की अनुमति देता है - जो टूलटिप को विंडो आकार बदलने के दौरान ट्रिगरिंग तत्व से दूर तैरने से रोकेगा।

देरी संख्या | वस्तु 0

टूलटिप (एमएस) दिखाने और छिपाने में देरी - मैन्युअल ट्रिगर प्रकार पर लागू नहीं होती है

यदि एक नंबर की आपूर्ति की जाती है, तो देरी को छिपाने/दिखाने दोनों पर लागू किया जाता है

वस्तु संरचना है:delay: { "show": 500, "hide": 100 }

एचटीएमएल बूलियन असत्य टूलटिप में HTML डालें। यदि गलत है, textतो DOM में सामग्री डालने के लिए jQuery की विधि का उपयोग किया जाएगा। यदि आप XSS हमलों के बारे में चिंतित हैं तो टेक्स्ट का उपयोग करें।
प्लेसमेंट स्ट्रिंग | समारोह 'ऊपर'

टूलटिप की स्थिति कैसे बनाएं - शीर्ष | नीचे | बाएं | सही | ऑटो।
जब "ऑटो" निर्दिष्ट किया जाता है, तो यह टूलटिप को गतिशील रूप से पुनर्व्यवस्थित करेगा। उदाहरण के लिए, यदि प्लेसमेंट "ऑटो लेफ्ट" है, तो टूलटिप संभव होने पर बाईं ओर प्रदर्शित होगी, अन्यथा यह दाईं ओर प्रदर्शित होगी।

जब किसी फ़ंक्शन का उपयोग प्लेसमेंट को निर्धारित करने के लिए किया जाता है, तो इसे टूलटिप DOM नोड को इसके पहले तर्क के रूप में और ट्रिगर करने वाले तत्व DOM नोड को इसके दूसरे के रूप में कहा जाता है। thisसंदर्भ टूलटिप इंस्टेंस पर सेट है ।

चयनकर्ता डोरी असत्य यदि कोई चयनकर्ता प्रदान किया जाता है, तो टूलटिप ऑब्जेक्ट निर्दिष्ट लक्ष्यों को सौंपे जाएंगे। व्यवहार में, इसका उपयोग गतिशील HTML सामग्री को टूलटिप्स जोड़ने के लिए सक्षम करने के लिए किया जाता है। इसे और एक सूचनात्मक उदाहरण देखें ।
टेम्पलेट डोरी '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

टूलटिप बनाते समय उपयोग के लिए आधार HTML।

टूलटिप titleमें इंजेक्ट किया जाएगा .tooltip-inner

.tooltip-arrowटूलटिप का तीर बन जाएगा।

सबसे बाहरी आवरण तत्व में .tooltipवर्ग होना चाहिए।

शीर्षक स्ट्रिंग | समारोह ''

डिफ़ॉल्ट शीर्षक मान यदि titleविशेषता मौजूद नहीं है।

यदि कोई फ़ंक्शन दिया जाता है, तो उसे उस तत्व के संदर्भ सेट के साथ बुलाया जाएगा, thisजिससे टूलटिप जुड़ा हुआ है।

चालू कर देना डोरी 'होवर फोकस' टूलटिप कैसे ट्रिगर होता है - क्लिक करें | होवर | फोकस | नियमावली। आप कई ट्रिगर पास कर सकते हैं; उन्हें एक स्थान से अलग करें। manualकिसी अन्य ट्रिगर के साथ जोड़ा नहीं जा सकता।
व्यूपोर्ट स्ट्रिंग | वस्तु | समारोह {चयनकर्ता: 'बॉडी', पैडिंग: 0}

टूलटिप को इस तत्व की सीमा के भीतर रखता है। उदाहरण: viewport: '#viewport'या{ "selector": "#viewport", "padding": 0 }

यदि कोई फ़ंक्शन दिया जाता है, तो इसे ट्रिगरिंग तत्व DOM नोड के साथ एकमात्र तर्क के रूप में कहा जाता है। thisसंदर्भ टूलटिप इंस्टेंस पर सेट है ।

व्यक्तिगत टूलटिप्स के लिए डेटा विशेषताएँ

अलग-अलग टूलटिप्स के विकल्प वैकल्पिक रूप से डेटा विशेषताओं के उपयोग के माध्यम से निर्दिष्ट किए जा सकते हैं, जैसा कि ऊपर बताया गया है।

तरीकों

$().tooltip(options)

तत्व संग्रह में टूलटिप हैंडलर संलग्न करता है।

.tooltip('show')

किसी तत्व के टूलटिप को प्रकट करता है। टूलटिप के वास्तव में दिखाए जाने से पहले कॉलर को लौटाता है (अर्थात shown.bs.tooltipघटना घटित होने से पहले)। इसे टूलटिप का "मैनुअल" ट्रिगर माना जाता है। शून्य-लंबाई वाले शीर्षक वाले टूलटिप्स कभी प्रदर्शित नहीं होते हैं।

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

.tooltip('hide')

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

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

.tooltip('toggle')

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

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

.tooltip('destroy')

किसी तत्व के टूलटिप को छुपाता और नष्ट करता है। डेलिगेशन का उपयोग करने वाले टूलटिप्स (जो विकल्प का उपयोग करकेselector बनाए गए हैं ) को डिसेंडेंट ट्रिगर तत्वों पर व्यक्तिगत रूप से नष्ट नहीं किया जा सकता है।

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

आयोजन

घटना प्रकार विवरण
शो.बीएस.टूलटिप showइंस्टेंस विधि को कॉल करने पर यह घटना तुरंत सक्रिय हो जाती है।
दिखाया गया.बीएस.टूलटिप इस घटना को तब सक्रिय किया जाता है जब टूलटिप को उपयोगकर्ता के लिए दृश्यमान बना दिया जाता है (सीएसएस संक्रमणों के पूरा होने की प्रतीक्षा करेगा)।
Hide.bs.tooltip hideइंस्टेंस विधि को कॉल किए जाने पर इस घटना को तुरंत निकाल दिया जाता है।
हिडन.बीएस.टूलटिप यह घटना तब सक्रिय हो जाती है जब टूलटिप उपयोगकर्ता से छिपा हुआ समाप्त हो जाता है (सीएसएस संक्रमणों के पूरा होने की प्रतीक्षा करेगा)।
इन्सर्टेड.बीएस.टूलटिप यह घटना उस show.bs.tooltipघटना के बाद सक्रिय हो जाती है जब टूलटिप टेम्पलेट को DOM में जोड़ा जाता है।
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

पॉपओवर popover.js

माध्यमिक जानकारी रखने के लिए किसी भी तत्व में सामग्री के छोटे ओवरले जोड़ें, जैसे कि iPad पर।

पॉपओवर जिनके शीर्षक और सामग्री दोनों शून्य-लंबाई वाले हैं, कभी प्रदर्शित नहीं होते हैं।

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

पॉपओवर को टूलटिप प्लगइन को आपके बूटस्ट्रैप के संस्करण में शामिल करने की आवश्यकता होती है।

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

प्रदर्शन कारणों से, टूलटिप और पॉपओवर डेटा-एपिस ऑप्ट-इन हैं, जिसका अर्थ है कि आपको उन्हें स्वयं प्रारंभ करना होगा

किसी पृष्ठ पर सभी पॉपओवर प्रारंभ करने का एक तरीका यह होगा कि आप उन्हें उनकी data-toggleविशेषता के अनुसार चुनें:

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

बटन समूहों, इनपुट समूहों और तालिकाओं में पॉपओवर के लिए विशेष सेटिंग की आवश्यकता होती है

.btn-groupa या a के भीतर .input-groupया तालिका-संबंधित तत्वों ( <td>, <th>, <tr>, <thead>, <tbody>, ) के तत्वों पर पॉपओवर का उपयोग करते समय , आपको अवांछित दुष्प्रभावों से बचने <tfoot>के लिए विकल्प (नीचे प्रलेखित) निर्दिष्ट करना होगा (जैसे कि तत्व व्यापक रूप से बढ़ रहा है और/ container: 'body'या अपने गोल कोनों को खोना जब पॉपओवर शुरू हो जाता है)।

छिपे हुए तत्वों पर पॉपओवर दिखाने की कोशिश न करें

$(...).popover('show')लक्ष्य तत्व होने पर आह्वान करने से पॉपओवर display: none;गलत तरीके से स्थित हो जाएगा।

अक्षम तत्वों पर पॉपओवर के लिए रैपर तत्वों की आवश्यकता होती है

disabledकिसी या .disabledतत्व में पॉपओवर जोड़ने के लिए , तत्व को a के अंदर रखें और इसके बजाय <div>पॉपओवर लागू करें ।<div>

एकाधिक-पंक्ति लिंक

कभी-कभी आप एक हाइपरलिंक में एक पॉपओवर जोड़ना चाहते हैं जो कई पंक्तियों को लपेटता है। पॉपओवर प्लगइन का डिफ़ॉल्ट व्यवहार इसे क्षैतिज और लंबवत रूप से केंद्रित करना है। white-space: nowrap;इससे बचने के लिए अपने एंकर में शामिल करें ।

उदाहरण

स्टेटिक पॉपओवर

चार विकल्प उपलब्ध हैं: ऊपर, दाएँ, नीचे और बाएँ संरेखित।

पॉपओवर टॉप

सेड पोसुरे कॉन्सेक्टेटुर एस्ट और लोबोर्टिस। ऐनियन यू लियो क्वाम। पेलेंटेस्क ऑर्नारे सेम लैकिनिया क्वाम वेनेनेटिस वेस्टिबुलम।

पॉपओवर अधिकार

सेड पोसुरे कॉन्सेक्टेटुर एस्ट और लोबोर्टिस। ऐनियन यू लियो क्वाम। पेलेंटेस्क ऑर्नारे सेम लैकिनिया क्वाम वेनेनेटिस वेस्टिबुलम।

पॉपओवर नीचे

सेड पोसुरे कॉन्सेक्टेटुर एस्ट और लोबोर्टिस। ऐनियन यू लियो क्वाम। पेलेंटेस्क ऑर्नारे सेम लैकिनिया क्वाम वेनेनेटिस वेस्टिबुलम।

पॉपओवर बचा है

सेड पोसुरे कॉन्सेक्टेटुर एस्ट और लोबोर्टिस। ऐनियन यू लियो क्वाम। पेलेंटेस्क ऑर्नारे सेम लैकिनिया क्वाम वेनेनेटिस वेस्टिबुलम।

लाइव डेमो

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

चार दिशाएं

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

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

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

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

अगले क्लिक पर खारिज करें

focusउपयोगकर्ता द्वारा किए जाने वाले अगले क्लिक पर पॉपओवर को खारिज करने के लिए ट्रिगर का उपयोग करें ।

ख़ारिज-पर-अगले-क्लिक के लिए आवश्यक विशिष्ट मार्कअप

उचित क्रॉस-ब्राउज़र और क्रॉस-प्लेटफ़ॉर्म व्यवहार के लिए, आपको टैग का उपयोग करना चाहिए, <a>टैग का नहीं ,<button> और आपको role="button"और tabindexविशेषताओं को भी शामिल करना चाहिए।

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

प्रयोग

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

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

विकल्प

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

नाम टाइप चूक विवरण
एनीमेशन बूलियन सच पॉपओवर के लिए CSS फ़ेड ट्रांज़िशन लागू करें
पात्र स्ट्रिंग | असत्य असत्य

पॉपओवर को एक विशिष्ट तत्व में जोड़ता है। उदाहरण container: 'body':। यह विकल्प विशेष रूप से इस मायने में उपयोगी है कि यह आपको ट्रिगरिंग तत्व के पास दस्तावेज़ के प्रवाह में पॉपओवर की स्थिति बनाने की अनुमति देता है - जो पॉपओवर को विंडो आकार बदलने के दौरान ट्रिगरिंग तत्व से दूर तैरने से रोकेगा।

विषय स्ट्रिंग | समारोह ''

डिफ़ॉल्ट सामग्री मान यदि data-contentविशेषता मौजूद नहीं है।

यदि कोई फ़ंक्शन दिया जाता है, तो इसे इसके thisसंदर्भ के साथ उस तत्व पर सेट किया जाएगा, जिससे पॉपओवर जुड़ा हुआ है।

देरी संख्या | वस्तु 0

पॉपओवर दिखाने और छिपाने में देरी (एमएस) - मैन्युअल ट्रिगर प्रकार पर लागू नहीं होती

यदि एक नंबर की आपूर्ति की जाती है, तो देरी को छिपाने/दिखाने दोनों पर लागू किया जाता है

वस्तु संरचना है:delay: { "show": 500, "hide": 100 }

एचटीएमएल बूलियन असत्य पॉपओवर में HTML डालें। यदि गलत है, textतो DOM में सामग्री डालने के लिए jQuery की विधि का उपयोग किया जाएगा। यदि आप XSS हमलों के बारे में चिंतित हैं तो टेक्स्ट का उपयोग करें।
प्लेसमेंट स्ट्रिंग | समारोह 'सही'

पॉपओवर की स्थिति कैसे बनाएं - शीर्ष | नीचे | बाएं | सही | ऑटो।
जब "ऑटो" निर्दिष्ट किया जाता है, तो यह पॉपओवर को गतिशील रूप से पुनर्व्यवस्थित करेगा। उदाहरण के लिए, यदि प्लेसमेंट "ऑटो लेफ्ट" है, तो पॉपओवर संभव होने पर बाईं ओर प्रदर्शित होगा, अन्यथा यह दाईं ओर प्रदर्शित होगा।

जब किसी फ़ंक्शन का उपयोग प्लेसमेंट को निर्धारित करने के लिए किया जाता है, तो इसे पॉपओवर DOM नोड को इसके पहले तर्क के रूप में और ट्रिगर करने वाले तत्व DOM नोड को इसके दूसरे के रूप में कहा जाता है। thisसंदर्भ पॉपओवर उदाहरण पर सेट है ।

चयनकर्ता डोरी असत्य यदि कोई चयनकर्ता प्रदान किया जाता है, तो पॉपओवर ऑब्जेक्ट निर्दिष्ट लक्ष्यों को सौंपे जाएंगे। व्यवहार में, इसका उपयोग गतिशील HTML सामग्री को पॉपओवर जोड़ने के लिए सक्षम करने के लिए किया जाता है। इसे और एक सूचनात्मक उदाहरण देखें ।
टेम्पलेट डोरी '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

पॉपओवर बनाते समय उपयोग करने के लिए HTML को आधार बनाएं।

पॉपओवर का titleइंजेक्शन लगाया जाएगा .popover-title

पॉपओवर का contentइंजेक्शन लगाया जाएगा .popover-content

.arrowपॉपओवर का तीर बन जाएगा।

सबसे बाहरी आवरण तत्व में .popoverवर्ग होना चाहिए।

शीर्षक स्ट्रिंग | समारोह ''

डिफ़ॉल्ट शीर्षक मान यदि titleविशेषता मौजूद नहीं है।

यदि कोई फ़ंक्शन दिया जाता है, तो इसे इसके thisसंदर्भ के साथ उस तत्व पर सेट किया जाएगा, जिससे पॉपओवर जुड़ा हुआ है।

चालू कर देना डोरी 'क्लिक' पॉपओवर कैसे ट्रिगर होता है - क्लिक करें | होवर | फोकस | नियमावली। आप कई ट्रिगर पास कर सकते हैं; उन्हें एक स्थान से अलग करें। manualकिसी अन्य ट्रिगर के साथ जोड़ा नहीं जा सकता।
व्यूपोर्ट स्ट्रिंग | वस्तु | समारोह {चयनकर्ता: 'बॉडी', पैडिंग: 0}

पॉपओवर को इस तत्व की सीमा के भीतर रखता है। उदाहरण: viewport: '#viewport'या{ "selector": "#viewport", "padding": 0 }

यदि कोई फ़ंक्शन दिया जाता है, तो इसे ट्रिगरिंग तत्व DOM नोड के साथ एकमात्र तर्क के रूप में कहा जाता है। thisसंदर्भ पॉपओवर उदाहरण पर सेट है ।

व्यक्तिगत पॉपओवर के लिए डेटा विशेषताएँ

अलग-अलग पॉपओवर के विकल्प वैकल्पिक रूप से डेटा विशेषताओं के उपयोग के माध्यम से निर्दिष्ट किए जा सकते हैं, जैसा कि ऊपर बताया गया है।

तरीकों

$().popover(options)

तत्व संग्रह के लिए पॉपओवर प्रारंभ करता है।

.popover('show')

किसी तत्व के पॉपओवर को प्रकट करता है। पॉपओवर से पहले कॉलर को रिटर्न वास्तव में दिखाया गया है (यानी shown.bs.popoverघटना होने से पहले)। इसे पॉपओवर का "मैनुअल" ट्रिगर माना जाता है। पॉपओवर जिनके शीर्षक और सामग्री दोनों शून्य-लंबाई वाले हैं, कभी प्रदर्शित नहीं होते हैं।

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

.popover('hide')

किसी तत्व का पॉपओवर छुपाता है। पॉपओवर से पहले कॉलर को रिटर्न वास्तव में छुपाया गया है (यानी hidden.bs.popoverघटना होने से पहले)। इसे पॉपओवर का "मैनुअल" ट्रिगर माना जाता है।

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

.popover('toggle')

किसी तत्व के पॉपओवर को टॉगल करता है। पॉपओवर से पहले कॉलर को रिटर्न वास्तव में दिखाया या छिपाया गया है (अर्थात घटना shown.bs.popoverया hidden.bs.popoverघटना होने से पहले)। इसे पॉपओवर का "मैनुअल" ट्रिगर माना जाता है।

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

.popover('destroy')

किसी तत्व के पॉपओवर को छुपाता और नष्ट करता है। डेलिगेशन का उपयोग करने वाले पॉपओवर (जो विकल्प का उपयोग करकेselector बनाए गए हैं ) वंशज ट्रिगर तत्वों पर व्यक्तिगत रूप से नष्ट नहीं किए जा सकते हैं।

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

आयोजन

घटना प्रकार विवरण
शो.बीएस.पॉपओवर showइंस्टेंस विधि को कॉल करने पर यह घटना तुरंत सक्रिय हो जाती है।
दिखाया गया.bs.popover यह घटना तब सक्रिय होती है जब पॉपओवर उपयोगकर्ता को दिखाई देता है (सीएसएस ट्रांज़िशन पूरा होने की प्रतीक्षा करेगा)।
छिपाना.bs.popover hideइंस्टेंस विधि को कॉल किए जाने पर इस घटना को तुरंत निकाल दिया जाता है।
हिडन.बीएस.पॉपओवर यह घटना तब सक्रिय हो जाती है जब पॉपओवर उपयोगकर्ता से छिपा हुआ समाप्त हो जाता है (सीएसएस ट्रांज़िशन पूरा होने की प्रतीक्षा करेगा)।
डाला.bs.popover इस घटना को उस show.bs.popoverघटना के बाद सक्रिय किया जाता है जब पॉपओवर टेम्पलेट को DOM में जोड़ा जाता है।
$('#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

आयोजन

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

घटना प्रकार विवरण
बंद करें.bs.अलर्ट closeइंस्टेंस विधि को कॉल करने पर यह घटना तुरंत सक्रिय हो जाती है।
बंद.बीएस.अलर्ट जब अलर्ट बंद हो जाता है तो यह ईवेंट सक्रिय हो जाता है (सीएसएस ट्रांज़िशन पूरा होने की प्रतीक्षा करेगा)।
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

बटन बटन.जेएस

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

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

फ़ायरफ़ॉक्स पूरे पेज लोड पर फॉर्म कंट्रोल स्टेट्स (विकलांगता और जाँच) बना रहता है । इसके लिए एक उपाय है उपयोग करना autocomplete="off"मोज़िला बग #654072 देखें ।

स्टेटफुल

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

यह सुविधा v3.3.5 के बाद से हटा दी गई है और इसे v4 में हटा दिया गया है।

आप जिस राज्य को पसंद करते हैं उसका प्रयोग करें!

इस प्रदर्शन के लिए, हम और का उपयोग कर रहे हैं data-loading-text, $().button('loading')लेकिन यह एकमात्र ऐसा राज्य नहीं है जिसका आप उपयोग कर सकते हैं। इसके बारे में नीचे $().button(string)दस्तावेज़ीकरण में और देखें ।

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

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

सिंगल टॉगल

data-toggle="button"एक बटन पर टॉगल सक्रिय करने के लिए जोड़ें ।

पूर्व-टॉगल किए गए बटनों की आवश्यकता है.active औरaria-pressed="true"

पूर्व-टॉगल किए गए बटनों के लिए, आपको .activeकक्षा और aria-pressed="true"विशेषता को buttonस्वयं में जोड़ना होगा।

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

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

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

पूर्व-चयनित विकल्पों की आवश्यकता है.active

पूर्व-चयनित विकल्पों के लिए, आपको कक्षा को स्वयं .activeइनपुट में जोड़ना होगा।label

दृश्य जाँच की गई स्थिति केवल क्लिक पर अपडेट की जाती है

यदि चेकबॉक्स बटन की चेक की गई स्थिति बटन clickपर किसी ईवेंट को सक्रिय किए बिना अपडेट की जाती है (उदाहरण के लिए इनपुट की संपत्ति <input type="reset">को सेट करके या उसके माध्यम से ), तो आपको इनपुट पर कक्षा checkedको टॉगल करना होगा ।.activelabel

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

तरीकों

$().button('toggle')

पुश स्थिति को टॉगल करता है। बटन को यह आभास देता है कि वह सक्रिय हो गया है।

$().button('reset')

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

$().button(string)

टेक्स्ट को किसी भी डेटा परिभाषित टेक्स्ट स्थिति में स्वैप करें।

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

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

संक्षिप्त करें संक्षिप्त करें.js

लचीला प्लगइन जो आसान टॉगल व्यवहार के लिए मुट्ठी भर कक्षाओं का उपयोग करता है।

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

संक्षिप्त करें के लिए ट्रांज़िशन प्लगइन को आपके बूटस्ट्रैप के संस्करण में शामिल करने की आवश्यकता है।

उदाहरण

वर्ग परिवर्तनों के माध्यम से अन्य तत्व दिखाने और छिपाने के लिए नीचे दिए गए बटन पर क्लिक करें:

  • .collapseसामग्री छुपाता है
  • .collapsingसंक्रमण के दौरान लागू किया जाता है
  • .collapse.inसामग्री दिखाता है

आप विशेषता वाले लिंक hrefया विशेषता वाले बटन का उपयोग कर सकते हैं data-target। दोनों ही मामलों में, की data-toggle="collapse"आवश्यकता है।

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

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

पैनल घटक के साथ एक अकॉर्डियन बनाने के लिए डिफ़ॉल्ट संक्षिप्त व्यवहार का विस्तार करें।

एनिम परियाटुर क्लिच रिप्रेहेंडरिट, एनिम ईउसमॉड हाई लाइफ एक्यूसामस टेरी रिचर्डसन एड स्क्विड। 3 वुल्फ मून ऑफ़िसिया ऑट, नॉन कपिडैटैट स्केटबोर्ड डोलर ब्रंच। फूड ट्रक क्विनोआ नेस्कियंट लेबरम ईउसमॉड। ब्रंच 3 वुल्फ मून टेम्पोर, सनट अलीका ने उस पर एक पक्षी डाल दिया स्क्वीड सिंगल-ओरिजिनल कॉफ़ी नाला असेंडा शोरडिच एट। निहिल एनिम केफियेह हेल्वेटिका, क्राफ्ट बियर लेबर वेस एंडरसन क्रेडिट नेस्कियंट सैपिएन्ट ईए प्रोडेंट। विज्ञापन शाकाहारी अपवाद कसाई वाइस लोमो। लेगिंग्स क्राफ्ट बीयर फार्म-टू-टेबल, रॉ डेनिम एस्थेटिक सिंथेस नेस्कियंट के बारे में आपने शायद नहीं सुना होगा।
एनिम परियाटुर क्लिच रिप्रेहेंडरिट, एनिम ईउसमॉड हाई लाइफ एक्यूसामस टेरी रिचर्डसन एड स्क्विड। 3 वुल्फ मून ऑफ़िसिया ऑट, नॉन कपिडैटैट स्केटबोर्ड डोलर ब्रंच। फूड ट्रक क्विनोआ नेस्कियंट लेबरम ईउसमॉड। ब्रंच 3 वुल्फ मून टेम्पोर, सनट अलीका ने उस पर एक पक्षी डाल दिया स्क्वीड सिंगल-ओरिजिनल कॉफ़ी नाला असेंडा शोरडिच एट। निहिल एनिम केफियेह हेल्वेटिका, क्राफ्ट बियर लेबर वेस एंडरसन क्रेडिट नेस्कियंट सैपिएन्ट ईए प्रोडेंट। विज्ञापन शाकाहारी अपवाद कसाई वाइस लोमो। लेगिंग्स क्राफ्ट बीयर फार्म-टू-टेबल, रॉ डेनिम एस्थेटिक सिंथेस नेस्कियंट के बारे में आपने शायद नहीं सुना होगा।
एनिम परियाटुर क्लिच रिप्रेहेंडरिट, एनिम ईउसमॉड हाई लाइफ एक्यूसामस टेरी रिचर्डसन एड स्क्विड। 3 वुल्फ मून ऑफ़िसिया ऑट, नॉन कपिडैटैट स्केटबोर्ड डोलर ब्रंच। फूड ट्रक क्विनोआ नेस्कियंट लेबरम ईउसमॉड। ब्रंच 3 वुल्फ मून टेम्पोर, सनट अलीका ने उस पर एक पक्षी डाल दिया स्क्वीड सिंगल-ओरिजिनल कॉफ़ी नाला असेंडा शोरडिच एट। निहिल एनिम केफियेह हेल्वेटिका, क्राफ्ट बियर लेबर वेस एंडरसन क्रेडिट नेस्कियंट सैपिएन्ट ईए प्रोडेंट। विज्ञापन शाकाहारी अपवाद कसाई वाइस लोमो। लेगिंग्स क्राफ्ट बीयर फार्म-टू-टेबल, रॉ डेनिम एस्थेटिक सिंथेस नेस्कियंट के बारे में आपने शायद नहीं सुना होगा।
<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

  • बूटप्लाई
  • वन इटमस एसी फैसिलिन
  • दूसरा एरोस

विस्तृत/संक्षिप्त नियंत्रणों को सुलभ बनाएं

aria-expandedनियंत्रण तत्व में जोड़ना सुनिश्चित करें । यह विशेषता स्क्रीन रीडर और समान सहायक तकनीकों के लिए संक्षिप्त होने योग्य तत्व की वर्तमान स्थिति को स्पष्ट रूप से परिभाषित करती है। यदि बंधनेवाला तत्व डिफ़ॉल्ट रूप से बंद है, तो इसका मान होना चाहिए aria-expanded="false"। यदि आपने inक्लास का उपयोग करके कोलैप्सेबल एलिमेंट को डिफ़ॉल्ट रूप से ओपन करने के लिए सेट किया है, aria-expanded="true"तो इसके बजाय कंट्रोल पर सेट करें। बंधनेवाला तत्व खोला या बंद किया गया है या नहीं, इसके आधार पर प्लगइन इस विशेषता को स्वचालित रूप से चालू कर देगा।

इसके अतिरिक्त, यदि आपका नियंत्रण तत्व किसी एकल ढहने योग्य तत्व को लक्षित कर रहा है - अर्थात data-targetविशेषता एक चयनकर्ता की ओर इशारा कर रही है id- तो आप नियंत्रण तत्व में एक अतिरिक्त aria-controlsविशेषता जोड़ सकते हैं, जिसमें idढहने योग्य तत्व शामिल है। आधुनिक स्क्रीन रीडर और इसी तरह की सहायक प्रौद्योगिकियां इस विशेषता का उपयोग उपयोगकर्ताओं को सीधे संक्षिप्त होने योग्य तत्व पर नेविगेट करने के लिए अतिरिक्त शॉर्टकट प्रदान करने के लिए करती हैं।

प्रयोग

भारी भारोत्तोलन को संभालने के लिए पतन प्लगइन कुछ वर्गों का उपयोग करता है:

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

नाम प्रकार चूक विवरण
माता-पिता चयनकर्ता असत्य यदि कोई चयनकर्ता प्रदान किया जाता है, तो यह संक्षिप्त होने योग्य आइटम दिखाए जाने पर निर्दिष्ट पैरेंट के अंतर्गत सभी संक्षिप्त होने योग्य तत्व बंद हो जाएंगे। (पारंपरिक अकॉर्डियन व्यवहार के समान - यह वर्ग पर निर्भर है panel)
टॉगल बूलियन सच आह्वान पर संक्षिप्त करने योग्य तत्व को टॉगल करता है

तरीकों

.collapse(options)

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

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

.collapse('toggle')

एक संक्षिप्त करने योग्य तत्व को दिखाने या छिपाने के लिए टॉगल करता है। बंधनेवाला तत्व वास्तव में दिखाया या छिपाया गया है (यानी shown.bs.collapseया hidden.bs.collapseघटना होने से पहले) कॉलर पर वापस आ जाता है।

.collapse('show')

बंधनेवाला तत्व दिखाता है। बंधनेवाला तत्व वास्तव में दिखाया गया है (यानी shown.bs.collapseघटना होने से पहले) कॉलर पर वापस आ जाता है।

.collapse('hide')

बंधनेवाला तत्व छुपाता है। बंधनेवाला तत्व वास्तव में छुपा हुआ है (यानी hidden.bs.collapseघटना होने से पहले) कॉलर पर वापस आ जाता है।

आयोजन

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

घटना प्रकार विवरण
शो.bs.पतन showइंस्टेंस विधि को कॉल करने पर यह घटना तुरंत सक्रिय हो जाती है।
दिखाया गया.bs.पतन यह घटना तब सक्रिय होती है जब उपयोगकर्ता को एक संक्षिप्त तत्व दिखाई देता है (सीएसएस संक्रमण पूरा होने की प्रतीक्षा करेगा)।
छिपाना.bs.पतन इस घटना को तुरंत निकाल दिया जाता है जब hideविधि को बुलाया जाता है।
छिपा हुआ.bs.पतन यह घटना तब सक्रिय होती है जब उपयोगकर्ता से एक संक्षिप्त तत्व छुपाया जाता है (सीएसएस संक्रमण पूरा होने की प्रतीक्षा करेगा)।
$('#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 को वहां रखें और यह स्वचालित रूप से संरेखित और स्वरूपित हो जाएगा।

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

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

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

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

हिंडोला आइटम के माध्यम से बाएं से दाएं चक्र।

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

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

पिछले आइटम के लिए साइकिल।

अगले आइटम के लिए साइकिल।

बूटस्ट्रैप का हिंडोला वर्ग हिंडोला कार्यक्षमता में शामिल होने के लिए दो घटनाओं को उजागर करता है।

दोनों घटनाओं में निम्नलिखित अतिरिक्त गुण हैं:

  • direction: हिंडोला जिस दिशा में खिसक रहा है (या तो "left"या "right")।
  • relatedTarget: DOM तत्व जिसे सक्रिय आइटम के रूप में जगह में खिसकाया जा रहा है।

सभी हिंडोला ईवेंट कैरोसेल पर ही (अर्थात <div class="carousel">) पर फ़ायर किए जाते हैं.

घटना प्रकार विवरण
स्लाइड.bs.carousel slideइंस्टेंस विधि लागू होने पर यह घटना तुरंत सक्रिय हो जाती है।
slid.bs.carousel यह इवेंट तब सक्रिय होता है जब कैरोसेल ने अपना स्लाइड ट्रांज़िशन पूरा कर लिया हो।
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

प्रत्यय affix.js

उदाहरण

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


प्रयोग

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

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

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

एफिक्स प्लगइन तीन वर्गों के बीच टॉगल करता है, प्रत्येक एक विशेष स्थिति का प्रतिनिधित्व करता है: .affix, .affix-top, और .affix-bottomposition: 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"

नाम प्रकार चूक विवरण
ओफ़्सेट संख्या | समारोह | वस्तु 10 स्क्रॉल की स्थिति की गणना करते समय स्क्रीन से ऑफसेट करने के लिए पिक्सेल। यदि एक ही नंबर प्रदान किया जाता है, तो ऑफसेट को ऊपर और नीचे दोनों दिशाओं में लागू किया जाएगा। एक अद्वितीय, निचला और शीर्ष ऑफ़सेट प्रदान करने के लिए बस एक ऑब्जेक्ट offset: { top: 10 }या offset: { top: 10, bottom: 5 }. किसी फ़ंक्शन का उपयोग तब करें जब आपको ऑफ़सेट की गतिशील रूप से गणना करने की आवश्यकता हो।
लक्ष्य चयनकर्ता | नोड | jQuery तत्व windowवस्तु _ प्रत्यय के लक्ष्य तत्व को निर्दिष्ट करता है।

तरीकों

.affix(options)

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

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

.affix('checkPosition')

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

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

आयोजन

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

घटना प्रकार विवरण
affix.bs.affix तत्व चिपकाए जाने से ठीक पहले यह घटना आग लगती है।
affixed.bs.affix तत्व चिपकाए जाने के बाद इस घटना को निकाल दिया जाता है।
affix-top.bs.affix तत्व को शीर्ष पर चिपकाए जाने से ठीक पहले यह घटना सक्रिय हो जाती है।
affixed-top.bs.affix तत्व को शीर्ष पर चिपकाए जाने के बाद इस घटना को निकाल दिया जाता है।
affix-bottom.bs.affix तत्व को नीचे चिपकाए जाने से ठीक पहले यह घटना आग लगती है।
affixed-bottom.bs.affix तत्व को नीचे चिपकाए जाने के बाद इस घटना को निकाल दिया जाता है।