अवलोकन करना

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

प्लगइन गी व्यक्तिगत रूप कन्नै शामल कीता जाई सकदा ऐ (बूटस्ट्रैप दी व्यक्तिगत *.jsफाइलें दा उपयोग करदे होई ), जां इक बारी च सारें गी (उपयोग करदे होई bootstrap.jsजां मिनीफाइड bootstrap.min.js) शामल कीता जाई सकदा ऐ ।

संकलित जावास्क्रिप्ट दा उपयोग करदे होई

दोनों bootstrap.jsते bootstrap.min.jsइक गै फाइल च सारे प्लगइन्स होंदे न। इक गी गै शामल करो।

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

किश प्लगइन्स ते सीएसएस घटक होर प्लगइन्स उप्पर निर्भर करदे न। जेकर तुस प्लगइन्स गी व्यक्तिगत रूप कन्नै शामल करदे ओ तां दस्तावेजें च इनें निर्भरताएं दी जांच करना सुनिश्चत करो. एह् बी ध्यान रखो जे सारे प्लगइन jQuery पर निर्भर करदे न (इसदा मतलब ऐ जे प्लगइन फाइलें थमां पैह् ले jQuery गी शामल करना होग)। jQuery दे कुन कुन संस्करण समर्थत न, एह् दिक्खने लेई साढ़े कन्नै सलाह करो ।bower.json

डेटा विशेषताएं गी

तुस जावास्क्रिप्ट दी इक लाइन लिखे दे बगैर सारे बूटस्ट्रैप प्लगइन्स दा शुद्ध रूप कन्नै मार्कअप एपीआई दे राहें इस्तेमाल करी सकदे ओ. एह् बूटस्ट्रैप दा पैह् ला श्रेणी दा एपीआई ऐ ते प्लगइन दा इस्तेमाल करदे बेल्लै तुंदा पैह् ला विचार होना चाहिदा ऐ.

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

कोई टकराव नहीं

कदें-कदें होर यूआई फ्रेमवर्क कन्नै बूटस्ट्रैप प्लगइन्स दा इस्तेमाल करना जरूरी होंदा ऐ। इनें हालातें च, नेमस्पेस टक्कर कदें-कदें होई सकदी ऐ। जेकर ऐसा होंदा ऐ तां तुस .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 जनेह् तृतीय-पक्ष जावास्क्रिप्ट लाइब्रेरी गी समर्थन नेईं करदा ऐ . बावजूद .noConflictते नेमस्पेस घटनाएं, संगतता समस्यां हो सकदियां न जेह् ड़ियां तुसेंगी अपने आपै च ठीक करने दी लोड़ ऐ.

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

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

साधारण संक्रमण प्रभावें आस्तै, transition.jsइक बारी दूई जेएस फाइलें दे कन्नै-कन्नै शामल करो. जेकर तुस संकलित (जां मिनीफाइड) दा इस्तेमाल करा करदे ओ bootstrap.js, तां इसगी शामल करने दी लोड़ नेईं ऐ—एह् पैह् ले थमां गै ऐ.

अंदर की ऐ

Transition.js घटनाएं आस्तै इक बुनियादी मददगार ऐ transitionEndते कन्नै गै इक CSS संक्रमण एमुलेटर ऐ। एह् दूए प्लगइन्स आसेआ CSS संक्रमण समर्थन दी जांच करने ते लटकदे संक्रमणें गी पकड़ने आस्तै बरतेआ जंदा ऐ।

संक्रमणें गी अक्षम करना

संक्रमणें गी निम्नलिखित जावास्क्रिप्ट स्निपेट दा इस्तेमाल करियै वैश्विक रूप कन्नै अक्षम कीता जाई सकदा ऐ , जेह् ड़ा लोड होने दे बाद transition.js(जां bootstrap.jsजां bootstrap.min.js, जिऱयां के मामले च होंदा ऐ ) औना चाहिदा ऐ :

$.support.transition = false

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

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

कई खुल्ले मोडल समर्थत नेईं कीते गे

इक मोडल गी उसलै नेईं खोह् लना ज़रूरी ऐ जिसलै कोई दूआ अजें बी दिक्खेआ जा करदा ऐ। इक बारी च इक थमां मते मोडल दस्सने लेई कस्टम कोड दी लोड़ होंदी ऐ।

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

मोडल दे रूप-रचना ते/जां कार्यक्षमता गी प्रभावित करने आह् ले होर घटकें थमां बचने आस्तै इक मोडल दे HTML कोड गी अपने दस्तावेज़ च शीर्शक-स्तरीय स्थिति च रक्खने दी कोशश करो.

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

मोबाइल डिवाइस पर मोडल दा इस्तेमाल करने दे बारे च किश चेतावनी ऐ। विस्तार लेई साढ़े ब्राउज़र समर्थन डॉक्स दिक्खो।

HTML5 अपने शब्दार्थ गी किस चाल्ली परिभाशत करदा ऐ इसदे कारण, autofocusHTML विशेषता दा बूटस्ट्रैप मोडल च कोई प्रभाव नेईं होंदा ऐ. उसी प्रभाव हासल करने आस्तै, कुसै कस्टम जावास्क्रिप्ट दा इस्तेमाल करो:

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

उदाहरण दे

स्थिर उदाहरण

हेडर, बॉडी, ते पाद लेख च क्रियाएं दे सेट कन्नै इक रेंडर कीता गेदा मोडल।

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

लाइव डेमो

निचले बटन पर क्लिक करियै जावास्क्रिप्ट दे राहें इक मोडल टॉगल करो। एह् थल्ले सरकग ते पृष्ठ दे शीर्शक थमां अंदर फीका होई जाग।

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

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

मोडल गी सुलभ बनाओ

मोडल शीर्षक दा संदर्भ दिंदे होई role="dialog"ते , गी , ते अपने आपै च जोड़ना सुनिश्चित करो ।aria-labelledby="...".modalrole="document".modal-dialog

इसदे अलावा, तुस अपने मोडल संवाद दा वर्णन aria-describedbyon कन्नै देई सकदे ओ .modal.

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

मोडल च यूट्यूब वीडियो गी एम्बेड करने लेई बूटस्ट्रैप च नेईं होने आह् ली अतिरिक्त जावास्क्रिप्ट दी लोड़ ऐ तां जे प्लेबैक गी स्वतः बंद कीता जाई सकै ते होर मते सारे। होर मती जानकारी आस्तै एह् मददगार स्टैक ओवरफ्लो पोस्ट दिक्खो।

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

मोडल च दो वैकल्पिक आकार होंदे न, जेह�� ड़े संशोधक वर्गें दे राहें उपलब्ध न जेह् ड़े इक .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अंदर s घोंसला करो .modal-bodyते फिर सामान्य ग्रिड सिस्टम वर्गें दा इस्तेमाल करो.

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

बटन दा इक गुच्छा ऐ जेह् ड़ा सारे इक गै मोडल गी ट्रिगर करदे न, बस थोह् ड़ी-मती बक्ख-बक्ख सामग्री कन्नै? मोडल दी सामग्री गी बदलने आस्तै event.relatedTargetते HTML data-*विशेषताएं दा इस्तेमाल करो (संभवत: jQuery दे राहें ) इस गल्लै पर निर्भर करदा ऐ जे किस बटन पर क्लिक कीता गेआ हा. पर विस्तार लेई मोडल इवेंट्स डॉक्स दिक्खो relatedTarget,

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

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

प्रयोग करना

मोडल प्लगइन तुंदी छिपी दी सामग्री गी मंग पर, डेटा विशेषताएं जां जावास्क्रिप्ट दे राहें टॉगल करदा ऐ। एह् डिफाल्ट स्क्रॉल व्यवहार गी ओवरराइड करने आस्तै बी जोड़दा ऐ ते मोडल दे बाहर क्लिक करदे बेल्लै दस्से गेदे मोडल गी खारिज करने आस्तै इक क्लिक क्षेत्र उपलब्ध करोआने आस्तै इक पैदा .modal-openकरदा ऐ .<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-contentजेकर तुस डेटा-एपीआई दा इस्तेमाल करा करदे ओ तां तुस वैकल्पिक hrefरूप कन्नै दूरस्थ स्रोत निर्दिश्ट करने आस्तै विशेषता दा इस्तेमाल करी सकदे ओ. इसदा इक उदाहरण हेठ दित्ता गेदा ऐ:

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

विधियां

तुंदी सामग्री गी मोडल दे रूप च सक्रिय करदा ऐ। इक वैकल्पिक विकल्प स्वीकार करदा ऐ object.

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

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

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

मैन्युअल रूप कन्नै इक मोडल खोह् लदा ऐ। मोडल गी असल च दस्से जाने थमां पैह् ले (यानी shown.bs.modalघटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ।

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

मैन्युअल रूप कन्नै इक मोडल छिपांदा ऐ। मोडल गी असल च छिपाने थमां पैह् ले (यानी hidden.bs.modalघटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ।

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

इक स्क्रॉलबार दा मुकाबला करने आस्तै मोडल दी स्थिति गी दुबारा समायोजित करदा ऐ इस मामले च इक दिक्खने गी मिलदा ऐ, जेह् ड़ा मोडल गी बाएं आह् ली कूद करग।

तदूं गै लोड़ ऐ जदूं मोडल दी ऊंचाई च बदलाव औंदा ऐ जिसलै एह् खुल्ली जंदा ऐ।

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

घटनाएं

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

सारे मोडल घटनाएं गी मोडल पर गै (यानी पर <div class="modal">) फायर कीता जंदा ऐ ।

घटना दा प्रकार ब्यौरा
शो।बीएस.मोडल showइंस्टेंस विधि गी बुलाने पर एह् घटना तुरत फायर होई जंदी ऐ। जेकर कुसै क्लिक दे कारण ऐ तां क्लिक कीता गेदा तत्व 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>

data-targetलिंक बटनें कन्नै URL गी बरकरार रखने आस्तै, 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's पैरेंट तत्व पर फायर कीता जंदा ऐ.

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

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

स्क्रॉलस्पाई scrollspy.js ऐ

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

स्क्रॉलस्पाई प्लगइन स्क्रॉल स्थिति दे आधार उप्पर नेव लक्ष्यें गी स्वतः अपडेट करने आस्तै ऐ। नवबार दे हेठ दित्ते गेदे इलाके गी स्क्रॉल करो ते सक्रिय वर्ग बदलदे दिक्खो। ड्रॉपडाउन उप आइटमें गी बी हाइलाइट कीता जाग।

@मुट्टा

विज्ञापन लेगिंग keytar, ब्रंच आईडी कला पार्टी dolor laboure। पिचफोर्क yr एनिम लो-फाई पहले वे बिक चुके qui। टम्बलर फार्म-टू-टेबल साइकिल अधिकार जो भी हो। अनिम केफ्फीएह कार्लेस कार्डिगन। Velit seitan mcsweeney दा फोटो बूथ 3 भेड़िया चंद्रमा irure। कोस्बी स्वेटर लोमो जीन शॉर्ट्स, विलियम्सबर्ग हुडी न्यूनतम क्यूई तुसें शायद उन्हें एट कार्डिगन ट्रस्ट फंड culpa बायोडीजल वेस एंडरसन सौंदर्यशास्त्र दे बारे च नेईं सुनेआ ऐ। निहिल टैटू accusamus, cred विडंबना बायोडीजल केफियेह कारीगर उल्लमको consequat।

@ एमडीओ

वेनियम मार्फा मूंछ स्केटबोर्ड, adipisicing fugiat velit पिचफोर्क दाढ़ी। फ्रीगन दाढ़ी aliqua cupidat mcsweeney दा वेरो। कामदेवताट चार लोको निसी, ईए हेल्वेटिका नुल्ला कार्लेस। टैटू कोस्बी स्वेटर खाद्य ट्रक, mcsweeney दा quis गैर freegan विनाइल। लो-फाई वेस एंडरसन +1 सार्टोरियल। कार्लेस गैर सौंदर्य व्यायाम क्विस जेंट्रीफाई। ब्रुकलिन adipisicing शिल्प बीयर वाइस केतार deserunt।

इक

ओकैकैट कोमोडो एलिक्वा डेलेक्टस। फैप शिल्प बीयर deserunt स्केटबोर्ड ईए। लोमो साइकिल अधिकार adipisicing बान्ह मी, वेलिट ईए सुंट अगले स्तर locavore एकल-मूल कॉफी में मैग्ना वेनियम। उच्च जीवन आईडी विनाइल, इको पार्क consequat quis aliquip बान्ह मी पिचफोर्क। वेरो वीएचएस एस्ट एडिपिसिंग। Consectetur nisi DIY न्यूनतम दूत बैग। Cred पूर्व में, टिकाऊ delectus consectetur फैनी पैक आईफोन।

दो

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

three

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

केतार ट्वी ब्लॉग, कुलपा मैसेंजर बैग मारफा जो भी डेलेक्टस फूड ट्रक। सपिएंटे सिंथ आईडी असुमेंडा। Locavore sed helvetica क्लिच विडंबना, थंडरकैट्स तुसें शायद उंदे बारे च नेईं सुनेआ ऐ consequat हुडी लस मुक्त लो-फाई फैप aliquip। Labore कुलीन placeat पहले वे बिक गया, टेरी रिचर्डसन proident ब्रंच nesciunt quis cosby स्वेटर pariatur keffiyeh उत helvetica कारीगर। कार्डिगन शिल्प बीयर seitan रेडीमेड velit। वीएचएस चम्ब्रे लैबोरिस टेम्पोर वेनियम। एनिम मोलिट मिनी कोमोडो उल्लमको थंडरकैट्स।

प्रयोग करना

बूटस्ट्रैप nav दी लोड़ ऐ

स्क्रॉलस्पाई गी इसलै सक्रिय लिंकें गी ठीक ढंगै कन्नै हाइलाइट करने आस्तै इक बूटस्ट्रैप नेव घटक दा इस्तेमाल करने दी लोड़ ऐ.

हल करने योग्य आईडी लक्ष्यें दी लोड़ ऐ

नवबार लिंक च हल करने योग्य आईडी लक्ष्य होन चाहिदे न। मसाल आस्तै, इक <a href="#home">home</a>गी डीओएम च कुसै चीज़ कन्नै मेल खंदा ऐ जि’यां <div id="home"></div>.

गैर- :visibleलक्ष्य तत्वें गी अनदेखा कीता गेआ

लक्ष्य तत्वें गी जेह् ड़े :visiblejQuery दे अनुसार नेईं न उ’नेंगी अनदेखा कीता जाग ते उंदे सरबंधत nav आइटमें गी कदें बी हाइलाइट नेईं कीता जाग.

सापेक्ष स्थिति दी लोड़ होंदी ऐ

कोई फर्क नेईं पौंदा लागू करने दी विधि, scrollspy गी 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>

जावास्क्रिप्ट दे जरिए

अपने CSS च जोड़ने दे बाद position: relative;, जावास्क्रिप्ट दे राहें स्क्रॉलस्पाई गी कॉल करो:

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

विधियां

.scrollspy('refresh')

DOM थमां तत्वें गी जोड़ने जां हटाने दे कन्नै-कन्नै scrollspy दा इस्तेमाल करदे बेल्लै तुसेंगी ताज़ा करने दी विधि गी इस चाल्ली बुलाने दी लोड़ होग:

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

विकल्प ऐ

विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-, च जोड़ो , जिऱयां data-offset="".

नां किसम डिफाल्ट ब्यौरा
ऑफसेट करना नंबर १० स्क्रॉल दी स्थिति दी गणना करदे बेल्लै शीर्शक थमां ऑफसेट करने आस्तै पिक्सेल।

घटनाएं

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

टॉगल करने योग्य टैब टैब.जेएस

उदाहरण टैब

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

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

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-tabsक्लासें गी जोड़ने ulकन्नै बूटस्ट्रैप टैब स्टाइलिंग लागू होग , जिसलै के navते nav-pillsक्लासें गी जोड़ने कन्नै गोली स्टाइलिंग लागू होग .

<div>

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

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

</div>

फीका असर

टैबें गी फीके करने आस्तै, .fadeहर इक च जोड़ो .tab-pane. पैह् ले टैब फलक गी बी .inशुरूआती सामग्री गी दिक्खने आह् ला बनाना होग।

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

विधियां

$().tab

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

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

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

शून्य-लंबाई आह् ले शीर्शक आह् ले टूलटिप कदें बी प्रदर्शत नेईं कीते जंदे न.

उदाहरण दे

टूलटिप्स दिखने लेई निचले लिंक उप्पर होवर करो:

टाइट पैंट नेक्स्ट लेवल केफियेह तुस शायद इन्हें दा नां नेईं सुनेआ ऐ। फोटो बूथ दाढ़ी कच्चे डेनिम लेटरप्रेस शाकाहारी दूत बैग स्टंपटाउन। खेत-टू-टेबल seitan, mcsweeney दी fixie टिकाऊ quinoa 8-बिट अमेरिकी परिधान इक टेरी रिचर्डसन विनाइल chambray ऐ। दाढ़ी स्टंपटाउन, कार्डिगन बान्ह मी लोमो थंडरकैट्स। टोफू बायोडीजल विलियम्सबर्ग मार्फा, चार लोको mcsweeney दी साफ शाकाहारी chambray। एक सचमुच विडंबना कारीगर जो भी keytar , scenester खेत-टू-टेबल banksy ऑस्टिन ट्विटर संभाल freegan cred कच्चे डेनिम एकल-मूल कॉफी वायरल।

स्थिर टूलटिप

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

चार दिशाएं

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

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

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

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

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

प्रदर्शन कारणें कन्नै, टूलटिप ते पोपोवर डेटा-एपीआई ऑप्ट-इन न , मतलब तुसेंगी अपने आपै गी उनेंगी आरंभ करना होग .

इक पृष्ठ पर सारे टूलटिप्स गी शुरू करने दा इक तरीका एह् होग जे उ’नेंगी उंदी 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 जां इक दे अंदर तत्वें पर टूलटिप्स दा इस्तेमाल करदे बेल्लै .input-group, जां तालिका कन्नै सरबंधत तत्वें ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>) पर, तुसेंगी container: 'body'अनचाहे दुष्प्रभावें (जि’यां तत्व व्यापक बधना ते/ या टूलटिप ट्रिगर होने पर अपने गोल कोने खोना)।

छिपे दे तत्वें पर टूलटिप्स दस्सने दी कोशश नेईं करो

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

कीबोर्ड ते सहायक तकनीक दे बरतूनी आस्तै सुलभ टूलटिप्स

कीबोर्ड कन्नै नेविगेट करने आह् ले बरतूनी आस्तै, ते खास करियै सहायक तकनीकें दे बरतूनी आस्तै, तुसेंगी सिर्फ कीबोर्ड-केंद्रित तत्वें जि’यां लिंक, फार्म नियंत्रण, जां इक tabindex="0"विशेषता आह् ले कुसै बी मनमानी तत्व च टूलटिप्स जोड़ना चाहिदा ऐ।

अक्षम तत्वें पर टूलटिप्स गी रैपर तत्वें दी लोड़ होंदी ऐ

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

विकल्प ऐ

विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-, च जोड़ो , जिऱयां data-animation="".

नां किसम डिफाल्ट ब्यौरा
एनीमेशन दा बूलियन सच्च टूलटिप पर इक सीएसएस फीड संक्रमण लागू करो
कंटेनर दा तार | गलत गलत

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

चिर नंबर | चीज ० ऐ

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

जेकर कोई नंबर सप्लाई कीता जंदा ऐ तां छुपा/दिखाने दोनें पर देरी लागू कीती जंदी ऐ

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

एचटीएमएल ऐ बूलियन गलत टूलटिप च एचटीएमएल सम्मिलित करो। जेकर गलत ऐ तां jQuery दी textविधि दा इस्तेमाल DOM च सामग्री गी सम्मिलित करने लेई कीता जाग. जेकर तुस XSS हमले दे बारे च चिंतित ओ तां पाठ दा इस्तेमाल करो.
प्लेसमेंट दा तार | फंक्शन 'उप्पर'

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

जदूं कुसै फंक्शन दा इस्तेमाल प्लेसमेंट निर्धारत करने आस्तै कीता जंदा ऐ तां इसगी टूलटिप DOM नोड गी अपने पैह् ले तर्क दे रूप च ते ट्रिगर करने आह् ले तत्व DOM नोड गी अपने दुए दे रूप च बुलाया जंदा ऐ। thisसंदर्भ टूलटिप इंस्टेंस पर सेट कीता गेदा ऐ ।

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

टूलटिप बनांदे बेल्लै बरतने आस्तै एचटीएमएल दा आधार बनाओ।

टूलटिप दा 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इंस्टेंस विधि गी बुलाया गेआ ऐ.
छिपे दा.बी.एस.टूलटिप एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै टूलटिप बरतूनी थमां छिपाना समाप्त होई जंदा ऐ (CSS संक्रमणें गी पूरा होने दा इंतजार करग)।
सम्मिलित कीता।बीएस.टूलटिप एह् घटना उस show.bs.tooltipघटना दे बाद फायर कीती जंदी ऐ जिसलै टूलटिप टेम्पलेट गी DOM च जोड़ेआ गेआ ऐ.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

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

हाउसिंग सेकेंडरी जानकारी आस्तै कुसै बी तत्व च सामग्री दे छोटे ओवरले गी जोड़ो, जि’यां आईपैड पर।

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

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

पोपोवर्स गी टूलटिप प्लगइन गी बूटस्ट्रैप दे तुंदे संस्करण च शामल करने दी लोड़ ऐ.

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

प्रदर्शन कारणें कन्नै, टूलटिप ते पोपोवर डेटा-एपीआई ऑप्ट-इन न , मतलब तुसेंगी अपने आपै गी उनेंगी आरंभ करना होग .

इक पृष्ठ पर सारे पॉपओवरें गी शुरू करने दा इक तरीका एह् होग जे उ'नेंगी उंदी data-toggleविशेषता कन्नै चुनना:

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

बटन समूहें, इनपुट समूहें, ते तालिकाएं च पोपोवर्स गी खास सेटिंग दी लोड़ होंदी ऐ

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

छिपे दे तत्वें पर पोपोवर दस्सने दी कोशश नेईं करो

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

अक्षम तत्वें पर पोपोवर्स गी रैपर तत्वें दी लोड़ होंदी ऐ

disabledए या तत्व च इक पोपोवर जोड़ने लेई .disabled, तत्व गी इक दे अंदर रक्खो <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="".

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

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

समग्गरी तार | फंक्शन '' ऐ।

data-contentजेकर विशेषता मौजूद नेईं ऐ तां डिफाल्ट सामग्री मूल्य .

thisजेकर कोई फंक्शन दित्ता गेदा ऐ तां उसी उस तत्व गी अपने संदर्भ सेट कन्नै बुलाया जाग जिस कन्नै पोपोवर जुड़े दा ऐ.

चिर नंबर | चीज ० ऐ

पोपोवर गी दस्सने ते छिपाने च देरी (ms) - मैन्युअल ट्रिगर प्रकार पर लागू नेईं होंदा ऐ

जेकर कोई नंबर सप्लाई कीता जंदा ऐ तां छुपा/दिखाने दोनें पर देरी लागू कीती जंदी ऐ

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

एचटीएमएल ऐ बूलियन गलत पोपोवर च एचटीएमएल सम्मिलित करो। जेकर गलत ऐ तां jQuery दी textविधि दा इस्तेमाल DOM च सामग्री गी सम्मिलित करने लेई कीता जाग. जेकर तुस XSS हमले दे बारे च चिंतित ओ तां पाठ दा इस्तेमाल करो.
प्लेसमेंट दा तार | फंक्शन 'स्हेई'

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

जदूं कुसै फंक्शन दा इस्तेमाल प्लेसमेंट निर्धारत करने आस्तै कीता जंदा ऐ तां इसगी पोपोवर डीओएम नोड गी अपने पैह् ले तर्क दे रूप च ते ट्रिगर करने आह् ले तत्व डीओएम नोड गी अपने दुए दे रूप च बुलाया जंदा ऐ। thisसंदर्भ पोपोवर इंस्टेंस पर सेट कीता गेदा ऐ ।

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

पोपोवर बनांदे बेल्लै इस्तेमाल करने आस्तै एचटीएमएल आधार करो।

पोपोवर दा 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इंस्टेंस विधि गी बुलाने पर एह् घटना तुरत फायर होई जंदी ऐ।
दिखाया।बी.एस.पोपोवर एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै पोपओवर गी बरतूनी गी दिक्खने आह् ला बनाया गेआ ऐ (सीएसएस संक्रमणें गी पूरा होने दा इंतजार करग)।
छिपाओ।बीएस.पोपोवर इस घटना गी फौरन फायर कीता जंदा ऐ जिसलै hideइंस्टेंस विधि गी बुलाया गेआ ऐ.
छिपा।बीएस.गरीबी एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै पोपोवर बरतूनी थमां छिपाना समाप्त होई जंदा ऐ (सीएसएस संक्रमणें गी पूरा होने दा इंतजार करग)।
डाला।बीएस.गरीबी इस घटना गी उस show.bs.popoverघटना दे बाद फायर कीता जंदा ऐ जिसलै पोपोवर टेम्पलेट गी डीओएम च जोड़ेआ गेआ ऐ.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

अलर्ट संदेश alert.js ऐ

उदाहरण दे अलर्ट

इस प्लगइन कन्नै सारे अलर्ट संदेशें च खारिज फ़ंक्शनलटी जोड़ो.

बटन दा इस्तेमाल करदे बेल्लै .closeएह् दा पैह् ला बच्चा होना चाहिदा ऐ .alert-dismissibleते मार्कअप च इसदे पैह् ले कोई बी पाठ सामग्री नेईं आई सकदी।

प्रयोग करना

बस data-dismiss="alert"अपने बंद बटन च जोड़ो तां जे स्वचालित रूप कन्नै इक अलर्ट बंद कार्यक्षमता दित्ती जाई सकै। अलर्ट बंद करने कन्नै एह् डीओएम थमां हटाई दित्ता जंदा ऐ।

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

डीओएम थमां इक अलर्ट गी हटाइयै बंद करदा ऐ। जेकर तत्व पर .fadeते .inक्लास मौजूद न तां अलर्ट गी हटाने थमां पैह् ले फीका होई जाग.

घटनाएं

बूटस्ट्रैप दा अलर्ट प्लगइन अलर्ट कार्यक्षमता च हुक करने आस्तै किश घटनाएं गी उजागर करदा ऐ।

घटना दा प्रकार ब्यौरा
बंद करो।बीएस।अलर्ट 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), तां तुसेंगी अपने आपै .activeगी इनपुट पर क्लास गी टॉगल करने दी लोड़ होग label.

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

विधियां

$().button('toggle')

पुश स्टेट टॉगल करदा ऐ। बटन गी एह् दिक्खने गी दिंदा ऐ जे एह् सक्रिय होई गेदा ऐ।

$().button('reset')

बटन स्थिति गी रीसेट करदा ऐ - पाठ गी मूल पाठ च स्वैप करदा ऐ। एह् तरीका एसिंक्रोनस ऐ ते रीसेटिंग दा असल च पूरा होने थमां पैह् ले रिटर्न करदा ऐ.

$().button(string)

पाठ गी कुसै बी डेटा परिभाशत पाठ स्थिति च स्वैप करदा ऐ।

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

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

संकुचित करो collapse.js

लचीला प्लगइन जेह् ड़ा आसान टॉगल व्यवहार आस्तै मुट्ठी भर वर्गें दा उपयोग करदा ऐ।

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

संकुचित करने आस्तै संक्रमण प्लगइन गी बूटस्ट्रैप दे तुंदे संस्करण च शामल करने दी लोड़ ऐ.

मसाल

वर्ग बदलावें दे राहें इक होर तत्व गी दस्सने ते छिपाने आस्तै हेठ दित्ते गेदे बटनें पर क्लिक करो:

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

तुस एट्रिब्यूट कन्नै इक लिंक दा इस्तेमाल करी सकदे ओ href, जां एट्रिब्यूट कन्नै इक बटन दा इस्तेमाल करी सकदे ओ data-target। दोनों मामलें च, दी data-toggle="collapse"लोड़ ऐ।

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

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

पैनल घटक कन्नै इक अकॉर्डियन बनाने आस्तै डिफाल्ट संकुचन व्यवहार गी विस्तार करो.

एनिम परिआतुर क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड। 3 भेड़िया चंद्रमा officia aute, गैर कामदेव स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक क्विनोआ nesciunt लैबोरम eiusmod। ब्रंच 3 भेड़िया चंद्रमा अस्थायी, sunt aliqua इस पर एक पक्षी डाल दिया स्क्वीड एकल मूल कॉफी nulla assumenda shoreditch एट। निहिल एनिम केफियेह हेलवेटिका, शिल्प बीयर लेबर वेस एंडरसन क्रेड नेस्सिउंट सेपिएंटे ईए प्रोइडेंट। विज्ञापन शाकाहारी excepteur कसाई वाइस लोमो। लेगिंग occaecat शिल्प बीयर खेत-टू-टेबल, कच्चे डेनिम सौंदर्य सिंथ nesciunt तुसें शायद उन्हें accusamus श्रम टिकाऊ वीएचएस दे बारे च नेईं सुनेआ ऐ।
एनिम परिआतुर क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड। 3 भेड़िया चंद्रमा officia aute, गैर कामदेव स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक क्विनोआ nesciunt लैबोरम eiusmod। ब्रंच 3 भेड़िया चंद्रमा अस्थायी, sunt aliqua इस पर एक पक्षी डाल दिया स्क्वीड एकल मूल कॉफी nulla assumenda shoreditch एट। निहिल एनिम केफियेह हेलवेटिका, शिल्प बीयर लेबर वेस एंडरसन क्रेड नेस्सिउंट सेपिएंटे ईए प्रोइडेंट। विज्ञापन शाकाहारी excepteur कसाई वाइस लोमो। लेगिंग occaecat शिल्प बीयर खेत-टू-टेबल, कच्चे डेनिम सौंदर्य सिंथ nesciunt तुसें शायद उन्हें accusamus श्रम टिकाऊ वीएचएस दे बारे च नेईं सुनेआ ऐ।
एनिम परिआतुर क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड। 3 भेड़िया चंद्रमा officia aute, गैर कामदेव स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक क्विनोआ nesciunt लैबोरम eiusmod। ब्रंच 3 भेड़िया चंद्रमा अस्थायी, sunt aliqua इस पर एक पक्षी डाल दिया स्क्वीड एकल मूल कॉफी nulla assumenda shoreditch एट। निहिल एनिम केफियेह हेलवेटिका, शिल्प बीयर लेबर वेस एंडरसन क्रेड नेस्सिउंट सेपिएंटे ईए प्रोइडेंट। विज्ञापन शाकाहारी excepteur कसाई वाइस लोमो। लेगिंग occaecat शिल्प बीयर खेत-टू-टेबल, कच्चे डेनिम सौंदर्य सिंथ nesciunt तुसें शायद उन्हें accusamus श्रम टिकाऊ वीएचएस दे बारे च नेईं सुनेआ ऐ।
<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-bodyएस दे कन्नै एस गी स्वैप करना बी संभव ऐ .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"ते इक जोड़ो। एट्रिब्यूट इक CSS चयनकर्ता गी स्वीकार करदा ऐ जिस पर संकुचन लागू कीता जाई सकदा ऐ 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घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ।

घटनाएं

बूटस्ट्रैप दा पतन वर्ग पतन कार्यक्षमता च हुक करने आस्तै किश घटनाएं गी उजागर करदा ऐ.

घटना दा प्रकार ब्यौरा
दिखाओ।बीएस.कलाप्स showइंस्टेंस विधि गी बुलाने पर एह् घटना तुरत फायर होई जंदी ऐ।
दिखाया।बीएस.कलाप्स एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै इक संकुचन तत्व गी बरतूनी गी दिक्खने आह् ला बनाया गेआ ऐ (CSS संक्रमणें गी पूरा होने दा इंतजार करग)।
छिपाओ।बीएस.संकुचित करो इस घटना गी फौरन फायर कीता जंदा ऐ जिसलै hideविधि गी बुलाया गेआ ऐ।
छिपे दा.बी.एस.कलाप्स एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै कोई संकुचन तत्व बरतूनी थमां छुपाया गेदा ऐ (CSS संक्रमणें गी पूरा होने दा इंतजार करग)।
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

हिंडोला हिंडोला।जे एस

तत्वें दे माध्यम कन्नै साइकिल चलाने आस्तै इक स्लाइड शो घटक, जि’यां इक हिंडोला। नेस्टेड हिंडोला समर्थन नेईं कीता जंदा ऐ।

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

वैकल्पिक कैप्शन

.carousel-captionकिसी बी दे अंदर तत्व कन्नै अपनी स्लाइड्स च कैप्शन आसानी कन्नै जोड़ो .item. उथे अंदर बस लगभग कुसै बी वैकल्पिक HTML गी रक्खो ते एह् स्वतः संरेखित ते स्वरूपित होई जाग।

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

कई हिंडोला

हिंडोला नियंत्रणें गी ठीक ढंगै कन्नै कम्म करने आस्तै इक idपर बाहरी कंटेनर (the ) दा इस्तेमाल करने दी लोड़ होंदी ऐ । .carouselकई हिंडोला जोड़दे बेल्लै, जां हिंडोला बदलदे बेल्लै id, संबद्ध नियंत्रणें गी अपडेट करना सुनिश्चित करो।

डेटा विशेषताएं दे माध्यम कन्नै

हिंडोला दी स्थिति गी आसानी कन्नै नियंत्रत करने लेई डेटा विशेषताएं दा उपयोग करो। data-slideकीवर्ड गी स्वीकार करदा ऐ prevजां next, जेह् ड़ा स्लाइड स्थिति गी अपनी मौजूदा स्थिति दे सापेक्ष बदलदा ऐ. वैकल्पिक रूप कन्नै, data-slide-toहिंडोला गी इक कच्ची स्लाइड सूचकांक पास करने आस्तै इस्तेमाल करो data-slide-to="2", जेह् ड़ा स्लाइड स्थिति गी इक खास सूचकांक च शिफ्ट करदा ऐ जेह् ड़ा शुरू होंदा ऐ 0.

एट्रिब्यूट दा data-ride="carousel"इस्तेमाल इक हिंडोला गी पृष्ठ लोड पर शुरू होने आह् ले एनिमेट दे रूप च चिऱन्नत करने आस्तै कीता जंदा ऐ। इसदा इस्तेमाल इक गै हिंडोला दे (फालतू ते गैर-जरूरी) स्पश्ट जावास्क्रिप्ट आरंभीकरण कन्नै संयोजन च नेईं कीता जाई सकदा ऐ.

जावास्क्रिप्ट दे जरिए

हिंडोला गी मैन्युअल रूप कन्नै इस कन्नै कॉल करो:

$('.carousel').carousel()

विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-, च जोड़ो , जिऱयां data-interval="".

नां किसम डिफाल्ट ब्यौरा
अंतराल दा नंबर 5000 दी इक आइटम गी स्वतः साइकिल चलाने दे बिच्च देरी करने आस्तै समें दी मात्रा। जेकर झूठा ऐ तां हिंडोला अपने आप चक्कर नेईं करग।
बराम तार | शून्य "होवर" ऐ। जेकर सेट कीता गेदा ऐ तां "hover"हिंडोला दी साइकिलिंग गी रोकदा ऐ mouseenterते हिंडोला दी साइकिलिंग गी चालू करदा ऐ mouseleave. जेकर , पर सेट कीता गेदा ऐ null, तां हिंडोला उप्पर मंडराने कन्नै इसगी रोकना नेईं होग.
पलेस बूलियन सच्च क्या हिंडोला गी लगातार साइकिल चलाना चाहिदा जां हार्ड स्टॉप होनी चाहिदी।
कीबोर्ड दा बूलियन सच्च क्या हिंडोला गी कीबोर्ड दी घटनाएं पर प्रतिक्रिया देनी चाहिदी।

इक वैकल्पिक विकल्पें कन्नै हिंडोला गी objectशुरू करदा ऐ ते आइटमें दे माध्यम कन्नै साइकिल चलाना शुरू करदा ऐ।

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

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

आइटम दे माध्यम कन्नै हिंडोला गी साइकिल चलाने थमां रोकदा ऐ।

हिंडोला गी इक खास फ्रेम (0 आधारत, इक सरणी दे समान) च चक्र करदा ऐ।

पिछले आइटम गी चक्र करदा ऐ।

अगली आइटम तक चक्र।

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

दौनें घटनाएं च निम्नलिखित अतिरिक्त गुण न:

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

सारे हिंडोला घटनाएं गी हिंडोला पर गै (यानी पर <div class="carousel">) फायर कीता जंदा ऐ ।

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

affix.js लगाओ

मसाल

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


प्रयोग करना

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

नोट: सफारी रेंडरिंग बग दे कारण इक तुलनात्मक रूप कन्नै स्थित तत्व च निहित तत्व पर एफिक्स प्लगइन दा इस्तेमाल नेईं करो .

सीएसएस दे राहें पोजीशनिंग करना

एफिक्स प्लगइन त्रै वर्गें दे बीच टॉगल करदा ऐ, हर इक इक खास स्थिति दा प्रतिनिधित्व करदा ऐ: .affix, .affix-top, ते .affix-bottom. position: fixed;असल स्थिति गी संभालने आस्तै तुसें गी शैलियां, on गी छोड़ियै .affix, अपने आपै च (इस प्लगइन थमां स्वतंत्र) इनें वर्गें आस्तै उपलब्ध करोआनी होग.

एह्दे च एफिक्स प्लगइन किस चाल्ली कम्म करदा ऐ:

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

हेठ दित्ते गेदे किसे बी उपयोग विकल्पें लेई अपने CSS गी सेट करने लेई उप्पर दित्ते गेदे चरणें दा पालन करो.

डेटा विशेषताएं दे माध्यम कन्नै

किसी भी तत्व च एफिक्स व्यवहार गी आसानी कन्नै जोड़ने लेई, बस data-spy="affix"उस तत्व च जोड़ो जिस पर तुस जासूसी करना चांह् दे ओ। इक तत्व दी पिनिंग गी कदूं टॉगल करना ऐ इसगी परिभाशत करने आस्तै ऑफसेट दा इस्तेमाल करो.

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

जावास्क्रिप्ट दे जरिए

जावास्क्रिप्ट दे राहें एफिक्स प्लगइन गी कॉल करो:

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

विकल्प ऐ

विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-, च जोड़ो , जिऱयां data-offset-top="200".

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

विधियां

.affix(options)

तुंदी सामग्री गी चिपकने आह् ली सामग्री दे रूप च सक्रिय करदा ऐ। इक वैकल्पिक विकल्प स्वीकार करदा ऐ object.

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

.affix('checkPosition')

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

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

घटनाएं

बूटस्ट्रैप दा एफिक्स प्लगइन एफिक्स फ़ंक्शनलटी च हुक करने आस्तै किश घटनाएं गी उजागर करदा ऐ.

घटना दा प्रकार ब्यौरा
affix.bs.affix करना एह् घटना तत्व गी चिपकने थमां फौरन पैह् ले फायर करदी ऐ।
चिपकाया।बीएस.अफिक्स इस घटना गी तत्व गी चिपकने दे बाद फायर कीता जंदा ऐ।
affix-top.bs.affix ऐ एह् घटना तत्व गी चिपकने-टॉप होने थमां तुरंत पैह् ले फायर करदी ऐ।
चिपकया-टॉप.बीएस.चिढ़ाया इस घटना गी तत्व गी चिपकने दे बाद फायर कीता जंदा ऐ-टॉप।
affix-bottom.bs.affix ऐ एह् घटना तत्व गी चिपकने थमां पैह् ले गै फायर करदी ऐ-नीचे।
चिपकया-नीचे.बीएस.अनुकूलित इस घटना गी तत्व गी चिपकने दे बाद फायर कीता जंदा ऐ-नीचे।