अवलोकन

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

प्लगइनहरू व्यक्तिगत रूपमा समावेश गर्न सकिन्छ (बुटस्ट्र्यापको व्यक्तिगत *.jsफाइलहरू प्रयोग गरेर), वा सबै एकैचोटि (प्रयोग गरेर bootstrap.jsवा मिनिफाइड bootstrap.min.js)।

डाटा विशेषताहरू

तपाईले सबै बुटस्ट्र्याप प्लगइनहरू मार्कअप API मार्फत जाभास्क्रिप्टको एकल लाइन नलिइकन प्रयोग गर्न सक्नुहुन्छ। यो बुटस्ट्र्यापको पहिलो-कक्षा API हो र प्लगइन प्रयोग गर्दा तपाईंको पहिलो विचार हुनुपर्छ।

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

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

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

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

प्रोग्रामेटिक API

हामी यो पनि विश्वास गर्छौं कि तपाइँ जाभास्क्रिप्ट API मार्फत सबै बुटस्ट्र्याप प्लगइनहरू प्रयोग गर्न सक्षम हुनुपर्दछ। सबै सार्वजनिक API हरू एकल, चेनयोग्य विधिहरू हुन्, र कार्य गरिएको सङ्कलन फिर्ता गर्नुहोस्।

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

सबै विधिहरूले एक वैकल्पिक विकल्प वस्तु, एक विशेष विधिलाई लक्षित गर्ने स्ट्रिङ, वा केही पनि (जसले पूर्वनिर्धारित व्यवहारसँग प्लगइन प्रारम्भ गर्छ) स्वीकार गर्नुपर्छ।

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

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

पूर्वनिर्धारित सेटिङहरू

Constructor.DEFAULTSतपाईंले प्लगइनको वस्तु परिमार्जन गरेर प्लगइनको लागि पूर्वनिर्धारित सेटिङहरू परिवर्तन गर्न सक्नुहुन्छ :

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

विवाद छैन

कहिलेकाहीँ यो अन्य UI फ्रेमवर्कको साथ बुटस्ट्र्याप प्लगइनहरू प्रयोग गर्न आवश्यक छ। यी परिस्थितिहरूमा, नेमस्पेस टक्करहरू कहिलेकाहीं हुन सक्छ। यदि यो हुन्छ भने, तपाईले .noConflictप्लगइनलाई कल गर्न सक्नुहुन्छ जुन तपाईले मान उल्टाउन चाहानुहुन्छ।

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

घटनाहरू

बुटस्ट्र्यापले धेरै प्लगइनहरूको अद्वितीय कार्यहरूको लागि अनुकूल घटनाहरू प्रदान गर्दछ। सामान्यतया, यी एक अनन्त र विगत पार्टिसिपल फारममा आउँछन् - जहाँ अनन्त (उदा। show) घटनाको सुरुमा ट्रिगर हुन्छ, र यसको विगतको पार्टिसिपल फारम (उदा। shown) कार्य पूरा भएपछि ट्रिगर हुन्छ।

3.0.0 को रूपमा, सबै बुटस्ट्र्याप घटनाहरू नेमस्पेस गरिएका छन्।

सबै अनन्त घटनाहरूले preventDefaultकार्यक्षमता प्रदान गर्दछ। यसले यो सुरु हुनु अघि कार्यको कार्यान्वयन रोक्न सक्ने क्षमता प्रदान गर्दछ।

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

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

प्रत्येक बुटस्ट्र्यापको jQuery प्लगइनहरूको संस्करण VERSIONप्लगइनको कन्स्ट्रक्टरको सम्पत्ति मार्फत पहुँच गर्न सकिन्छ। उदाहरण को लागी, टूलटिप प्लगइन को लागी:

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

जाभास्क्रिप्ट असक्षम हुँदा कुनै विशेष फलब्याक छैन

बुटस्ट्र्यापको प्लगइनहरू जाभास्क्रिप्ट असक्षम हुँदा विशेष गरी राम्रोसँग फिर्ता हुँदैन। यदि तपाइँ यस मामलामा प्रयोगकर्ता अनुभवको बारेमा ख्याल गर्नुहुन्छ भने, <noscript>तपाइँका प्रयोगकर्ताहरूलाई स्थिति (र कसरी JavaScript पुन: सक्षम गर्ने) व्याख्या गर्न प्रयोग गर्नुहोस्, र/वा तपाइँको आफ्नै अनुकूल फलब्याकहरू थप्नुहोस्।

संक्रमण transition.js

संक्रमण बारे

साधारण संक्रमण प्रभावहरूको लागि, transition.jsअन्य JS फाइलहरूसँगै एक पटक समावेश गर्नुहोस्। यदि तपाइँ कम्पाइल गरिएको (वा मिनिफाइड) प्रयोग गर्दै हुनुहुन्छ भने bootstrap.js, यो समावेश गर्न आवश्यक छैन - यो पहिले नै त्यहाँ छ।

भित्र के छ

Transition.js transitionEndघटनाहरूको लागि आधारभूत सहयोगीका साथै CSS संक्रमण इमुलेटर हो। यो अन्य प्लगइनहरू द्वारा CSS संक्रमण समर्थनको लागि जाँच गर्न र ह्याङ्गिङ ट्रान्जिसनहरू समात्न प्रयोग गरिन्छ।

ट्रान्जिसनहरू असक्षम गर्दै

ट्रान्जिसनहरू निम्न जाभास्क्रिप्ट स्निपेट प्रयोग गरेर विश्वव्यापी रूपमा असक्षम गर्न सकिन्छ, जुन लोड भएपछि transition.js(वा bootstrap.jsवा bootstrap.min.js, मामला हुन सक्छ) आउनै पर्छ:

$.support.transition = false

मोडलहरू modal.js

मोडलहरू सुव्यवस्थित, तर लचिलो, न्यूनतम आवश्यक कार्यक्षमता र स्मार्ट पूर्वनिर्धारितहरूसँग संवाद प्रम्प्टहरू छन्।

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

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

उदाहरणहरू

स्थिर उदाहरण

हेडर, शरीर, र फुटरमा कार्यहरूको सेटको साथ रेन्डर गरिएको मोडल।

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

प्रत्यक्ष डेमो

तलको बटनमा क्लिक गरेर JavaScript मार्फत मोडल टगल गर्नुहोस्। यो तल स्लाइड हुनेछ र पृष्ठको माथिबाट फीड हुनेछ।

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

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

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

मोडलहरूमा दुईवटा वैकल्पिक साइजहरू हुन्छन्, परिमार्जक वर्गहरू मार्फत उपलब्ध छन् .modal-dialog।

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

<div class="modal fade 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>

ग्रिड प्रणाली प्रयोग गर्दै

मोडल भित्र बुटस्ट्र्याप ग्रिड प्रणालीको फाइदा लिनको लागि, केवल नेस्ट .rows भित्र भित्र .modal-bodyर त्यसपछि सामान्य ग्रिड प्रणाली कक्षाहरू प्रयोग गर्नुहोस्।

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

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

बटनहरूको गुच्छा छ जुन सबैले एउटै मोडल ट्रिगर गर्दछ, थोरै फरक सामग्रीहरूसँग? प्रयोग गर्नुहोस् 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)
})

प्रयोग

मोडल प्लगइनले डाटा विशेषताहरू वा JavaScript मार्फत मागमा तपाईंको लुकेको सामग्री टगल गर्दछ। यसले पूर्वनिर्धारित स्क्रोलिङ व्यवहारलाई ओभरराइड गर्न थप गर्दछ र मोडल बाहिर क्लिक गर्दा देखाइएका मोडलहरू खारेज गर्नको लागि क्लिक क्षेत्र प्रदान गर्न उत्पन्न .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)

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-backdrop=""।

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

विधिहरू

.modal(options)

तपाईंको सामग्रीलाई मोडलको रूपमा सक्रिय गर्दछ। वैकल्पिक विकल्पहरू स्वीकार गर्दछ object।

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

.modal('toggle')

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

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

.modal('show')

म्यानुअल रूपमा मोडल खोल्छ। मोडल वास्तवमा देखाइनु अघि कलरमा फर्कन्छ (अर्थात shown.bs.modalघटना हुनु अघि)।

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

.modal('hide')

म्यानुअल रूपमा मोडल लुकाउँछ। मोडल वास्तवमा लुकाउनु अघि कलरमा फर्कन्छ (अर्थात hidden.bs.modalघटना हुनु अघि)।

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

.modal('handleUpdate')

स्क्रोलबार काउन्टर गर्न मोडलको पोजिसनिङलाई रिडज गर्नुहोस् यदि कुनै देखा पर्नु पर्छ, जसले मोडललाई बायाँ तिर जान्छ।

यो खुला हुँदा मोडलको उचाइ परिवर्तन हुँदा मात्र आवश्यक छ।

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

घटनाहरू

बुटस्ट्र्यापको मोडल क्लासले मोडल प्रकार्यतामा हुक गर्नका लागि केही घटनाहरू उजागर गर्दछ।

सबै मोडल घटनाहरू मोडलमा (जस्तै मा <div class="modal">) मा फायर गरिएका छन्।

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

ड्रपडाउन ड्रपडाउन .js

उदाहरणहरू

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

नवबार भित्र

चक्की भित्र

प्रयोग

डेटा विशेषताहरू वा JavaScript मार्फत, ड्रपडाउन प्लगइनले .openअभिभावक सूची वस्तुमा क्लास टगल गरेर लुकेको सामग्री (ड्रपडाउन मेनु) टगल गर्दछ।

मोबाइल उपकरणहरूमा, ड्रपडाउन खोल्दा .dropdown-backdropमेनु बाहिर ट्याप गर्दा ड्रपडाउन मेनुहरू बन्द गर्नको लागि ट्याप क्षेत्र थप्छ, उचित iOS समर्थनको लागि आवश्यकता। यसको मतलब खुला ड्रपडाउन मेनुबाट फरक ड्रपडाउन मेनुमा स्विच गर्न मोबाइलमा अतिरिक्त ट्याप आवश्यक छ।

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

डाटा विशेषताहरू मार्फत

data-toggle="dropdown"ड्रपडाउन टगल गर्न लिङ्क वा बटनमा थप्नुहोस् ।

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

URL लाई लिङ्क बटनहरूसँग अक्षुण्ण राख्न, को data-targetसट्टा विशेषता प्रयोग गर्नुहोस् href="#"।

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

जाभास्क्रिप्ट मार्फत

जाभास्क्रिप्ट मार्फत ड्रपडाउनहरू कल गर्नुहोस्:

$('.dropdown-toggle').dropdown()

विकल्पहरू

कुनै पनि छैन

विधिहरू

$().dropdown('toggle')

दिइएको नेभबार वा ट्याब गरिएको नेभिगेसनको ड्रपडाउन मेनुलाई टगल गर्दछ।

घटनाहरू

सबै ड्रपडाउन घटनाहरू .dropdown-menu'अभिभावक तत्वमा फायर गरिएका छन्।

सबै ड्रपडाउन घटनाहरूमा एक relatedTargetगुण हुन्छ, जसको मान टगल गर्ने एङ्कर तत्व हो।

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

ScrollSpy scrollspy.js

navbar मा उदाहरण

ScrollSpy प्लगइन स्क्रोल स्थितिमा आधारित एनएभि लक्ष्यहरू स्वचालित रूपमा अद्यावधिक गर्नको लागि हो। नेभबार तलको क्षेत्र स्क्रोल गर्नुहोस् र सक्रिय वर्ग परिवर्तन हेर्नुहोस्। ड्रपडाउन उप वस्तुहरू पनि हाइलाइट गरिनेछ।

प्रयोग

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

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

डाटा विशेषताहरू मार्फत

तपाईको शीर्षपट्टी नेभिगेसनमा सजिलैसँग scrollspy व्यवहार थप्नको data-spy="scroll"लागि, तपाईले जासुसी गर्न चाहनुभएको तत्वमा थप्नुहोस् (सामान्यतया यो हुनेछ <body>)। त्यसपछि कुनै पनि बुटस्ट्र्याप कम्पोनेन्टको data-targetअभिभावक तत्वको ID वा वर्गसँग विशेषता थप्नुहोस्।.nav

body {
  position: relative;
}

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

जाभास्क्रिप्ट मार्फत

आफ्नो CSS मा थपे पछि position: relative;, जाभास्क्रिप्ट मार्फत scrollspy कल गर्नुहोस्:

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

विधिहरू

.scrollspy('refresh')

DOM बाट तत्वहरू थप्ने वा हटाउने संयोजनमा scrollspy प्रयोग गर्दा, तपाईंले रिफ्रेस विधिलाई यसरी कल गर्न आवश्यक छ:

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

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-offset=""।

घटनाहरू

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

टगल गर्न मिल्ने ट्याबहरू tab.js

उदाहरण ट्याबहरू

द्रुत, गतिशील ट्याब कार्यक्षमता थप्नुहोस् स्थानीय सामग्रीको प्यानहरू मार्फत, ड्रपडाउन मेनुहरू मार्फत पनि। नेस्टेड ट्याबहरू समर्थित छैनन्।

प्रयोग

जाभास्क्रिप्ट मार्फत ट्याबयोग्य ट्याबहरू सक्षम गर्नुहोस् (प्रत्येक ट्याबलाई व्यक्तिगत रूपमा सक्रिय गर्न आवश्यक छ):

$('#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वा hrefDOM मा कन्टेनर नोड लक्षित हुनुपर्छ। माथिका उदाहरणहरूमा, ट्याबहरू विशेषताहरूसँग <a>s हुन् data-toggle="tab"।

.tab('show')

दिइएको ट्याब चयन गर्छ र यसको सम्बन्धित सामग्री देखाउँछ। पहिले चयन गरिएको कुनै पनि अन्य ट्याब अचयनित हुन्छ र यसको सम्बन्धित सामग्री लुकाइन्छ। ट्याब फलक वास्तवमा देखाइनु अघि कलरमा फर्कन्छ (अर्थात shown.bs.tabघटना हुनु अघि)।

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

घटनाहरू

नयाँ ट्याब देखाउँदा, घटनाहरू निम्न क्रममा सक्रिय हुन्छन्:

1. hide.bs.tab(हालको सक्रिय ट्याबमा)
2. show.bs.tab(देखाउन ट्याबमा)
3. hidden.bs.tab(अघिल्लो सक्रिय ट्याबमा, hide.bs.tabघटनाको लागि जस्तै)
4. shown.bs.tab(नयाँ-सक्रिय भर्खरै देखाइएको ट्याबमा, show.bs.tabघटनाको लागि जस्तै)

यदि कुनै ट्याब पहिले नै सक्रिय थिएन भने, त्यसपछि hide.bs.tabघटनाहरू hidden.bs.tabनिकालिने छैनन्।

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

टूलटिप्स tooltip.js

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

शून्य-लम्बाइ शीर्षकहरू भएका उपकरण टिपहरू कहिल्यै प्रदर्शित हुँदैनन्।

उदाहरणहरू

टूलटिपहरू हेर्न तलका लिङ्कहरूमा होभर गर्नुहोस्:

स्थिर टुलटिप

चार विकल्पहरू उपलब्ध छन्: शीर्ष, दायाँ, तल, र बायाँ पङ्क्तिबद्ध।

चार दिशा

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

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

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

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

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

प्रयोग

टूलटिप प्लगइनले मागमा सामग्री र मार्कअप उत्पन्न गर्दछ, र पूर्वनिर्धारित रूपमा तिनीहरूको ट्रिगर तत्व पछि उपकरणटिपहरू राख्छ।

जाभास्क्रिप्ट मार्फत टूलटिप ट्रिगर गर्नुहोस्:

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

मार्कअप

टुलटिपको लागि आवश्यक मार्कअप एउटा dataविशेषता मात्र हो र titleHTML तत्वमा तपाईंले टुलटिप पाउन चाहनुहुन्छ। टुलटिपको उत्पन्न मार्कअप एकदम सरल छ, यद्यपि यसलाई स्थिति चाहिन्छ (पूर्वनिर्धारित रूपमा, प्लगइनद्वारा सेट गरिएको top)।

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

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

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-animation=""।

विधिहरू

$().tooltip(options)

तत्व सङ्कलनमा टुलटिप ह्यान्डलर संलग्न गर्छ।

.tooltip('show')

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

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

.tooltip('hide')

तत्वको टुलटिप लुकाउँछ। टूलटिप वास्तवमा लुकाइनु अघि कलरमा फर्कन्छ (अर्थात hidden.bs.tooltipघटना हुनु अघि)। यसलाई टुलटिपको "म्यानुअल" ट्रिगरिङ मानिन्छ।

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

.tooltip('toggle')

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

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

.tooltip('destroy')

तत्वको टुलटिप लुकाउँछ र नष्ट गर्दछ। डेलिगेशन प्रयोग गर्ने टूलटिपहरू (जसलाई विकल्प प्रयोग गरेरselector सिर्जना गरिन्छ ) व्यक्तिगत रूपमा वंशज ट्रिगर तत्वहरूमा नष्ट गर्न सकिँदैन।

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

घटनाहरू

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

Popovers popover.js

सामग्रीको सानो ओभरलेहरू थप्नुहोस्, जस्तै आईप्याडमा, आवास माध्यमिक जानकारीको लागि कुनै पनि तत्वमा।

Popovers जसको शीर्षक र सामग्री दुवै शून्य-लम्बाइ छन् कहिल्यै प्रदर्शित हुँदैन।

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

उदाहरणहरू

स्थिर पपओभर

चार विकल्पहरू उपलब्ध छन्: शीर्ष, दायाँ, तल, र बायाँ पङ्क्तिबद्ध।

प्रत्यक्ष डेमो

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

चार दिशा

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

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

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

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

अर्को क्लिकमा खारेज गर्नुहोस्

focusप्रयोगकर्ताले गरेको अर्को क्लिकमा popovers खारेज गर्न ट्रिगर प्रयोग गर्नुहोस्।

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

प्रयोग

जाभास्क्रिप्ट मार्फत popovers सक्षम गर्नुहोस्:

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

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-animation=""।

विधिहरू

$().popover(options)

तत्व सङ्कलनका लागि popovers प्रारम्भ गर्दछ।

.popover('show')

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

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

.popover('hide')

तत्वको पपओभर लुकाउँछ। पपओभर लुकाउनु अघि कलरमा फर्कन्छ (अर्थात hidden.bs.popoverघटना हुनु अघि)। यसलाई पपओभरको "म्यानुअल" ट्रिगरिङ मानिन्छ।

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

.popover('toggle')

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

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

.popover('destroy')

तत्वको पपओभर लुकाउँछ र नष्ट गर्दछ। डेलिगेशन प्रयोग गर्ने पोपोभरहरू (जसलाई विकल्प प्रयोग गरेरselector सिर्जना गरिन्छ ) व्यक्तिगत रूपमा वंशज ट्रिगर तत्वहरूमा नष्ट गर्न सकिँदैन।

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

घटनाहरू

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

चेतावनी सन्देश alert.js

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

यस प्लगइनको साथ सबै अलर्ट सन्देशहरूमा खारेज कार्यक्षमता थप्नुहोस्।

बटन प्रयोग गर्दा .close, यो को पहिलो बच्चा हुनुपर्दछ .alert-dismissibleर मार्कअपमा कुनै पाठ सामग्री आउन सक्दैन।

प्रयोग

data-dismiss="alert"स्वचालित रूपमा अलर्ट क्लोज कार्यक्षमता दिनको लागि आफ्नो बन्द बटनमा थप्नुहोस् । अलर्ट बन्द गर्नाले यसलाई DOM बाट हटाउँछ।

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

तपाईंको अलर्टहरू बन्द गर्दा एनिमेसन प्रयोग गर्न, तिनीहरूमा पहिले नै लागू गरिएको .fadeर कक्षाहरू छन् भनी सुनिश्चित गर्नुहोस्।.in

विधिहरू

$().alert()

विशेषता भएका अवतरण तत्वहरूमा क्लिक घटनाहरूको लागि अलर्ट सुन्न बनाउँछ data-dismiss="alert"। (डेटा-एपीआईको स्वत: प्रारम्भिकरण प्रयोग गर्दा आवश्यक छैन।)

$().alert('close')

यसलाई DOM बाट हटाएर अलर्ट बन्द गर्छ। यदि .fadeर .inवर्गहरू तत्वमा उपस्थित छन् भने, यो हटाउनु अघि सतर्कता फिक्का हुनेछ।

घटनाहरू

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

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

बटन button.js

बटनहरूसँग थप गर्नुहोस्। कन्ट्रोल बटन अवस्थाहरू वा उपकरणपट्टीहरू जस्तै थप घटकहरूको लागि बटनहरूको समूह सिर्जना गर्नुहोस्।

स्टेटफुल

data-loading-text="Loading..."बटनमा लोडिङ अवस्था प्रयोग गर्न थप्नुहोस् ।

यो सुविधा v3.3.5 देखि रोकिएको छ र v4 मा हटाइएको छ।

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

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

एकल टगल

data-toggle="button"एकल बटनमा टगलिङ सक्रिय गर्न थप्नुहोस् ।

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

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

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

<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"आवश्यक छ।

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

Accordion उदाहरण

प्यानल कम्पोनेन्टसँग एकॉर्डियन सिर्जना गर्न पूर्वनिर्धारित पतन व्यवहार विस्तार गर्नुहोस्।

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

.panel-bodys सँग s स्वैप गर्न पनि सम्भव छ .list-group।

प्रयोग

पतन प्लगइनले भारी लिफ्टिङ ह्यान्डल गर्न केही वर्गहरू प्रयोग गर्दछ:

• .collapseसामग्री लुकाउँछ
• .collapse.inसामग्री देखाउँछ
• .collapsingसंक्रमण सुरु हुँदा थपिन्छ, र समाप्त भएपछि हटाइन्छ

यी कक्षाहरू मा फेला पार्न सकिन्छ component-animations.less।

डाटा विशेषताहरू मार्फत

ढल्न मिल्ने तत्वको नियन्त्रण स्वतः असाइन गर्न तत्वमा केवल थप्नुहोस् data-toggle="collapse"र a । एट्रिब्युटले CSS चयनकर्ता स्वीकार गर्छ जसमा पतन लागू हुन्छ data-target। संकुचित तत्वमा data-targetवर्ग थप्न निश्चित हुनुहोस् । collapseयदि तपाइँ यसलाई पूर्वनिर्धारित रूपमा खोल्न चाहनुहुन्छ भने, अतिरिक्त कक्षा थप्नुहोस् in।

एकोर्डियन-जस्तै समूह व्यवस्थापनलाई मिलाउन मिल्ने नियन्त्रणमा थप्न, डेटा विशेषता थप्नुहोस् data-parent="#selector"। यसलाई कार्यमा हेर्नको लागि डेमोलाई सन्दर्भ गर्नुहोस्।

जाभास्क्रिप्ट मार्फत

म्यानुअल रूपमा सक्षम गर्नुहोस्:

$('.collapse').collapse()

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-parent=""।

विधिहरू

.collapse(options)

तपाइँको सामग्री एक संकुचन तत्व को रूप मा सक्रिय गर्दछ। वैकल्पिक विकल्पहरू स्वीकार गर्दछ object।

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

.collapse('toggle')

देखाइएका वा लुकाउन मिल्ने तत्वलाई टगल गर्छ। सङ्कलनयोग्य तत्व वास्तवमा देखाइयो वा लुकाइनु अघि कलरमा फर्कन्छ (जस्तै shown.bs.collapseवा hidden.bs.collapseघटना हुनु अघि)।

.collapse('show')

मिलाउन मिल्ने तत्व देखाउँछ। कलप्सिबल तत्व वास्तवमा देखाइनु अघि कलरमा फर्कन्छ (अर्थात shown.bs.collapseघटना हुनु अघि)।

.collapse('hide')

मिलाउन मिल्ने तत्व लुकाउँछ। कोल्प्सिबल एलिमेन्ट वास्तवमा लुकेको हुनु अघि कलरमा फर्कन्छ (अर्थात hidden.bs.collapseघटना हुनु अघि)।

घटनाहरू

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

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

Carousel carousel.js

क्यारोसेल जस्ता तत्वहरू मार्फत साइकल चलाउनको लागि स्लाइड शो कम्पोनेन्ट। नेस्टेड क्यारोसेलहरू समर्थित छैनन्।

उदाहरणहरू

अघिल्लो अर्को

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

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

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

वैकल्पिक क्याप्शनहरू

.carousel-captionकुनै पनि भित्र तत्वको साथ सजिलै आफ्नो स्लाइडमा क्याप्सन थप्नुहोस् .item। त्यहाँ भित्र कुनै पनि वैकल्पिक HTML राख्नुहोस् र यो स्वचालित रूपमा पङ्क्तिबद्ध र ढाँचा हुनेछ।

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

Nulla vitae elit libero, a pharetra augue mollis interdum।

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

अघिल्लो अर्को

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

प्रयोग

धेरै carousels

क्यारोसेलहरूलाई क्यारोसेल नियन्त्रणहरू ठीकसँग काम गर्नको लागि idबाहिरी कन्टेनरमा (द ) को प्रयोग आवश्यक हुन्छ। .carouselधेरै क्यारोसेलहरू थप्दा, वा क्यारोसेल परिवर्तन गर्दा id, सान्दर्भिक नियन्त्रणहरू अद्यावधिक गर्न निश्चित हुनुहोस्।

डाटा विशेषताहरू मार्फत

क्यारोसेलको स्थिति सजिलै नियन्त्रण गर्न डेटा विशेषताहरू प्रयोग गर्नुहोस्। data-slideकुञ्जी शब्दहरू स्वीकार गर्दछ prevवा next, जसले स्लाइड स्थितिलाई यसको हालको स्थितिको सापेक्ष परिवर्तन गर्दछ। वैकल्पिक रूपमा, data-slide-toक्यारोसेलमा कच्चा स्लाइड अनुक्रमणिका पास गर्न प्रयोग गर्नुहोस् data-slide-to="2", जसले स्लाइड स्थितिलाई बाट सुरु हुने विशेष अनुक्रमणिकामा बदल्छ 0।

क्यारोसेललाई data-ride="carousel"पृष्ठ लोडबाट सुरु हुने एनिमेसनको रूपमा चिन्ह लगाउन विशेषता प्रयोग गरिन्छ। यसलाई एउटै क्यारोसेलको स्पष्ट JavaScript प्रारम्भिकता (अनावश्यक र अनावश्यक) सँग संयोजनमा प्रयोग गर्न सकिँदैन।

जाभास्क्रिप्ट मार्फत

क्यारोसेललाई म्यानुअल रूपमा कल गर्नुहोस्:

$('.carousel').carousel()

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-interval=""।

विधिहरू

.carousel(options)

वैकल्पिक विकल्पहरूको साथ क्यारोसेल प्रारम्भ गर्दछ objectर वस्तुहरू मार्फत साइकल चलाउन थाल्छ।

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

.carousel('cycle')

बायाँ देखि दायाँ क्यारोसेल वस्तुहरू मार्फत चक्र।

.carousel('pause')

क्यारोसेललाई वस्तुहरू मार्फत साइकल चलाउनबाट रोक्छ।

.carousel(number)

क्यारोसेललाई विशेष फ्रेममा (० आधारित, एर्रे जस्तै) मा साइकल गर्नुहोस्।

.carousel('prev')

अघिल्लो वस्तुमा चक्र।

.carousel('next')

अर्को वस्तुमा साइकल।

घटनाहरू

बुटस्ट्र्यापको क्यारोसेल क्लासले क्यारोसेल कार्यक्षमतामा हुक गर्नका लागि दुई घटनाहरू उजागर गर्दछ।

दुबै घटनाहरूमा निम्न अतिरिक्त गुणहरू छन्:

• direction: क्यारोसेल सर्ने दिशा (कि त "left"वा "right")।
• relatedTarget: सक्रिय वस्तुको रूपमा स्थानमा स्लाइड भइरहेको DOM तत्व।

सबै क्यारोसेल घटनाहरू क्यारोसेलमा (जस्तै मा <div class="carousel">) मा फायर गरिन्छ।

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

Affix affix.js

उदाहरण

affix प्लगइन टगल position: fixed;अन र अफ, सँग फेला परेको प्रभाव अनुकरण गर्दै position: sticky;। दायाँको सबनेभिगेसन affix प्लगइनको प्रत्यक्ष डेमो हो।

प्रयोग

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

न���ट: सफारी रेन्डरिङ बगको कारणले तानिएको वा धकेलिएको स्तम्भ जस्ता अपेक्षाकृत स्थितिमा रहेको तत्वमा समावेश भएको तत्वमा affix प्लगइन प्रयोग नगर्नुहोस् ।

CSS मार्फत स्थिति निर्धारण

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

यहाँ कसरी affix प्लगइन काम गर्दछ:

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

तलका कुनै पनि प्रयोग विकल्पहरूको लागि आफ्नो CSS सेट गर्न माथिका चरणहरू पालना गर्नुहोस्।

डाटा विशेषताहरू मार्फत

सजिलैसँग कुनै पनि तत्वमा affix व्यवहार थप्नको data-spy="affix"लागि, तपाईले जासुसी गर्न चाहनु भएको तत्वमा थप्नुहोस्। कुनै तत्वको पिनिङ कहिले टगल गर्ने भनेर परिभाषित गर्न अफसेटहरू प्रयोग गर्नुहोस्।

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

जाभास्क्रिप्ट मार्फत

जाभास्क्रिप्ट मार्फत affix प्लगइन कल गर्नुहोस्:

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

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-offset-top="200"।

विधिहरू

.affix(options)

तपाईंको सामग्रीलाई संलग्न सामग्रीको रूपमा सक्रिय गर्दछ। वैकल्पिक विकल्पहरू स्वीकार गर्दछ object।

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

.affix('checkPosition')

सान्दर्भिक तत्वहरूको आयाम, स्थिति र स्क्रोल स्थितिको आधारमा affix को स्थिति पुन: गणना गर्दछ। , .affix, .affix-topर .affix-bottomवर्गहरू नयाँ अवस्था अनुसार जोडिएको सामग्रीमा थपिन्छ वा हटाइन्छ। यो विधि कल गर्न आवश्यक छ जब पनि जोडिएको सामग्री वा लक्षित तत्वको आयामहरू परिवर्तन हुन्छन्, जोडिएको सामग्रीको सही स्थिति सुनिश्चित गर्न।

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

घटनाहरू

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