Nchịkọta

Onye ma ọ bụ chịkọtara

Enwere ike itinye ngwa mgbakwunye n'otu n'otu (iji *.jsfaịlụ Bootstrap n'otu n'otu), ma ọ bụ ha niile n'otu oge (iji bootstrap.jsma ọ bụ nke pere mpe bootstrap.min.js).

Iji Javascript agbakọtara

Ha abụọ bootstrap.jsnwere bootstrap.min.jsplugins niile n'otu faịlụ. Tinye naanị otu.

Ndabere ngwa mgbakwunye

Ụfọdụ plugins na akụkụ CSS na-adabere na plugins ndị ọzọ. Ọ bụrụ na ị gụnyere plugins n'otu n'otu, jide n'aka na ịlele maka ndabere ndị a na docs. Rịba ama na plugins niile dabere na jQuery (nke a pụtara jQuery ga-etinyerịrị tupu faịlụ ngwa mgbakwunye). Gaa na anyịbower.json ka ịhụ ụdị jQuery akwadoro.

Njirimara data

Ị nwere ike iji plugins Bootstrap niile naanị site na API akara na-edeghị otu ahịrị Javascript. Nke a bụ API klas mbụ Bootstrap ma kwesịrị ịbụ ihe mbụ ị ga-echebara mgbe ị na-eji ngwa mgbakwunye.

Nke ahụ kwuru, n'ọnọdụ ụfọdụ ọ nwere ike ịdị mma ka gbanyụọ ọrụ a. Ya mere, anyị na-enyekwa ikike iji gbanyụọ njirimara data API site n'iwepụ ihe omume niile dị na akwụkwọ aha ya na data-api. Nke a dị ka nke a:

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

N'aka nke ọzọ, iji kwado ngwa mgbakwunye a kapịrị ọnụ, tinye naanị aha ngwa mgbakwunye dị ka oghere aha yana data-api namespace dị ka nke a:

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

Naanị otu ngwa mgbakwunye kwa mmewere site na njirimara data

Ejila njirimara data sitere na ọtụtụ plugins n'otu mmewere. Dịka ọmụmaatụ, bọtịnụ enweghị ike ịnwe ntụnye aka ma gbanwee modal. Iji mezuo nke a, jiri ihe mkpuchi.

API mmemme

Anyị kwenyekwara na ị ga-enwe ike iji plugins Bootstrap naanị site na API Javascript. API ọhaneze niile bụ otu, ụzọ enwere ike ịgbanye, wee weghachi mkpokọta emere.

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

Ụzọ niile kwesịrị ịnakwere ihe nhọrọ nhọrọ, eriri nke lekwasịrị anya otu usoro, ma ọ bụ ihe ọ bụla (nke na-amalite ngwa mgbakwunye nwere omume ndabara):

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

Ngwa mgbakwunye ọ bụla na-ekpughekwa ihe nrụpụta akụrụngwa ya na akụrụngwa Constructor: $.fn.popover.Constructor. Ọ bụrụ na ị ga-achọ ịnweta otu ngwa mgbakwunye ihe atụ, weghachite ya ozugbo na mmewere: $('[rel="popover"]').data('popover').

Ntọala mbụ

Ị nwere ike ịgbanwe ntọala ndabara maka ngwa mgbakwunye site n'ịgbanwe ihe ngwa mgbakwunye Constructor.DEFAULTS:

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

Enweghị esemokwu

Mgbe ụfọdụ, ọ dị mkpa iji plugins Bootstrap nwere usoro UI ndị ọzọ. N'ọnọdụ ndị a, ndakọrịta oghere aha nwere ike ime mgbe ụfọdụ. Ọ bụrụ na nke a emee, ị nwere ike ịkpọ .noConflictna ngwa mgbakwunye ịchọrọ iweghachi uru nke.

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

Ihe omume

Bootstrap na-enye mmemme omenala maka ọtụtụ omume pụrụ iche nke plugins. N'ozuzu, ndị a na-abịa n'ụdị njedebe na nke gara aga - ebe njedebe (dịka show) na-akpalite na mmalite nke mmemme, na ụdị nsonye ya gara aga (dịka shown) na-akpalite na mmecha nke omume.

Dịka nke 3.0.0, a na-enye aha mmemme Bootstrap niile.

Ihe omume enweghị ngwụcha na-enye preventDefaultọrụ. Nke a na-enye ikike ịkwụsị mmezu nke ihe tupu ya amalite.

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

Nọmba ụdị

Enwere ike ịnweta ụdị nke ọ bụla nke Bootstrap's jQuery plugins site na VERSIONakụrụngwa nke ihe nrụpụta ngwa mgbakwunye. Dịka ọmụmaatụ, maka ngwa mgbakwunye ngwa ngwa:

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

Enweghị ndaghachi azụ pụrụ iche mgbe Javascript nwere nkwarụ

Ihe mgbakwunye Bootstrap anaghị ada azụ n'ọmarịcha mgbe Javascript nwere nkwarụ. Ọ bụrụ na ị na-eche banyere ahụmahụ onye ọrụ na nke a, jiri <noscript>kọwaa ọnọdụ ahụ (na otu esi eme ka Javascript dịghachi) nye ndị ọrụ gị, na / ma ọ bụ gbakwunye ọdịda omenala nke gị.

Ụlọ ọba akwụkwọ ndị ọzọ

Bootstrap anaghị akwado ọba akwụkwọ JavaScript nke ndị ọzọ dị ka Prototype ma ọ bụ jQuery UI. N'agbanyeghị .noConflictna ihe omume kpọpụtara aha, enwere ike ịnwe nsogbu ndakọrịta nke ịchọrọ idozi n'onwe gị.

Mgbanwe mgbanwe.js

Banyere mgbanwe

Maka mmetụta mgbanwe dị mfe, tinye transition.jsotu ugboro n'akụkụ faịlụ JS ndị ọzọ. Ọ bụrụ na ị na-eji nke achịkọtara (ma ọ bụ miniified) bootstrap.js, ọ dịghị mkpa itinye nke a-ọ dịlarị ebe ahụ.

Kedu ihe dị n'ime

Transition.js bụ ihe enyemaka bụ isi maka transitionEndmmemme yana emulator mgbanwe CSS. Ndị plugins ndị ọzọ na-eji ya iji lelee nkwado mgbanwe CSS yana ijide mgbanwe nkwudo.

Ịgbanyụọ ntụgharị

Enwere ike gbanyụọ mgbanwe n'ụwa niile site na iji snippet Javascript na-esote, nke ga-abịarịrị mgbe transition.js(ma bootstrap.jsọ bụ bootstrap.min.js, dị ka ọ dị) kwajuru:

$.support.transition = false

Ụdị modal.js

A na-ahazi usoro, mana na-agbanwe agbanwe, na-akpalite mkparịta ụka na arụrụ ọrụ kacha nta achọrọ yana ndabara smart.

Akwadoghi otutu oghere mepere emepe

Jide n'aka na ị gaghị emeghe modal mgbe a ka na-ahụ nke ọzọ. Igosi ihe karịrị otu modal n'otu oge chọrọ koodu omenala.

Ndobe akara ngosi

Gbalịa idowe koodu HTML nke modal n'ọkwa dị elu n'ime akwụkwọ gị iji zere ihe ndị ọzọ na-emetụta ọdịdị na/ma ọ bụ ọrụ modal.

Akaụntụ ngwaọrụ mkpanaka

Enwere ụfọdụ ịdọ aka ná ntị gbasara iji modal na ngwaọrụ mkpanaka. Hụ docs nkwado ihe nchọgharị anyị maka nkọwa.

N'ihi ka HTML5 si akọwa semantics ya, autofocusàgwà HTML enweghị mmetụta na Bootstrap modals. Iji nweta otu mmetụta ahụ, jiri ụfọdụ Javascript omenala:

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

Ihe atụ

Ihe atụ kwụ ọtọ

Modal emepụtara nwere nkụnye eji isi mee, ahụ, na usoro omume n'okpuru ụkwụ.

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

Ihe ngosi dị ndụ

Gbanwee modal site na JavaScript site na ịpị bọtịnụ dị n'okpuru. Ọ ga-adaba ma daa site n'elu ibe ahụ.

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

Mee ka modal nweta ya

Jide n'aka na ịtinye role="dialog"na aria-labelledby="...", na-ezo aka na aha modal, gaa na .modal, na role="document"n'onwe .modal-dialogya.

Na mgbakwunye, ịnwere ike ịnye nkọwa nke mkparịta ụka modal gị na aria-describedbyna .modal.

Na-etinye vidiyo YouTube

Ịtinye vidiyo YouTube na ụdịdị chọrọ Javascript agbakwunyere ọ bụghị na Bootstrap ka ọ kwụsị ịkpọghachi na-akpaghị aka na ihe ndị ọzọ. Hụ akwụkwọ ozi Stack Overflow a na-enyere aka maka ozi ndị ọzọ.

Nha nhọrọ

Modal nwere nha nhọrọ abụọ, dị site na klaasị modifier ka etinye ya na .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>

Wepu ihe nkiri

Maka ụdịdị ndị na-apụta karịa ka ị ga-adaba ka ilele, wepụ .fadeklaasị na akara modal gị.

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

Iji usoro grid

Iji nweta uru nke usoro grid Bootstrap n'ime modal, naanị akwụ .rown'ime .modal-bodywee jiri klaasị sistemu grid nkịtị.

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

Nwee ụyọkọ bọtịnụ niile na-akpalite otu modal, naanị nwere ọdịnaya dịtụ iche? Jiri event.relatedTargetna njirimara HTMLdata-* (ikekwe site na jQuery ) iji gbanwee ọdịnaya nke modal dabere na bọtịnụ a pịrị. Hụ docs Modal Events maka nkọwa na relatedTarget,

bọtịnụ ọzọ ...
<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)
})

Ojiji

Ngwa mgbakwunye modal na-agbanwe ọdịnaya gị zoro ezo na ọchịchọ, site na njirimara data ma ọ bụ Javascript. Ọ na-agbakwụnye .modal-openna <body>ịkagbu omume mpịakọta ndabara ma na-ebute a .modal-backdropiji nye mpaghara ọpịpị maka ịchụpụ modals egosiri mgbe ịpị na mpụga modal.

Site na njirimara data

Mee modal rụọ ọrụ na-edeghị Javascript. Tọọ data-toggle="modal"na ihe njikwa, dị ka bọtịnụ, yana otu data-target="#foo"ma ọ bụ href="#foo"iji lekwasịrị anya otu modal ka ị gbanwee.

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

Site JavaScript

Kpọọ modal nwere id myModalnwere otu ahịrị Javascript:

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

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-backdrop="".

Aha ụdị ndabara nkọwa
ndabere boolean ma ọ bụ eriri'static' eziokwu Na-agụnye ihe modal-backdrop element. Nhọrọ, ezipụta staticmaka backdrop nke na-adịghị emechi modal na pịa.
ahụigodo boolean eziokwu Na-emechi modal mgbe ịpịrị igodo mgbapụ
gosi boolean eziokwu Na-egosi modal mgbe ebido ya.
ime ime uzo ụgha

Akwụsịla nhọrọ a kemgbe v3.3.0 ma wepụrụ ya na v4. Anyị na-akwado kama iji templating-akụkụ ndị ahịa ma ọ bụ usoro njikọ data, ma ọ bụ kpọọ jQuery.load onwe gị.

Ọ bụrụ na enyere URL dịpụrụ adịpụ, a ga-ebuba ọdịnaya otu oge site na usoro jQuery loadwee tinye ya n'ime .modal-contentdiv. Ọ bụrụ na ị na-eji data-api, ịnwere ike iji hrefnjirimara ọzọ wee kọwapụta ebe dịpụrụ adịpụ. E gosiri ihe atụ nke a n'okpuru:

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

Ụzọ

Na-eme ka ọdịnaya gị rụọ ọrụ dị ka modal. Nabata nhọrọ nhọrọ object.

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

Iji aka na-atụgharị modal. Na-alaghachikwute onye na-akpọ oku tupu egosiri modal ma ọ bụ zoo (ya bụ tupu ihe omume shown.bs.modalma ọ bụ hidden.bs.modalihe emee).

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

Iji aka na-emepe modal. Na-alaghachikwute onye na-akpọ oku tupu egosiri modal n'ezie (ya bụ tupu shown.bs.modalmmemme emee).

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

Iji aka na-ezobe modal. Na-alaghachikwute onye na-akpọ oku tupu ezobe modal ahụ (ya bụ tupu hidden.bs.modalmmemme emee).

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

Na-emezi ọnọdụ modal ahụ ka ọ ghara imechi akwụkwọ mpịakọta ma ọ bụrụ na otu ga-apụta, nke ga-eme ka modal wulie elu n'aka ekpe.

Naanị achọrọ mgbe ịdị elu nke modal gbanwere mgbe ọ na-emeghe.

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

Ihe omume

Klas modal Bootstrap na-ekpughe ihe omume ole na ole maka ịbanye n'ime ọrụ modal.

A na-achụpụ ihe omume modal na modal n'onwe ya (ya bụ na <div class="modal">).

Ụdị mmemme Nkọwa
gosi.bs.modal Ihe omume a na-agba ọkụ ozugbo showa na-akpọ usoro ihe atụ. Ọ bụrụ na ọpịpị kpatara ya, ihe pịrị apị dị ka relatedTargetihe nke mmemme ahụ.
egosiri.bs.modal A na-achụpụ ihe omume a mgbe onye ọrụ mere ka modal ahụ anya (ga-echere mgbanwe CSS ka ọ gwụchaa). Ọ bụrụ na ọpịpị kpatara ya, ihe pịrị apị dị ka relatedTargetihe nke mmemme ahụ.
zoo.bs.modal A na-agbapụ ihe omume a ozugbo hidea kpọrọ usoro ihe atụ.
zoro ezo.bs.modal A na-achụpụ ihe omume a mgbe ezoro ezoro ya n'aka onye ọrụ modal (ga-echere mgbanwe CSS ka agwụchaa).
eburu.bs.modal A na-achụpụ ihe omume a mgbe modal bujuru ọdịnaya site na iji remotenhọrọ.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Mbudata.js _

Tinye menu ndọda n'ihe fọrọ nke nta ka ọ bụrụ ihe ọ bụla nwere ngwa mgbakwunye a dị mfe, gụnyere navbar, taabụ, na ọgwụ.

N'ime navbar

N'ime ọgwụ

Site na njirimara data ma ọ bụ Javascript, ngwa mgbakwunye na-atụgharị ọdịnaya zoro ezo (nchịkọta mkpọda) site na ịtụgharị .openklaasị na ihe ndepụta nne na nna.

Na ngwaọrụ mkpanaaka, imepe ndọda na-agbakwunye .dropdown-backdropdị ka mpaghara mgbata maka imechi menu ndetu mgbe ị na-akụ na mpụga menu, ihe achọrọ maka nkwado iOS kwesịrị ekwesị. Nke a pụtara na ịgbanwee site na menu ndọpụta mepere emepe gaa na menu ndetu dị iche chọrọ mgbakwunye mgbakwunye na mkpanaka.

Mara: A data-toggle="dropdown"na-adabere na njirimara a maka imechi menus dropdown na ọkwa ngwa, yabụ ọ dị mma iji ya mgbe niile.

Site na njirimara data

Tinye data-toggle="dropdown"na njikọ ma ọ bụ bọtịnụ ka ịgbanwee mkpọda.

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

Iji mee ka URL ghara ịdị na ya na bọtịnụ njikọ, jiri data-targetnjirimara kama 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>

Site JavaScript

Kpọọ dropdowns site na Javascript:

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

data-toggle="dropdown"ka achọrọ

N'agbanyeghị ma ị na-akpọ dropdown gị site na Javascript ma ọ bụ kama iji data-api, data-toggle="dropdown"a na-achọrọ mgbe niile ịnọ na ihe mkpalite dropdown.

Ọ dịghị

Na-atụgharị menu mwụda nke navbar enyere ma ọ bụ igodo taabụ.

A na-achụpụ mmemme ndakpọ niile na .dropdown-menummewere nne na nna.

Ihe mwụda niile nwere relatedTargetakụrụngwa, nke uru ya bụ mmewere arịlịka na-atụgharị.

Ụdị mmemme Nkọwa
gosi.bs.dropdown Ihe omume a na-agba ọkụ ozugbo a na-akpọ usoro ihe ngosi.
egosiri.bs.dropdown A na-agbapụ mmemme a mgbe onye ọrụ mere ka mwepu ahụ hụ ya (ga-echere mgbanwe CSS, ka emechaa).
zoo.bs.dropdown A na-agbapụ mmemme a ozugbo a kpọrọ usoro ihe nleba anya.
zoro ezo.bs.dropdown A na-agbapụ mmemme a mgbe ezoro ezoro ya n'aka onye ọrụ dropdown (ga-echere mgbanwe CSS, iji wuchaa).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Ọmụmaatụ na navbar

Ihe mgbakwunye ScrollSpy bụ maka imelite ebumnuche nav na-akpaghị aka dabere na ọnọdụ mpịakọta. Pịgharịa mpaghara n'okpuru ebe ịnya ụgbọ mmiri wee lelee klaasị na-agbanwe agbanwe. A ga-eme ka ọ pụta ìhè nke obere ihe ndọpụta.

@abụba

Ad leggings keytar, brunch id art party dolor labour. Pitchfork yr enim lo-fi tupu ha ere qui. Ikike igwe kwụ otu ebe Tumblr ugbo gaa na tebụl ihe ọ bụla. Anim keffiyeh carles cardigan. Ụlọ foto Velit seitan mcsweeney 3 wolf moon irure. Cosby sweta lomo jean shorts, williamsburg hoodie minim qui eleghị anya, ị nụbeghị banyere ha et cardigan Trust fund culpa biodiesel wes anderson aesthetic. Nihil egbugbu accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa afụ ọnụ skateboard, adipisicing fugiat velit pitchfork afụ ọnụ. Freegan afụ ọnụ ma ọ bụ mcsweeney's vero. Cupidatat anọ ebe nisi, ma helvetica nulla carles. gwongworo nri cosby sweta egbugbu, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles na-adịghị mma mmega ahụ gentrify. Brooklyn adipisicing craft biya vice keytar deserunt.

otu

Occaecat commodo aliqua delectus. Fap craft biya deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS kacha mma. Consectetur nisi DIY minim bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

abuo

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

three

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

Keytar twee blog, culpa ozi akpa marfa ọ bụla delectus nri gwongworo. Sapiente synth id echere. Locavore sed helvetica cliche irony, thundercats eleghị anya ị nụbeghị banyere ha na-akpata hoodie gluten-free lo-fi fap aliquip. Ụlọ ọrụ dị elu tupu ha ere, Terry Richardson proident brunch nesciunt quis cosby sweta pariatur keffiyeh ut helvetica artisan. Cardigan craft biya seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Ojiji

Achọrọ Bootstrap nav

Scrollspy na-achọ ugbu a iji ihe akụrụngwa Bootstrap nav maka ịkọwapụta njikọ ndị na-arụ ọrụ nke ọma.

Ebumnuche ID nwere ike idozi chọrọ

Njikọ Navbar ga-enwerịrị ebumnuche id nwere ike idozi. Dịka ọmụmaatụ, a <a href="#home">home</a>ga-ederịrị ihe na DOM dịka <div id="home"></div>.

Ihe ndị na- abụghị :visibleebumnuche leghaara anya

A ga-eleghara ihe ndị ezubere iche na-abụghị :visiblenke jQuery si dị na agaghị eme ka ihe ndị nav ha dabara adaba pụta ìhè.

Na-achọ ndokwa nke ikwu

N'agbanyeghị usoro mmejuputa atumatu, scrollspy chọrọ iji position: relative;na mmewere ị na-enyocha. N'ọtụtụ ọnọdụ, nke a bụ <body>. Mgbe ị na-atụgharị na ihe ndị ọzọ na-abụghị nke <body>, jide n'aka na ị nwere heightnhazi ma overflow-y: scroll;tinye ya.

Site na njirimara data

Ka ịtinye omume scrollspy ngwa ngwa na igodo topbar gị, gbakwunye data-spy="scroll"na mmewere ịchọrọ iledo (kacha nke a ga-abụ <body>). Wee tinye data-targetnjirimara na ID ma ọ bụ klas nke ihe nne na nna nke .navakụrụngwa Bootstrap ọ bụla.

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>

Site JavaScript

Ka ịgbakwunye position: relative;na CSS gị, kpọọ scrollspy site na Javascript:

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

Ụzọ

.scrollspy('refresh')

Mgbe ị na-eji scrollspy yana mgbakwunye ma ọ bụ wepụ ihe ndị sitere na DOM, ị ga-akpọ usoro ume ọhụrụ dị ka:

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

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-offset="".

Aha ụdị ndabara nkọwa
nkwụsị nọmba 10 Pikselụ ka a ga-esi n'elu pụta mgbe ị na-agbakọ ọnọdụ mpịakọta.

Ihe omume

Ụdị mmemme Nkọwa
rụọ ọrụ.bs.scrollspy Ihe omume a na-agba ọkụ mgbe ọ bụla ihe ọhụrụ na-arụ ọrụ site na scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Taabụ enwere ike ịtụgharị.js

Ihe atụ taabụ

Tinye ngwa ngwa taabụ arụ ọrụ ike ka ị gbanwee site na pane nke ọdịnaya mpaghara, ọbụlagodi site na nchịkọta nhọrọ. Anaghị akwado taabụ akwụ akwụrụ.

Raw denim eleghị anya ị nụbeghị maka ha jeans shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master sachapụ. Afụ ọnụ cliche tempor, williamsburg carles vegan helvetica. Reprehenderit onye na-egbu anụ retro keffiyeh dreamcatcher synth. Cosby sweta eu banh mi, qui irure terry richardson ex squid. Họrọ ebe salvia cillum iphone. Seitan aliquip quis cardigan uwe ndị America, anụ anụ voluptate bụ isi qui.

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.

Na-agbatị igodo tabbed

Ngwa mgbakwunye a na-agbatị mpaghara igodo ụzọ tabbed iji gbakwunye mpaghara tabbable.

Ojiji

Kwado taabụ tabbable site na Javascript (taabụ ọ bụla kwesịrị ịgbalite n'otu n'otu):

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

Ị nwere ike ịgbalite taabụ n'otu n'otu n'ụzọ dị iche iche:

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

Akara akara

Ị nwere ike ịgbalite taabụ ma ọ bụ pill navigation na-edeghị Javascript ọ bụla site na ịkọwapụta data-toggle="tab"ma ọ bụ data-toggle="pill"na mmewere. Ịgbakwunye navna nav-tabsklaasị na taabụ ga-etinye aka na nhazi taabụul Bootstrap , ebe ị na-agbakwunye na klaasị ga-etinye ụdị pill .navnav-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>

Mbelata mmetụta

Iji mee ka taabụ daa, tinye .fadena nke ọ bụla .tab-pane. Iberibe taabụ nke mbụ ga-enwerịrịrịrị .inime ka a hụ ọdịnaya mbụ.

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

Ụzọ

$().tab

Na-arụ ọrụ mmemme taabụ na akpa ọdịnaya. Tab kwesịrị inwe ma ọ data-targetbụ ihe hrefezubere iche maka ọnụ akpa na DOM. N'ihe atụ ndị dị n'elu, taabụ bụ <a>s nwere data-toggle="tab"njirimara.

.tab('show')

Họrọ taabụ enyere wee gosi ọdịnaya metụtara ya. Taabụ ọ bụla ahọpụtara na mbụ na-aghọ nke anaghị ahọpụtara yana ọdịnaya metụtara ya zoro ezo. Na-alaghachi na onye na-akpọ oku tupu egosiri pane taabụ n'ezie (ya bụ tupu shown.bs.tabmmemme emee).

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

Ihe omume

Mgbe ị na-egosi taabụ ọhụrụ, mmemme ahụ na-agba ọkụ n'usoro a:

  1. hide.bs.tab(na taabụ na-arụ ọrụ ugbu a)
  2. show.bs.tab(na taabụ a ga-egosi)
  3. hidden.bs.tab(na taabụ arụ ọrụ gara aga, otu maka mmemme hide.bs.tabahụ)
  4. shown.bs.tab(na taabụ egosiri ọhụrụ na-arụ ọrụ, otu maka mmemme show.bs.tabahụ)

Ọ bụrụ na ọ nweghị taabụ na-arụ ọrụ, mgbe ahụ, agaghị achụpụ ihe omume hide.bs.tabna mmemme.hidden.bs.tab

Ụdị mmemme Nkọwa
gosi.bs.tab Ihe omume a na-agba ọkụ na ihe ngosi taabụ, mana tupu egosiri taabụ ọhụrụ. Jiri event.targetma event.relatedTargettụọ taabụ nọ n'ọrụ yana taabụ arụ ọrụ gara aga (ọ bụrụ na ọ dị) n'otu n'otu.
egosiri.bs.taabụ Ihe omume a na-agba ọkụ na ihe ngosi taabụ ka egosiri taabụ. Jiri event.targetma event.relatedTargettụọ taabụ nọ n'ọrụ yana taabụ arụ ọrụ gara aga (ọ bụrụ na ọ dị) n'otu n'otu.
zoo.bs.tab Ihe omume a na-agba ọkụ mgbe a ga-egosi taabụ ọhụrụ (ya mere a ga-ezobe taabụ arụ ọrụ gara aga). Jiri event.targetna event.relatedTargetdobe taabụ na-arụ ọrụ ugbu a yana taabụ ọhụrụ ga-arụ ọrụ n'oge adịghị anya, n'otu n'otu.
zoro ezo.bs.tab Ihe omume a na-agba ọkụ ka egosiri taabụ ọhụrụ (ma yabụ na-ezobe taabụ arụ ọrụ gara aga). Jiri event.targetma event.relatedTargetdobe taabụ nọ n'ọrụ gara aga yana taabụ arụ ọrụ ọhụrụ, n'otu n'otu.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Ntuziaka Tooltip.js

Site na ngwa mgbakwunye jQuery.tipsy mara mma nke Jason Frame dere; Ntuziaka ngwaọrụ bụ ụdị emelitere, nke anaghị adabere na onyonyo, jiri CSS3 maka eserese, yana njirimara data maka nchekwa aha mpaghara.

Agaghị egosipụta ndụmọdụ ndụmọdụ nwere aha ogologo efu.

Ihe atụ

Gaa na njikọ dị n'okpuru ka ịhụ ndụmọdụ ndụmọdụ:

Ọkpa ogologo ọkpa next level keffiyeh eleghị anya ị nụbeghị maka ha. Foto ụlọ afụ ọnụ raw denim akwụkwọ ozi vegan messenger akpa stumptown. Ugbo-na-tebulu seitan, mcsweeney's fixie sustainable quinoa 8-bit American uwe nwere Terry Richardson vinyl chambray. Ogige ajị agba, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, anọ loko mcsweeney si sachaa vegan chambray. A really ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Ntụpọ ngwaọrụ kwụ ọtọ

Nhọrọ anọ dị: n'elu, aka nri, ala na aka ekpe kwadoro.

Ụzọ anọ

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

Ọrụ Nwepu

Maka ebumnuche arụmọrụ, Tooltip na Popover data-apis abanyela, nke pụtara na ị ga-ebido ya n'onwe gị .

Otu ụzọ isi bido ndụmọdụ ngwaọrụ niile na ibe ga-abụ ịhọrọ ha site na data-togglenjirimara ha:

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

Ojiji

Ngwa mgbakwunye Tooltip na-ewepụta ọdịnaya na akara n'ọchịchọ, yana site na ndabara na-etinye ndụmọdụ ngwaọrụ mgbe ihe mkpalite ha gasịrị.

Kpalite ntụnye aka site na Javascript:

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

Akara akara

Ihe nrịbama achọrọ maka ngwa ọrụ bụ naanị njiri mara datayana titlena mmewere HTML ịchọrọ ịnwe ntụnye aka. Ihe nrịbama emepụtara nke ngwa ọrụ dị mfe, n'agbanyeghị na ọ chọrọ ọnọdụ (site na ndabara, topnke ngwa mgbakwunye setịpụrụ).

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

Njikọ ọtụtụ-akara

Mgbe ụfọdụ, ịchọrọ ịgbakwunye ngwa ọrụ na hyperlink nke jikọtara ọtụtụ ahịrị. Omume ndabara nke ngwa mgbakwunye tooltip bụ ịgbado ya n'ahịrị na kwụ ọtọ. Tinye white-space: nowrap;na arịlịka gị ka ịzere nke a.

Ntuziaka n'ime otu bọtịnụ, otu ntinye, na tebụl chọrọ ntọala pụrụ iche

Mgbe ị na-eji Tooltips na ihe dị n'ime a .btn-groupma ọ bụ ihe .input-group, ma ọ bụ na tebụl metụtara ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), ị ga-ezipụta nhọrọ container: 'body'(ederede n'okpuru) iji zere mmetụta ndị achọghị (dị ka mmewere na-eto eto na/ ma ọ bụ na-efunahụ akụkụ ya gbara okirikiri mgbe etinyere ngwa ọrụ).

Agbalịla igosi ndụmọdụ ngwaọrụ na ihe zoro ezo

Ịkpọ oku $(...).tooltip('show')mgbe ihe ezubere iche display: none;ga-eme ka edowe rịlịka ngwaọrụ ahụ na-ezighi ezi.

Ndụmọdụ nwere ike ịnweta maka ahụigodo na ndị ọrụ teknụzụ enyemaka

Maka ndị ọrụ ji ahụigodo na-eme njem, yana ọkachasị ndị ọrụ teknụzụ enyemaka, ị ga-etinye naanị ndụmọdụ ngwaọrụ na ihe ndị nwere ike ilekwasị anya na ahụigodo dị ka njikọ, njikwa ụdị, ma ọ bụ mmewere ọ bụla aka ike nwere njiri mara tabindex="0".

Ntuziaka ngwaọrụ na ihe ndị nwere nkwarụ chọrọ ihe mkpuchi

Iji tinye ntụnye aka na ihe disabledma ọ bụ .disabledmmewere, tinye mmewere n'ime a <div>wee tinye ntụnye aka na nke ahụ <div>kama.

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-animation="".

Aha Ụdị Ọdabara Nkọwa
animation boolean eziokwu Tinye mgbanwe CSS na-agwụ n'isi ngwaọrụ
akpa eriri | ụgha ụgha

Na-agbakwunye ntụnye aka na otu mmewere. Ọmụmaatụ container: 'body':. Nhọrọ a bara uru karịsịa n'ihi na ọ na-enye gị ohere idobe ngwá ọrụ ahụ na ntinye nke akwụkwọ ahụ dị nso na ihe na-akpali akpali - nke ga-egbochi ngwá ọrụ ahụ ka ọ na-ese n'elu ihe na-akpali akpali n'oge ntụgharị windo.

igbu oge nọmba | ihe 0

Ngosipụta na izochi ngwa ọrụ (ms) - anaghị emetụta ụdị mkpalite aka

Ọ bụrụ na ewepụtara nọmba, a na-etinye igbu oge na ma zoo/egosi

Nhazi ihe bụ:delay: { "show": 500, "hide": 100 }

html boolean ụgha Fanye HTML n'ime ngwa ọrụ. Ọ bụrụ ụgha, texta ga-eji usoro jQuery tinye ọdịnaya n'ime DOM. Jiri ederede ma ọ bụrụ na ị na-echegbu onwe gị maka mwakpo XSS.
ntinye eriri | ọrụ 'n'elu'

Otu esi edobe ngwa ọrụ - top | ala | aka ekpe | aka nri | akpaaka.
Mgbe akọwapụtara "akpaaka", ọ ga-emegharị ngwa ọrụ ahụ n'ike. Dịka ọmụmaatụ, ọ bụrụ na ntinye ya bụ "aka ekpe", akara ngwaọrụ ga-egosipụta n'aka ekpe mgbe enwere ike, ma ọ bụghị ya, ọ ga-egosipụta aka nri.

Mgbe a na-eji ọrụ iji chọpụta ntinye, a na-akpọ ya na ngwá ọrụ DOM node dị ka arụmụka mbụ ya na ihe na-akpali akpali DOM node dị ka nke abụọ ya. A thisna-edozi ihe gbara ya gburugburu ka ọ bụrụ ihe atụ ntupụ aka.

onye nhọpụta eriri ụgha Ọ bụrụ na enyere onye nhọpụta, a ga-ekenye ihe nrịbama ngwaọrụ na ebumnuche ndị akọwapụtara. Na omume, a na-eji nke a mee ka ọdịnaya HTML dị ike ka agbakwunyere ndụmọdụ ngwaọrụ. Hụ nke a na ihe atụ na-enye nkọwa .
ndebiri eriri '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML ka ị ga-eji mgbe ị na-eke ihe nrụtụ aka.

A titlega-agbaba ngwa ngwa n'ime .tooltip-inner.

.tooltip-arrowga-aghọ akụ nke Tooltip.

Ihe mkpuchi nke dị n'elu kwesịrị inwe .tooltipklaasị.

aha eriri | ọrụ ''

Uru aha ndabara ma ọ bụrụ titlena njirimara adịghị.

Ọ bụrụ na enyere ọrụ, a ga-akpọ ya na thisnrụtụ aka ya ka etinyere n'isi ngwaọrụ ahụ.

ịkpalite eriri 'hover focus' Olee otú Tooltip na-akpalite - pịa | hover | lekwasịrị anya | akwụkwọ ntuziaka. Ị nwere ike ịgafe ọtụtụ ihe mkpali; kewaa ha na oghere. manualenweghị ike ijikọ ya na mkpalite ọ bụla ọzọ.
nlegharị anya eriri | ihe | ọrụ {nhọrọ: 'ahu', padding: 0}

Na-edobe ngwa ọrụ n'ime oke nke mmewere a. Ọmụmaatụ: viewport: '#viewport'ma ọ bụ{ "selector": "#viewport", "padding": 0 }

Ọ bụrụ na enyere ọrụ, a na-akpọ ya na ihe na-akpali akpali DOM node dị ka naanị arụmụka ya. A thisna-edozi ihe gbara ya gburugburu ka ọ bụrụ ihe atụ ntupụ aka.

Njirimara data maka ndụmọdụ ngwaọrụ n'otu n'otu

Enwere ike ịkọwa nhọrọ maka ndụmọdụ ngwaọrụ n'otu n'otu site na iji njirimara data, dịka akọwara n'elu.

Ụzọ

$().tooltip(options)

Na-ejikọta onye na-ahụ maka ndụmọdụ ngwaọrụ na mkpokọta mmewere.

.tooltip('show')

Na-ekpughe ngwa ọrụ mmewere. Na-alaghachikwute onye na-akpọ oku tupu egosipụta ngwa ọrụ (ya bụ tupu shown.bs.tooltipmmemme emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-akpalite ntụpọ ngwá ọrụ. Agaghị egosipụta ndụmọdụ ndụmọdụ nwere aha ogologo efu.

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

.tooltip('hide')

Na-ezobe ntụaka ngwa ọrụ mmewere. Na-alaghachikwute onye na-akpọ oku tupu ezobe ngwa ọrụ n'ezie (ya bụ tupu hidden.bs.tooltipmmemme emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-akpalite ntụpọ ngwá ọrụ.

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

.tooltip('toggle')

Na-atụgharị ihe ntụnye aka nke mmewere. Na-alaghachikwute onye na-akpọ oku tupu egosipụta ma ọ bụ ezoro ezo emetụ aka (ya bụ tupu ihe shown.bs.tooltipomume hidden.bs.tooltipahụ emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-akpalite ntụpọ ngwá ọrụ.

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

.tooltip('destroy')

Na-ezo ma na-ebibi ngwa ọrụ mmewere. Enweghị ike ibibi ndụmọdụ ndị na-eji ndị nnọchi anya (nke emepụtara site na iji selectornhọrọ ) n'otu n'otu na ihe na-akpali akpali.

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

Ihe omume

Ụdị mmemme Nkọwa
gosi.bs.tooltip Ihe omume a na-agba ọkụ ozugbo showa na-akpọ usoro ihe atụ.
egosiri.bs.tooltip A na-agbapụ ihe omume a mgbe onye ọrụ mere ka ọ hụ ihe nrịbama ngwaọrụ ahụ (ga-echere mgbanwe CSS ka agwụchaa).
zoo.bs.tooltip A na-agbapụ ihe omume a ozugbo hidea kpọrọ usoro ihe atụ.
zoro ezo.bs.tooltip A na-agbapụ ihe omume a mgbe ezoro ezoro ya n'aka onye ọrụ (ga-echere mgbanwe CSS ka agwụchaa).
tinye.bs.tooltip A na-achụpụ ihe omume a mgbe ihe show.bs.tooltipomume ahụ gasịrị mgbe agbakwunyere template Tooltip na DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Tinye obere ihe machie nke ọdịnaya, dị ka ndị dị na iPad, na ihe ọ bụla maka ozi nke abụọ nke ụlọ.

Popovers nke aha ha na ọdịnaya ha bụ ogologo efu anaghị egosipụta.

Ndabere ngwa mgbakwunye

Popovers chọrọ ka etinyere ngwa mgbakwunye na ụdị Bootstrap gị.

Ọrụ Nwepu

Maka ebumnuche arụmọrụ, Tooltip na Popover data-apis abanyela, nke pụtara na ị ga-ebido ya n'onwe gị .

Otu ụzọ isi bido popovers niile na ibe ga-abụ ịhọrọ ha site na data-togglenjirimara ha:

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

Popovers na otu bọtịnụ, otu ntinye, na tebụl chọrọ ntọala pụrụ iche

Mgbe ị na-eji popovers na ihe dị n'ime a .btn-groupma ọ bụ ihe .input-group, ma ọ bụ na ihe ndị metụtara tebụl ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), ị ga-akọwapụta nhọrọ container: 'body'(ederede n'okpuru) iji zere mmetụta ndị achọghị (dị ka mmewere na-eto eto na/ ma ọ bụ na-efunahụ akụkụ ya gbara okirikiri mgbe a kpalitere popover).

Anwala igosi popovers na ihe zoro ezo

Ịkpọ oku $(...).popover('show')mgbe ihe ezubere iche display: none;ga-eme ka edowe popover na ezighi ezi.

Popovers na ihe nwere nkwarụ chọrọ ihe mkpuchi

Ka ịgbakwunye popover na a disabledma ọ bụ .disabledmmewere, tinye mmewere n'ime a <div>ma tinye popover na nke ahụ <div>kama.

Njikọ ọtụtụ-akara

Mgbe ụfọdụ, ịchọrọ ịgbakwunye popover na hyperlink nke jikọtara ọtụtụ ahịrị. Omume ndabara nke ngwa mgbakwunye popover bụ ịgbado ya n'ahịrị na kwụ ọtọ. Tinye white-space: nowrap;na arịlịka gị ka ịzere nke a.

Ihe atụ

Popover kwụ ọtọ

Nhọrọ anọ dị: n'elu, aka nri, ala na aka ekpe kwadoro.

Popover n'elu

Sed posuere consectetur est na lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover aka nri

Sed posuere consectetur est na lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover ala

Sed posuere consectetur est na lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover ekpe

Sed posuere consectetur est na lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Ihe ngosi dị ndụ

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

Ụzọ anọ

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

Wepụ na ịpị ọzọ

Jiri focusmkpalite ka ịchụpụ popovers na ịpị na-esote nke onye ọrụ na-eme.

Akara akara akọwapụtara achọrọ maka ịchụpụ-na-esote-pịa

Maka ihe nchọgharị kwesịrị ekwesị na omume cross-platform, ị ga-eji <a>mkpado, ọ bụghị mkpado <button>, na ị ga-agụnyerịrị role="button"na tabindexàgwà.

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

Ojiji

Kwado popovers site na Javascript:

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

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-animation="".

Aha Ụdị Ọdabara Nkọwa
animation boolean eziokwu Tinye mgbanwe mgbanwe CSS na popover
akpa eriri | ụgha ụgha

Na-agbakwunye popover na otu mmewere. Ọmụmaatụ container: 'body':. Nhọrọ a bara uru karịsịa n'ihi na ọ na-enye gị ohere idobe popover na ntinye akwụkwọ ahụ n'akụkụ ihe na-akpali akpali - nke ga-egbochi popover ka ọ na-ese n'elu ihe na-akpali akpali n'oge ntụgharị windo.

ọdịnaya eriri | ọrụ ''

Uru ọdịnaya ezighi ezi ma ọ bụrụ data-contentna njirimara adịghị.

Ọ bụrụ na enyere ọrụ, a ga-akpọ ya na thisnrụtụ aka ya nke etinyere na popover.

igbu oge nọmba | ihe 0

Ngosipụta na izobe popover (ms) - anaghị emetụta ụdị mkpalite aka

Ọ bụrụ na ewepụtara nọmba, a na-etinye igbu oge na ma zoo/egosi

Nhazi ihe bụ:delay: { "show": 500, "hide": 100 }

html boolean ụgha Fanye HTML n'ime popover. Ọ bụrụ ụgha, texta ga-eji usoro jQuery tinye ọdịnaya n'ime DOM. Jiri ederede ma ọ bụrụ na ị na-echegbu onwe gị maka mwakpo XSS.
ntinye eriri | ọrụ 'ziri ezi'

Otu esi etinye popover - top | ala | aka ekpe | aka nri | akpaaka.
Mgbe akọwapụtara "akpaaka", ọ ga-emegharịgharị popover nke ọma. Dịka ọmụmaatụ, ọ bụrụ na ntinye bụ "aka ekpe", popover ga-egosipụta n'aka ekpe mgbe enwere ike, ma ọ bụghị ya, ọ ga-egosipụta aka nri.

Mgbe a na-eji ọrụ iji chọpụta ntinye, a na-akpọ ya na popover DOM node dị ka arụmụka mbụ ya na ihe na-akpali akpali DOM node dị ka nke abụọ ya. Edebere thisihe gbara ya gburugburu ka ọ bụrụ ihe atụ popover.

onye nhọpụta eriri ụgha Ọ bụrụ na enyere onye nhọpụta, a ga-ekenyefe ihe popover na ebumnuche ndị akọwapụtara. Na omume, a na-eji nke a mee ka ọdịnaya HTML dị ike ka agbakwunyere popovers. Hụ nke a na ihe atụ na-enye nkọwa .
ndebiri eriri '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Ntọala HTML iji mee ihe mgbe ị na-emepụta popover.

A titlega-agbaba popover n'ime .popover-title.

A contentga-agbaba popover n'ime .popover-content.

.arrowga-abụ akụ popover.

Ihe mkpuchi nke dị n'elu kwesịrị inwe .popoverklaasị.

aha eriri | ọrụ ''

Uru aha ndabara ma ọ bụrụ titlena njirimara adịghị.

Ọ bụrụ na enyere ọrụ, a ga-akpọ ya na thisnrụtụ aka ya nke etinyere na popover.

ịkpalite eriri 'pịa' Kedu ka esi eme popover - pịa | hover | lekwasịrị anya | akwụkwọ ntuziaka. Ị nwere ike ịgafe ọtụtụ ihe mkpali; kewaa ha na oghere. manualenweghị ike ijikọ ya na mkpalite ọ bụla ọzọ.
nlegharị anya eriri | ihe | ọrụ {nhọrọ: 'ahu', padding: 0}

Na-edobe popover n'ime oke nke mmewere a. Ọmụmaatụ: viewport: '#viewport'ma ọ bụ{ "selector": "#viewport", "padding": 0 }

Ọ bụrụ na enyere ọrụ, a na-akpọ ya na ihe na-akpali akpali DOM node dị ka naanị arụmụka ya. Edebere thisihe gbara ya gburugburu ka ọ bụrụ ihe atụ popover.

Njirimara data maka popovers n'otu n'otu

Enwere ike ịkọwa nhọrọ maka popovers n'otu n'otu site na iji njirimara data, dịka akọwara n'elu.

Ụzọ

$().popover(options)

Na-ebute popovers maka mkpokọta mmewere.

.popover('show')

Na-ekpughe popover nke mmewere. Na-alaghachikwute onye na-akpọ oku tupu egosiri popover (ya bụ, tupu shown.bs.popovermmemme emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-ebute popover. Popovers nke aha ha na ọdịnaya ha bụ ogologo efu anaghị egosipụta.

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

.popover('hide')

Na-ezobe popover nke mmewere. Na-alaghachikwute onye na-akpọ oku tupu ezobe popover (ya bụ tupu hidden.bs.popovermmemme emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-ebute popover.

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

.popover('toggle')

Na-atụgharị popover nke mmewere. Na-alaghachikwute onye na-akpọ oku tupu egosiri ma ọ bụ zoo popover (ya bụ tupu ihe omume shown.bs.popoverma ọ bụ hidden.bs.popoverihe emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-ebute popover.

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

.popover('destroy')

Na-ezo ma na-ebibi popover nke mmewere. Popovers na-eji nnọchiteanya (nke a na-emepụta site na iji selectornhọrọ ) enweghị ike ibibi n'otu n'otu na ihe na-akpali akpali.

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

Ihe omume

Ụdị mmemme Nkọwa
gosi.bs.popover Ihe omume a na-agba ọkụ ozugbo showa na-akpọ usoro ihe atụ.
egosiri.bs.popover A na-agbapụ ihe omume a mgbe onye ọrụ mere ka popover ahụ hụ ya (ga-echere mgbanwe CSS ka agwụchaa).
zoo.bs.popover A na-agbapụ ihe omume a ozugbo hidea kpọrọ usoro ihe atụ.
zoro ezo.bs.popover A na-agbapụ ihe omume a mgbe ezoro ezoro onye ọrụ ahụ popover (ga-echere mgbanwe CSS ka agwụchaa).
etinyere.bs.popover Emere mmemme a ka emechara ihe show.bs.popoveromume mgbe agbakwunyere ndebiri popover na DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Ozi mkpu mkpu.js

Ngosipụta ihe atụ

Tinye ọrụ achụpụ na ozi njikere niile na ngwa mgbakwunye a.

Mgbe ị na-eji .closebọtịnụ, ọ ga-abụrịrị nwa mbụ nke .alert-dismissiblena ọ nweghị ọdịnaya ederede nwere ike ịbịa n'ihu ya na akara ngosi.

Ojiji

Naanị tinye data-dismiss="alert"na bọtịnụ mmechi gị iji nye ọrụ nso nsonye na-akpaghị aka. Imechi mkpu na-ewepụ ya na DOM.

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

Iji mee ka ngosi gị jiri animation mgbe emechiri, hụ na ha nwere .fadena.in klaasị etinyegoro na ha.

Ụzọ

$().alert()

Na-eme ka anya na-ege ntị maka ihe omume pịa na ihe ndị sitere na nke nwere data-dismiss="alert"njirimara. (Ọ dịghị mkpa mgbe ị na-eji data-api's auto-mmalite.)

$().alert('close')

Na-emechi mkpu site na iwepu ya na DOM. Ọ bụrụ .fadena .inklaasị dị na mmewere, njikere ga-apụ apụ tupu ewepụ ya.

Ihe omume

Ngwa mgbakwunye njikere Bootstrap na-ekpughere ihe omume ole na ole maka itinye aka n'ime ọrụ njikere.

Ụdị mmemme Nkọwa
nso.bs.leti Ihe omume a na-agba ọkụ ozugbo closea na-akpọ usoro ihe atụ.
mechiri emechi.bs.alert A na-achụpụ ihe omume a mgbe emechiela njikere (ga-echere mgbanwe CSS ka ọ mechaa).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Bọtịnụ bọtịnụ.js

Jiri bọtịnụ mee ihe ndị ọzọ. Bọtịnụ njikwa na-ekwu ma ọ bụ mepụta otu bọtịnụ maka ihe ndị ọzọ dị ka ogwe ngwaọrụ.

Ndakọrịta ihe nchọgharị gafere

Firefox na-aga n'ihu n'ụdị nchịkwa nchịkwa (nkwarụ na nlele) n'ofe ibu ibe . Ihe ngwọta maka nke a bụ iji autocomplete="off". Lee ahụhụ Mozilla #654072 .

Ọchịchị

Tinye data-loading-text="Loading..."ka iji ọnọdụ nbudata na bọtịnụ.

Akwụsịla atụmatụ a kemgbe v3.3.5 ma wepụrụ ya na v4.

Jiri steeti ọ bụla masịrị gị!

Maka ngosipụta a, anyị na-eji data-loading-textna $().button('loading'), mana nke ahụ abụghị naanị steeti ị nwere ike iji. Hụkwuo na nke a n'okpuru $().button(string)akwụkwọ .

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

Otu ngbanwe

Tinye data-toggle="button"ka ịgbalite toggling n'otu bọtịnụ.

Bọtịnụ ndị agbagoro agbagoro chọrọ.active naaria-pressed="true"

Maka bọtịnụ agbagoro agbagoro, ị ga-agbakwunyerịrị .activeklas ahụ na aria-pressed="true"njirimara ya buttonn'onwe gị.

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

Igbe nbanye / Redio

Tinye data-toggle="buttons"na .btn-groupigbe nrịbama ma ọ bụ ntinye redio nwere ka ị nwee ike ịtụgharị n'ụdị ha.

Nhọrọ ahọpụtara ahọrọ.active

Maka nhọrọ ahọpụtara, ị ga-agbakwunyerịrị .activeklas ahụ na ntinye nke labelonwe gị.

A na-emelite steeti nlele anya naanị na pịa

Ọ bụrụ na emelitere ọnọdụ bọtịnụ igbe nrịbama na-agbaghị clickmmemme na bọtịnụ (dịka site na <input type="reset">ma ọ bụ site na ịtọ checkedakụrụngwa nke ndenye), ị ga-achọ ịgbanye .activeklaasị na ntinye ahụ labeln'onwe gị.

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

Ụzọ

$().button('toggle')

Tụgharịa steeti. Na-enye bọtịnụ ka ọ dị ka agbanyere ya.

$().button('reset')

Tọgharịa steeti bọtịnụ - gbanwee ederede na ederede izizi. Usoro a enweghị isi wee laghachi tupu ntọgharị ahụ agwụcha.

$().button(string)

Na-agbanwe ederede na ọnọdụ ederede akọwapụtara data ọ bụla.

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

Ndakpọ ala.js

Ngwa mgbakwunye na-agbanwe agbanwe nke na-eji obere klaasị mee mgbanwe omume dị mfe.

Ndabere ngwa mgbakwunye

Ndakpọ chọrọ ka etinyere ngwa mgbakwunye mgbanwe na ụdị Bootstrap gị.

Ọmụmaatụ

Pịa bọtịnụ dị n'okpuru iji gosi ma zoo ihe ọzọ site na mgbanwe klaasị:

  • .collapsena-ezochi ọdịnaya
  • .collapsingetinyere n'oge mgbanwe
  • .collapse.inna-egosi ọdịnaya

Ị nwere ike iji njikọ nwere hrefnjirimara, ma ọ bụ bọtịnụ nwere data-targetàgwà ahụ. N'okwu abụọ a, data-toggle="collapse"achọrọ ya.

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>

Ihe atụ Accordion

Gbatịkwuo omume ndakpọ ndabara iji mepụta accordion na akụkụ panel.

Anim pariatur cliche reprehenderit, onye m eiusmod high life accusamus Terry Richardson na squid. 3 wolf moon officia aute, na-abụghị cupidatat skateboard dolor brunch. Ụgbọala nri quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua tinye nnụnụ na ya squid otu-si kọfị 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 biya farm-to-table, raw denim aesthetic synth nesciunt eleghị anya ị nụbeghị banyere ha ebubo na-adigide VHS.
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.
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 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>

Ọ dịkwa ike iji s gbanwee .panel-bodys .list-group.

  • Bootply
  • One itmus ac facilin
  • Second eros

Mee ka njikwa gbasaa/kwatuo nwere ike ịnweta

Jide n'aka na ị ga-agbakwunye aria-expandedna ihe njikwa. Njirimara a na-akọwa n'ụzọ doro anya ọnọdụ ugbu a nke ihe nwere ike ịdaba na ndị na-agụ ihuenyo na teknụzụ enyemaka yiri ya. Ọ bụrụ na ejiri ndabara mechie mmewere nwere ike ịdaba, ọ kwesịrị inwe uru nke aria-expanded="false". Ọ bụrụ na ịtọọla mmewere enwere ike imeghe site na ndabara site na iji inklas, tọọ aria-expanded="true"na njikwa kama. Ngwa mgbakwunye ahụ ga-agbanwe àgwà a na-akpaghị aka dabere na emeghere ma ọ bụ mechie mmewere nke nwere ike imebi ma ọ bụ na emeghị ya.

Na mgbakwunye, ọ bụrụ na ihe njikwa gị na-ezubere iche maka otu mmewere nwere ike imebi - ya bụ data-targetnjirimara na-atụ aka na onye idnhọpụta - ị nwere ike itinye mgbakwunye mgbakwunye aria-controlsna mmewere njikwa, nwere ihe nwere idike ịdaba. Ndị na-agụ ihuenyo ọgbara ọhụrụ na teknụzụ enyemaka ndị yiri ya na-eji njirimara a nye ndị ọrụ ụzọ mkpirisi agbakwunyere iji gaa ozugbo na mmewere nwere ike ịdaba n'onwe ya.

Ojiji

Ngwa mgbakwunye ndakpọ na-eji klaasị ole na ole iji jikwaa ibuli elu:

  • .collapsena-ezochi ọdịnaya
  • .collapse.inna-egosi ọdịnaya
  • .collapsinga na-agbakwụnye mgbe mgbanwe ahụ malitere, ma wepụ ya mgbe ọ gwụchara

Enwere ike ịchọta klas ndị a na component-animations.less.

Site na njirimara data

Naanị tinye data-toggle="collapse"na a data-targetna mmewere iji nye njikwa nke mmewere nwere ike ịdaba na-akpaghị aka. Àgwà ahụ data-targetna-anabata onye nhọpụta CSS iji tinye ọdịda ahụ. Jide n'aka na ịtinye klas collapseahụ na mmewere nwere ike ịdaba. Ọ bụrụ na ị ga-achọ ka ọ meghee, tinye klaasị agbakwunyere in.

Ka ịgbakwunye njikwa otu accordion dị ka njikwa nwere ike imebi, tinye njirimara data data-parent="#selector". Rụtụ aka na ngosi ngosi ka ịhụ nke a na-arụ ọrụ.

Site JavaScript

Jiri aka jiri:

$('.collapse').collapse()

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-parent="".

Aha ụdị ndabara nkọwa
nne na nna onye nhọpụta ụgha Ọ bụrụ na enyere onye nhọpụta, a ga-emechi ihe niile nwere ike ịdaba n'okpuru nne na nna akọwapụtara mgbe egosiri ihe a nwere ike ịdaba. (dị ka omume accordion ọdịnala - nke a dabere na panelklaasị)
tụgharịa boolean eziokwu Na-atụgharị ihe nwere ike ịdaba na oku

Ụzọ

.collapse(options)

Na-eme ka ọdịnaya gị rụọ ọrụ ka ihe nwere ike imebi. Nabata nhọrọ nhọrọ object.

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

.collapse('toggle')

Na-atụgharị ihe nwere ike ịdaba ka egosiri ma ọ bụ zoo. Na-alaghachikwute onye na-akpọ oku tupu egosiri ma ọ bụ zoo ihe nwere ike ịdaba (ya bụ tupu ihe omume shown.bs.collapsema ọ bụ hidden.bs.collapseemee).

.collapse('show')

Na-egosi mmewere nwere ike ịdaba. Na-alaghachikwute onye na-akpọ oku tupu egosipụta mmewere nwere ike ịdaba (ya bụ tupu shown.bs.collapsemmemme emee).

.collapse('hide')

Na-ezobe mmewere nwere ike ịdaba. Na-alaghachikwute onye na-akpọ oku tupu ezobe ihe omume nwere ike ịdaba (ya bụ, tupu ihe hidden.bs.collapseomume emee).

Ihe omume

Klas ndakpọ Bootstrap na-ekpughe ihe omume ole na ole maka itinye aka n'ọrụ ọdịda.

Ụdị mmemme Nkọwa
gosi.bs.dakpu Ihe omume a na-agba ọkụ ozugbo showa na-akpọ usoro ihe atụ.
egosiri.bs.dakpọ A na-agbanyụ mmemme a mgbe onye ọrụ mere ka ihe ndakpọ pụtara (ga-echere mgbanwe CSS ka agwụchaa).
zoo.bs.dakpu A na-agbapụ ihe omume a ozugbo mgbe hidea na-akpọ usoro ahụ.
zoro ezo.bs.dakpu A na-agbapụ mmemme a mgbe ezoro ezoro onye ọrụ ihe ndakpọ (ga-echere mgbanwe CSS ka agwụchaa).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Ngwa ihe ngosi mmịfe maka ịgba ígwè site na ihe ndị dị ka carousel. A naghị akwado carousels akwụkwụ.

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

Nkọwa okwu nhọrọ

Tinye nkọwa okwu na slide gị n'ụzọ dị mfe na .carousel-captionmmewere dị n'ime nke ọ bụla .item. Debe naanị HTML nhọrọ ọ bụla n'ime ebe ahụ, a ga-ahazi ya ozugbo wee hazie ya.

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

Ọtụtụ carousels

Carousels na-achọ ka iji ihe iddị n'elu akpa (nke .carousel) maka njikwa carousel na-arụ ọrụ nke ọma. Mgbe ị na-agbakwunye ọtụtụ carousels, ma ọ bụ mgbe ị na-agbanwe carousel's id, jide n'aka na imelite njikwa ndị dị mkpa.

Site na njirimara data

Jiri njirimara data iji jikwaa ọnọdụ carousel ngwa ngwa. data-slidena-anabata mkpụrụokwu prevma ọ bụ next, nke na-agbanwe ọnọdụ slide dabere na ọnọdụ ya ugbu a. N'aka nke ọzọ, jiri data-slide-toiji nyefee akara ngosi mmịfe raw na carousel data-slide-to="2", nke na-atụgharị ọnọdụ mmịfe ahụ gaa n'otu ndeksi malite na 0.

A data-ride="carousel"na-eji njirimara ahụ akara carousel ka ọ na-amalite na ibu ibe. Enweghị ike iji ya na (nke na-adịghị mkpa na enweghị isi) mmalite Javascript doro anya nke otu carousel.

Site JavaScript

Jiri aka kpọọ carousel:

$('.carousel').carousel()

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-interval="".

Aha ụdị ndabara nkọwa
etiti oge nọmba 5000 Ogologo oge igbu oge n'etiti ịnya igwe na-akpaghị aka. Ọ bụrụ na ụgha, carousel agaghị agba okirikiri na-akpaghị aka.
kwụsịtụ eriri | efu "hover" Ọ bụrụ na ịtọ ya "hover", kwụsịtụ ịgba ígwè nke carousel mouseenterma maliteghachi ịgba ígwè nke carousel na mouseleave. Ọ bụrụ na ịtọ ya null, ịfegharị n'elu carousel agaghị akwụsịtụ ya.
kechie boolean eziokwu Ma carousel kwesịrị ịnya okirikiri ma ọ bụ nwee nkwụsị siri ike.
ahụigodo boolean eziokwu Ma carousel kwesịrị imeghachi omume na mmemme ahụigodo.

Na-ebute carousel na nhọrọ nhọrọ objectwee malite ịnya igwe site na ihe.

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

Na-agagharị na ihe carousel site n'aka ekpe gaa n'aka nri.

Na-akwụsị carousel site n'ịgba ígwè na ihe.

Na-eme okirikiri carousel gaa n'otu etiti (0 dabere, yiri n'usoro).

Ọkpụkpụ gaa na ihe gara aga.

Chọgharịa gaa na ihe na-esote.

Klas carousel Bootstrap na-ekpughe ihe omume abụọ maka itinye aka na ọrụ carousel.

Ihe omume abụọ a nwere ihe mgbakwunye ndị a:

  • direction: Ntuziaka nke carousel na-amị amị (ma "left"ọ bụ "right").
  • relatedTarget: Ihe DOM nke a na-agbanye n'ime ebe dị ka ihe na-arụ ọrụ.

A na-agbapụ ihe omume carousel niile na carousel n'onwe ya (ya bụ na <div class="carousel">).

Ụdị mmemme Nkọwa
slide.bs.carousel Ihe omume a na-agba ọkụ ozugbo slidea kpọkuru usoro ihe atụ.
slid.bs.carousel A na-agbapụ ihe omume a mgbe carousel mechachara mgbanwe slide ya.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Mgbakwunye affix.js

Ọmụmaatụ

Ihe mgbakwunye affix position: fixed;na-agbanye ma gbanyụọ, na-eṅomi mmetụta ahụrụ na position: sticky;. The subnavigation n'aka nri bụ a ndụ ngosi nke affix plugin.


Ojiji

Jiri ngwa mgbakwunye affix site na njirimara data ma ọ bụ jiri aka gị jiri Javascript nke gị. N'ọnọdụ abụọ a, ị ga-enwerịrị CSS maka ndowe na obosara nke ọdịnaya gị etinyere.

Mara: Ejila ngwa mgbakwunye affix na mmewere dị n'ime ihe edobere dịtụ, dị ka kọlụm dọtara ma ọ bụ kpalie, n'ihi ahụhụ na-enye Safari .

Ndokwa site na CSS

Ngwa mgbakwunye a na-atụgharị n'etiti klaasị atọ, nke ọ bụla na-anọchi anya otu steeti: .affix, .affix-top, na .affix-bottom. Ị ga-enyerịrị ụdị ahụ, ewezuga position: fixed;na .affix, maka klaasị ndị a n'onwe gị (na-adabere na ngwa mgbakwunye a) iji jikwaa ọnọdụ ndị ahụ.

Nke a bụ ka ngwa mgbakwunye affix si arụ ọrụ:

  1. Iji malite, ngwa mgbakwunye na-agbakwụnye .affix-topiji gosi mmewere nọ n'ọnọdụ ya kachasị elu. N'ebe a, ọ dịghị mkpa idowe CSS.
  2. Ịgafe mmewere nke ịchọrọ ka etinye ya kwesịrị ịkpalite ntinye n'ezie. Nke a bụ ebe .affixedochiri .affix-topna ịtọọ position: fixed;(nke Bootstrap's CSS nyere).
  3. Ọ bụrụ na akọwapụtara nkwụghachi nke ala, ịpịgharịa gafe ya kwesịrị .affixiji .affix-bottom. Ebe ọ bụ na akwụghị ụgwọ bụ nhọrọ, ịtọ otu chọrọ ka ịtọọ CSS kwesịrị ekwesị. N'okwu a, gbakwunye position: absolute;mgbe ọ dị mkpa. Ngwa mgbakwunye ahụ na-eji njirimara data ma ọ bụ nhọrọ Javascript iji chọpụta ebe a ga-etinye mmemme site na ebe ahụ.

Soro usoro ndị a dị n'elu ka ịtọọ CSS gị maka otu nhọrọ ojiji dị n'okpuru.

Site na njirimara data

Ka ịgbakwunye omume affix ngwa ngwa na mmewere ọ bụla, tinye naanị data-spy="affix"na mmewere ịchọrọ iledo. Jiri nkwụghachi iji kọwaa mgbe ị ga-atụgharị pinning nke mmewere.

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

Site JavaScript

Kpọọ ngwa mgbakwunye affix site na Javascript:

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

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-offset-top="200".

Aha ụdị ndabara nkọwa
nkwụsị nọmba | ọrụ | ihe 10 Pikselụ ka a ga-ewepụ site na ihuenyo mgbe ị na-agbakọ ọnọdụ mpịakọta. Ọ bụrụ na enyere otu nọmba, a ga-etinye nkwụghachi ahụ n'akụkụ ma n'elu na n'okpuru. Iji wepụta ihe pụrụ iche, nkwụghachi ala na elu dị nnọọ nye ihe offset: { top: 10 }ma ọ bụ offset: { top: 10, bottom: 5 }. Jiri ọrụ mgbe ịchọrọ ịgbakọ nkwụghachi n'ike.
iche onye nhọpụta | ọnụ | jQuery element windowihe _ Na-akọwapụta ebumnuche ebumnuche nke affix.

Ụzọ

.affix(options)

Na-eme ka ọdịnaya gị rụọ ọrụ dị ka ọdịnaya etinyere. Nabata nhọrọ nhọrọ object.

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

.affix('checkPosition')

Na-atụgharị ọnọdụ nke affix dabere na nha, ọnọdụ, na ọnọdụ mpịakọta nke ihe ndị dị mkpa. A na-agbakwunye .affix, .affix-top, na .affix-bottomklaasị na ma ọ bụ wepụ ya na ọdịnaya etinyere dịka steeti ọhụrụ ahụ siri dị. Ekwesịrị ịkpọ usoro a mgbe ọ bụla agbanwere akụkụ nke ọdịnaya etinyere ma ọ bụ ihe ebumnuche, iji hụ na edobere ọdịnaya etinyere nke ọma.

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

Ihe omume

Ngwa mgbakwunye Bootstrap na-ekpughe ihe omume ole na ole maka itinye aka na arụ ọrụ mgbakwunye.

Ụdị mmemme Nkọwa
affix.bs.affix Ihe omume a na-agba ọkụ ozugbo tupu etinyere ihe ahụ.
agbakwunyere.bs.affix A na-achụpụ ihe omume a mgbe etinyechara ihe ahụ.
affix-top.bs.affix Ihe omume a na-agba ọkụ ozugbo tupu etinyere ihe ahụ-elu.
agbakwunyere-elu.bs.affix A na-achụpụ ihe omume a mgbe etinyechara ihe ahụ n'elu.
affix-bottom.bs.affix Ihe omume a na-agba ọkụ ozugbo tupu etinyere ihe ahụ n'okpuru.
agbakwunyere-ala.bs.affix A na-achụpụ ihe omume a mgbe etinyechara ihe ahụ n'okpuru.