Nsɛm a Wɔaka abom

Ankorankoro anaasɛ wɔaboaboa ano

Wobetumi de plugins aka ho mmiako mmiako (de Bootstrap no ankorankoro *.jsfael ahorow bedi dwuma), anaasɛ ne nyinaa prɛko pɛ (de adi dwuma bootstrap.jsanaasɛ wɔayɛ no ketewaa no bootstrap.min.js).

JavaScript a wɔaboaboa ano no a wode bedi dwuma

Ne nyinaa bootstrap.jsna bootstrap.min.jsɛwɔ plugins nyinaa wɔ fael biako mu. Fa biako pɛ ka ho.

Plugin a ɛde ne ho to so

Plugin ne CSS afã horow bi gyina plugins afoforo so. Sɛ wode plugins ka ho mmiako mmiako a, hwɛ hu sɛ wobɛhwɛ saa dependencies yi wɔ docs no mu. Afei nso hyɛ no nsow sɛ plugins nyinaa gyina jQuery so (eyi kyerɛ sɛ ɛsɛ sɛ wɔde jQuery ka ho ansa na plugin fael ahorow no aba). Hwɛ yɛnbower.json na hwɛ jQuery nkyerɛase ahorow a wɔboa.

Data su ahorow

Wubetumi de Bootstrap plugins nyinaa adi dwuma denam markup API no so ara kwa a worenkyerɛw JavaScript line biako mpo. Eyi yɛ Bootstrap API a edi kan na ɛsɛ sɛ ɛyɛ nea edi kan a wususuw ho bere a wode plugin redi dwuma no.

Ɛno akyi no, wɔ tebea horow bi mu no, ebia ɛbɛyɛ papa sɛ wudum saa dwumadi yi. Enti, yɛsan nso ma tumi a yɛde besiw data attribute API no ano denam nsɛm a esisi nyinaa a wobeyi afi krataa no so a wɔde din ahyɛ mu no so data-api. Eyi te sɛ eyi:

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

Sɛnea ɛbɛyɛ a, sɛ wopɛ sɛ wode w’ani si plugin pɔtee bi so a, fa plugin no din ka ho kɛkɛ sɛ dinbea ka data-api dinbea no ho te sɛ eyi:

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

Plugin biako pɛ wɔ element biara mu denam data attributes so

Mfa data su ahorow a efi plugins pii mu nni dwuma wɔ element koro no ara so. Sɛ nhwɛso no, bɔtn ntumi nnya adwinnade ho nsɛm na ɛsakra modal. Sɛ wopɛ sɛ woyɛ eyi a, fa ade a wɔde kyekyere nneɛma ho di dwuma.

Dwumadie API

Yɛsan nso gye di sɛ ɛsɛ sɛ wutumi de Bootstrap plugins nyinaa di dwuma denam JavaScript API no so ara kwa. Ɔmanfoɔ API nyinaa yɛ akwan baako, a wɔde nkɔnsɔnkɔnsɔn gu so, na ɛsan de nneɛma a wɔaboaboa ano a wɔayɛ ho adwuma no ba.

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

Ɛsɛ sɛ akwan nyinaa gye optional options ade, ahama a ɛde n’ani si ɔkwan pɔtee bi so, anaasɛ biribiara (a ɛhyɛ plugin ase a ɛwɔ default suban):

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

Plugin biara nso da ne raw constructor adi wɔ Constructoragyapade bi so: $.fn.popover.Constructor. Sɛ wopɛ sɛ wonya plugin nhwɛso pɔtee bi a, gye no tẽẽ fi element bi mu: $('[rel="popover"]').data('popover').

Nsiesiei ahorow a wɔahyɛ da ayɛ

Wubetumi asesa nhyehyɛe a wɔahyɛ da ayɛ ama plugin bi denam plugin no Constructor.DEFAULTSade a wobɛsesa no so:

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

Ntawntawdi biara nni hɔ

Ɛtɔ da bi a ɛho hia sɛ wode Bootstrap plugins di dwuma ne UI frameworks afoforo. Wɔ saa tebea horow yi mu no, edin-ahunmu nhyiam betumi aba bere ne bere mu. Sɛ eyi ba a, wubetumi afrɛ .noConflictplugin a wopɛ sɛ wosan de bo no ba no.

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

Nsɛm a esisi

Bootstrap ma amanneɛbɔ nsɛm a esisi ma plugins dodow no ara nneyɛe soronko. Mpɛn pii no, eyinom ba wɔ asɛmfua a enni awiei ne adeyɛ a atwam mu - baabi a wɔde asɛmfua a enni awiei (ex. show) no kanyan wɔ adeyɛ bi mfiase, na ne adeyɛ asɛm bi a atwam (ex. shown) no fi ase bere a adeyɛ bi awie no.

Ɛde besi 3.0.0 no, Bootstrap nsɛm a esisi nyinaa wɔ din ntam.

Nsɛm a esisi a enni awiei nyinaa ma wotumi preventDefaultyɛ adwuma. Eyi ma wotumi gyina adeyɛ bi a wɔyɛ no ano ansa na afi ase.

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

Nkyerɛase nɔma ahorow

Wobetumi afa VERSIONplugin no constructor no agyapade so akɔ Bootstrap jQuery plugins no mu biara nkyerɛase no so. Sɛ nhwɛso no, wɔ adwinnade ho nkyerɛkyerɛmu plugin no ho no:

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

Fallbacks titiriw biara nni hɔ bere a wɔagyae JavaScript no

Bootstrap no plugins no nkɔ akyi titiriw gracefully bere a JavaScript ayɛ adwuma no. Sɛ wodwene dwumadiefoɔ suahunu ho wɔ saa asɛm yi mu a, fa <noscript>kyerɛkyerɛ tebea no mu (ne sɛdeɛ wobɛsan ama JavaScript ayɛ adwuma) ama wo dwumadiefoɔ, ne/anaasɛ fa w’ankasa wo custom fallbacks ka ho.

Nhomakorabea ahorow a ɛto so abiɛsa

Bootstrap ntumi mmoa JavaScript nhomakorabea ahorow a ɛto so abiɛsa te sɛ Prototype anaa jQuery UI wɔ aban kwan so. Ɛmfa ho .noConflictne nsɛm a esisi a wɔde din ahyɛ mu no, ebia ɔhaw ahorow a ɛfa nhyiam ho wɔ hɔ a ɛsɛ sɛ w’ankasa wusiesie.

Nsakraeɛ nsakraeɛ.js

Ɛfa nsakrae ahorow ho

Sɛ wopɛ nsakrae nsunsuanso a ɛnyɛ den a, fa ka ho transition.jspɛnkoro ka JS fael afoforo no ho. Sɛ wode compiled (anaasɛ minified) no redi dwuma a bootstrap.js, ɛho nhia sɛ wode eyi bɛka ho—ɛwɔ hɔ dedaw.

Nea ɛwɔ mu

Transition.js yɛ ɔboafoɔ titire ma nsɛm a transitionEndɛsisi ne CSS nsakraeɛ emulator nso. Plugin afoforo no de di dwuma de hwɛ CSS nsakrae mmoa na ɛkyere nsakrae a ɛsensɛn hɔ.

Nsakrae ahorow a wɔma ɛyɛ adwuma

Wobetumi asiw nsakrae ahorow ano wɔ wiase nyinaa denam JavaScript afã a edidi so yi so, a ɛsɛ sɛ ɛba bere a transition.js(anaasɛ bootstrap.jsanaa bootstrap.min.js, sɛnea ɛte biara) ahyɛ mu akyi:

$.support.transition = false

Nneɛma a wɔde yɛ adwuma modal.js

Modals no yɛ streamlined, nanso ɛyɛ mmerɛw, nkɔmmɔbɔ nsɛm a ɛkyerɛ a ɛwɔ dwumadie a ɛsua koraa a wɔhwehwɛ ne smart defaults.

Multiple open modals a wɔmfa mmoa mma

Hwɛ hu sɛ woremmue modal bi bere a foforo da so ara da so ara da adi no. Sɛ wobɛkyerɛ modal bɛboro biako wɔ bere koro mu a, ɛhwehwɛ sɛ wode custom code.

Modal markup a wɔde hyɛ mu

Bere nyinaa bɔ mmɔden sɛ wode modal bi HTML koodu bɛto soro-gyinabea wɔ wo krataa no mu na woakwati nneɛma afoforo a ɛbɛka modal no hwɛbea ne/anaasɛ ne dwumadi.

Mobile mfiri ho kɔkɔbɔ ahorow

Kɔkɔbɔ ahorow bi wɔ hɔ a ɛfa modals a wɔde bedi dwuma wɔ mobile mfiri ahorow so ho. Hwɛ yɛn browser support docs no ma nsɛm no mu nsɛm.

Esiane sɛnea HTML5 kyerɛkyerɛ ne nkyerɛase mu nti, autofocusHTML su no nni nkɛntɛnso biara wɔ Bootstrap modals mu. Sɛ wopɛ sɛ wunya nkɛntɛnso koro no ara a, fa JavaScript bi a wɔahyɛ da ayɛ di dwuma:

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

Nhwɛso ahorow

Static nhwɛso

Modal a wɔakyerɛ ase a ɛwɔ atiri, nipadua, ne nneyɛe ahorow a wɔahyehyɛ wɔ ase hɔ.

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

Live demo a ɛwɔ hɔ

Toggle a modal via JavaScript denam button a ɛwɔ ase ha no a wobɛma so. Ɛbɛtwetwe akɔ fam na ɛbɛyera afi kratafa no atifi.

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

Ma modals no nyɛ nea wotumi nya

Hwɛ hu sɛ wode role="dialog"ne aria-labelledby="...", bɛka modal asɛmti no ho, akɔ .modal, ne role="document"ankasa .modal-dialogso.

Bio nso, wobɛtumi de wo modal dialog no ho nkyerɛkyerɛmu ama aria-describedbywɔ on .modal.

YouTube video ahorow a wɔde hyɛ mu

YouTube video ahorow a wode bɛhyɛ modals mu no hwehwɛ JavaScript foforo a enni Bootstrap mu na ama woagyae playback no ankasa ne nea ɛkeka ho. Hwɛ Stack Overflow post a ɛboa yi ma nsɛm pii.

Nneɛma akɛse a wubetumi apaw

Modals wɔ akɛseɛ mmienu a wobɛpaw, a ɛwɔ hɔ denam modifier classes a wɔde bɛto a .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>

Yi animation no fi hɔ

Sɛ wopɛ modals a ɛda adi kɛkɛ sen sɛ ɛbɛyera akɔ mu ahwɛ a, yi .fadeadesua no fi wo modal markup no mu.

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

Grid nhyehyɛe no a wɔde bedi dwuma

Sɛ wopɛ sɛ wunya Bootstrap grid nhyehyɛe no mu mfaso wɔ modal bi mu a, nest .rows kɛkɛ wɔ mu .modal-bodyna afei fa grid nhyehyɛe no adesua ahorow a ɛyɛ daa no di dwuma.

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

Wowɔ button ahorow bi a ne nyinaa kanyan modal koro no ara, a emu nsɛm yɛ soronko kakra kɛkɛ? Fa event.relatedTargetne HTML data-*su ahorow (ebia ɛnam jQuery so ) di dwuma de sesa modal no mu nsɛm a egyina bɔtn a wɔakliki so. Hwɛ Modal Events docs no ma nsɛm a ɛfa relatedTarget, .

...bɔtɔn pii...
<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)
})

Sɛnea wɔde di dwuma

Modal plugin no dannan wo nsɛm a ahintaw no bere a wɔhwehwɛ no, ɛnam data su anaa JavaScript so. Ɛsan nso de ka .modal-opento <body>override default scrolling behavior no ho na ɛma a .modal-backdropto ma click area ma dismissing shown modals bere a clicking outside the modal.

Via data su ahorow so

Fa modal bi yɛ adwuma a wonkyerɛw JavaScript. Fa data-toggle="modal"si controller element bi so, te sɛ button, ne a data-target="#foo"anaasɛ href="#foo"sɛ wode besi modal pɔtee bi so sɛ wobɛdannan.

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

Ɛdenam JavaScript so

Frɛ modal a ɛwɔ id myModala ɛwɔ JavaScript line biako:

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

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-backdrop="".

Din korɔ mfiaseɛ nkyerɛmu
akyi mfonini boolean anaasɛ ahama no'static' nokorɛ Nea ɛka ho ne modal-backdrop element bi. Sɛnea ɛbɛyɛ a, kyerɛ staticma akyigyina a ɛnto modal no mu wɔ klik so.
keyboard so nsɛm boolean a ɛwɔ hɔ nokorɛ Ɛto modal no mu bere a wɔabɔ escape key no
da no adi boolean a ɛwɔ hɔ nokorɛ Kyerɛ modal no bere a wɔahyɛ ase no.
akurase tuu kwan ɛnyɛ ampa

Saa nhyehyɛe yi yɛ nea wɔagyae fi v3.3.0 na wɔayi afi hɔ wɔ v4 mu. Yɛhyɛ nyansa mmom sɛ fa client-side templating anaa data binding framework di dwuma, anaasɛ frɛ jQuery.load w’ankasa.

Sɛ wɔde URL a ɛwɔ akyirikyiri ma a, wɔde nsɛm no bɛhyɛ mu pɛnkoro denam jQuery loadkwan no so na wɔde ahyɛ .modal-contentdiv no mu. Sɛ wode data-api no redi dwuma a, wubetumi de hrefsu no adi dwuma ɔkwan foforo so de akyerɛ akyirikyiri fibea no. Wɔakyerɛ eyi ho nhwɛso wɔ ase ha:

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

Akwan a wɔfa so yɛ

Ɛma wo nsɛm no yɛ adwuma sɛ modal. Gye akwan a wubetumi apaw bi tom object.

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

Nsaano toggles a modal. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ modal no ankasa anaa wɔde asie (kyerɛ sɛ ansa na shown.bs.modalanaa hidden.bs.modaladeyɛ no aba).

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

Nsaano bue modal bi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔada modal no adi ankasa (kyerɛ sɛ ansa na shown.bs.modalasɛm no asi).

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

Nsaano de sie modal bi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde modal no asie ankasa (kyerɛ sɛ ansa na hidden.bs.modalasɛm no asi).

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

Ɔsan siesie modal no gyinabea de ko tia scrollbar bi sɛ ebia ɛsɛ sɛ biako pue a, a ɛbɛma modal no ahuruw akɔ benkum so.

Ɛho hia bere a modal no sorokɔ sesa bere a wɔabue no nkutoo.

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

Nsɛm a esisi

Bootstrap no modal adesuakuw no da nsɛm kakraa bi a esisii adi ma hooking kɔ modal dwumadi mu.

Wɔtow modal nsɛm a esisi nyinaa wɔ modal no ankasa so (kyerɛ sɛ wɔ <div class="modal">).

Nsɛm a Ɛsisii no Su Nkyerɛmu
kyerɛ.bs.modal Saa adeyɛ yi tow ntɛm ara bere a showwɔfrɛ instance kwan no. Sɛ kliki na ɛde ba a, element a wɔakliki no wɔ hɔ sɛ relatedTargetadeyɛ no agyapade.
wɔakyerɛ.bs.modal Wɔtow saa adeyɛ yi bere a wɔayɛ modal no ahu nea ɔde di dwuma no (bɛtwɛn ma CSS nsakrae ahorow no awie). Sɛ kliki na ɛde ba a, element a wɔakliki no wɔ hɔ sɛ relatedTargetadeyɛ no agyapade.
hide.bs.modal no ho nsɛm Wɔtow saa adeyɛ yi ntɛm ara bere a hidewɔafrɛ instance kwan no.
ahintaw.bs.modal Wɔtow saa adeyɛ yi bere a wɔawie modal no a wɔde asie ama ɔdefo no (bɛtwɛn ma CSS nsakrae ahorow no awie).
a wɔde ahyɛ mu.bs.modal Wɔtow saa adeyɛ yi bere a modal no de nsɛm a ɛwɔ mu no ahyɛ mu denam remoteoption no so.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Nneɛma a ɛwɔ dropdown.js

Fa dropdown menus ka ɛkame ayɛ sɛ biribiara ho denam saa plugin a ɛnyɛ den yi so, a navbar, tabs, ne pills ka ho.

Wɔ navbar bi mu

Wɔ nnuru a wɔde yɛ nnuru mu

Ɛnam data attributes anaa JavaScript so no, dropdown plugin no dannan nneɛma a ahintaw (dropdown menus) denam .openadesuakuw no a ɛsakra wɔ ɔwofo list ade no so.

Wɔ mobile mfiri ahorow so no, sɛ wubue dropdown bi a, ɛde a .dropdown-backdropsɛ tap beae a wobɛto dropdown menu ahorow mu bere a worebɔ wɔ menu no akyi no ka ho, a ɛyɛ ahwehwɛde a ɛbɛma woanya iOS mmoa a ɛfata. Wei kyerɛ sɛ sɛ wodan fi dropdown menu a wɔabue mu kɔ dropdown menu foforo so a, ɛhwehwɛ sɛ wobɔ mobile so bio.

Hyɛ no nsow: Wɔde data-toggle="dropdown"wɔn ho to attribute no so de to dropdown menus mu wɔ application level bi so, enti ɛyɛ adwene pa sɛ wode bedi dwuma bere nyinaa.

Via data su ahorow so

Fa ka data-toggle="dropdown"link anaa button bi ho na dannan dropdown bi.

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

Sɛ wopɛ sɛ wode link buttons di dwuma a, fa data-targetattribute no di dwuma sen sɛ wode 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>

Ɛdenam JavaScript so

Frɛ nsɛm a ɛwɔ ase hɔ no denam JavaScript so:

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

data-toggle="dropdown"wɔda so ara hwehwɛ

Ɛmfa ho sɛ ebia wobɛfrɛ wo dropdown no denam JavaScript so anaasɛ wode data-api no bedi dwuma mmom no, data-toggle="dropdown"ɛhwehwɛ sɛ ɛwɔ hɔ bere nyinaa wɔ dropdown no trigger element no so.

Ɛnyɛ ebiara

Toggles dropdown menu a ɛwɔ navbar anaa tabbed navigation a wɔde ama no mu.

Wɔde dropdown nsɛm a esisi nyinaa tow wɔ .dropdown-menu's parent element no so.

Nsɛm a esisi a ɛba fam nyinaa wɔ relatedTargetagyapade bi, a ne bo yɛ toggling anchor element.

Nsɛm a Ɛsisii no Su Nkyerɛmu
kyerɛ.bs.a ɛwɔ ase hɔ Saa adeyɛ yi tow ntɛm ara bere a wɔfrɛ show instance kwan no.
wɔakyerɛ.bs.dropdown Wɔtow saa adeyɛ yi bere a wɔayɛ dropdown no ahu nea ɔde di dwuma no (bɛtwɛn ma CSS nsakrae ahorow, awie).
hide.bs.a ɛwɔ ase hɔ Wɔtow saa adeyɛ yi ntɛm ara bere a wɔafrɛ hide instance kwan no.
ahintaw.bs.a ɛwɔ ase hɔ Wɔtow saa adeyɛ yi bere a wɔawie dropdown no a wɔde asie ama ɔdefo no (bɛtwɛn ma CSS nsakrae ahorow, awie).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy nsɛm a wɔakyerɛw agu krataa so.js

Nhwɛso wɔ navbar mu

ScrollSpy plugin no yɛ ma nav botae ahorow a egyina scroll gyinabea so no yɛ foforo ankasa. Twe beae a ɛwɔ navbar no ase no na hwɛ adesuakuw a ɛreyɛ adwuma no nsakrae. Wɔbɛtwe adwene asi nneɛma a ɛwɔ dropdown sub no so nso.

@kɛseɛ

Ad leggings keytar, brunch id adwini apontow dolor adwumayɛfo. Pitchfork yr enim lo-fi ansa na wɔretɔn qui. Tumblr afuw-kɔ-pon sakre hokwan ahorow biara. Anim keffiyeh carles a ɔyɛ ɔkwasea. Velit seitan mcsweeney mfonini dan 3 ɔkraman ɔsram irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui ebia wontee wɔn ho asɛm et cardigan ahotoso sikakorabea culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred aseresɛm biodiesel keffiyeh nsaanodwumayɛfo ullamco consequat.

@mdo na ɔkyerɛwee

Veniam marfa abɔgyesɛ skateboard, adipisicing fugiat velit pitchfork abɔgyesɛ. Freegan abɔgyesɛ aliqua cupidat mcsweeney no vero. Cupidatat anan loko nisi, ea helvetica nulla carles. Tattooed cosby sweater aduan lɔre, mcsweeney no quis a ɛnyɛ freegan vinyl. Lo-fi wes anderson +1 a wɔde hyɛ ntade mu. Carles non aesthetic apɔw-mu-teɛteɛ quis gentrify. Brooklyn adipisicing nsaanodwuma beer abadiakyiri keytar deserunt.

baako

Occaecat commodo a wɔde yɛ aduan a ɛyɛ dɛ. Fap nsaanodwuma beer deserunt skateboard ea. Lomo sakre hokwan adipisicing banh mi, velit ea sunt next level locavore biako-mfiase kɔfe wɔ magna veniam. Nkwa a ɛkorɔn id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est a wɔde yɛ aduan. Consectetur nisi DIY minim ɔbɔfo bag. Cred ex wɔ, delectus consectetur fanny pack iphone a ɛbɛkɔ so atra hɔ daa.

mmienu

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 ɔbɔfo bag marfa nea ɛte biara delectus aduan lɔre. Sapiente synth id a ɛkyerɛ sɛ obi yɛ ade. Locavore sed helvetica cliche irony, aprannaa a ebia wontee wɔn ho asɛm consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat ansa na wɔretɔn awie, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica adwumfo. Cardigan nsaanodwuma beer seitan a wɔasiesie velit. VHS chambray adwuma no yɛ bere tiaa mu veniam. Anim mollit minim commodo ullamco aprannaa a ɛrebɔ.

Sɛnea wɔde di dwuma

Ɛhwehwɛ sɛ wɔyɛ Bootstrap nav

Scrollspy mprempren hwehwɛ sɛ wode Bootstrap nav component di dwuma ma ɛtwe adwene si link ahorow a ɛyɛ adwuma no so yiye.

ID botae ahorow a wobetumi asiesie a ɛho hia

Ɛsɛ sɛ Navbar link ahorow no nya id botae ahorow a wobetumi asiesie. Sɛ nhwɛso no, <a href="#home">home</a>ɛsɛ sɛ a ne biribi a ɛwɔ DOM no mu te sɛ <div id="home"></div>.

Wɔabu :visiblewɔn ani agu nneɛma a ɛnyɛ botae so

Wɔbɛbu ani agu target elements a ɛnsɛ :visiblesɛ jQuery kyerɛ no so na wɔrensi wɔn nav nneɛma a ɛne no hyia no so dua da.

Ɛhwehwɛ sɛ wɔde gyinabea a ɛfata si hɔ

Ɛmfa ho ɔkwan a wɔfa so de di dwuma no, scrollspy hwehwɛ sɛ wode di dwuma position: relative;wɔ element a woreyɛ akwansra so no so. Mpɛn pii no eyi ne <body>. Sɛ woreyɛ scrollspying wɔ elements a ɛnyɛ <body>, hwɛ hu sɛ wowɔ heightset na wode adi overflow-y: scroll;dwuma.

Via data su ahorow so

Sɛnea ɛbɛyɛ a ɛbɛyɛ mmerɛw sɛ wode scrollspy suban bɛka wo topbar navigation ho no, fa ka data-spy="scroll"element a wopɛ sɛ wohwɛ so no ho (mpɛn pii no eyi bɛyɛ <body>). Afei fa data-targetattribute no ka ho ne ID anaa class a ɛwɔ ɔwofo element a ɛwɔ Bootstrap .navcomponent biara mu.

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>

Ɛdenam JavaScript so

Sɛ wode position: relative;wo CSS no ka ho wie a, frɛ scrollspy no fa JavaScript so:

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

Akwan a wɔfa so yɛ

.scrollspy('refresh')

Sɛ wode scrollspy di dwuma de ka nneɛma a wode bɛka ho anaa woayi afi DOM no mu ho a, ɛho behia sɛ wofrɛ refresh kwan no te sɛ saa:

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

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-offset="".

Din korɔ mfiaseɛ nkyerɛmu
offset a wɔde hyɛ mu nɔma 10. 10 Pixels to offset fi soro bere a worebu gyinabea a scroll no.

Nsɛm a esisi

Nsɛm a Ɛsisii no Su Nkyerɛmu
yɛ adwuma.bs.scrollspy Saa adeyɛ yi tow bere biara a ade foforo bi bɛyɛ adwuma denam nhoma mmobɔwee no so.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Tabs a wotumi sesa no tab.js

Nhwɛso tab ahorow

Fa tab dwumadie a ɛyɛ ntɛm a ɛyɛ nnam ka ho ma nsakraeɛ fa panes a ɛwɔ mpɔtam hɔ nsɛm mu, mpo denam dropdown menus so. Nested tabs no ntumi mmoa.

Raw denim ebia wontee wɔn ho asɛm jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth owura ahotew. Mustache cliche bere tiaa mu, williamsburg carles vegan helvetica. Reprehenderit namkumfoɔ retro keffiyeh daeɛ kyerefoɔ synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Ɔde ne nsa kyerɛɛ ne so, na ɔde ne nsa kyerɛɛ ne so bio. Aliquip placeat salvia a ɔyɛ ɔbarima a ɔpɛ sɛ ɔyɛ biribi. Seitan aliquip quis cardigan american ntade, namtɔnfo voluptate nisi 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.

Ɛtrɛw tabbed navigation mu

Saa plugin yi trɛw tabbed navigation component no mu de tabbable mmeae ka ho.

Sɛnea wɔde di dwuma

Ma tabable tabs no nyɛ adwuma denam JavaScript so (ɛsɛ sɛ wode tab biara yɛ adwuma mmiako mmiako):

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

Wubetumi ayɛ tab ahorow ankorankoro adwuma wɔ akwan horow pii so:

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

Markup a wɔde hyɛ agyirae

Wubetumi ama tab anaa pill navigation ayɛ adwuma a worenkyerɛw JavaScript biara denam element bi a wobɛkyerɛ ara kwa data-toggle="tab"anaasɛ wobɛka so. data-toggle="pill"Sɛ wode navne nav-tabsadesua ahorow no ka tab ulno ho a ɛbɛma wode Bootstrap tab no ayɛ adwuma , bere a wode navne nav-pillsadesua ahorow no aka ho no de pill styling no bedi dwuma .

<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 nkɛntɛnso

Sɛ wopɛ sɛ tab ahorow no bɛyera a, fa ka .fadeemu biara ho .tab-pane. Ɛsɛ sɛ tab pane a edi kan no nso .inma nsɛm a edi kan no da adi.

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

Akwan a wɔfa so yɛ

$().tab

Ɛma tab element ne nsɛm a ɛwɔ mu no yɛ adwuma. Ɛsɛ sɛ tab nya a data-targetanaasɛ hreftargeting a container node wɔ DOM no mu. Wɔ atifi hɔ nhwɛso ahorow no mu no, tab ahorow no ne <a>s a ɛwɔ data-toggle="tab"su ahorow no.

.tab('show')

Paw tab a wɔde ama no na ɛkyerɛ emu nsɛm a ɛbata ho. Tab foforo biara a na wɔadi kan apaw no bɛyɛ nea wɔanpaw na emu nsɛm a ɛbata ho no sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ tab pane no ankasa (kyerɛ sɛ ansa na shown.bs.tabasɛm no asi).

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

Nsɛm a esisi

Sɛ worekyerɛ tab foforo a, nsɛm a esisi no bɛtow nnidiso nnidiso a edidi so yi:

  1. hide.bs.tab(wɔ tab a ɛreyɛ adwuma mprempren no so)
  2. show.bs.tab(wɔ tab a wɔrebɛkyerɛ no so)
  3. hidden.bs.tab(wɔ active tab a atwam no so no, nea ɛwɔ hide.bs.tabadeyɛ no ho no ara)
  4. shown.bs.tab(wɔ tab a wɔakyerɛ seesei ara a ɛyɛ adwuma foforo no so no, nea ɛwɔ show.bs.tabadeyɛ no ho no ara)

Sɛ na tab biara nni hɔ a ɛyɛ adwuma dedaw a, ɛnde wɔrentow hide.bs.tabne hidden.bs.tabnsɛm a esisi no.

Nsɛm a Ɛsisii no Su Nkyerɛmu
kyerɛ.bs.tab no Saa adeyɛ yi tow wɔ tab show so, nanso ansa na wɔakyerɛ tab foforo no. Fa event.targetne di dwuma event.relatedTargetfa w’ani si active tab ne active tab a atwam no so (sɛ ɛwɔ hɔ a) sɛnea ɛte biara.
wɔakyerɛ.bs.tab Saa adeyɛ yi tow wɔ tab show so bere a wɔakyerɛ tab bi akyi. Fa event.targetne di dwuma event.relatedTargetfa w’ani si active tab ne active tab a atwam no so (sɛ ɛwɔ hɔ a) sɛnea ɛte biara.
hide.bs.tab no ho nsɛm Saa adeyɛ yi tow bere a ɛsɛ sɛ wɔkyerɛ tab foforo (na ɛnam saa kwan yi so no ɛsɛ sɛ wɔde tab a ɛyɛ adwuma a atwam no sie). Fa event.targetne di dwuma event.relatedTargetfa w’ani si tab a ɛreyɛ adwuma mprempren ne tab foforo a ɛrenkyɛ na ɛreyɛ adwuma no so, sɛnea ɛte biara.
ahintaw.bs.tab no Saa adeyɛ yi tow bere a wɔakyerɛ tab foforo akyi (na ɛnam saa kwan yi so no wɔde tab a ɛyɛ adwuma a atwam no asie). Fa event.targetne di dwuma event.relatedTargetfa w’ani si tab a ɛreyɛ adwuma a atwam no ne tab a ɛreyɛ adwuma foforo no so, sɛnea ɛte biara.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Nnwinnade ho nsɛm tooltip.js

Wɔde jQuery.tipsy plugin a eye kyɛn so a Jason Frame kyerɛwee no na ɛkanyan no; Nnwinnade ho nsɛm yɛ nkyerɛase a wɔayɛ no foforo, a ɛnyɛ mfonini so, ɛde CSS3 di dwuma ma animations, ne data-attributes ma local title storage.

Nnwinnade ho nsɛm a ɛwɔ asɛmti a ne tenten yɛ zero no nkyerɛ da.

Nhwɛso ahorow

Fa wo nsa hyɛ link ahorow a ɛwɔ ase ha no so na wubehu nnwinnade ho nyansahyɛ ahorow:

Tight pants next level keffiyeh ebia wontee wɔn ho asɛm. Mfonini dan abɔgyesɛ raw denim letterpress vegan ɔbɔfo bag stumptown. Farm-to-table seitan, mcsweeney fixie sustainable quinoa 8-bit american ntade terry richardson vinyl chambray. Abɔgyesɛ stumptown, cardigans banh mi lomo aprannaa. Tofu biodiesel williamsburg marfa, anan loko mcsweeney no tew vegan chambray ho. A really ironic artisan whatever keytar , scenester afuw-kɔ-pon banksy Austin twitter di freegan cred raw denim biako-mfiase kɔfe viral.

Static adwinnade ho nsɛm

Nneɛma anan wɔ hɔ a wubetumi apaw: atifi, nifa, ase, ne benkum a wɔahyehyɛ no pɛpɛɛpɛ.

Akwankyerɛ anan

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

Opt-in dwumadie

Esiane adwumayɛ nti, Tooltip ne Popover data-apis no yɛ opt-in, a ɛkyerɛ sɛ ɛsɛ sɛ w’ankasa wohyɛ ase .

Ɔkwan baako a wobɛfa so ahyɛ adwinnadeɛ a ɛwɔ kratafa bi so nyinaa ase ne sɛ wobɛpaw wɔn denam wɔn data-togglesu so:

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

Sɛnea wɔde di dwuma

Adwinnade ho nkyerɛkyerɛmu plugin no yɛ nsɛm ne agyiraehyɛde wɔ ahwehwɛde so, na default so de adwinnade ho nsɛm si wɔn trigger element no akyi.

Fa JavaScript so na ɛkanyan adwinnade no:

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

Markup a wɔde hyɛ agyirae

Agyiraehyɛde a wɔhwehwɛ ma adwinnade ho nkyerɛkyerɛmu no yɛ datasu bi nkutoo na titlewɔ HTML element no so no wopɛ sɛ wunya adwinnade ho nsɛm. Nnwinnade bi agyiraehyɛde a wɔayɛ no yɛ mmerɛw mmom, ɛwom sɛ ɛhwehwɛ gyinabea (default no, wɔde ahyɛ mu topdenam plugin no so).

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

Nkitahodi ahorow a ɛwɔ nkyerɛwde ahorow pii

Ɛtɔ da bi a wopɛ sɛ wode adwinnade bi ka hyperlink a ɛkyekyere nkyerɛwde pii ho. Adwinnade tip plugin no suban a wɔahyɛ da ayɛ ne sɛ ɛbɛma no mfinimfini akɔ soro na akɔ soro. Fa ka white-space: nowrap;wo ankora ahorow ho na woakwati eyi.

Nnwinnade a ɛwɔ bɔtn akuw, nsɛm a wɔde hyɛ mu akuw, ne pon ahorow mu no hwehwɛ nhyehyɛe soronko

Sɛ wode adwinnade ho akwankyerɛ redi dwuma wɔ nneɛma a ɛwɔ a .btn-groupanaa an .input-groupmu, anaasɛ nneɛma a ɛfa pon ho ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>) so a, ɛsɛ sɛ wokyerɛ ɔkwan a wobɛfa so container: 'body'(wɔakyerɛw wɔ ase hɔ) na woakwati nsunsuanso bɔne a wompɛ (te sɛ element no a ɛretrɛw ne/ anaasɛ ɛyera ne ntwea a ɛyɛ kurukuruwa no bere a wɔabɔ adwinnade no ano no).

Mmɔ mmɔden sɛ wobɛkyerɛ adwinnade ho nsɛm wɔ nneɛma a ahintaw ho

Sɛ wofrɛ $(...).tooltip('show')bere a target element no yɛ a display: none;, ɛbɛma adwinnade no ahyɛ baabi a ɛnteɛ.

Nnwinnade ho akwankyerɛ a wotumi nya ma wɔn a wɔde keyboard ne mfiridwuma a ɛboa di dwuma

Wɔ wɔn a wɔde keyboard di dwuma, ne titiriw no, wɔn a wɔde mfiridwuma a ɛboa di dwuma no, ɛsɛ sɛ wode adwinnade ho nsɛm ka nneɛma a ɛtwe adwene si keyboard so te sɛ links, form controls, anaa element biara a wɔpɛ a ɛwɔ tabindex="0"su bi nkutoo ho.

Nnwinnade ho afotuo a ɛfa elements a wɔadi dɛm ho no hwehwɛ wrapper elements

Sɛ wode adwinnade a wɔde bɛka a disabledanaa .disabledelement ho a, fa element no hyɛ a mu <div>na fa adwinnade no di dwuma wɔ ɛno so <div>mmom.

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-animation="".

Din Korɔ Mfiaseɛ Nkyerɛmu
animation a wɔde yɛ nneɛma boolean a ɛwɔ hɔ nokorɛ Fa CSS fade nsakrae bi di dwuma wɔ adwinnade no ho
ade a wɔde gu mu ahama | ɛnyɛ ampa ɛnyɛ ampa

Fa adwinnade no ho nkyerɛkyerɛmu no ka element pɔtee bi ho. Nhwɛso: container: 'body'. Saa nhyehyeɛ yi ho wɔ mfasoɔ titire wɔ sɛdeɛ ɛma wo kwan ma wode adwinnadeɛ no si krataa no nsuo mu wɔ baabi a ɛbɛn triggering element no - a ɛbɛsi adwinnadeɛ no kwan sɛ ɛbɛsen afiri adeɛ a ɛkanyan no mu wɔ mfɛnsere kɛseɛ a wɔresakra no mu.

ka akyi nɔma | adeɛ 0 na ɛwɔ hɔ

Delay kyerɛ na wɔde sie tooltip (ms) - no mfa manual trigger type ho

Sɛ wɔde nɔma bi ma a, wɔde delay di dwuma wɔ hide/show abien no nyinaa mu

Adeɛ nhyehyɛɛ ne:delay: { "show": 500, "hide": 100 }

html na ɛwɔ hɔ boolean a ɛwɔ hɔ ɛnyɛ ampa Fa HTML hyɛ adwinnade no mu. Sɛ ɛyɛ atoro a, wɔde jQuery textkwan no bedi dwuma de ahyɛ nsɛm a ɛwɔ DOM no mu. Fa text di dwuma sɛ XSS ntua ho asɛm haw wo a.
a wɔde bɛto hɔ ahama | dwumadie 'soro'

Sɛnea wɔde adwinnade no gyina hɔ - soro | ase hɔ | benkum so | nifa so | auto.
Sɛ wɔkyerɛ "auto" a, ɛbɛsan akyerɛ adwinnade no kwan wɔ ɔkwan a ɛyɛ nnam so. Sɛ nhwɛsoɔ no, sɛ beaeɛ no yɛ "auto benkum" a, adwinnadeɛ no bɛda adi akɔ benkum so berɛ a ɛbɛyɛ yie, anyɛ saa a ɛbɛda adi wɔ nifa so.

Sɛ wɔde dwumadie bi di dwuma de kyerɛ beaeɛ a wɔde bɛto a, wɔfrɛ no a adwinnadeɛ tip DOM node yɛ ne asɛm a ɛdi kan na triggering element DOM node yɛ nea ɛtɔ so mmienu. Wɔde thisnsɛm a ɛfa ho no asi adwinnade ho nhwɛso no so.

nea ɔpaw ade ahoma ɛnyɛ ampa Sɛ wɔde selector bi ma a, wɔde tooltip nneɛma bɛhyɛ botae ahorow a wɔakyerɛ no nsa. Wɔ nneyɛe mu no, wɔde eyi di dwuma de ma HTML nsɛm a ɛyɛ nnam no tumi nya nnwinnade ho nkyerɛkyerɛmu. Hwɛ eyi ne nhwɛso a ɛma nsɛm pii .
nsusuwso ahoma '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML a wode bedi dwuma bere a woreyɛ adwinnade no ho nsɛm.

Wɔde adwinnade no titleano aduru no bɛhyɛ .tooltip-inner.

.tooltip-arrowbɛyɛ adwinnade no agyan.

Ɛsɛ sɛ wrapper element a ɛwɔ akyi paa no nya .tooltipadesuakuw no.

atiti asɛm ahama | dwumadie '' .

Default title value sɛ titleattribute no nni hɔ a.

Sɛ wɔde dwumadie bi ma a, wɔbɛfrɛ no a ne thisnkyerɛkyerɛmu no ahyɛ element a wɔde adwinnadeɛ tip no abata ho no so.

nkanyan ahoma 'hover focus'. Sɛnea wɔde adwinnade tip no hyɛ ase - klik | hover | adwene a wɔde si biribi so | akwankyerɛ. Wubetumi atwam wɔ nneɛma pii a ɛkanyan adwene mu; fa ahunmu tetew wɔn mu. manualwontumi mfa nkata ade foforo biara a ɛkanyan no ho.
hwɛbea a wɔde hwɛ nneɛma ahama | ade | dwumadie { selector: 'nipadua', padding: 0 } .

Ɛma adwinnade no nsɛm no sie wɔ saa element yi hye mu. Nhwɛso: viewport: '#viewport'anaa{ "selector": "#viewport", "padding": 0 }

Sɛ wɔde dwumadie bi ma a, wɔfrɛ no a triggering element DOM node yɛ ne argument baako pɛ. Wɔde thisnsɛm a ɛfa ho no asi adwinnade ho nhwɛso no so.

Data su ahorow ma ankorankoro nnwinnade ho nkyerɛkyerɛmu

Wobetumi akyerɛ akwan foforo a wɔbɛfa so akyerɛ ankorankoro nnwinnade ho akwankyerɛ denam data su ahorow a wɔde bedi dwuma so, sɛnea wɔakyerɛkyerɛ mu wɔ atifi hɔ no.

Akwan a wɔfa so yɛ

$().tooltip(options)

Fa adwinnade a wɔde di dwuma no bata element ahorow a wɔaboaboa ano ho.

.tooltip('show')

Ɛda element bi adwinnade ho nsɛm adi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔada adwinnade no adi ankasa (kyerɛ sɛ ansa na shown.bs.tooltipasɛm no asi). Wobu eyi sɛ "nsaano" a ɛkanyan adwinnade no. Nnwinnade ho nsɛm a ɛwɔ asɛmti a ne tenten yɛ zero no nkyerɛ da.

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

.tooltip('hide')

Fa element bi adwinnade ho nsɛm sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde adwinnade no asie ankasa (kyerɛ sɛ ansa na hidden.bs.tooltipasɛm no asi). Wobu eyi sɛ "nsaano" a ɛkanyan adwinnade no.

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

.tooltip('toggle')

Toggles element bi adwinnade ho nsɛm. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔada adwinnade no adi ankasa anaa wɔde asie (kyerɛ sɛ ansa na shown.bs.tooltipanaa hidden.bs.tooltipadeyɛ no aba). Wobu eyi sɛ "nsaano" a ɛkanyan adwinnade no.

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

.tooltip('destroy')

Hide na ɛsɛe element bi adwinnade tip. Nnwinnade a wɔde delegation di dwuma (a wɔde option ) na ɛyɛe noselector ntumi nsɛe no ankorankoro wɔ descendant trigger elements so.

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

Nsɛm a esisi

Nsɛm a Ɛsisii no Su Nkyerɛmu
kyerɛ.bs.adwinnade ho nsɛm Saa adeyɛ yi tow ntɛm ara bere a showwɔfrɛ instance kwan no.
wɔakyerɛ.bs.adwinnade ho nsɛm Wɔtow saa adeyɛ yi bere a wɔayɛ adwinnade no nkyerɛkyerɛmu no ahu nea ɔde di dwuma no (bɛtwɛn ma CSS nsakrae ahorow no awie).
hide.bs.adwinnade ho nsɛm Wɔtow saa adeyɛ yi ntɛm ara bere a hidewɔafrɛ instance kwan no.
hidden.bs.adwinnade ho nsɛm Wɔtow saa adeyɛ yi bere a wɔawie adwinnade no nsɛm a wɔde asie ama ɔdefo no (bɛtwɛn ma CSS nsakrae ahorow no awie).
wɔde ahyɛ mu.bs.adwinnade ho nsɛm Wɔtow saa adeyɛ yi wɔ adeyɛ no akyi show.bs.tooltipbere a wɔde adwinnade nkyerɛkyerɛmu nsusuwso no aka DOM no ho.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers a ɛwɔ hɔ no popover.js

Fa nsɛm nketenkete a wɔde akata so, te sɛ nea ɛwɔ iPad no so, ka element biara a wode bɛfa nsɛm a ɛto so abien no ho.

Popovers a wɔn asɛmti ne emu nsɛm nyinaa yɛ zero-length no, wɔmfa nkyerɛ da.

Plugin a wɔde wɔn ho to so

Popovers hwehwɛ sɛ wɔde tooltip plugin no bɛka wo Bootstrap version no ho.

Opt-in dwumadie

Esiane adwumayɛ nti, Tooltip ne Popover data-apis no yɛ opt-in, a ɛkyerɛ sɛ ɛsɛ sɛ w’ankasa wohyɛ ase .

Ɔkwan baako a wobɛfa so ahyɛ popovers nyinaa ase wɔ krataafa bi so ne sɛ wobɛpaw wɔn denam wɔn data-togglesu so:

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

Popovers a ɛwɔ button akuo, input akuo, ne tables mu no hwehwɛ sɛ wɔhyehyɛ no soronko

Sɛ wode popovers redi dwuma wɔ elements a ɛwɔ a .btn-groupanaa an .input-groupmu, anaasɛ wɔ table-related elements ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>) so a, ɛsɛ sɛ wokyerɛ ɔkwan a wobɛfa so container: 'body'(wɔakyerɛw ho asɛm wɔ ase hɔ) na woakwati nsunsuanso bɔne a wɔmpɛ (te sɛ element no a ɛrenyin kɛse ne/ anaasɛ ɛhwere ne ntwea a ɛyɛ kurukuruwa bere a popover no kanyan no).

Mmɔ mmɔden sɛ wobɛkyerɛ popovers wɔ elements a ahintaw so

Invoking $(...).popover('show')bere a target element no yɛ display: none;no bɛma popover no ayɛ nea ɛnteɛ.

Popovers wɔ elements a wɔadi dɛm so no hwehwɛ wrapper elements

Sɛ wode popover bɛka a disabledanaa .disabledelement ho a, fa element no hyɛ a mu <div>na fa popover no gu saa no so <div>mmom.

Nkitahodi ahorow a ɛwɔ nkyerɛwde ahorow pii

Ɛtɔ da bi a wopɛ sɛ wode popover ka hyperlink a ɛkyekyere nkyerɛwde pii ho. Popover plugin no suban a wɔahyɛ da ayɛ ne sɛ ɛbɛma no mfinimfini akɔ soro na akɔ soro. Fa ka white-space: nowrap;wo ankora ahorow ho na woakwati eyi.

Nhwɛso ahorow

Popover a ɛyɛ gyinabea

Nneɛma anan wɔ hɔ a wubetumi apaw: atifi, nifa, ase, ne benkum a wɔahyehyɛ no pɛpɛɛpɛ.

Popover a ɛwɔ soro no

Sed posuere consectetur a ɛyɛ fɛ wɔ lobortis ho. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia a ɛwɔ akyi no.

Popover no yɛ nokware

Sed posuere consectetur a ɛyɛ fɛ wɔ lobortis ho. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia a ɛwɔ akyi no.

Popover ase hɔ

Sed posuere consectetur a ɛyɛ fɛ wɔ lobortis ho. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia a ɛwɔ akyi no.

Popover fii hɔ kɔe

Sed posuere consectetur a ɛyɛ fɛ wɔ lobortis ho. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia a ɛwɔ akyi no.

Live demo a ɛwɔ hɔ

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

Akwankyerɛ anan

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

Dismiss wɔ klik a edi hɔ no so

Fa focustrigger no di dwuma fa yi popovers no wɔ klik a edi hɔ a nea ɔde di dwuma no yɛ no so.

Markup pɔtee a ɛho hia ma dismiss-on-next-click

Sɛ wopɛ sɛ wobɔ cross-browser ne cross-platform suban yiye a, ɛsɛ sɛ wode <a>tag no di dwuma, ɛnyɛ tag no <button>, na ɛsɛ sɛ wode role="button"ne tabindexsu ahorow no nso ka ho.

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

Sɛnea wɔde di dwuma

Ma popovers nyɛ adwuma denam JavaScript so:

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

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-animation="".

Din Korɔ Mfiaseɛ Nkyerɛmu
animation a wɔde yɛ nneɛma boolean a ɛwɔ hɔ nokorɛ Fa CSS fade nsakrae bi di dwuma wɔ popover no so
ade a wɔde gu mu ahama | ɛnyɛ ampa ɛnyɛ ampa

Ɛde popover no ka element pɔtee bi ho. Nhwɛso: container: 'body'. Saa nhyehyeɛ yi ho wɔ mfasoɔ titire wɔ sɛdeɛ ɛma wo kwan ma wode popover no si nwoma no nsuo mu wɔ baabi a ɛbɛn triggering element no - a ɛbɛsi popover no kwan sɛ ɛbɛsen akɔ akyirikyiri afiri triggering element no ho bere a woresakra mfɛnsere no kɛseɛ.

emu nsɛm ahama | dwumadie '' .

Default content value sɛ data-contentattribute no nni hɔ a.

Sɛ wɔde dwumadie bi ma a, wɔbɛfrɛ no a ne thisnkyerɛkyerɛmu no ahyɛ element a popover no abata ho no ho.

ka akyi nɔma | adeɛ 0 na ɛwɔ hɔ

Delay kyerɛ na wɔde sie popover (ms) - no mfa manual trigger type ho

Sɛ wɔde nɔma bi ma a, wɔde delay di dwuma wɔ hide/show abien no nyinaa mu

Adeɛ nhyehyɛɛ ne:delay: { "show": 500, "hide": 100 }

html na ɛwɔ hɔ boolean a ɛwɔ hɔ ɛnyɛ ampa Fa HTML hyɛ popover no mu. Sɛ ɛyɛ atoro a, wɔde jQuery textkwan no bedi dwuma de ahyɛ nsɛm a ɛwɔ DOM no mu. Fa text di dwuma sɛ XSS ntua ho asɛm haw wo a.
a wɔde bɛto hɔ ahama | dwumadie 'nifa'

Sɛnea wɔde popover no si hɔ - soro | ase hɔ | benkum so | nifa so | auto.
Sɛ wɔkyerɛ "auto" a, ɛbɛsan akyerɛ popover no kwan wɔ ahoɔden so. Sɛ nhwɛso no, sɛ placement yɛ "auto left" a, popover no bɛda adi wɔ benkum so bere a ɛbɛyɛ yiye, anyɛ saa a ɛbɛda adi wɔ nifa so.

Sɛ wɔde dwumadie bi di dwuma de kyerɛ beaeɛ a wɔde bɛto a, wɔfrɛ no a popover DOM node no yɛ ne akasakasa a ɛdi kan na triggering element DOM node yɛ ne deɛ ɛtɔ so mmienu. Wɔde thisnsɛm a ɛfa ho no asi popover nhwɛso no so.

nea ɔpaw ade ahoma ɛnyɛ ampa Sɛ wɔde selector bi ma a, wɔde popover nneɛma bɛhyɛ botae ahorow a wɔakyerɛ no nsa. Wɔ nneyɛe mu no, wɔde eyi di dwuma de ma HTML nsɛm a ɛyɛ nnam no tumi nya popovers a wɔde aka ho. Hwɛ eyi ne nhwɛso a ɛma nsɛm pii .
nsusuwso ahoma '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Base HTML a wode bedi dwuma bere a woreyɛ popover no.

Wɔde popover no titlebɛhyɛ .popover-title.

Wɔde popover no contentbɛhyɛ .popover-content.

.arrowbɛyɛ popover no agyan.

Ɛsɛ sɛ wrapper element a ɛwɔ akyi paa no nya .popoveradesuakuw no.

atiti asɛm ahama | dwumadie '' .

Default title value sɛ titleattribute no nni hɔ a.

Sɛ wɔde dwumadie bi ma a, wɔbɛfrɛ no a ne thisnkyerɛkyerɛmu no ahyɛ element a popover no abata ho no ho.

nkanyan ahoma 'kliki'. Sɛnea popover no fi ase - klik | hover | adwene a wɔde si biribi so | akwankyerɛ. Wubetumi atwam wɔ nneɛma pii a ɛkanyan adwene mu; fa ahunmu tetew wɔn mu. manualwontumi mfa nkata ade foforo biara a ɛkanyan no ho.
hwɛbea a wɔde hwɛ nneɛma ahama | ade | dwumadie { selector: 'nipadua', padding: 0 } .

Ɛma popover no kɔ so tra saa element yi hye mu. Nhwɛso: viewport: '#viewport'anaa{ "selector": "#viewport", "padding": 0 }

Sɛ wɔde dwumadie bi ma a, wɔfrɛ no a triggering element DOM node yɛ ne argument baako pɛ. Wɔde thisnsɛm a ɛfa ho no asi popover nhwɛso no so.

Data su ahorow a ɛfa ankorankoro popovers ho

Wobetumi akyerɛ akwan foforo a wɔbɛfa so akyerɛ ankorankoro popovers denam data su ahorow a wɔde bedi dwuma so, sɛnea wɔakyerɛkyerɛ mu wɔ atifi hɔ no.

Akwan a wɔfa so yɛ

$().popover(options)

Fi ase popovers ma element ahorow a wɔaboaboa ano.

.popover('show')

Ɛda element bi popover adi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔada popover no adi ankasa (kyerɛ sɛ ansa na shown.bs.popoverasɛm no asi). Wobu eyi sɛ "nsaano" a ɛkanyan popover no. Popovers a wɔn asɛmti ne emu nsɛm nyinaa yɛ zero-length no, wɔmfa nkyerɛ da.

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

.popover('hide')

Fa element bi popover no sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde popover no asie ankasa (kyerɛ sɛ ansa na hidden.bs.popoverasɛm no asi). Wobu eyi sɛ "nsaano" a ɛkanyan popover no.

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

.popover('toggle')

Toggles element bi popover. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ popover no ankasa anaa wɔde asie (kyerɛ sɛ ansa na shown.bs.popoveranaa hidden.bs.popoveradeyɛ no aba). Wobu eyi sɛ "nsaano" a ɛkanyan popover no.

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

.popover('destroy')

Hide na ɛsɛe element bi popover. Popovers a ɛde delegation di dwuma (a wɔbɔ denam option noselector so ) no ntumi nsɛe no ankorankoro wɔ descendant trigger elements so.

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

Nsɛm a esisi

Nsɛm a Ɛsisii no Su Nkyerɛmu
kyerɛ.bs.popover Saa adeyɛ yi tow ntɛm ara bere a showwɔfrɛ instance kwan no.
wɔakyerɛ.bs.popover Wɔtow saa adeyɛ yi bere a wɔayɛ popover no ahu nea ɔde di dwuma no (bɛtwɛn ma CSS nsakrae ahorow no awie).
hide.bs.popover a ɛwɔ hɔ no Wɔtow saa adeyɛ yi ntɛm ara bere a hidewɔafrɛ instance kwan no.
ahintaw.bs.ohia Wɔtow saa adeyɛ yi bere a popover no awie a wɔde asie ama ɔdefo no (bɛtwɛn ma CSS nsakrae ahorow no awie).
wɔde ahyɛ mu.bs.popover Wɔtow saa adeyɛ yi wɔ adeyɛ no akyi show.bs.popoverbere a wɔde popover template no aka DOM no ho.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Kɔkɔbɔ nkrasɛm alert.js

Nhwɛso a ɛfa kɔkɔbɔ ahorow ho

Fa dismiss dwumadie ka kɔkɔbɔ nkra nyinaa ho denam saa plugin yi so.

Sɛ wode .closebɔtn redi dwuma a, ɛsɛ sɛ ɛyɛ no ba a odi kan .alert-dismissiblena nsɛm biara a ɛwɔ mu no ntumi mma n’anim wɔ agyiraehyɛde no mu.

Sɛnea wɔde di dwuma

Fa ka data-dismiss="alert"wo close button no ho kɛkɛ na ama woanya alert close functionality no ara. Sɛ woto kɔkɔbɔ bi mu a, eyi fi DOM no mu.

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

Sɛ wopɛ sɛ wo kɔkɔbɔ ahorow no de animation bedi dwuma bere a woretoto mu a, hwɛ hu sɛ wɔwɔ .fadene .inadesua ahorow a wɔde adi dwuma dedaw wɔ wɔn ho.

Akwan a wɔfa so yɛ

$().alert()

Ɛma kɔkɔbɔ tie click nsɛm a esisi wɔ aseni elements a ɛwɔ data-dismiss="alert"attribute no so. (Ɛho nhia bere a wode data-api no auto-initialization redi dwuma no.)

$().alert('close')

Ɛto kɔkɔbɔ bi mu denam yi a wubeyi afi DOM no mu no so. Sɛ .fadene .inadesua ahorow no wɔ element no so a, kɔkɔbɔ no bɛyera ansa na wɔayi afi hɔ.

Nsɛm a esisi

Bootstrap no kɔkɔbɔ plugin no da nsɛm kakraa bi a esisi ma hooking kɔ kɔkɔbɔ dwumadi mu adi.

Nsɛm a Ɛsisii no Su Nkyerɛmu
close.bs.asɛm no ho kɔkɔbɔ Saa adeyɛ yi tow ntɛm ara bere a closewɔfrɛ instance kwan no.
a wɔato mu.bs.alert Wɔtow saa adeyɛ yi bere a wɔato kɔkɔbɔ no mu (bɛtwɛn ma CSS nsakrae ahorow no awie).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Nsɛmma nhoma no button.js

Fa buttons yɛ pii. Control button states anaa yɛ buttons akuo ma components pii te sɛ toolbars.

Cross-browser a ɛne ne ho hyia

Firefox kɔ so yɛ form control states (disabledness ne checkedness) wɔ krataafa a wɔde ahyɛ mu nyinaa mu . Ade a wobetumi asiesie eyi ne sɛ wode autocomplete="off". Hwɛ Mozilla bɔne #654072 .

Ɔman no mu nsɛm

Fa ka data-loading-text="Loading..."ho na wode loading tebea adi dwuma wɔ button bi so.

Saa ade yi yɛ nea wɔagyae fi v3.3.5 na wɔayi afi hɔ wɔ v4 mu.

Fa tebea biara a w’ani gye ho di dwuma!

Saa ɔyɛkyerɛ yi nti, yɛde ne redi dwuma data-loading-text, $().button('loading')nanso ɛnyɛ ɛno nko ara ne tebea a wubetumi de adi dwuma. Hwɛ eyi ho nsɛm pii wɔ ase hɔ wɔ $().button(string)nkrataa no mu .

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

Toggle biako pɛ

Fa ka data-toggle="button"ho na ama toggling a ɛwɔ button biako so no ayɛ adwuma.

Pre-toggled buttons hia .activenaaria-pressed="true"

Sɛ wopɛ sɛ wodi kan toggled buttons a, ɛsɛ sɛ wode .activeclass no ne aria-pressed="true"attribute no ka buttonwo ho no ho.

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

Hwɛ adaka / Radio so

Fa ka data-toggle="buttons"checkbox .btn-groupanaa radio inputs a ɛwɔ mu no ho na ama woatumi ayɛ toggling wɔ wɔn styles mu.

Nneɛma a wɔadi kan apaw ho hia.active

Sɛ wopɛ sɛ wopaw nneɛma a woadi kan apaw a, ɛsɛ sɛ wode .activeadesuakuw no ka input no labelho w’ankasa.

Visual checked state nkutoo na wɔayɛ no foforo wɔ klik so

Sɛ wɔayɛ checkbox button bi tebea a wɔahyɛ no foforo a wɔrentow clickadeyɛ bi wɔ button no so (sɛ nhwɛso no, via <input type="reset">anaasɛ via setting the checkedproperty of the input), ɛho behia sɛ wo toggle .activeclass no wɔ input no so labelw’ankasa.

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

Akwan a wɔfa so yɛ

$().button('toggle')

Toggles push tebea no. Ɛma button no te sɛ nea wɔayɛ no adwuma.

$().button('reset')

Sesa button tebea - sesa nsɛm kɔ mfitiase nkyerɛwee so. Saa kwan yi yɛ asynchronous na ɛsan ba ansa na resetting no awie ankasa.

$().button(string)

Sesa nsɛm kɔ data biara a wɔakyerɛkyerɛ nkyerɛwee tebea mu.

<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 a ɛwɔ hɔ no.js

Flexible plugin a ɛde nsa kakraa bi adesua ahorow di dwuma ma toggle suban a ɛyɛ mmerɛw.

Plugin a wɔde wɔn ho to so

Collapse hwehwɛ sɛ wode transitions plugin no bɛka wo Bootstrap no ho.

Nhwɛsoɔ

Klik buttons a ɛwɔ aseɛ ha no so na kyerɛ na fa element foforɔ bi sie denam class nsakraeɛ so:

  • .collapsede nsɛm a ɛwɔ mu no sie
  • .collapsingwɔde di dwuma wɔ nsakrae ahorow mu
  • .collapse.inkyerɛ emu nsɛm

Wubetumi de link a ɛwɔ hrefattribute no adi dwuma, anaasɛ button a ɛwɔ data-targetattribute no. Wɔ nsɛm abien no nyinaa mu no, data-toggle="collapse"wɔhwehwɛ sɛ wɔyɛ saa.

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>

Accordion ho nhwɛso

Trɛw default collapse suban no mu na yɛ accordion ne panel component no.

Anim pariatur cliche reprehenderit, enim eiusmod nkwa a ɛkorɔn accusamus terry richardson ad squid. 3 ɔkraman ɔsram officia aute, a ɛnyɛ cupidat skateboard dolor brunch. Aduan lɔre quinoa nesciunt adwumayɛfo eiusmod. Brunch 3 ɔkraman ɔsram tempor, sunt aliqua de anomaa bi to so squid biako-mfitiase kɔfe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, nsaanodwuma beer adwuma wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur namkumfoɔ vice lomo. Leggings occaecat nsaanodwuma beer afuw-kɔ-pon, raw denim aesthetic synth nesciunt ebia wontee wɔn ho asɛm accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod nkwa a ɛkorɔn accusamus terry richardson ad squid. 3 ɔkraman ɔsram officia aute, a ɛnyɛ cupidat skateboard dolor brunch. Aduan lɔre quinoa nesciunt adwumayɛfo eiusmod. Brunch 3 ɔkraman ɔsram tempor, sunt aliqua de anomaa bi to so squid biako-mfitiase kɔfe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, nsaanodwuma beer adwuma wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur namkumfoɔ vice lomo. Leggings occaecat nsaanodwuma beer afuw-kɔ-pon, raw denim aesthetic synth nesciunt ebia wontee wɔn ho asɛm accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod nkwa a ɛkorɔn accusamus terry richardson ad squid. 3 ɔkraman ɔsram officia aute, a ɛnyɛ cupidat skateboard dolor brunch. Aduan lɔre quinoa nesciunt adwumayɛfo eiusmod. Brunch 3 ɔkraman ɔsram tempor, sunt aliqua de anomaa bi to so squid biako-mfitiase kɔfe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, nsaanodwuma beer adwuma wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur namkumfoɔ vice lomo. Leggings occaecat nsaanodwuma beer afuw-kɔ-pon, raw denim aesthetic synth nesciunt ebia wontee wɔn ho asɛm 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>

Ɛsan nso yɛ yie sɛ wobɛsesa .panel-bodys ne .list-groups.

  • Bootply a wɔde yɛ adwuma
  • Itmus baako a ɛyɛ ac facilin
  • Eros a ɛto so abien

Ma expand/collapse controls no nyɛ nea wobetumi anya bi

Hwɛ hu sɛ wode bi bɛka aria-expandedcontrol element no ho. Saa su yi kyerɛkyerɛ mprempren tebea a ɛwɔ element a ɛtumi hwe ase no mu pefee to screen akenkanfoɔ ne mfiridwuma a ɛboa a ɛte saa ara mu. Sɛ wɔato element a wotumi bubu mu no mu default so a, ɛsɛ sɛ ɛwɔ bo a ɛyɛ aria-expanded="false". Sɛ woahyɛ collapsible element no sɛ ɛbɛbue default denam inclass no so a, fa aria-expanded="true"si control no so mmom. Plugin no bɛdannan saa su yi ankasa a egyina sɛ ebia wɔabue anaa wɔato mu anaasɛ wɔanto mu anaasɛ wɔanto mu.

Bio nso, sɛ wo control element no de n’ani asi element biako a wotumi bubu mu so – kyerɛ sɛ, data-targetsu no rekyerɛ idselector bi a – wubetumi de su foforo aria-controlsaka control element no ho, a idof the of the collapsible element no wom. Nnɛyi screen akenkanfo ne mfiridwuma a ɛte saa a ɛboa no de saa su yi di dwuma de ma wɔn a wɔde di dwuma no nya akwan tiawa foforo a wɔbɛfa so akɔ element a wotumi bubu no ankasa so tẽẽ.

Sɛnea wɔde di dwuma

Collapse plugin no de adesua kakraa bi di dwuma de di nneɛma a emu yɛ duru a wɔma so no ho dwuma:

  • .collapsede emu nsɛm no sie
  • .collapse.inkyerɛ emu nsɛm no
  • .collapsingwɔde ka ho bere a nsakrae no afi ase, na woyi fi hɔ bere a awie no

Wobetumi ahu saa adesua ahorow yi wɔ component-animations.less.

Via data su ahorow so

Kɛkɛ fa data-toggle="collapse"ne a data-targetka element no ho ma automatically assign control of a collapsible element. Attribute no data-targetgye CSS selector bi a wɔde collapse no bedi dwuma wɔ so. Hwɛ hu sɛ wode adesuakuw no bɛka collapseelement a wotumi bu no ho. Sɛ wopɛ sɛ ɛbue default a, fa adesua foforo no ka ho in.

Sɛ wode kuw nhyehyɛe a ɛte sɛ accordion bɛka control a wotumi bubu mu ho a, fa data su no ka ho data-parent="#selector". Hwɛ demo no na woahu eyi wɔ adeyɛ mu.

Ɛdenam JavaScript so

Fa nsa yɛ adwuma denam:

$('.collapse').collapse()

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-parent="".

Din korɔ mfiaseɛ nkyerɛmu
ɔwofo nea ɔpaw ade ɛnyɛ ampa Sɛ wɔde selector bi ma a, ɛnde wɔbɛto nneɛma a wobetumi abubu mu nyinaa wɔ ɔwofo a wɔakyerɛ no ase bere a wɔakyerɛ saa ade a wotumi bu mu yi. (te sɛ atetesɛm accordion suban - eyi gyina paneladesuakuw no so) .
toggle no boolean a ɛwɔ hɔ nokorɛ Toggles element a ɛyɛ collapsible wɔ invocation so

Akwan a wɔfa so yɛ

.collapse(options)

Ɛma wo nsɛm no yɛ adwuma sɛ ade a wotumi bu mu. Gye akwan a wubetumi apaw bi tom object.

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

.collapse('toggle')

Toggles a collapsible element ma wɔakyerɛ anaa wɔde asie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ element a wotumi bubu no ankasa anaa wɔde asie (kyerɛ sɛ ansa na shown.bs.collapseanaa hidden.bs.collapseadeyɛ no aba).

.collapse('show')

Kyerɛ element bi a ɛtumi hwe ase. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ element a wotumi bubu mu no ankasa (kyerɛ sɛ ansa na shown.bs.collapseasɛm no asi).

.collapse('hide')

Ɛde element bi a wotumi bubu mu sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde element a wotumi bubu mu no asie ankasa (kyerɛ sɛ ansa na hidden.bs.collapseasɛm no asi).

Nsɛm a esisi

Bootstrap no collapse adesua no da nsɛm kakraa bi a esisi ma hooking kɔ collapse dwumadi mu adi.

Nsɛm a Ɛsisii no Su Nkyerɛmu
kyerɛ.bs.collapse Saa adeyɛ yi tow ntɛm ara bere a showwɔfrɛ instance kwan no.
wɔakyerɛ.bs.collapse Wɔtow saa adeyɛ yi bere a wɔayɛ collapse element bi a ɔde di dwuma no ahu (bɛtwɛn ma CSS nsakrae ahorow no awie).
hide.bs.asɛm a wɔde sie Wɔtow saa adeyɛ yi ntɛm ara bere a hidewɔafrɛ ɔkwan no awie no.
ahintaw.bs.abɔ Wɔtow saa adeyɛ yi bere a wɔde collapse element bi asie nea ɔde di dwuma no (bɛtwɛn ma CSS nsakrae ahorow no awie).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel a wɔde yɛ kar.js

Slideshow afã bi a wɔde sakre fa element ahorow mu, te sɛ carousel. Wɔntumi mmoa carousels a wɔde ahyɛ mu no.

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

Nsɛm a wɔakyerɛw wɔ ase a wubetumi apaw

Fa nsɛm a wɔakyerɛw no ka wo slide ahorow no ho mmerɛw denam .carousel-captionelement a ɛwɔ biara mu .itemno so . Fa HTML biara a wopɛ no to mu wɔ hɔ na ɛbɛyɛ nea ɛne ne ho hyia na wɔayɛ no sɛnea ɛte no ara.

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

Carousel ahorow pii

Carousel ahorow hwehwɛ sɛ wɔde biribi di dwuma wɔ ade ida ɛwɔ akyi pɛɛ no ​​so (the .carousel) na ama carousel controls ahorow no atumi ayɛ adwuma yiye. Sɛ wode carousel pii ka ho, anaasɛ woresakra carousel’s id, hwɛ hu sɛ wobɛma controls a ɛfa ho no ayɛ foforo.

Via data su ahorow so

Fa data attributes di dwuma na ama ɛnyɛ den sɛ wobɛhwɛ carousel no gyinabea so. data-slidegye nsɛmfua titiriw prevanaa next, a ɛsakra slide gyinabea no toto ne gyinabea a ɛwɔ hɔ mprempren no ho. Sɛnea ɛbɛyɛ a, fa di dwuma data-slide-tode fa raw slide index kɔ carousel data-slide-to="2", a ɛsakra slide no gyinabea kɔ index pɔtee bi a efi ase0 .

Wɔde data-ride="carousel"su no di dwuma de hyɛ carousel agyirae sɛ ɛyɛ animating a efi ase wɔ kratafa a wɔde hyɛ mu. Wontumi mfa nni dwuma nka (redundant ne nea ɛho nhia) pefee JavaScript mfiase a ɛwɔ carousel koro no ara ho.

Ɛdenam JavaScript so

Frɛ carousel denam nsa so de:

$('.carousel').carousel()

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-interval="".

Din korɔ mfiaseɛ nkyerɛmu
ntamgyinafo nɔma 5000 na ɛwɔ hɔ Bere dodow a ɛsɛ sɛ wɔtwentwɛn so wɔ ade bi a wɔde sakre tu kwan ankasa ntam. Sɛ ɛyɛ atoro a, carousel renkyinkyin ne ho.
home so ahama | ohunu "hover" no. Sɛ wode si "hover", a, egyina carousel no sakre a ɛretu no so mouseenterna ɛsan fi ase de sakre a ɛretu wɔ carousel no so no mouseleave. Sɛ wode si null, a, sɛ wode wo ho to carousel no so a, ɛrennyae.
kyekyere ho boolean a ɛwɔ hɔ nokorɛ Sɛ́ ebia ɛsɛ sɛ carousel no di sakre bere nyinaa anaasɛ ɛwɔ gyinabea a ɛyɛ den.
keyboard so nsɛm boolean a ɛwɔ hɔ nokorɛ Sɛ ebia ɛsɛ sɛ carousel no yɛ n’ade wɔ nsɛm a esisi wɔ keyboard so no ho anaa.

Initializes carousel ne optional options objectna ofi ase sakre fa nneɛma mu.

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

Kyinkyin fa carousel nneɛma no mu fi benkum kɔ nifa.

Siw carousel no kwan sɛ ɛnsɛ sɛ ɔde sakre fa nneɛma mu.

Cycles carousel no kɔ frame pɔtee bi so (0 a egyina so, a ɛte sɛ array).

Kyinkyin kɔ ade a atwam no so.

Kyinkyin kɔ ade a edi hɔ no so.

Bootstrap carousel adesuakuw no da nsɛm abien a esisi ma hooking kɔ carousel dwumadi mu adi.

Nsɛm abien no nyinaa wɔ nneɛma foforo a edidi so yi:

  • direction: Ɔkwan a carousel no retwe ( "left"anaasɛ "right").
  • relatedTarget: DOM element a wɔretwetwe akɔ ne gyinabea sɛ ade a ɛyɛ adwuma.

Wɔtow carousel nsɛm a esisi nyinaa tow gu carousel no ankasa so (kyerɛ sɛ, wɔ <div class="carousel">).

Nsɛm a Ɛsisii no Su Nkyerɛmu
slide.bs.carousel a wɔde hyɛ mu Saa adeyɛ yi tow ntɛm ara bere a slidewɔfrɛ instance kwan no.
slid.bs.afiri a wɔde hyɛ kar mu Wɔtow saa adeyɛ yi bere a carousel no awie ne slide nsakrae no.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Fa affix.js hyɛ mu

Nhwɛsoɔ

Affix plugin no dannan position: fixed;ne ho na ɛdum, na ɛsuasua nkɛntɛnso a wohu wɔ position: sticky;. Subnavigation a ɛwɔ nifa so no yɛ live demo a ɛkyerɛ affix plugin no.


Sɛnea wɔde di dwuma

Fa affix plugin no di dwuma denam data attributes so anaasɛ fa nsa di dwuma denam w’ankasa JavaScript so. Wɔ tebea abien no nyinaa mu no, ɛsɛ sɛ wode CSS ma wo nsɛm a wode ahyɛ mu no gyinabea ne ne tɛtrɛtɛ.

Hyɛ no nsow: Mfa affix plugin no nni dwuma wɔ element bi a ɛwɔ element a ɛwɔ gyinabea kakra mu, te sɛ kɔla a wɔatwe anaa wɔapia, esiane Safari nkyerɛase bɔne nti .

Gyinabea a wɔde si hɔ denam CSS so

Affix plugin no dannan adesua ahorow abiɛsa ntam, a emu biara gyina hɔ ma tebea pɔtee bi: .affix, .affix-top, ne .affix-bottom. Ɛsɛ sɛ wode styles no ma, gye position: fixed;on .affix, ma saa adesua ahorow yi w’ankasa (a ɛde ne ho fi saa plugin yi ho) di gyinabea ahorow ankasa no ho dwuma.

Sɛnea affix plugin no yɛ adwuma ni:

  1. Sɛ wopɛ sɛ wufi ase a, plugin no de ka ho.affix-top de kyerɛ sɛ element no wɔ ne gyinabea a ɛwɔ soro paa. Saa bere yi de CSS gyinabea biara ho nhia.
  2. Ɛsɛ sɛ scrolling twa element a wopɛ sɛ wode bata ho no kanyan affixing ankasa no. Eyi ne baabi a wɔde .affixsi ananmu .affix-topna wɔde si hɔ position: fixed;(a Bootstrap CSS de ama).
  3. Sɛ wɔakyerɛ ase offset ase a, ɛsɛ sɛ scrolling atwam no .affixde .affix-bottom. Esiane sɛ offsets yɛ nea wopɛ nti, sɛ wode biako si hɔ a, ɛhwehwɛ sɛ wode CSS a ɛfata si hɔ. Sɛ ɛba saa a, fa ka ho position: absolute;bere a ɛho hia no. Plugin no de data attribute anaa JavaScript option no di dwuma de kyerɛ baabi a wode element no besi afi hɔ.

Di atifi hɔ anammɔn no akyi na fa wo CSS no si hɔ ma dwumadie akwan a ɛwɔ aseɛ ha no mu biara.

Via data su ahorow so

Sɛnea ɛbɛyɛ a ɛbɛyɛ mmerɛw sɛ wode affix suban bɛka element biara ho no, fa ka data-spy="affix"element a wopɛ sɛ wohwɛ so no ho kɛkɛ. Fa offsets di dwuma de kyerɛ bere a ɛsɛ sɛ wodannan element bi pinning.

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

Ɛdenam JavaScript so

Frɛ affix plugin no fa JavaScript so:

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

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-offset-top="200".

Din korɔ mfiaseɛ nkyerɛmu
offset a wɔde hyɛ mu nɔma | dwumadie | adeɛ 10. 10 Pixels to offset fi screen bere a worebu gyinabea a scroll no. Sɛ wɔde nɔma biako ma a, wɔde offset no bedi dwuma wɔ soro ne ase nyinaa. Sɛ wode offset soronko bɛma a, ase ne soro offset kɛkɛ ma ade offset: { top: 10 }anaa offset: { top: 10, bottom: 5 }. Fa dwumadie bi di dwuma berɛ a ɛhia sɛ wode dynamically bu offset bi ho akontaa.
deɛ ani si so nea ɔpaw | node no | jAsɛmmisa element ade windowno Kyerɛ ade a wɔde asi wɔn ani so wɔ affix no mu.

Akwan a wɔfa so yɛ

.affix(options)

Ɛma wo nsɛm no yɛ adwuma sɛ nsɛm a wɔde ahyɛ mu. Gye akwan a wubetumi apaw bi tom object.

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

.affix('checkPosition')

Ɔsan bu affix no tebea ho akontaa gyina nneɛma a ɛfa ho no nsusuwii, gyinabea, ne nhoma mmobɔwee gyinabea so. Wɔde .affix, .affix-top, ne .affix-bottomadesua ahorow no ka nsɛm a wɔde ahyɛ mu no ho anaasɛ woyi fi mu sɛnea tebea foforo no te. Ɛsɛ sɛ wɔfrɛ saa kwan yi bere biara a wɔbɛsesa nsɛm a wɔde ahyɛ mu no nsusuwii anaa ade a wɔde asi wɔn ani so no, na ama wɔahwɛ ahu sɛ wɔde nsɛm a wɔde ahyɛ mu no besi hɔ yiye.

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

Nsɛm a esisi

Bootstrap no affix plugin no da nsɛm kakraa bi a esisi ma hooking kɔ affix dwumadi mu adi.

Nsɛm a Ɛsisii no Su Nkyerɛmu
affix.bs.asɛm a wɔde hyɛ mu Saa adeyɛ yi tow ntɛm ara ansa na wɔde element no abata ho.
a wɔde ahyɛ mu.bs.affix Wɔtow saa adeyɛ yi bere a wɔde element no abata ho akyi.
affix-top.bs.afiri a wɔde hyɛ mu Saa adeyɛ yi tow ntɛm ara ansa na wɔde element no abata-top.
affixed-top.bs.a wɔde ahyɛ mu Wɔtow saa adeyɛ yi bere a wɔde element no ahyɛ-top no akyi.
affix-ase.bs.ahyɛaseɛ Saa adeyɛ yi tow ntɛm ara ansa na wɔde element no abata-ase.
affixed-ase.bs.a wɔde ahyɛ ase Wɔtow saa adeyɛ yi bere a wɔde element no ahyɛ-ase no akyi.