Txheej txheem cej luam

Tus kheej los yog muab tso ua ke

Plugins tuaj yeem suav nrog tus kheej (siv Bootstrap tus kheej *.jscov ntaub ntawv), lossis tag nrho ib zaug (siv bootstrap.jslossis cov minified bootstrap.min.js).

Siv lub compiled JavaScript

Ob leeg bootstrap.jsthiab bootstrap.min.jsmuaj tag nrho cov plugins hauv ib cov ntaub ntawv. suav ib leeg xwb.

Plugin dependencies

Qee cov plugins thiab CSS cov khoom nyob ntawm lwm cov plugins. Yog tias koj suav nrog plugins ib tus zuj zus, nco ntsoov xyuas cov kev vam meej hauv cov ntaub ntawv. Tsis tas li ntawd nco ntsoov tias tag nrho cov plugins nyob ntawm jQuery (qhov no txhais tau tias jQuery yuav tsum tau suav nrog ua ntej cov ntaub ntawv plugin). Nrog pebbower.json saib seb jQuery versions twg tau txais kev txhawb nqa.

Cov ntaub ntawv yam ntxwv

Koj tuaj yeem siv tag nrho Bootstrap plugins nkaus xwb los ntawm markup API yam tsis tau sau ib kab ntawm JavaScript. Qhov no yog Bootstrap's first-class API thiab yuav tsum yog koj thawj qhov kev txiav txim siab thaum siv lub plugin.

Uas tau hais tias, hauv qee qhov xwm txheej nws yuav tsim nyog los tua qhov kev ua haujlwm no. Yog li ntawd, peb kuj muab lub peev xwm los lov tes taw cov ntaub ntawv attribute API los ntawm unbinding tag nrho cov txheej xwm ntawm cov ntaub ntawv namespaced nrog data-api. Qhov no zoo li no:

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

Xwb, txhawm rau tsom ib lub plugin tshwj xeeb, tsuas yog suav nrog lub plugin lub npe ua lub npe chaw nrog rau cov ntaub ntawv-api namespace zoo li no:

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

Tsuas yog ib lub plugin rau ib lub caij ntawm cov ntaub ntawv tus cwj pwm

Tsis txhob siv cov ntaub ntawv tus cwj pwm los ntawm ntau lub plugins ntawm tib lub caij. Piv txwv li, ib lub pob tsis tuaj yeem muaj cov lus qhia thiab toggle modal. Yuav kom ua tiav qhov no, siv cov khoom qhwv.

Programmatic API

Peb kuj ntseeg tias koj yuav tsum tuaj yeem siv tag nrho Bootstrap plugins nkaus xwb los ntawm JavaScript API. Tag nrho cov pej xeem APIs yog ib leeg, chainable txoj kev, thiab xa rov qab cov sau ua raws li.

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

Txhua txoj hauv kev yuav tsum lees txais qhov kev xaiv xaiv khoom, ib txoj hlua uas tsom rau ib txoj hauv kev, lossis tsis muaj dab tsi (uas pib lub plugin nrog tus cwj pwm tsis zoo):

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

Txhua lub plugin kuj nthuav tawm nws cov neeg tsim khoom nyoos ntawm cov Constructorcuab yeej: $.fn.popover.Constructor. Yog tias koj xav tau ib qho plugin tshwj xeeb, muab nws ncaj qha los ntawm lub caij: $('[rel="popover"]').data('popover').

Default settings

Koj tuaj yeem hloov qhov chaw pib rau lub plugin los ntawm kev hloov kho lub plugin cov Constructor.DEFAULTSkhoom:

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

Tsis muaj teeb meem

Qee lub sij hawm nws yog qhov tsim nyog los siv Bootstrap plugins nrog rau lwm qhov UI lub luag haujlwm. Hauv cov xwm txheej no, kev sib tsoo ntawm lub npe chaw tuaj yeem tshwm sim qee zaus. Yog tias qhov no tshwm sim, koj tuaj yeem hu .noConflictrau lub plugin koj xav rov qab tus nqi ntawm.

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

Cov xwm txheej

Bootstrap muab cov xwm txheej kev cai rau feem ntau plugins 'kev ua tshwj xeeb. Feem ntau, cov no tuaj nyob rau hauv ib daim ntawv infinitive thiab yav dhau los koom nrog - qhov twg qhov infinitive (ex. show) yog tshwm sim thaum pib ntawm ib qho kev tshwm sim, thiab nws yav dhau los kev koom tes (ex. shown) yog tshwm sim ntawm qhov ua tiav ntawm qhov kev txiav txim.

Raws li ntawm 3.0.0, tag nrho cov txheej xwm Bootstrap yog namespaced.

Tag nrho cov txheej xwm infinitive muab preventDefaultfunctionality. Qhov no muab lub peev xwm los nres qhov kev txiav txim ua ntej nws pib.

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

Cov lej

Cov version ntawm txhua qhov ntawm Bootstrap's jQuery plugins tuaj yeem nkag tau los ntawm cov VERSIONcuab yeej ntawm plugin tus tsim. Piv txwv li, rau tooltip plugin:

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

Tsis muaj qhov cuam tshuam tshwj xeeb thaum JavaScript raug kaw

Bootstrap's plugins tsis poob rov qab tshwj xeeb zoo nkauj thaum JavaScript raug kaw. Yog tias koj mob siab txog cov neeg siv kev paub dhau los hauv qhov no, siv <noscript>los piav qhia qhov xwm txheej (thiab yuav ua li cas rov qhib JavaScript) rau koj cov neeg siv, thiab / lossis ntxiv koj tus kheej cov kev cai poob qis.

Cov tsev qiv ntawv thib peb

Bootstrap tsis ua haujlwm txhawb nqa JavaScript cov tsev qiv ntawv thib peb xws li Prototype lossis jQuery UI. Txawm hais tias .noConflictthiab cov xwm txheej muaj npe, tej zaum yuav muaj teeb meem kev sib raug zoo uas koj yuav tsum tau kho ntawm koj tus kheej.

Kev hloov pauv hloov pauv.js

Hais txog kev hloov

Rau kev hloov pauv yooj yim, suav nrog transition.jsib zaug nrog rau lwm cov ntaub ntawv JS. Yog tias koj siv cov ntawv sau ua ke (lossis me me) bootstrap.js, tsis tas yuav suav nrog qhov no - nws twb muaj lawm.

Dab tsi nyob hauv

Transition.js yog tus pab cuam yooj yim rau transitionEndcov xwm txheej nrog rau CSS kev hloov pauv emulator. Nws tau siv los ntawm lwm cov plugins los kuaj xyuas CSS kev hloov pauv kev txhawb nqa thiab txhawm rau ntes dai hloov pauv.

Disabling kev hloov

Kev hloov pauv tuaj yeem cuam tshuam thoob ntiaj teb siv cov lus piav qhia JavaScript hauv qab no, uas yuav tsum tuaj tom qab transition.js(lossis bootstrap.js, bootstrap.min.jsraws li qhov xwm txheej) tau thauj khoom:

$.support.transition = false

Modals modal.js

Modals yog streamlined, tab sis saj zawg zog, dialog prompts nrog yam tsawg kawg nkaus yuav tsum tau functionality thiab ntse defaults.

Ntau qhov qhib modals tsis txaus siab

Nco ntsoov tsis txhob qhib lub modal thaum lwm qhov tseem pom. Qhia ntau tshaj ib qho modal ntawm ib lub sij hawm xav tau kev cai code.

Modal markup qhov chaw

Ib txwm sim tso ib qho modal's HTML code nyob rau hauv qhov chaw saum toj kawg nkaus hauv koj cov ntaub ntawv kom tsis txhob muaj lwm yam cuam tshuam rau lub modal qhov tsos thiab / lossis kev ua haujlwm.

Mobile device caveats

Muaj qee qhov caveats hais txog kev siv modals ntawm mobile pab kiag li lawm. Saib peb cov ntaub ntawv txhawb nqa browser kom paub meej.

Vim li cas HTML5 txhais nws cov semantics, autofocusHTML tus cwj pwm tsis muaj txiaj ntsig hauv Bootstrap modals. Txhawm rau ua tiav cov txiaj ntsig zoo ib yam, siv qee qhov kev cai JavaScript:

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

Piv txwv

Piv txwv li

Ib tug rendered modal nrog header, lub cev, thiab txheej ntawm kev ua nyob rau hauv lub footer.

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

Nyob demo

Toggle modal ntawm JavaScript los ntawm nias lub pob hauv qab no. Nws yuav swb thiab ploj mus los ntawm sab saum toj ntawm nplooj ntawv.

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

Ua modals siv tau

Nco ntsoov ntxiv role="dialog"thiab aria-labelledby="...", referencing lub npe modal, rau .modal, thiab role="document"rau .modal-dialognws tus kheej.

Tsis tas li ntawd, koj tuaj yeem muab cov lus piav qhia ntawm koj lub modal dialog nrog aria-describedbyrau ntawm .modal.

Embedding YouTube yeeb yaj duab

Embedding YouTube yeeb yaj duab nyob rau hauv modals yuav tsum tau ntxiv JavaScript tsis nyob rau hauv Bootstrap kom cia li nres playback thiab ntau dua. Saib qhov pab tau Stack Overflow ncej kom paub ntau ntxiv.

Xaiv qhov ntau thiab tsawg

Modals muaj ob qhov ntau thiab tsawg, muaj nyob ntawm cov chav kawm hloov kho kom muab tso rau ntawm ib qho .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>

Tshem cov animation

Rau cov qauv uas tsuas yog tshwm sim ntau dua li ploj mus saib, tshem tawm cov .fadechav kawm los ntawm koj cov ntawv cim modal.

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

Siv cov kab sib chaws

Txhawm rau ua kom zoo dua ntawm Bootstrap kab sib chaws hauv ib qho qauv, tsuas yog zes .rows nyob rau hauv .modal-bodythiab tom qab ntawd siv cov chav kawm kab sib chaws ib txwm muaj.

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

Muaj ib pawg ntawm cov nyees khawm uas txhua tus ua rau tib lub qauv, tsuas yog nrog cov ntsiab lus sib txawv me ntsis? Siv event.relatedTargetthiab HTML data-*cwj pwm (tejzaum nws ntawm jQuery ) kom sib txawv ntawm cov ntsiab lus ntawm lub modal nyob ntawm seb lub pob twg raug nias. Saib Modal Events docs kom paub meej txog relatedTarget,

...ntau khawm...
<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)
})

Kev siv

Lub modal plugin toggles koj zais cov ntsiab lus ntawm kev thov, ntawm cov ntaub ntawv cwj pwm lossis JavaScript. Nws kuj tseem ntxiv .modal-openrau <body>kom dhau qhov kev coj tus cwj pwm scrolling thiab tsim .modal-backdropkom muaj ib qho chaw nyem rau kev tshem tawm cov qauv qhia thaum nias sab nraum lub modal.

Los ntawm cov ntaub ntawv attributes

Qhib lub modal yam tsis tau sau JavaScript. Teem data-toggle="modal"rau ntawm tus tswj lub caij, zoo li lub pob, nrog rau ib data-target="#foo"lossis href="#foo"rau lub hom phiaj rau ib qho kev hloov pauv.

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

Ntawm JavaScript

Hu rau modal nrog id myModalnrog ib kab ntawm JavaScript:

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

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-, xws li hauv data-backdrop="".

Lub npe hom ua ntej piav qhia
keeb kwm yav dhau boolean los yog txoj hlua'static' muaj tseeb Xws li ib qho modal-backdrop element. Xwb, qhia meej staticrau ib qho backdrop uas tsis kaw lub modal ntawm nias.
keyboard boolean muaj tseeb Kaw lub modal thaum khiav qhov tseem ceeb yog nias
ua yeeb yam boolean muaj tseeb Qhia cov modal thaum pib.
nyob deb txoj kev cuav

Qhov kev xaiv no yog deprecated txij thaum v3.3.0 thiab tau raug tshem tawm hauv v4. Peb pom zoo kom siv cov neeg siv khoom-sab templateing lossis cov ntaub ntawv khi cov ntaub ntawv, lossis hu rau jQuery.load koj tus kheej.

Yog hais tias ib qho chaw deb URL muab, cov ntsiab lus yuav raug thauj ib zaug ntawm jQuery txoj loadkev thiab txhaj rau hauv .modal-contentdiv. Yog tias koj siv cov ntaub ntawv-api, koj tuaj yeem siv tus hrefcwj pwm los qhia qhov chaw nyob deb. Ib qho piv txwv ntawm qhov no yog qhia hauv qab no:

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

Cov txheej txheem

Activates koj cov ntsiab lus raws li ib tug modal. Txais ib qho kev xaiv xaiv object.

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

Manually toggles ib modal. Rov qab mus rau tus neeg hu ua ntej lub modal tau tshwm sim los yog zais (piv txwv li ua ntej qhov shown.bs.modalkev hidden.bs.modaltshwm sim tshwm sim).

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

Manually qhib lub modal. Rov qab mus rau tus neeg hu ua ntej lub modal tau tshwm sim tiag tiag (piv txwv li ua ntej qhov shown.bs.modalkev tshwm sim tshwm sim).

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

Manually hides ib modal. Rov qab mus rau tus neeg hu ua ntej lub modal tau muab zais tiag tiag (piv txwv li ua ntej qhov hidden.bs.modalxwm txheej tshwm sim).

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

Readjusts lub modal qhov chaw rau counter ib tug scrollbar nyob rau hauv cov ntaub ntawv ib tug yuav tsum tshwm sim, uas yuav ua rau lub modal dhia mus rau sab laug.

Tsuas yog xav tau thaum qhov siab ntawm modal hloov thaum nws qhib.

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

Cov xwm txheej

Bootstrap's modal class exposes ob peb txheej xwm rau hooking rau hauv modal functionality.

Tag nrho cov txheej xwm modal raug rho tawm haujlwm ntawm lub modal nws tus kheej (piv txwv li ntawm <div class="modal">).

Hom xwm txheej Kev piav qhia
show.bs.modal Qhov xwm txheej no tua hluav taws tam sim ntawd thaum showhu ua piv txwv. Yog hais tias tshwm sim los ntawm ib tug nias, lub clicked caij yog muaj raws li cov relatedTargetcuab yeej ntawm qhov kev tshwm sim.
ua.bs.modal Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub modal tau pom rau tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav). Yog hais tias tshwm sim los ntawm ib tug nias, lub clicked caij yog muaj raws li cov relatedTargetcuab yeej ntawm qhov kev tshwm sim.
nkaum.bs.modal Qhov xwm txheej no raug rho tawm haujlwm tam sim ntawd thaum hidehu ua piv txwv txoj kev.
zais.bs.modal Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub modal tiav lawm muab zais los ntawm tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav).
loaded.bs.modal Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub modal tau thauj cov ntsiab lus siv qhov remotekev xaiv.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

Ntxiv dropdown menus rau yuav luag txhua yam nrog no yooj yim plugin, nrog rau navbar, tabs, thiab tshuaj.

Nyob rau hauv ib tug navbar

Hauv cov tshuaj

Los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript, lub dropdown plugin toggles zais cov ntsiab lus (dropdown menus) los ntawm toggling .openchav kawm ntawm niam txiv cov npe khoom.

Ntawm cov khoom siv txawb, qhib lub dropdown ntxiv ib .dropdown-backdropqho chaw kais rau kaw cov ntawv qhia zaub mov thaum tapping sab nraum cov ntawv qhia zaub mov, qhov yuav tsum tau muaj rau kev txhawb nqa iOS. Qhov no txhais tau hais tias hloov los ntawm cov ntawv qhia zaub mov qhib mus rau cov ntawv qhia zaub mov txawv yuav tsum muaj tus kais dej ntxiv ntawm lub xov tooj ntawm tes.

Nco tseg: Tus data-toggle="dropdown"cwj pwm yog tso siab rau kev kaw cov ntawv qhia zaub mov ntawm qib kev thov, yog li nws yog ib lub tswv yim zoo rau ib txwm siv nws.

Los ntawm cov ntaub ntawv attributes

Ntxiv data-toggle="dropdown"rau qhov txuas lossis khawm kom toggle ib qho kev poob.

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

Txhawm rau khaws URLs tsis zoo nrog cov khawm txuas, siv tus data-targetcwj pwm tsis yog 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>

Ntawm JavaScript

Hu rau dropdowns ntawm JavaScript:

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

data-toggle="dropdown"tseem xav tau

Txawm hais tias koj hu koj lub dropdown ntawm JavaScript los yog siv cov ntaub ntawv-api, data-toggle="dropdown"ib txwm yuav tsum muaj nyob rau hauv lub dropdown lub ntsiab lus.

Tsis muaj

Toggles lub dropdown ntawv qhia zaub mov ntawm ib tug muab navbar los yog tabbed navigation.

Tag nrho cov txheej xwm dropdown raug rho tawm haujlwm ntawm tus .dropdown-menuniam txiv lub ntsiab.

Tag nrho cov txheej xwm dropdown muaj cov relatedTargetcuab yeej, uas nws tus nqi yog toggling thauj tog rau nkoj caij.

Hom xwm txheej Kev piav qhia
show.bs.dropdown Qhov xwm txheej no tua hluav taws tam sim ntawd thaum hu ua yeeb yam piv txwv.
pom.bs.dropdown Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub dropdown tau pom rau tus neeg siv (yuav tos rau CSS kev hloov pauv, kom tiav).
hide.bs.dropdown Qhov xwm txheej no raug rho tawm haujlwm tam sim ntawd thaum txoj kev zais piv txwv tau raug hu.
zais.bs.dropdown Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub dropdown tiav lawm muab zais los ntawm tus neeg siv (yuav tos rau CSS hloov, kom tiav).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Piv txwv hauv navbar

Lub ScrollSpy plugin yog rau kev hloov kho nav lub hom phiaj raws li txoj haujlwm scroll. Scroll thaj tsam hauv qab ntawm navbar thiab saib qhov hloov pauv hauv chav kawm. Lub dropdown sub khoom yuav tsum highlighted thiab.

@fat

Ad leggings keytar, brunch id art party dolor laboure. Pitchfork yr enim lo-fi ua ntej lawv muag tawm qui. Tumblr ua liaj ua teb-rau- rooj tsheb kauj vab txoj cai txawm li cas los xij. Ntxim hlub cardigan. Velit seitan mcsweeney's photo booth 3 hma hli irure. Cosby sweater lomo jean luv, williamsburg hoodie minim qui koj tej zaum tsis tau hnov ​​​​txog lawv thiab cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork hwj txwv. Freegan hwj txwv aliqua cupidatat mcsweeney's vero. Cupidatat plaub loko nisi, ea helvetica nulla carles. Tattooed cosby sweater zaub mov tsheb, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles tsis zoo nkauj exercitation quis gentrify. Brooklyn adipisicing khoom siv tes ua npias vice keytar deserunt.

ib

Occaecat commodo aliqua delectus. Fap craft npias deserunt skateboard ea. Lomo tsheb kauj vab txoj cai adipisicing banh mi, velit ea sunt qib tom ntej locavore ib leeg-hauv paus kas fes hauv magna veniam. High life id vinyl, ncho park consequat quis aliquip banh mi pitchfork. Vero VHS yog adipisicing. Consectetur nisi DIY minim tub txib hnab. Cred ex nyob rau hauv, sustainable delectus consectetur fanny pob iphone.

ob

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 messenger bag marfa xijpeem delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats tej zaum koj tsis tau hnov ​​​​txog lawv ua rau hoodie gluten-dawb lo-fi fap aliquip. Labore elit placeat ua ntej lawv muag tawm, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft npias seitan readymade velit. VHS Chambray Laboris Tempor Veniam. Anim mollit minim commodo ullamco thundercats.

Kev siv

Yuav tsum muaj Bootstrap nav

Scrollspy tam sim no yuav tsum tau siv lub Bootstrap nav tivthaiv kom tsim nyog qhov tseem ceeb ntawm cov txuas txuas.

Resolvable ID hom phiaj xav tau

Navbar txuas yuav tsum muaj lub hom phiaj id daws tau. Piv txwv li, ib qho <a href="#home">home</a>yuav tsum sib haum rau ib yam dab tsi hauv DOM zoo li <div id="home"></div>.

Cov ntsiab lus tsis yog hom :visiblephiaj tsis quav ntsej

Lub hom phiaj cov ntsiab lus uas tsis yog :visibleraws li jQuery yuav raug tsis quav ntsej thiab lawv cov khoom siv nav yuav tsis raug qhia.

Yuav tsum muaj qhov chaw txheeb ze

Tsis muaj teeb meem txoj kev siv, scrollspy yuav tsum tau siv ntawm position: relative;lub caij koj nyob nraum spying. Feem ntau qhov no yog qhov <body>. Thaum scrollspying ntawm cov ntsiab lus uas tsis yog lub <body>, nco ntsoov muaj ib qho heightteeb tsa thiab overflow-y: scroll;thov.

Los ntawm cov ntaub ntawv attributes

Txhawm rau yooj yim ntxiv scrollspy tus cwj pwm rau koj qhov topbar navigation, ntxiv data-spy="scroll"rau lub caij koj xav soj ntsuam (feem ntau qhov no yuav yog <body>). Tom qab ntawd ntxiv tus data-targetcwj pwm nrog tus ID lossis chav kawm ntawm niam txiv lub ntsiab ntawm ib qho Bootstrap .navtivthaiv.

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>

Ntawm JavaScript

Tom qab ntxiv position: relative;hauv koj CSS, hu rau scrollspy ntawm JavaScript:

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

Cov txheej txheem

.scrollspy('refresh')

Thaum siv scrollspy ua ke nrog kev ntxiv lossis tshem tawm cov ntsiab lus los ntawm DOM, koj yuav tsum hu rau txoj kev hloov tshiab zoo li:

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

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-, xws li hauv data-offset="".

Lub npe hom ua ntej piav qhia
offset tus lej 10 Pixels rau offset los ntawm sab saum toj thaum xam txoj hauj lwm ntawm scroll.

Cov xwm txheej

Hom xwm txheej Kev piav qhia
activate.bs.scrollspy Qhov xwm txheej no tua hluav taws thaum twg ib yam khoom tshiab tau qhib los ntawm scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Togglable tabs tab.js

Piv txwv tabs

Ntxiv ceev, dynamic tab functionality rau kev hloov mus los ntawm panes ntawm cov ntsiab lus hauv zos, txawm tias ntawm dropdown menus. Nested tabs tsis txaus siab.

Raw denim tej zaum koj tsis tau hnov ​​​​txog lawv cov ris tsho luv Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit neeg tua tsiaj retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, neeg tua tsiaj 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.

Extends tabbed navigation

Cov plugin no txuas ntxiv cov tabbed navigation tivthaiv ntxiv cov chaw tabbable.

Kev siv

Qhib tabbable tabs ntawm JavaScript (txhua tab yuav tsum tau qhib ib tus zuj zus):

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

Koj tuaj yeem qhib ib tus neeg tab hauv ntau txoj hauv kev:

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

Koj tuaj yeem qhib lub tab lossis ntsiav tshuaj navigation yam tsis tau sau ib qho JavaScript los ntawm kev qhia yooj yim data-toggle="tab"lossis data-toggle="pill"ntawm lub ntsiab lus. Ntxiv cov navthiab nav-tabscov chav kawm rau lub tab ulyuav siv Bootstrap tab styling , thaum ntxiv cov navthiab nav-pillscov chav kawm yuav siv tshuaj styling .

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

Txhawm rau ua kom cov tabs ploj mus, ntxiv .faderau txhua qhov .tab-pane. Thawj tab pane yuav tsum tau .inua kom pom cov ntsiab lus thawj zaug.

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

Cov txheej txheem

$().tab

Activates lub tab element thiab cov ntsiab lus ntim. Tab yuav tsum muaj ib data-targetlossis ib lub hrefhom phiaj rau lub thawv ntim hauv DOM. Hauv cov piv txwv saum toj no, cov tabs yog cov <a>s nrog cov data-toggle="tab"cwj pwm.

.tab('show')

Xaiv lub tab muab thiab qhia nws cov ntsiab lus cuam tshuam. Lwm lub tab uas tau xaiv yav dhau los yuav tsis raug xaiv thiab nws cov ntsiab lus cuam tshuam raug muab zais. Rov qab mus rau tus neeg hu ua ntej lub tab pane tau tshwm sim tiag tiag (piv txwv li ua ntej qhov shown.bs.tabxwm txheej tshwm sim).

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

Cov xwm txheej

Thaum pom ib lub tab tshiab, cov xwm txheej hluav taws kub hauv qhov kev txiav txim hauv qab no:

  1. hide.bs.tab(ntawm lub tab active tam sim no)
  2. show.bs.tab(ntawm qhov yuav tsum tau qhia tab)
  3. hidden.bs.tab(nyob rau yav dhau los active tab, tib yam li rau qhov hide.bs.tabkev tshwm sim)
  4. shown.bs.tab(ntawm lub tab tshiab uas nyuam qhuav tshwm sim, tib yam li rau qhov show.bs.tabkev tshwm sim)

Yog tias tsis muaj tab twb ua haujlwm lawm, ces cov xwm txheej hide.bs.tabthiab hidden.bs.tabcov xwm txheej yuav tsis raug rho tawm haujlwm.

Hom xwm txheej Kev piav qhia
show.bs.tab Qhov kev tshwm sim no tua hluav taws ntawm tab qhia, tab sis ua ntej tab tshiab tau tshwm sim. Siv event.targetthiab event.relatedTargettsom rau lub tab active thiab yav dhau los active tab (yog tias muaj) feem.
ua.bs.tab Qhov kev tshwm sim no tua hluav taws ntawm tab qhia tom qab tau pom tab. Siv event.targetthiab event.relatedTargettsom rau lub tab active thiab yav dhau los active tab (yog tias muaj) feem.
hide.bs.tab Qhov kev tshwm sim no tua hluav taws thaum lub tab tshiab yuav tsum tau tshwm sim (thiab yog li lub tab yav dhau los yuav tsum tau muab zais). Siv event.targetthiab event.relatedTargettsom rau cov tab tam sim no thiab cov tshiab sai sai-rau-yuav-ua haujlwm tab, feem.
hidden.bs.tab Qhov kev tshwm sim no tshwm sim tom qab lub tab tshiab tau tshwm sim (thiab yog li lub tab active yav dhau los tau muab zais). Siv event.targetthiab event.relatedTargettsom mus rau lub tab active yav dhau los thiab cov tshiab tab tshiab, raws li.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Cov lus qhia tooltip.js

Kev tshoov siab los ntawm qhov zoo tshaj plaws jQuery.tipsy plugin sau los ntawm Jason Frame; Cov lus qhia yog ib qho kev hloov kho tshiab, uas tsis tso siab rau cov duab, siv CSS3 rau cov yeeb yaj kiab, thiab cov ntaub ntawv-tus cwj pwm rau cov npe hauv zos.

Cov lus qhia nrog xoom-ntev lub npe yeej tsis tshwm sim.

Piv txwv

Hover tshaj qhov txuas hauv qab no kom pom cov lus qhia:

Tight ris tom ntej no keffiyeh tej zaum koj yuav tsis tau hnov ​​txog lawv. Diam duab lub rooj muag zaub beard raw denim letterpress vegan tub txib hnab stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-ntsis american apparel muaj terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, plaub loko mcsweeney's cleanse vegan chambray. Ib tus kws txawj ntse tiag tiag txawm li cas los xij keytar , scenester ua liaj ua teb-rau- rooj banksy Austin twitter tuav freegan cred nyoos denim ib leeg-hauv paus kas fes kis.

Cov cuab yeej zoo li qub

Plaub txoj kev xaiv muaj: sab saum toj, sab xis, hauv qab, thiab sab laug dlhos.

Plaub txoj kev

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

Rau cov laj thawj ua tau zoo, Tooltip thiab Popover cov ntaub ntawv-apis yog opt-in, txhais tau tias koj yuav tsum pib pib lawv tus kheej .

Ib txoj hauv kev los pib tag nrho cov lus qhia ntawm nplooj ntawv yuav yog xaiv lawv los ntawm lawv data-toggletus cwj pwm:

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

Kev siv

Lub tooltip plugin tsim cov ntsiab lus thiab kos npe rau ntawm qhov kev thov, thiab los ntawm lub neej ntawd tso cov lus qhia tom qab lawv lub ntsiab lus.

Tig lub cuab yeej ntawm JavaScript:

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

Markup

Qhov yuav tsum tau kos npe rau cov lus qhia tsuas yog tus datacwj pwm thiab titlentawm HTML lub caij koj xav kom muaj cov lus qhia. Lub generated markup ntawm ib tug tooltip yog qhov yooj yim, tab sis nws yuav tsum tau ib txoj hauj lwm (los ntawm lub neej ntawd, teem los topntawm lub plugin).

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

Ntau kab txuas

Qee lub sij hawm koj xav ntxiv cov lus qhia rau lub hyperlink uas qhwv ntau kab. Lub neej ntawd tus cwj pwm ntawm lub tooltip plugin yog nruab nrab nws horizontally thiab vertically. Ntxiv white-space: nowrap;rau koj cov anchors kom zam qhov no.

Cov lus qhia hauv cov pab pawg khawm, pab pawg tswv yim, thiab cov rooj yuav tsum tau teeb tsa tshwj xeeb

Thaum siv cov lus qhia ntawm cov ntsiab lus hauv ib .btn-grouplossis ib qho .input-group, lossis ntawm cov lus hais txog cov ntsiab lus ( <td>, <th>, , <tr>, <thead>, , <tbody>, <tfoot>), koj yuav tsum tau qhia qhov kev xaiv container: 'body'(cov ntaub ntawv hauv qab no) kom tsis txhob muaj kev phiv tsis zoo (xws li lub caij loj hlob thiab / los yog poob nws cov ces kaum sib npaug thaum cov lus qhia tau tshwm sim).

Tsis txhob sim qhia cov lus qhia ntawm cov ntsiab lus zais

Invoking $(...).tooltip('show')thaum lub hom phiaj lub ntsiab display: none;yuav ua rau lub tooltip yuav incorrectly positioned.

Cov cuab yeej siv tau yooj yim rau cov keyboard thiab cov neeg siv thev naus laus zis

Rau cov neeg siv navigating nrog cov keyboard, thiab tshwj xeeb tshaj yog cov neeg siv cov cuab yeej pab, koj tsuas yog yuav tsum ntxiv cov lus qhia rau cov keyboard-focusable ntsiab xws li kev sib txuas, daim ntawv tswj, lossis ib qho kev txiav txim siab nrog tus tabindex="0"cwj pwm.

Cov lus qhia ntawm cov neeg xiam oob khab xav tau cov ntsiab lus wrapper

Txhawm rau ntxiv cov lus qhia rau ib disabledlossis .disabledlub caij, muab lub ntsiab rau hauv ib qho <div>thiab siv cov lus qhia rau qhov ntawd <div>.

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-, xws li hauv data-animation="".

Lub npe Hom Default Kev piav qhia
animation boolean muaj tseeb Siv CSS hloov pauv mus rau cov lus qhia
thawv hlua | cuav cuav

Appends lub tooltip rau ib lub caij tshwj xeeb. container: 'body'Piv txwv :. Qhov kev xaiv no muaj txiaj ntsig tshwj xeeb hauv qhov uas nws tso cai rau koj los tso cov lus qhia hauv qhov ntws ntawm cov ntaub ntawv nyob ze ntawm lub ntsiab lus tshwm sim - uas yuav tiv thaiv cov cuab yeej los ntawm ntab tawm ntawm qhov cuam tshuam thaum lub qhov rais hloov pauv.

ncua tus lej | khoom 0

ncua kev qhia thiab zais cov lus qhia (ms) - tsis siv rau phau ntawv txhais hom

Yog tias muaj tus lej nkag, ncua sijhawm yog siv rau ob qho tib si zais / qhia

Object structure yog:delay: { "show": 500, "hide": 100 }

html boolean cuav Ntxig HTML rau hauv cov lus qhia. Yog tias tsis tseeb, jQuery txoj textkev yuav raug siv los ntxig cov ntsiab lus rau hauv DOM. Siv cov ntawv nyeem yog tias koj txhawj xeeb txog XSS tawm tsam.
tso chaw hlua | muaj nuj nqi 'sab saum toj'

Yuav ua li cas tso lub cuab yeej - saum | hauv qab | sab laug | txoj cai | auto.
Thaum "auto" tau teev tseg, nws yuav dynamically reorient lub tooltip. Piv txwv li, yog qhov kev tso kawm yog "pib sab laug", cov lus qhia yuav tshwm rau sab laug thaum ua tau, txwv tsis pub nws yuav tso cai.

Thaum muaj nuj nqi yog siv los txiav txim qhov kev tso kawm, nws raug hu nrog lub tooltip DOM node raws li nws thawj qhov kev sib cav thiab lub triggering ntsiab DOM node raws li nws thib ob. Cov thisntsiab lus tau teeb tsa rau qhov piv txwv tooltip.

xaiv txoj hlua cuav Yog hais tias muaj ib tug selector, tooltip khoom yuav delegated mus rau lub hom phiaj teev. Hauv kev xyaum, qhov no yog siv los pab kom cov ntsiab lus HTML dynamic kom muaj cov lus qhia ntxiv. Saib qhov no thiab ib qho piv txwv qhia .
tus qauv txoj hlua '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML siv thaum tsim cov lus qhia.

Cov cuab yeej cuab tam titleyuav raug txhaj rau hauv .tooltip-inner.

.tooltip-arrowyuav ua tus tooltip xub xub.

Cov txheej txheem wrapper sab nraud yuav tsum muaj .tooltipchav kawm.

lub npe hlua | muaj nuj nqi ''

Default title value yog titleattribute tsis nyob.

Yog tias muaj kev ua haujlwm tau muab, nws yuav raug hu nrog nws cov thisntaub ntawv siv rau lub caij uas cov lus qhia txuas nrog.

ua rau txoj hlua 'hover focus' Yuav ua li cas tooltip yog triggered - nyem | hover | tsom | phau ntawv. Koj tuaj yeem hla ntau qhov ua rau; cais lawv nrog ib qho chaw. manualtsis tuaj yeem ua ke nrog lwm qhov ua rau.
saib hlua | khoom | muaj nuj nqi { selector: 'lub cev', padding: 0 }

Khaws cov lus qhia nyob rau hauv cov ciam teb ntawm lub caij no. viewport: '#viewport'Piv txwv li : lub{ "selector": "#viewport", "padding": 0 }

Yog tias muaj kev ua haujlwm tau muab, nws raug hu nrog lub ntsiab lus DOM ntawm nws qhov kev sib cav nkaus xwb. Cov thisntsiab lus tau teeb tsa rau qhov piv txwv tooltip.

Cov ntaub ntawv tus cwj pwm rau tus kheej cov lus qhia

Cov kev xaiv rau tus kheej cov lus qhia tuaj yeem hloov pauv tau los ntawm kev siv cov ntaub ntawv cwj pwm, raws li tau piav qhia saum toj no.

Cov txheej txheem

$().tooltip(options)

Txuas tus tooltip handler rau ib qho khoom sau.

.tooltip('show')

Qhia ib lub ntsiab lus qhia. Rov qab mus rau tus neeg hu ua ntej cov lus qhia tau tshwm sim tiag tiag (piv txwv li ua ntej qhov shown.bs.tooltipxwm txheej tshwm sim). Qhov no suav hais tias yog "phau ntawv" tshwm sim ntawm cov lus qhia. Cov lus qhia nrog xoom-ntev lub npe yeej tsis tshwm sim.

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

.tooltip('hide')

Hide ib lub ntsiab lus qhia. Rov qab mus rau tus neeg hu ua ntej cov lus qhia tau muab zais tiag tiag (piv txwv li ua ntej qhov hidden.bs.tooltipxwm txheej tshwm sim). Qhov no suav hais tias yog "phau ntawv" tshwm sim ntawm cov lus qhia.

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

.tooltip('toggle')

Toggles ib lub ntsiab lus qhia. Rov qab mus rau tus neeg hu ua ntej cov lus qhia tau tshwm sim los yog muab zais (piv txwv li ua ntej qhov shown.bs.tooltipkev hidden.bs.tooltiptshwm sim tshwm sim). Qhov no suav hais tias yog "phau ntawv" tshwm sim ntawm cov lus qhia.

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

.tooltip('destroy')

Nias thiab rhuav tshem cov ntsiab lus ntawm cov cuab yeej. Cov lus qhia uas siv delegation (uas yog tsim los ntawm selectorkev xaiv ) tsis tuaj yeem raug rhuav tshem ib tus zuj zus ntawm cov xeeb leej xeeb ntxwv.

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

Cov xwm txheej

Hom xwm txheej Kev piav qhia
show.bs.tooltip Qhov xwm txheej no tua hluav taws tam sim ntawd thaum showhu ua piv txwv.
qhia.bs.tooltip Qhov kev tshwm sim no raug rho tawm haujlwm thaum cov lus qhia tau ua kom pom rau tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav).
hide.bs.tooltip Qhov xwm txheej no raug rho tawm haujlwm tam sim ntawd thaum hidehu ua piv txwv txoj kev.
zais.bs.tooltip Qhov kev tshwm sim no raug rho tawm haujlwm thaum cov lus qhia tau ua tiav tau muab zais los ntawm tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav).
inserted.bs.tooltip Qhov kev tshwm sim no raug rho tawm haujlwm tom qab qhov show.bs.tooltiptshwm sim thaum lub cuab yeej template tau ntxiv rau DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Ntxiv me me ntawm cov ntsiab lus, zoo li cov hauv iPad, rau txhua lub hauv paus rau cov ntaub ntawv thib ob hauv tsev.

Popovers uas nws ob lub npe thiab cov ntsiab lus yog xoom-ntev yeej tsis tshwm sim.

Plugin kev vam meej

Popovers xav tau lub tooltip plugin kom muab tso rau hauv koj lub version ntawm Bootstrap.

Opt-hauv functionality

Rau cov laj thawj ua tau zoo, Tooltip thiab Popover cov ntaub ntawv-apis yog opt-in, txhais tau tias koj yuav tsum pib pib lawv tus kheej .

Ib txoj hauv kev los pib tag nrho cov popovers ntawm nplooj ntawv yuav yog xaiv lawv los ntawm lawv data-toggletus cwj pwm:

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

Popovers hauv pawg khawm, pab pawg tswv yim, thiab cov rooj yuav tsum tau teeb tsa tshwj xeeb

Thaum siv popovers ntawm cov ntsiab lus hauv ib .btn-grouplossis ib qho .input-group, lossis ntawm cov lus hais txog ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>), koj yuav tsum tau qhia qhov kev xaiv container: 'body'(cov ntaub ntawv hauv qab no) kom tsis txhob muaj kev phiv tsis zoo (xws li lub caij loj hlob thiab / los yog poob nws puag ncig thaum lub popover tshwm sim).

Tsis txhob sim qhia popovers ntawm cov ntsiab lus zais

Invoking $(...).popover('show')thaum lub hom phiaj lub ntsiab yog display: none;yuav ua rau lub popover yuav incorrectly positioned.

Popovers ntawm cov khoom xiam oob khab xav tau cov ntaub qhwv

Txhawm rau ntxiv ib qho popover rau ib disabledlossis .disabledlub caij, muab cov khoom tso rau hauv ib qho <div>thiab siv lub popover rau qhov ntawd <div>.

Ntau kab txuas

Qee lub sij hawm koj xav ntxiv ib qho popover rau ib qho hyperlink uas qhwv ntau kab. Lub neej ntawd tus cwj pwm ntawm lub popover plugin yog nruab nrab ntawm nws kab rov tav thiab ntsug. Ntxiv white-space: nowrap;rau koj cov anchors kom zam qhov no.

Piv txwv

Static popover

Plaub txoj kev xaiv muaj: sab saum toj, sab xis, hauv qab, thiab sab laug dlhos.

Popover saum

Sed posuere consectetur yog nyob rau hauv lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover txoj cai

Sed posuere consectetur yog nyob rau hauv lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover hauv qab

Sed posuere consectetur yog nyob rau hauv lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover sab laug

Sed posuere consectetur yog nyob rau hauv lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Nyob demo

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

Plaub txoj kev

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

Tshem tawm ntawm qhov nyem tom ntej

Siv qhov focusua kom tshem tawm popovers ntawm qhov nyem tom ntej uas tus neeg siv ua.

Cov cim tshwj xeeb xav tau rau kev tshem tawm-ntawm-tom ntej-nias

Txhawm rau kom tus neeg hla browser thiab tus cwj pwm hla lub platform, koj yuav tsum siv lub <a>cim npe, tsis yog lub <button>cim, thiab koj kuj yuav tsum suav nrog role="button"thiab tabindexcov cwj pwm.

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

Kev siv

Qhib popovers ntawm JavaScript:

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

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-, xws li hauv data-animation="".

Lub npe Hom Default Kev piav qhia
animation boolean muaj tseeb Siv CSS ploj mus rau qhov popover
thawv hlua | cuav cuav

Appends lub popover rau ib lub caij tshwj xeeb. container: 'body'Piv txwv :. Qhov kev xaiv no yog qhov tshwj xeeb tshaj yog nyob rau hauv uas nws tso cai rau koj tso lub popover nyob rau hauv qhov ntws ntawm cov ntaub ntawv nyob ze ntawm lub triggering lub caij - uas yuav tiv thaiv lub popover los ntawm floating deb ntawm lub triggering lub sij hawm thaum lub qhov rais resize.

cov ntsiab lus hlua | muaj nuj nqi ''

Default ntsiab lus tus nqi yog data-contentattribute tsis nyob.

Yog tias muaj nuj nqi tau muab, nws yuav raug hu nrog nws cov thisntaub ntawv teev rau lub caij uas lub popover txuas nrog.

ncua tus lej | khoom 0

ncua kev qhia thiab zais qhov popover (ms) - tsis siv rau phau ntawv txhais hom

Yog tias muaj tus lej nkag, ncua sijhawm yog siv rau ob qho tib si zais / qhia

Object structure yog:delay: { "show": 500, "hide": 100 }

html boolean cuav Ntxig HTML rau hauv popover. Yog tias tsis tseeb, jQuery txoj textkev yuav raug siv los ntxig cov ntsiab lus rau hauv DOM. Siv cov ntawv nyeem yog tias koj txhawj xeeb txog XSS tawm tsam.
tso chaw hlua | muaj nuj nqi 'txoj cai'

Yuav ua li cas tso lub popover - sab saum toj | hauv qab | sab laug | txoj cai | auto.
Thaum "auto" tau teev tseg, nws yuav dynamically reorient lub popover. Piv txwv li, yog qhov kev tso kawm yog "auto left", lub popover yuav tso tawm rau sab laug thaum ua tau, txwv tsis pub nws yuav tso cai.

Thaum muaj nuj nqi yog siv los txiav txim qhov kev tso kawm, nws raug hu nrog popover DOM node raws li nws thawj qhov kev sib cav thiab lub triggering ntsiab DOM node raws li nws thib ob. Cov thisntsiab lus tau teeb tsa rau qhov piv txwv popover.

xaiv txoj hlua cuav Yog tias muaj ib tus neeg xaiv tau muab, cov khoom popover yuav raug xa mus rau cov phiaj xwm tshwj xeeb. Hauv kev xyaum, qhov no yog siv los ua kom cov ntsiab lus HTML dynamic kom muaj popovers ntxiv. Saib qhov no thiab ib qho piv txwv qhia .
tus qauv txoj hlua '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Base HTML siv thaum tsim cov popover.

Popover's titleyuav raug txhaj rau hauv lub .popover-title.

Popover's contentyuav raug txhaj rau hauv lub .popover-content.

.arrowyuav dhau los ua tus popover tus xub.

Cov txheej txheem wrapper sab nraud yuav tsum muaj .popoverchav kawm.

lub npe hlua | muaj nuj nqi ''

Default title value yog titleattribute tsis nyob.

Yog tias muaj nuj nqi tau muab, nws yuav raug hu nrog nws cov thisntaub ntawv teev rau lub caij uas lub popover txuas nrog.

ua rau txoj hlua 'nias' Yuav ua li cas popover yog triggered - nyem | hover | tsom | phau ntawv. Koj tuaj yeem hla ntau qhov ua rau; cais lawv nrog ib qho chaw. manualtsis tuaj yeem ua ke nrog lwm qhov ua rau.
saib hlua | khoom | muaj nuj nqi { selector: 'lub cev', padding: 0 }

Khaws lub popover hauv thaj tsam ntawm lub caij no. viewport: '#viewport'Piv txwv li : lub{ "selector": "#viewport", "padding": 0 }

Yog tias muaj kev ua haujlwm tau muab, nws raug hu nrog lub ntsiab lus DOM ntawm nws qhov kev sib cav nkaus xwb. Cov thisntsiab lus tau teeb tsa rau qhov piv txwv popover.

Cov ntaub ntawv tus cwj pwm rau tus kheej popovers

Kev xaiv rau ib tus neeg popovers tuaj yeem hloov tau los ntawm kev siv cov ntaub ntawv tus cwj pwm, raws li tau piav qhia saum toj no.

Cov txheej txheem

$().popover(options)

Initializes popovers rau ib qho khoom sau.

.popover('show')

Qhia ib lub ntsiab lus popover. Rov qab mus rau tus neeg hu ua ntej qhov popover tau tshwm sim tiag tiag (piv txwv li ua ntej qhov shown.bs.popoverxwm txheej tshwm sim). Qhov no suav hais tias yog "phau ntawv" ua rau lub popover. Popovers uas nws ob lub npe thiab cov ntsiab lus yog xoom-ntev yeej tsis tshwm sim.

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

.popover('hide')

Hide ib lub ntsiab lus popover. Rov qab mus rau tus neeg hu ua ntej qhov popover tau muab zais tiag tiag (piv txwv li ua ntej qhov hidden.bs.popoverxwm txheej tshwm sim). Qhov no suav hais tias yog "phau ntawv" ua rau lub popover.

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

.popover('toggle')

Toggles ib lub ntsiab lus popover. Rov qab mus rau tus neeg hu ua ntej lub popover tau tshwm sim los yog zais (piv txwv li ua ntej qhov shown.bs.popoverkev hidden.bs.popovertshwm sim tshwm sim). Qhov no suav hais tias yog "phau ntawv" ua rau lub popover.

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

.popover('destroy')

Nias thiab rhuav tshem lub ntsiab lus popover. Popovers uas siv delegation (uas yog tsim los ntawm selectorkev xaiv ) tsis tuaj yeem raug rhuav tshem ib tus zuj zus ntawm cov xeeb leej xeeb ntxwv.

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

Cov xwm txheej

Hom xwm txheej Kev piav qhia
show.bs.popover Qhov xwm txheej no tua hluav taws tam sim ntawd thaum showhu ua piv txwv.
pom.bs.popover Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub popover tau pom rau tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav).
hide.bs.popover Qhov xwm txheej no raug rho tawm haujlwm tam sim ntawd thaum hidehu ua piv txwv txoj kev.
zais.bs.popover Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub popover tiav lawm muab zais los ntawm tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav).
inserted.bs.popover Qhov kev tshwm sim no raug rho tawm haujlwm tom qab qhov show.bs.popovertshwm sim thaum lub popover template tau ntxiv rau DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Cov lus ceeb toom alert.js

Piv txwv ceeb toom

Ntxiv tso tawm haujlwm rau tag nrho cov lus ceeb toom nrog cov plugin no.

Thaum siv lub .closepob, nws yuav tsum yog thawj tus me nyuam ntawm cov ntawv .alert-dismissiblethiab tsis muaj cov ntsiab lus ntawm cov ntawv yuav tuaj ua ntej nws nyob rau hauv lub cim.

Kev siv

Tsuas yog ntxiv data-dismiss="alert"rau koj lub khawm kaw kom tau txais kev ceeb toom kaw ua haujlwm. Kaw ib qho kev ceeb toom tshem tawm ntawm DOM.

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

Txhawm rau kom koj cov lus ceeb toom siv cov animation thaum kaw, xyuas kom lawv muaj cov .fadechav .inkawm twb tau thov rau lawv.

Cov txheej txheem

$().alert()

Ua kom ceeb toom mloog rau cov xwm txheej nyem ntawm cov xeeb leej xeeb ntxwv uas muaj tus data-dismiss="alert"cwj pwm. (Tsis tsim nyog thaum siv data-api's auto-initialization.)

$().alert('close')

Kaw ib qho kev ceeb toom los ntawm kev tshem tawm ntawm DOM. Yog hais tias cov .fadethiab .incov chav kawm muaj nyob rau ntawm lub caij, lub ceeb toom yuav ploj mus ua ntej nws yuav raug tshem tawm.

Cov xwm txheej

Bootstrap's alert plugin nthuav tawm ob peb txheej xwm rau hooking rau hauv kev ceeb toom ua haujlwm.

Hom xwm txheej Kev piav qhia
close.bs.alert Qhov xwm txheej no tua hluav taws tam sim ntawd thaum closehu ua piv txwv.
kaw.bs.alert Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub ceeb toom tau raug kaw (yuav tos rau CSS kev hloov pauv kom tiav).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Khawm khawm.js

Ua ntau nrog cov nyees khawm. Tswj khawm hais los yog tsim pab pawg ntawm cov nyees khawm rau ntau yam xws li toolbars.

Cross-browser compatibility

Firefox txuas ntxiv tsim cov xeev tswj (kev xiam oob khab thiab kuaj xyuas) hla nplooj ntawv . Ib qho kev daws teeb meem rau qhov no yog siv autocomplete="off". Saib Mozilla kab laum #654072 .

Xeev

Ntxivdata-loading-text="Loading..." rau siv lub xeev loading ntawm ib lub pob.

Qhov no feature yog deprecated txij thaum v3.3.5 thiab tau raug tshem tawm nyob rau hauv v4.

Siv lub xeev twg koj nyiam!

Rau lub hom phiaj ntawm kev ua qauv qhia no, peb siv data-loading-textthiab $().button('loading'), tab sis qhov ntawd tsis yog lub xeev nkaus xwb uas koj tuaj yeem siv. Saib ntxiv ntawm qhov no hauv qab no hauv cov $().button(string)ntaub ntawv .

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

Ib leeg toggle

Ntxiv data-toggle="button"rau qhib toggling ntawm ib lub pob.

Pre-toggled nyees khawm xav tau.active thiabaria-pressed="true"

Rau cov nyees khawm pre-toggled, koj yuav tsum ntxiv cov .activechav kawm thiab tus aria-pressed="true"cwj pwm rau buttonkoj tus kheej.

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

Checkbox / Xov tooj cua

Ntxiv data-toggle="buttons"rau lub .btn-groupthawv uas muaj lub thawv ntawv lossis xov tooj cua nkag los ua kom toggling hauv lawv cov qauv.

Preselected xaiv xav tau.active

Rau cov kev xaiv ua ntej, koj yuav tsum ntxiv cov .activechav kawm rau cov tswv yim ntawm labelkoj tus kheej.

Visual checked state tsuas yog hloov kho ntawm nias

Yog hais tias lub xeev checkbox khawm hloov tshiab yam tsis tau tua ib qho clickkev tshwm sim ntawm lub pob (xws li los ntawm <input type="reset">los yog los ntawm kev teeb tsa cov checkedcuab yeej ntawm cov tswv yim), koj yuav tsum toggle .activechav kawm ntawm cov tswv yim ntawm labelkoj tus kheej.

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

Cov txheej txheem

$().button('toggle')

Toggles thawb lub xeev. Muab lub pob kom pom tias nws tau qhib.

$().button('reset')

Resets khawm lub xeev - swaps ntawv rau cov ntawv qub. Txoj kev no yog asynchronous thiab xa rov qab ua ntej qhov rov pib dua tau ua tiav.

$().button(string)

Hloov cov ntawv mus rau cov ntaub ntawv teev cov ntawv hauv xeev.

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

Kaw _

Yooj yim plugin uas siv ib tug puv tes ntawm cov chav kawm kom yooj yim toggle cwj pwm.

Plugin kev vam meej

Collapse yuav tsum muaj qhov hloov pauv plugin kom suav nrog hauv koj lub version ntawm Bootstrap.

Piv txwv

Nyem rau cov nyees khawm hauv qab no los qhia thiab zais lwm lub ntsiab lus ntawm kev hloov hauv chav kawm:

  • .collapsezais cov ntsiab lus
  • .collapsingyog siv thaum lub sij hawm hloov
  • .collapse.inqhia cov ntsiab lus

Koj tuaj yeem siv qhov txuas nrog tus hrefcwj pwm, lossis khawm nrog tus data-targetcwj pwm. Hauv ob qho xwm txheej, qhov data-toggle="collapse"yuav tsum tau ua.

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>

Piv txwv li accordion

Txuas ntxiv qhov kev coj cwj pwm tsis zoo los tsim ib qho accordion nrog lub vaj huam sib luag.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 hma hli official aute, non cupidatat skateboard dolor brunch. Khoom noj khoom haus tsheb quinoa nesciunt lab eiusmod. Brunch 3 hma hli tempor, sunt aliqua muab ib tug noog rau nws squid ib leeg-hauv paus kas fes nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer laboure wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur neeg tua tsiaj vice lomo. Leggings occaecat khoom siv tes ua npias ua liaj ua teb-rau- rooj, nyoos denim aesthetic synth nesciunt tej zaum koj tsis tau hnov ​​​​txog lawv accusamus ua haujlwm ruaj khov VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 hma hli official aute, non cupidatat skateboard dolor brunch. Khoom noj khoom haus tsheb quinoa nesciunt lab eiusmod. Brunch 3 hma hli tempor, sunt aliqua muab ib tug noog rau nws squid ib leeg-hauv paus kas fes nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer laboure wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur neeg tua tsiaj vice lomo. Leggings occaecat khoom siv tes ua npias ua liaj ua teb-rau- rooj, nyoos denim aesthetic synth nesciunt tej zaum koj tsis tau hnov ​​​​txog lawv accusamus ua haujlwm ruaj khov VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 hma hli official aute, non cupidatat skateboard dolor brunch. Khoom noj khoom haus tsheb quinoa nesciunt lab eiusmod. Brunch 3 hma hli tempor, sunt aliqua muab ib tug noog rau nws squid ib leeg-hauv paus kas fes nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer laboure wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur neeg tua tsiaj vice lomo. Leggings occaecat khoom siv tes ua npias ua liaj ua teb-rau- rooj, nyoos denim aesthetic synth nesciunt tej zaum koj tsis tau hnov ​​​​txog lawv accusamus ua haujlwm ruaj khov 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>

Nws tseem tuaj yeem hloov pauv .panel-bodys nrog .list-groups.

  • Bootply
  • Ib qho yooj yim ac facilin
  • Thib ob eros

Ua kom nthuav dav/collapse tswj tau siv tau

Nco ntsoov ntxiv aria-expandedrau lub caij tswj. Tus cwj pwm no qhia meej meej txog lub xeev tam sim no ntawm lub caij sib tsoo rau kev tshuaj ntsuam nyeem ntawv thiab cov cuab yeej pabcuam zoo sib xws. Yog hais tias lub caij collapsible raug kaw los ntawm lub neej ntawd, nws yuav tsum muaj tus nqi ntawm aria-expanded="false". Yog tias koj tau teeb tsa lub caij collapsible qhib los ntawm lub neej ntawd siv cov inchav kawm, teeb tsaaria-expanded="true" rau kev tswj hwm. Lub plugin yuav cia li toggle tus cwj pwm no raws li seb puas tau qhib lossis kaw.

Tsis tas li ntawd, yog tias koj lub ntsiab tswj yog tsom rau ib qho kev sib tsoo nkaus xwb - piv txwv li tus data-targetcwj pwm yog taw tes rau tus idxaiv - koj tuaj yeem ntxiv tus aria-controlscwj pwm ntxiv rau cov khoom tswj, uas muaj cov idkhoom sib tsoo. Cov ntawv nyeem niaj hnub no thiab cov thev naus laus zis zoo sib xws ua rau siv cov cwj pwm no los muab cov neeg siv nrog cov shortcuts ntxiv rau kev taw qhia ncaj qha rau lub caij sib tsoo nws tus kheej.

Kev siv

Lub cev qhuav dej siv ob peb chav kawm los daws qhov hnyav nqa:

  • .collapsezais cov ntsiab lus
  • .collapse.inqhia cov ntsiab lus
  • .collapsingntxiv thaum qhov kev hloov pauv pib, thiab tshem tawm thaum nws tiav

Cov chav kawm no tuaj yeem pom hauv component-animations.less.

Los ntawm cov ntaub ntawv attributes

Tsuas yog ntxiv data-toggle="collapse"thiab ib qho data-targetrau lub caij kom tau txais kev tswj hwm ntawm lub caij collapsible. Tus data-targetcwj pwm lees txais CSS xaiv los siv lub cev qhuav dej rau. Nco ntsoov ntxiv cov chav kawm collapserau lub caij collapsible. Yog tias koj xav kom nws qhib lub neej ntawd, ntxiv cov chav kawm ntxiv in.

Txhawm rau ntxiv accordion-zoo li pab pawg tswj hwm rau kev tswj hwm, ntxiv cov ntaub ntawv tus cwj pwm data-parent="#selector". Xa mus rau qhov demo kom pom qhov no hauv kev nqis tes ua.

Ntawm JavaScript

Qhib manually nrog:

$('.collapse').collapse()

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-, xws li hauv data-parent="".

Lub npe hom ua ntej piav qhia
niam txiv xaiv cuav Yog hais tias muaj ib tug selector, ces tag nrho cov collapsible ntsiab nyob rau hauv cov niam txiv uas tau teev tseg yuav raug kaw thaum cov khoom no collapsible qhia. (zoo ib yam li kev coj cwj pwm accordion - qhov no yog nyob ntawm panelchav kawm)
toggle boolean muaj tseeb Toggles lub caij collapsible ntawm invocation

Cov txheej txheem

.collapse(options)

Activates koj cov ntsiab lus raws li lub ntsiab collapsible. Txais ib qho kev xaiv xaiv object.

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

.collapse('toggle')

Toggles lub caij collapsible kom pom los yog zais. Rov qab mus rau tus neeg hu ua ntej lub caij collapsible tau tshwm sim los yog zais (piv txwv li ua ntej qhov shown.bs.collapsekev hidden.bs.collapsetshwm sim tshwm sim).

.collapse('show')

Qhia ib lub caij collapsible. Rov qab mus rau tus neeg hu ua ntej lub caij collapsible tau tshwm sim tiag tiag (piv txwv li ua ntej qhov shown.bs.collapsexwm txheej tshwm sim).

.collapse('hide')

Hide ib lub caij collapsible. Rov qab mus rau tus neeg hu ua ntej lub caij collapsible tau muab zais tiag tiag (piv txwv li ua ntej qhov hidden.bs.collapsexwm txheej tshwm sim).

Cov xwm txheej

Bootstrap's collapse class exposes ob peb txheej xwm rau hooking mus rau hauv vau functionality.

Hom xwm txheej Kev piav qhia
show.bs.collapse Qhov xwm txheej no tua hluav taws tam sim ntawd thaum showhu ua piv txwv.
pom.bs.collapse Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub caij sib tsoo tau ua kom pom rau tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav).
hide.bs.collapse Qhov kev tshwm sim no raug rho tawm haujlwm tam sim ntawd thaum hidehu ua txoj kev.
zais.bs.collapse Qhov xwm txheej no raug rho tawm haujlwm thaum lub caij sib tsoo tau muab zais los ntawm tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

carousel.js _

Ib qho slideshow tivthaiv rau kev caij tsheb kauj vab los ntawm cov khoom, zoo li lub carousel. Nested carousels tsis txaus siab.

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

Xaiv cov ntawv sau

Ntxiv cov ntawv sau rau koj cov slides yooj yim nrog cov .carousel-captionkhoom hauv ib qho twg .item. Qhov chaw tsuas yog hais txog ib qho kev xaiv HTML nyob rau hauv qhov ntawd thiab nws yuav raug txiav thiab formatted.

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

Ntau carousels

Carousels yuav tsum tau siv ib qho idntawm lub thawv sab nraud (lub .carousel) rau kev tswj xyuas carousel kom ua haujlwm zoo. Thaum ntxiv ntau lub carousel, lossis thaum hloov lub carousel id, nco ntsoov hloov kho cov kev tswj hwm.

Los ntawm cov ntaub ntawv attributes

Siv cov ntaub ntawv cwj pwm kom yooj yim tswj txoj hauj lwm ntawm lub carousel. data-slidelees txais cov lus tseem ceeb prevlossis next, uas hloov txoj haujlwm swb txheeb ze rau nws txoj haujlwm tam sim no. Xwb, siv data-slide-tokom dhau qhov ntsuas qhov ntsuas tsis sib haum mus rau lub carousel data-slide-to="2", uas hloov txoj haujlwm swb mus rau qhov ntsuas tshwj xeeb pib nrog 0.

Tus data-ride="carousel"cwj pwm yog siv los khij lub carousel li animating pib ntawm nplooj ntawv load. Nws tsis tuaj yeem siv ua ke nrog (rov ua dua thiab tsis tsim nyog) qhia meej JavaScript pib ntawm tib lub carousel.

Ntawm JavaScript

Hu rau carousel manually nrog:

$('.carousel').carousel()

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-, xws li hauv data-interval="".

Lub npe hom ua ntej piav qhia
lub sijhawm tus lej 5000 Lub sijhawm ncua sijhawm ntawm kev caij tsheb kauj vab ib yam khoom. Yog hais tias tsis tseeb, carousel yuav tsis cia li voj voog.
nres hlua | null "hover" Yog tias tau teeb tsa "hover", nres lub caij tsheb kauj vab ntawm lub carousel rau mouseenterthiab rov pib caij tsheb kauj vab ntawm lub carousel rau mouseleave. Yog tias teem rau null, hovering hla lub carousel yuav tsis nres nws.
qhwv boolean muaj tseeb Txawm hais tias lub carousel yuav tsum tsis tu ncua los yog muaj zog nres.
keyboard boolean muaj tseeb Seb lub carousel yuav tsum teb rau cov xwm txheej keyboard.

Pib lub carousel nrog ib qho kev xaiv xaiv objectthiab pib caij tsheb kauj vab los ntawm cov khoom.

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

Cycles los ntawm cov khoom carousel ntawm sab laug mus rau sab xis.

Nres lub carousel los ntawm kev caij tsheb kauj vab los ntawm cov khoom.

Cycles lub carousel rau ib lub thav duab (0 raws li, zoo ib yam li ib qho array).

Lub voj voog mus rau qhov khoom dhau los.

Cycles mus rau yam khoom tom ntej.

Bootstrap's carousel class exposes ob txheej xwm rau hooking rau hauv carousel functionality.

Ob qho xwm txheej muaj cov khoom nram qab no ntxiv:

  • direction: Cov kev taw qhia uas lub carousel zawv zawg (txawm "left"los yog "right").
  • relatedTarget: Lub caij DOM uas tau swb rau hauv qhov chaw ua cov khoom nquag.

Tag nrho cov xwm txheej carousel raug rho tawm haujlwm ntawm lub carousel nws tus kheej (piv txwv li ntawm <div class="carousel">).

Hom xwm txheej Kev piav qhia
swb.bs.carousel Qhov xwm txheej no tua hluav taws tam sim ntawd thaum tus slidetxheej txheem piv txwv raug hu.
swb.bs.carousel Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub carousel tau ua tiav nws txoj kev hloov pauv.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix affix.js

Piv txwv

Lub affix plugin toggles position: fixed;rau thiab tawm, emulating cov nyhuv pom nrog position: sticky;. Lub subnavigation ntawm sab xis yog qhov nyob deb ntawm lub affix plugin.


Kev siv

Siv lub affix plugin ntawm cov ntaub ntawv cwj pwm lossis manually nrog koj tus kheej JavaScript. Hauv ob qho xwm txheej, koj yuav tsum muab CSS rau qhov chaw thiab qhov dav ntawm koj cov ntsiab lus affixed.

Nco tseg: Tsis txhob siv lub affix plugin ntawm ib lub caij uas muaj nyob rau hauv ib tug kuj positioned caij, xws li ib tug rub los yog thawb kem, vim yog ib tug Safari rendering kab .

Positioning ntawm CSS

Lub affix plugin toggles ntawm peb chav kawm, txhua tus sawv cev rau ib lub xeev tshwj xeeb: .affix, .affix-top, thiab .affix-bottom. Koj yuav tsum muab cov qauv, tshwj tsis yog position: fixed;rau .affix, rau cov chav kawm no koj tus kheej (ywj siab ntawm qhov plugin no) los tswj cov haujlwm tiag tiag.

Nov yog yuav ua li cas lub affix plugin ua haujlwm:

  1. Txhawm rau pib, lub plugin ntxiv .affix-toplos qhia tias lub caij yog nyob rau hauv nws txoj haujlwm saum toj kawg nkaus. Hauv qhov no, tsis muaj CSS qhov yuav tsum tau ua.
  2. Scrolling dhau lub caij koj xav tau affixed yuav tsum ua rau qhov tseeb affixing. Qhov no yog qhov uas .affixhloov .affix-topthiab teeb tsa position: fixed;(muab los ntawm Bootstrap's CSS).
  3. Yog hais tias lub hauv qab offset tau txhais, scrolling dhau los nws yuav tsum hloov .affixnrog .affix-bottom. Txij li thaum offsets yog xaiv tau, teeb tsa ib qho xav kom koj teeb tsa CSS tsim nyog. Hauv qhov no, ntxiv position: absolute;thaum tsim nyog. Lub plugin siv cov ntaub ntawv tus cwj pwm lossis kev xaiv JavaScript los txiav txim qhov twg los tso lub ntsiab lus los ntawm qhov ntawd.

Ua raws li cov kauj ruam saum toj no los teeb koj CSS rau ob qho ntawm cov kev xaiv siv hauv qab no.

Los ntawm cov ntaub ntawv attributes

Txhawm rau yooj yim ntxiv affix tus cwj pwm rau txhua lub caij, tsuas yog ntxiv data-spy="affix"rau lub caij koj xav soj ntsuam. Siv offsets los txhais thaum twg los toggle pinning ntawm ib lub caij.

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

Ntawm JavaScript

Hu rau affix plugin ntawm JavaScript:

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

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-, xws li hauv data-offset-top="200".

Lub npe hom ua ntej piav qhia
offset tus lej | muaj nuj nqi | khoom 10 Pixels rau offset los ntawm kev tshuaj ntsuam thaum xam txoj hauj lwm ntawm scroll. Yog tias muab ib tus lej, qhov offset yuav raug siv rau ob qho tib si sab saum toj thiab hauv qab. Txhawm rau muab qhov tshwj xeeb, hauv qab thiab sab saum toj offset tsuas yog muab ib qho khoom offset: { top: 10 }lossis offset: { top: 10, bottom: 5 }. Siv ib txoj haujlwm thaum koj xav tau dynamically xam qhov offset.
phiaj xaiv | node | jQuery element qhov windowkhoom Qhia meej lub hom phiaj ntawm affix.

Cov txheej txheem

.affix(options)

Qhib koj cov ntsiab lus raws li cov ntsiab lus affixed. Txais ib qho kev xaiv xaiv object.

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

.affix('checkPosition')

Recalculates lub xeev ntawm affix raws li qhov ntev, txoj hauj lwm, thiab scroll txoj hauj lwm ntawm cov ntsiab lus. Cov .affix, .affix-top, thiab .affix-bottomcov chav kawm ntxiv rau lossis tshem tawm ntawm cov ntsiab lus affixed raws li lub xeev tshiab. Txoj kev no yuav tsum tau hu thaum twg qhov ntev ntawm cov ntsiab lus affixed los yog lub hom phiaj lub ntsiab yog hloov, kom paub meej qhov chaw ntawm cov ntsiab lus affixed.

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

Cov xwm txheej

Bootstrap's affix plugin nthuav tawm ob peb txheej xwm rau hooking rau hauv affix functionality.

Hom xwm txheej Kev piav qhia
affix.bs.affix ib Qhov kev tshwm sim no hluav taws kub tam sim ntawd ua ntej lub caij tau affixed.
affixed.bs.affix ua Qhov kev tshwm sim no raug rho tawm haujlwm tom qab lub caij tau raug affixed.
affix-top.bs.affix Qhov kev tshwm sim no hluav taws kub tam sim ntawd ua ntej lub caij tau affixed-sab saum toj.
affixed-top.bs.affix Qhov kev tshwm sim no raug rho tawm haujlwm tom qab lub caij tau affixed-sab saum toj.
affix-bottom.bs.affix ib Qhov kev tshwm sim no hluav taws kub tam sim ntawd ua ntej lub caij tau affixed-hauv qab.
affixed-bottom.bs.affix Qhov kev tshwm sim no raug rho tawm haujlwm tom qab lub caij tau affixed-hauv qab.