Vaaiga lautele

Ta'ito'atasi pe tuufaatasia

E mafai ona fa'apipi'i fa'apipi'i ta'ito'atasi (fa'aaogā *.jsfaila ta'itasi a Bootstrap), po'o fa'atasi uma (fa'aoga bootstrap.jspo'o le fa'aitiitiga bootstrap.min.js).

Fa'aaogā le JavaScript ua tu'ufa'atasia

E lua bootstrap.jsma bootstrap.min.jsaofia uma plugins i se faila e tasi. Fa'aaofia na'o le tasi.

Fa'alagolago fa'apipi'i

O nisi fa'apipi'i ma vaega CSS fa'alagolago i isi fa'apipi'i. Afai e te faʻapipiʻi faʻapipiʻi taʻitasi, ia mautinoa e siaki mo nei faʻalagolago i le docs. Ia maitauina foi o plugini uma e faalagolago i le jQuery (o lona uiga e tatau ona aofia ai le jQuery i luma o faila faila). Fa'afeso'ota'i matoubower.json e va'ai po'o fea fa'aliliuga o le jQuery e lagolagoina.

Uiga fa'amaumauga

E mafai ona e fa'aogaina uma Bootstrap plugins mama e ala i le fa'ailoga API e aunoa ma le tusiaina o se laina se tasi o le JavaScript. O le API muamua lea a Bootstrap ma e tatau ona avea ma au iloiloga muamua pe a faʻaaogaina se mea faʻapipiʻi.

Na faapea mai, i nisi tulaga atonu e manaʻomia e tape lenei galuega. O le mea lea, matou te tuʻuina atu foʻi le malosi e faʻamalo ai le faʻamatalaga uiga API e ala i le tatalaina o mea uma na tutupu i luga o le igoa o le pepa faʻatasi ma le data-api. E pei o lenei:

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

I le isi itu, e faʻatatau i se mea faʻapipiʻi faʻapitoa, naʻo le faʻapipiʻiina o le igoa ole plugin o se igoa avanoa faʻatasi ai ma le data-api namespace pei o lenei:

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

Na'o le tasi le plugin i le elemene e ala i fa'amatalaga uiga

Aua le fa'aogaina uiga fa'amatalaga mai le tele o plugini i luga ole elemene e tasi. Mo se fa'ata'ita'iga, e le mafai e se fa'amau ona maua uma se mea faigaluega ma fa'asolo i se auala. Ina ia ausia lenei mea, faʻaaoga se elemene afifi.

API polokalame

Matou te talitonu foi e tatau ona e faʻaogaina uma Bootstrap plugins mama e ala i le JavaScript API. O API fa'alaua'itele uma e tasi, auala e mafai ona filifili, ma toe fa'afo'i le aoina na fa'atino.

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

O metotia uma e tatau ona talia se mea e filifili ai filifiliga, se manoa e faʻatatau i se metotia faʻapitoa, poʻo leai se mea (lea e amataina ai se faʻapipiʻi ma amioga le lelei):

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

E fa'aalia fo'i e fa'apipi'i ta'itasi lona faufale mata'utia i luga o se Constructormeatotino: $.fn.popover.Constructor. Afai e te manaʻo e maua se faʻataʻitaʻiga faʻapitoa faʻapipiʻi, aumai saʻo mai se elemene: $('[rel="popover"]').data('popover').

Fa'atonuga

E mafai ona e suia tulaga fa'aletonu mo se fa'apipi'i e ala i le suia o le Constructor.DEFAULTSmea fa'apipi'i:

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

Leai se feteenaiga

O nisi taimi e manaʻomia le faʻaogaina o Bootstrap plugins ma isi faʻavae UI. I ia tulaga, e mafai ona tupu i nisi taimi le fete'ena'iga o igoa. Afai e tupu lenei mea, e mafai ona e valaʻau .noConflicti le plugin e te manaʻo e toe faʻafoʻi le tau o.

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

Mea na tutupu

O le Bootstrap e tuʻuina atu mea faʻapitoa mo le tele o mea faʻapitoa a plugins. E masani lava, o nei mea e sau i se fa'ailoga fa'apitoa ma le taimi ua tuana'i - lea e fa'aosoina ai le infinitive (ex. show) i le amataga o se mea na tupu, ma lona fa'ailoga participle ua mavae (ex. shown) e fa'aosoina pe a mae'a se gaioiga.

E pei o le 3.0.0, o mea uma a Bootstrap o loʻo faʻaigoaina igoa.

O mea fa'apitoa uma e maua ai preventDefaultgaluega fa'atino. O lenei mea e maua ai le malosi e taofi ai le faʻatinoina o se gaioiga aʻo leʻi amataina.

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

Numera fa'aliliuga

E mafai ona maua le fa'asologa o mea ta'itasi a Bootstrap's jQuery plugins e ala i le VERSIONmeatotino a le faufale o le plugin. Mo se faʻataʻitaʻiga, mo le meafaigaluega faʻapipiʻi:

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

Leai ni fa'aletonu fa'apitoa pe a fa'aletonu le JavaScript

O plugini a Bootstrap e le toe fo'i fa'apitoa pe a fa'aletonu le JavaScript. Afai e te popole e uiga i le tagata faʻaoga i lenei tulaga, faʻaaoga <noscript>e faʻamatala ai le tulaga (ma pe faʻafefea ona toe faʻaogaina le JavaScript) i au tagata faʻaoga, ma / pe faʻaopoopo au lava faʻaleaga masani.

Faletusi a isi vaega

E le lagolagoina aloaia e Bootstrap faletusi JavaScript isi vaega e pei o le Prototype poʻo le jQuery UI. E ui lava .noConflictma fa'aigoa mea tutupu, e ono iai fa'afitauli feso'ota'iga e mana'omia ona e fa'aleleia e oe lava.

Transitions transition.js

E uiga i suiga

Mo a'afiaga faigofie o suiga, transition.jsfa'atasi ma isi faila JS. Afai o loʻo e faʻaaogaina le tuʻufaʻatasia (poʻo le faʻaititia) bootstrap.js, e leai se manaʻoga e aofia ai lenei mea-ua uma ona iai.

O a mea i totonu

Transition.js ose fesoasoani fa'avae mo transitionEndmea e tutupu fa'apea fo'i ma le CSS transition emulator. O lo'o fa'aogaina e isi fa'apipi'i e siaki ai le lagolago mo suiga o le CSS ma pu'e fa'aoga fa'atautau.

Fa'aleaogaina suiga

O suiga e mafai ona fa'aletonu i le lalolagi atoa e ala i le fa'aogaina o le snippet JavaScript o lo'o mulimuli mai, lea e tatau ona o'o mai pe a mae'a ona utaina transition.js(po'o bootstrap.jsle bootstrap.min.js, pe a o'o i ai le tulaga):

$.support.transition = false

Modals modal.js

O auala e fa'afaigofie, ae fetu'una'i, fa'asalalauga fa'atasi ma le fa'aitiitiga mana'omia ma fa'aletonu atamai.

E le lagolagoina le tele o auala tatala

Ia mautinoa e aua le tatalaina se auala ae o loʻo iloa pea se isi. O le fa'aalia o le sili atu ma le tasi fa'apena i le taimi e mana'omia ai le fa'ailoga masani.

Fa'ailoga tulaga

Taumafai i taimi uma e tuʻu le code HTML a le modal i se tulaga maualuga i lau pepa e aloese ai mai isi vaega e aʻafia ai foliga o le modal ma / poʻo galuega.

Fa'atonuga o masini feavea'i

O loʻo i ai nisi faʻamatalaga e uiga i le faʻaaogaina o modals i luga o masini feaveaʻi. Va'ai la matou su'esu'ega lagolago docs mo fa'amatalaga.

Ona o le auala e faʻamatalaina ai e le HTML5 ona faʻaoga, o le autofocusuiga HTML e leai se aoga i Bootstrap modals. Ina ia ausia le aafiaga tutusa, faʻaaoga nisi JavaScript masani:

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

Faataitaiga

Fa'ata'ita'iga tumau

Se fa'atusa fa'atusa fa'atasi ai ma ulutala, tino, ma se seti o gaioiga i le vae.

<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

Su'e se fa'aoga e ala ile JavaScript ile kilikiina ole ki lalo. O le a fa'ase'e ifo i lalo ma mou atu mai le pito i luga o le itulau.

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

Fai auala e mafai ona maua

Ia mautinoa e faʻaopoopo role="dialog"ma aria-labelledby="...", faʻasino i le ulutala modal, i .modal, ma role="document"ia .modal-dialoglava.

E le gata i lea, e mafai ona e tuʻuina atu se faʻamatalaga o lau faʻasalalauga faʻatasi ma aria-describedbyon .modal.

Fa'apipi'i ata YouTube

O le fa'apipi'iina o vitio YouTube i fa'aola e mana'omia ai le JavaScript fa'aopoopo ae le o le Bootstrap e otometi ai ona taofi le toe ta'alo ma sili atu. Va'ai lenei pou fesoasoani Stack Overflow mo nisi fa'amatalaga.

Fa'ailoga tetele

E lua lapopo'a filifiliga, e maua e ala i vasega modifier e tu'u i luga o se .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>

Aveese le animation

Mo auala e foliga mai nai lo le mou atu e matamata ai, aveese le .fadevasega mai lau faʻailoga faʻailoga.

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

Fa'aaogāina ole faiga fa'ata

Ina ia fa'aoga lelei le faiga fa'asologa o Bootstrap i totonu o se fa'ata'ita'iga, na'o le ofaga .rowi totonu o le .modal-bodyfa'aoga ona fa'aaoga lea o vasega masani fa'asologa.

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

E i ai ni fa'amau fa'amau e fa'aosoina uma le faiga e tasi, na'o sina mea e 'ese'ese ai? Fa'aoga event.relatedTargetma uiga HTMLdata-* (atonu e ala i le jQuery ) e fesuia'i mea o lo'o i totonu o le modal fa'atatau i le fa'amau na kiliki. Va'ai le Modal Events docs mo fa'amatalaga i luga relatedTarget,

...sili atu fa'amau...
<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)
})

Fa'aoga

O le modal plugin e fesuia'i au mea natia pe a mana'omia, e ala i fa'amatalaga uiga po'o le JavaScript. E fa'aopoopoina fo'i .modal-openi le <body>fa'ato'a fa'aletonu le ta'avale amio ma fa'atupuina se .modal-backdrope tu'uina atu ai se vaega kiliki mo le fa'ate'aina o fa'aaliga fa'aalia pe a kiliki i fafo atu o le fa'ailoga.

E ala i fa'amaumauga uiga

Fa'agaoioia se faiga e aunoa ma le tusia o le JavaScript. Seti data-toggle="modal"i luga o se elemene e pulea, pei o se faamau, faatasi ai ma se data-target="#foo"po href="#foo"o le taulaʻi i se faiga faʻapitoa e fesuiaʻi.

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

E ala i le JavaScript

Valaau se modal ma id myModalma se laina e tasi o le JavaScript:

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

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-backdrop="".

Igoa ituaiga faaletonu fa'amatalaga
tuaa boolean po'o le manoa'static' moni E aofia ai se elemene fa'aola-backdrop. I le isi itu, fa'amaoti staticmo se fa'ata'atia e le tapuni ai le auala ile kiliki.
piano boolean moni Tapuni le auala pe a oomi le ki sola
fa'aali boolean moni Fa'aalia le faiga pe'ā amata.
mamao ala pepelo

O lenei filifiliga ua le toe faaaogaina talu mai le v3.3.0 ma ua aveese i le v4. Matou te fautua atu nai lo le faʻaaogaina o faʻataʻitaʻiga a le tagata o tausia poʻo se faʻavae faʻamaumauga, pe valaʻau oe i le jQuery.load .

Afai e tuʻuina atu se URL mamao, o le a faʻapipiʻiina mea e tasi i le auala a le jQuery loadma tui i totonu o le .modal-contentdiv. Afai o loʻo e faʻaogaina le data-api, e mafai ona e faʻaogaina le hrefuiga e faʻamaonia ai le puna mamao. O se faʻataʻitaʻiga o lenei mea o loʻo faʻaalia i lalo:

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

Metotia

Fa'agaoioia lau anotusi e fai ma fa'ata'ita'iga. Talia se filifiliga faitalia object.

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

Su'e ma le lima se faiga. Toe fo'i i le tagata vala'au a'o le'i fa'aalia pe natia le modal (fa'atusa a'o le'i tupu le shown.bs.modalpo'o le hidden.bs.modalmea na tupu).

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

Tatala ma le lima se auala. Toe fo'i atu i le tagata vala'au a'o le'i fa'aalia moni le modal (fa'atusa a'o le'i tupu le shown.bs.modalmea na tupu).

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

Natia ma le lima se auala. Toe fo'i i le tagata vala'au a'o le'i natia moni le modal (fa'atusa a'o le'i tupu le hidden.bs.modalmea na tupu).

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

Toe fetu'una'i le tulaga o le modal e fa'asaga i se ta'avale pe a aliali mai se tasi, o le a oso ai le auala i le agavale.

E na'o le mana'omia pe a suia le maualuga o le auala a'o tatala.

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

Mea na tutupu

O le vasega fa'apitoa a Bootstrap o lo'o fa'aalia ai ni nai mea na tutupu mo le fa'aogaina o galuega fa'atino.

O mea faʻapitoa uma e faʻaumatia i le modal lava ia (ie i le <div class="modal">).

Ituaiga Mea Fa'amatalaga
show.bs.modal E mu vave lenei mea pe a showvalaʻau le auala faʻataʻitaʻiga. Afai e mafua mai i se kiliki, o le elemene kiliki e avanoa e avea ma relatedTargetmeatotino o le mea na tupu.
fa'aalia.bs.modal O lenei mea na tupu e faʻamalo pe a faʻaalia le modal i le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa). Afai e mafua mai i se kiliki, o le elemene kiliki e avanoa e avea ma relatedTargetmeatotino o le mea na tupu.
hide.bs.modal O lenei mea na tupu e faʻamalo vave pe a hidevalaʻau le auala faʻataʻitaʻiga.
hidden.bs.modal O lenei mea e tupu pe a maeʻa ona natia le modal mai le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa).
loaded.bs.modal O lenei mea e tupu e faʻamalo pe a faʻapipiʻi e le modal mea e faʻaaoga ai le remotefilifiliga.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Pa'u i lalo dropdown.js

Fa'aopoopo i lalo menus i le toetoe lava o so'o se mea fa'atasi ma lenei fa'aoga faigofie, e aofia ai le navbar, tabs, ma pills.

I totonu o se navbar

I totonu o fualaau

E ala i fa'amatalaga uiga po'o le JavaScript, o le pa'ū fa'apipi'i fa'apipi'i mea natia (pa'u i lalo menus) e ala i le fa'anofoina o le .openvasega i le lisi o matua.

I luga o masini feaveaʻi, o le tatalaina o se pa'ū faʻaopoopo faʻaopoopo a .dropdown-backdrope fai ma tapuni e tapuni ai menus pa'ū pe a tapuni i fafo o le lisi, o se manaʻoga mo le lagolago iOS talafeagai. O lona uiga o le fesuia'i mai se lisi fa'atulalo tatala i se isi fa'ailoga fa'alalo e mana'omia ai se tap fa'aopoopo ile telefoni feavea'i.

Fa'aaliga: O le data-toggle="dropdown"uiga e fa'alagolago i ai mo le tapunia o menus pa'u i lalo i se tulaga o talosaga, o se manatu lelei le fa'aaogaina i taimi uma.

E ala i fa'amaumauga uiga

Fa'aopoopo data-toggle="dropdown"i se so'oga po'o se fa'amau e fa'asolo i lalo.

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

Ina ia fa'atumauina URL ma fa'amau so'otaga, fa'aoga le data-targetuiga nai lo le 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>

E ala i le JavaScript

Valaau le to'alalo e ala i le JavaScript:

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

data-toggle="dropdown"manaomia pea

Tusa lava pe e te valaʻau lau pa'ū i lalo e ala i le JavaScript pe faʻaaoga le data-api, data-toggle="dropdown"e manaʻomia i taimi uma le i ai i luga o le elemene faʻaoso.

Leai

Fa'asolo i lalo le lisi o le navbar ua tu'uina atu po'o le fa'atautaiga fa'apipi'i.

O mea uma e pa'u i lalo e fa'ao i le .dropdown-menu'elemene matua.

O mea uma e pa'u i lalo o lo'o i ai se relatedTargetmea totino, o lona tau o le elemene taula fa'afefe.

Ituaiga Mea Fa'amatalaga
show.bs.dropdown E mu vave lenei mea pe a valaau le auala fa'ata'ita'iga.
fa'aalia.bs.dropdown O lenei mea e tupu pe a faʻaalia le pa'ū i lalo i le tagata faʻaoga (o le a faʻatali mo suiga CSS, e faʻamaeʻa).
hide.bs.dropdown O lenei mea e tupu e faʻamalo vave pe a valaʻau le auala faʻataʻitaʻiga natia.
hidden.bs.dropdown O lenei mea e tupu pe a maeʻa ona natia le pa'ū i lalo mai le tagata faʻaoga (o le a faʻatali mo suiga CSS, e faʻamaeʻa).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Faataitaiga i le navbar

O le ScrollSpy plugin e mo le fa'afouina otometi fa'atatau i luga ole laiga e fa'atatau ile tulaga ta'ai. Fa'asolo le vaega i lalo o le navbar ma matamata le suiga o le vasega. O le a fa'amaninoina fo'i le fa'ailoga pito i lalo.

@ga'o

Ad leggings keytar, brunch id art party dolor laboure. Pitchfork yr enim lo-fi ae le'i fa'atau atu. Tumblr farm-to-table uila aia tatau po o le a lava. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui masalo e te le'i faalogo iai ma cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache laupapa, adipisicing fugiat velit pitchfork 'ava. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat fa loko nisi, ea helvetica nulla carles. Ta'u mea'ai ta'avale cosby pe'a, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

tasi

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo uila aia tatau adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. O le Vero VHS o le faʻaleleia. Consectetur nisi DIY minim avefe'au ato. Cred ex in, sustainable delectus consectetur fanny pack iphone.

lua

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 avefe'au ato marfa so'o se loli meaai. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats masalo e te le'i faalogo ia i latou consequat hoodie gluten-free lo-fi fap aliquip. Laboure elit placeat ae le'i fa'atau atu, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Fa'aoga

Manaomia le Bootstrap nav

Scrollspy i le taimi nei e manaʻomia le faʻaogaina o se vaega Bootstrap nav mo le faʻamaonia lelei o fesoʻotaʻiga ola.

E mana'omia ni fa'ailoga ID e mafai ona fo'ia

O feso'ota'iga Navbar e tatau ona i ai ni fa'ailoga id e mafai ona fo'ia. Mo se faʻataʻitaʻiga, e <a href="#home">home</a>tatau ona fetaui ma se mea i le DOM pei <div id="home"></div>.

O :visibleelemene e le fa'atatauina ua le amana'ia

O elemene faʻatatau e le :visibletusa ai ma le jQuery o le a le amanaʻia ma o latou mea nav fetaui o le a le faʻamaonia lava.

Mana'omia le fa'atulagaina o tulaga

Po o le a lava le faiga o le faatinoga, scrollspy e manaʻomia le faʻaogaina o position: relative;le elemene o loʻo e vaʻavaʻai i ai. I le tele o tulaga o le <body>. Pe a taʻavale i elemene e ese mai i le <body>, ia mautinoa e iai se heightseti ma overflow-y: scroll;faʻaoga.

E ala i fa'amaumauga uiga

Ina ia fa'afaigofie ona fa'aopoopo le amio ta'avale i lau ta'avale pito i luga, fa'aopoopo data-spy="scroll"i le elemene e te mana'o e sipai ai (sili ona masani o le <body>). Ona faʻaopoopo lea o le data-targetuiga faʻatasi ma le ID poʻo le vasega o le matua elemene o soʻo se .navvaega Bootstrap.

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>

E ala i le JavaScript

A uma ona faʻaopoopo position: relative;i lau CSS, valaʻau le scrollspy e ala i le JavaScript:

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

Metotia

.scrollspy('refresh')

A faʻaaoga le scrollspy faʻatasi ma le faʻaopoopoina poʻo le aveesea o elemene mai le DOM, e tatau ona e valaʻau le auala faʻafouina e pei o lea:

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

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-offset="".

Igoa ituaiga faaletonu fa'amatalaga
fa'apena numera 10 Pixels e fa'asolo mai luga pe a fa'atatau le tulaga o le ta'ai.

Mea na tutupu

Ituaiga Mea Fa'amatalaga
activate.bs.scrollspy E mu lenei mea i so'o se taimi e fa'agaoioi ai se mea fou e le scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Togglable tabs tab.js

Fa'ata'ita'iga tabs

Fa'aopoopo le fa'agaioiga fa'agaoioiga fa'avavevave ma fa'amalosi i le fa'aliliuina atu i fa'amalama o mea fa'apitonu'u, e o'o lava ile fa'aulu i lalo menus. E le lagolagoina fa'amau fa'aputuga.

Raw denim masalo e te le'i fa'alogo i ai Jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Faʻafeiloaʻi i le salvia cillum iphone. Seitan aliquip quis cardigan ofu Amerika, butcher 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.

Fa'alautele le fa'atautaiga fa'apipi'i

O lenei fa'apipi'i fa'alautele le vaega fa'asaga i luga o fa'amau e fa'aopoopo ai vaega e mafai ona ta'ua.

Fa'aoga

Fa'aaga tabbable tabs e ala i le JavaScript (ta'itasi ta'itasi e mana'omia ona fa'agaoioia ta'ito'atasi):

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

E mafai ona e fa'agaoioia ta'iala ta'itasi i le tele o auala:

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

Fa'ailoga

E mafai ona e fa'agaoioia se fa'ailoga po'o se pill navigation e aunoa ma le tusiaina o so'o se JavaScript i le na'o le fa'ama'oti data-toggle="tab"po'o data-toggle="pill"luga o se elemene. O le fa'aopoopoina o le navma nav-tabsvasega i le fa'ailoga o le ula fa'aaoga ai le Bootstrap tab styling , a'o fa'aopoopoina le navma nav-pillsvasega o le a fa'aogaina ai le styling pili .

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

Aafiaga mou

Ina ia fa'agesegese fa'amau i totonu, fa'aopoopo .fadei .tab-pane. E tatau fo'i .ini le fa'ailoga muamua ona fa'aalia le mea muamua.

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

Metotia

$().tab

Fa'aagaoioia se fa'ailoga elemene ma mea o lo'o i totonu. O le Tab e tatau ona i ai se data-targetpoʻo se hreffaʻatatau i se pusa pusa i le DOM. I faʻataʻitaʻiga o loʻo i luga, o laupepa o le <a>s ma data-toggle="tab"uiga.

.tab('show')

Filifili le lisi o loʻo tuʻuina atu ma faʻaalia ai mea e fesoʻotaʻi ai. So'o se isi lava fa'amau na filifilia muamua e le'i filifilia ma o lo'o natia mea fa'atasi. Toe fo'i atu i le tagata vala'au a'o le'i fa'aalia moni le fa'ailoga (fa'atusa a'o le'i tupu le shown.bs.tabmea na tupu).

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

Mea na tutupu

Pe a fa'aalia se lisi fou, e mu mea na tutupu i le fa'asologa lenei:

  1. hide.bs.tab(i luga o le lisi o lo'o galue nei)
  2. show.bs.tab(i luga o le faʻailoga o le a faʻaalia)
  3. hidden.bs.tab(i luga o le lisi galue muamua, tutusa ma le hide.bs.tabmea na tupu)
  4. shown.bs.tab(i luga o le faʻailoga fou faatoa faʻaalia, tutusa ma le show.bs.tabmea na tupu)

Afai e le'i fa'agaoioi le tab, o le a le tapeina le hide.bs.tabma mea tutupu.hidden.bs.tab

Ituaiga Mea Fa'amatalaga
show.bs.tab O lenei mea na tupu e mu i luga o faʻaaliga faʻaaliga, ae leʻi faʻaalia le faʻailoga fou. Fa'aoga event.targetma event.relatedTargetfa'atatau i le ta'i ga'oi ma le fa'agaioiga muamua (pe a maua) ta'itasi.
fa'aalia.bs.tab O lenei mea na tupu e mu i luga o le faʻaaliga faʻapipiʻi pe a uma ona faʻaalia se tab. Fa'aoga event.targetma event.relatedTargetfa'atatau i le ta'i ga'oi ma le fa'agaioiga muamua (pe a maua) ta'itasi.
hide.bs.tab E mu lenei mea pe a fa'aalia se fa'ailoga fou (ma fa'apea e natia ai le fa'agaioiga muamua). Fa'aoga event.targetma event.relatedTargetfa'atatau i le lisi o lo'o i ai nei ma le lisi fou e le o toe mamao-to-be-active.
hidden.bs.tab O lenei mea na tupu e mu pe a uma ona faʻaalia se laupepa fou (ma faʻapea o loʻo natia le laupepa muamua). Fa'aoga event.targetma event.relatedTargetfa'atatau i le ta'ifa'agaaga muamua ma le fa'ailoga fou fou, fa'asologa.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Musuia e le sili jQuery.tipsy plugin tusia e Jason Frame; Tooltips o se fa'afouga fou, e le fa'alagolago i ata, fa'aoga le CSS3 mo fa'afiafiaga, ma fa'amaumauga-uiga mo le teuina o suafa fa'apitonu'u.

E le fa'aalia lava ni mea faigaluega e leai ni fa'ailoga umi.

Faataitaiga

Fa'apa i luga o so'oga o lo'o i lalo e va'ai i mea faigaluega:

ofuvae fufusi isi tulaga keffiyeh masalo e te le'i fa'alogo iai. Fa'ato'aga ata 'ava fa'a denim mata'itusi vegan taga avefe'au stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit amerika ofu e iai le terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fa loko mcsweeney's cleanse vegan chambray. O se tufuga fa'atauva'a lava so'o se keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Fa'atonu meafaigaluega

E fa filifiliga o lo'o avanoa: luga, taumatau, pito i lalo, ma agavale fa'aoga.

Fa ituala

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

Mo mafua'aga o fa'atinoga, o le Tooltip ma Popover data-apis o lo'o filifili i totonu, o lona uiga e tatau ona e amataina oe lava ia .

O se tasi o auala e amata ai meafaigaluega uma i luga o se itulau o le filifilia lea i latou data-toggleuiga:

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

Fa'aoga

O le tooltip plugin e fa'atupuina ai mea ma fa'ailoga pe a mana'omia, ma e le mafai ona tu'u meafaigaluega pe a mae'a a latou elemene fa'aoso.

Fa'aoso le mea faigaluega e ala ile JavaScript:

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

Fa'ailoga

Ole fa'ailoga mana'omia mo se mea faigaluega e na'o se datauiga ma titleluga ole elemene HTML e te mana'o e maua se meafaigaluega. O le faʻailoga faʻatupuina o se meafaigaluega e faigofie tele, e ui lava e manaʻomia se tulaga (e ala i le faaletonu, seti i tople 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>

So'oga e tele laina

O nisi taimi e te mana'o e fa'aopoopo se mea faigaluega i se hyperlink e afifi ai laina se tele. O le amio fa'aletonu a le mea fa'apipi'i meafaigaluega o le fa'atotonugalemu ma fa'alava. Faaopoopo white-space: nowrap;i lau taula e aloese ai mai lenei mea.

Meafaigaluega i vaega fa'amau, vaega fa'aoga, ma laulau e mana'omia se fa'atulagaga fa'apitoa

Pe a faʻaogaina meafaigaluega i elemene i totonu .btn-grouppoʻo se .input-group, poʻo luga o elemene e fesoʻotaʻi ma laulau ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), e tatau ona e faʻamaonia le filifiliga container: 'body'(faʻamauina i lalo) e aloese ai mai aʻafiaga e le manaʻomia (e pei o le elemene o loʻo tuputupu aʻe lautele ma/ po'o le leiloa o ona tulimanu lapotopoto pe a fa'aoso le mea faigaluega).

Aua le taumafai e fa'aali mea faigaluega i elemene natia

O le vala'au $(...).tooltip('show')pe a o'o le elemene fa'atatau o display: none;le a mafua ai ona sese le fa'atulagaina o le meafaigaluega.

Fa'amatalaga meafaigaluega e mafai ona maua mo keyboard ma fa'aoga tekonolosi fesoasoani

Mo tagata fa'aoga o lo'o fa'atautaia ma le piano, aemaise o tagata fa'aoga o tekonolosi fesoasoani, e tatau ona e fa'aopoopo na'o mea faigaluega i elemene e fa'atatau i le keyboard e pei o so'otaga, fa'atonuga, po'o so'o se mea fa'apitoa e iai se tabindex="0"uiga.

Fa'amatalaga meafaigaluega i elemene e le atoatoa le malosi e mana'omia ai elemene afifi

Ina ia fa'aopoopo se mea faigaluega i se disabledpo'o se .disabledelemene, tu'u le elemene i totonu o le a <div>ma fa'aoga le mea faigaluega i lena <div>nai lo lena.

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-animation="".

Igoa Ituaiga Fa'atonu Fa'amatalaga
animation boolean moni Fa'aoga se suiga e mou atu CSS i le mea faigaluega
pusa manoa | pepelo pepelo

Fa'apipi'i le mea faigaluega i se elemene fa'apitoa. Faataitaiga: container: 'body'. O lenei filifiliga e sili ona aoga ona e mafai ai e oe ona tuʻu le mea faigaluega i le tafe o le pepa i tafatafa o le elemene faʻaoso - lea o le a taofia ai le meafaigaluega mai le opeopea ese mai le elemene faʻaoso i le taimi o le suiga o le faamalama.

tuai numera | mea faitino 0

Fa'atuai ona fa'aali ma nana le mea faigaluega (ms) - e le fa'atatau ile ituaiga fa'aoso tusi

Afai e tu'uina atu se numera, fa'atuai e fa'aoga i natia/fa'aali uma

O le fausaga o mea faitino o le:delay: { "show": 500, "hide": 100 }

html boolean pepelo Fa'aofi le HTML i totonu o le meafaigaluega. Afai e sese, o le a faʻaaogaina le textauala a le jQuery e faʻaofi ai mea i totonu ole DOM. Fa'aoga tusitusiga pe a e popole i osofa'iga a le XSS.
tu'uga manoa | galuega faatino 'pito'

Fa'afefea ona fa'atulagaina le mea faigaluega - pito i luga | lalo | agavale | taumatau | ta'avale.
A fa'amaoti mai le "auto", o le a toe fa'afouina le mea faigaluega. Mo se fa'ata'ita'iga, afai o le tu'uga o le "auto left", e fa'aali atu le mea faigaluega i le agavale pe a mafai, a leai o le a fa'aali sa'o.

Pe a faʻaaogaina se galuega e fuafua ai le tuʻuina, e taʻua i le tooltip DOM node e fai ma ana finauga muamua ma le elemene DOM node lona lua. O thislo'o fa'atulaga le tala i le fa'ata'ita'iga meafaigaluega.

tagata filifilia manoa pepelo Afai e tu'uina atu se tagata filifilia, o mea fa'aoga meafaigaluega o le a tu'uina atu i fa'amoemoega fa'apitoa. I le fa'ata'ita'iga, o lo'o fa'aaogaina e mafai ai ona fa'aopoopoina mea faigaluega fa'aopoopo. Vaʻai i lenei mea ma se faʻataʻitaʻiga faʻamatalaga .
mamanu manoa '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Fa'avae HTML e fa'aoga pe a fai le mea faigaluega.

O mea faigaluega o le titlea tui i totonu o le .tooltip-inner.

.tooltip-arrowo le a avea ma aū a le meafaigaluega.

O le elemene afifi pito i fafo e tatau ona i ai le .tooltipvasega.

suafa manoa | galuega faatino ''

Fa'aigoa fa'aigoa tau pe afai titlee le o iai le uiga.

Afai e tu'uina atu se galuega, o le a vala'au ma lona thisfa'asinomaga seti i le elemene o lo'o fa'apipi'i i ai le meafaigaluega.

fa'aoso manoa 'ave le taulai' E fa'afefea ona fa'aosoina meafaigaluega - kiliki | lele | taula'i | tusi lesona. E mafai ona e pasia le tele o fa'aoso; tuueseese ma se avanoa. manuale le mafai ona tu'ufa'atasia ma se isi fa'aoso.
va'aiga manoa | mea | galuega faatino { filifili: 'tino', fa'aofuofu: 0 }

Taofi le mea faigaluega i totonu o tuaoi o lenei elemene. Faataitaiga: viewport: '#viewport'po o{ "selector": "#viewport", "padding": 0 }

Afai e tuʻuina atu se galuega, e taʻua i le faʻaosoina elemene DOM node e na o le pau lea o le finauga. O thislo'o fa'atulaga le tala i le fa'ata'ita'iga meafaigaluega.

Fa'amatalaga uiga mo meafaigaluega ta'itasi

O filifiliga mo meafaigaluega ta'ito'atasi e mafai ona fa'amaonia e ala i le fa'aogaina o uiga fa'amaumauga, e pei ona fa'amatalaina i luga.

Metotia

$().tooltip(options)

Fa'apipi'i se tu'u fa'amatalaga meafaigaluega i se aoina elemene.

.tooltip('show')

Fa'aalia le mea faigaluega o se elemene. Toe fo'i atu i le tagata vala'au a'o le'i fa'aalia moni mai le mea faigaluega (fa'atusa a'o le'i tupu le shown.bs.tooltipmea na tupu). E manatu lenei mea o se "manu'al" faʻaosoina o le meafaigaluega. E le fa'aalia lava ni mea faigaluega e leai ni fa'ailoga umi.

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

.tooltip('hide')

Natia le mea faigaluega o se elemene. Toe fo'i atu i le tagata vala'au a'o le'i natia le mea faigaluega (fa'atusa a'o le'i tupu le hidden.bs.tooltipmea na tupu). E manatu lenei mea o se "manu'al" faʻaosoina o le meafaigaluega.

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

.tooltip('toggle')

Su'e le pito meafaigaluega a se elemene. Toe fo'i i le tagata vala'au a'o le'i fa'aalia pe natia le mea faigaluega (fa'atusa a'o le'i tupu le shown.bs.tooltippo'o le hidden.bs.tooltipmea na tupu). E manatu lenei mea o se "manu'al" faʻaosoina o le meafaigaluega.

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

.tooltip('destroy')

Natia ma fa'aleaga le pito meafaigaluega a se elemene. Tooltips e fa'aogaina le tu'uina atu (lea e faia i le fa'aogaina o le selectorfilifiliga ) e le mafai ona fa'aumatia ta'ito'atasi i elemene fa'aoso tupuaga.

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

Mea na tutupu

Ituaiga Mea Fa'amatalaga
show.bs.tooltip E mu vave lenei mea pe a showvalaʻau le auala faʻataʻitaʻiga.
fa'aalia.bs.tooltip O lenei mea na tupu e faʻamalo pe a faʻaalia le meafaigaluega i le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa).
hide.bs.tooltip O lenei mea na tupu e faʻamalo vave pe a hidevalaʻau le auala faʻataʻitaʻiga.
hidden.bs.tooltip O lenei mea e tupu pe a uma ona natia le meafaigaluega mai le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa).
inserted.bs.tooltip O lenei mea na tupu e faʻamalo pe a maeʻa le show.bs.tooltipmea na tupu ina ua faʻaopoopo le faʻataʻitaʻiga meafaigaluega i le DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Fa'aopoopo ni fa'aputuga laiti o mea, pei o i luga ole iPad, i so'o se elemene mo fa'amatalaga lona lua o fale.

Popovers o latou igoa ma anotusi e leai se umi e le fa'aalia.

Fa'alagolago fa'apipi'i

Popovers e manaʻomia le faʻapipiʻi meafaigaluega e faʻapipiʻi i lau lomiga o Bootstrap.

Opt-in functionality

Mo mafua'aga o fa'atinoga, o le Tooltip ma Popover data-apis o lo'o filifili i totonu, o lona uiga e tatau ona e amataina oe lava ia .

O se tasi o auala e amata ai popovers uma i luga o se itulau o le filifilia lea e ala i o latou data-toggleuiga:

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

Popovers i kulupu fa'amau, vaega fa'aoga, ma laulau e mana'omia se fa'atulagaga fa'apitoa

A faʻaaoga popovers i elemene i totonu .btn-grouppoʻo se .input-group, poʻo luga o elemene e fesoʻotaʻi ma laulau ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), e tatau ona e faʻamaonia le filifiliga container: 'body'(faʻamauina i lalo) e aloese ai mai aʻafiaga e le manaʻomia (e pei o le elemene o loʻo tuputupu aʻe lautele ma / po'o le leiloa o ona tulimanu lapotopoto pe a fa'aoso le popover).

Aua le taumafai e fa'aali popovers i elemene natia

O le fa'ataloina $(...).popover('show')pe a o'o le elemene fa'atatau o display: none;le a mafua ai ona sese le fa'atulagaina o le popover.

Popovers i elemene le atoatoa e manaʻomia elemene afifi

Ina ia fa'aopoopo se popover i se disabledpo'o se .disabledelemene, tu'u le elemene i totonu ole a <div>ma fa'aoga le popover i lena <div>nai lo lena.

So'oga e tele laina

O nisi taimi e te mana'o e fa'aopoopo se popover i se hyperlink e afifi ai laina se tele. O le amio fa'aletonu a le popover plugin o le fa'atotonugalemu fa'alava ma tu'u sa'o. Faaopoopo white-space: nowrap;i lau taula e aloese ai mai lenei mea.

Faataitaiga

Fa'ato'a fa'apipi'i

E fa filifiliga o lo'o avanoa: luga, taumatau, pito i lalo, ma agavale fa'aoga.

Popover pito i luga

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

Popover sa'o

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

Popover pito i lalo

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

Popover alu ese

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

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

Fa ituala

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

Fa'ate'a ile isi kiliki

Fa'aaoga le focusfa'aoso e fa'ate'a ai popovers i le isi kiliki e faia e le tagata fa'aoga.

Fa'ailoga fa'apitoa e mana'omia mo le fa'ate'aina-i le isi-kiliki

Mo le fetaui lelei o le suʻesuʻega ma le faʻaogaina o amioga, e tatau ona e faʻaogaina le <a>pine, ae le o le <button>pine, ma e tatau foi ona e aofia ai role="button"ma tabindexuiga.

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

Fa'aoga

Fa'amalo popovers e ala i le JavaScript:

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

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-animation="".

Igoa Ituaiga Fa'atonu Fa'amatalaga
animation boolean moni Fa'aoga se suiga e mou atu CSS i le popover
pusa manoa | pepelo pepelo

Fa'aopoopo le popover i se elemene patino. Faataitaiga: container: 'body'. O lenei filifiliga e sili ona aoga ona e mafai ai e oe ona faʻatulagaina le popover i le tafe o le pepa i tafatafa o le elemene faʻaoso - lea e taofia ai le popover mai le opeopea ese mai le elemene faʻaosoina i le taimi o le suiga o le faamalama.

anotusi manoa | galuega faatino ''

Fa'aleaogaina mea taua pe afai data-contente le o iai le uiga.

Afai e tu'uina atu se galuega, o le a vala'au ma lona thisfa'asinomaga seti i le elemene o lo'o fa'apipi'i i ai le popover.

tuai numera | mea faitino 0

Fa'atuai ona fa'aali ma nana le popover (ms) - e le fa'atatau i le fa'ailoga tusi tusi

Afai e tu'uina atu se numera, fa'atuai e fa'aoga i natia/fa'aali uma

O le fausaga o mea faitino o le:delay: { "show": 500, "hide": 100 }

html boolean pepelo Fa'aofi le HTML i totonu o le popover. Afai e sese, o le a faʻaaogaina le textauala a le jQuery e faʻaofi ai mea i totonu ole DOM. Fa'aoga tusitusiga pe a e popole i osofa'iga a le XSS.
tu'uga manoa | galuega faatino 'tauagavale'

Faʻafefea ona faʻatulagaina le popover - luga | lalo | agavale | taumatau | ta'avale.
A fa'amaoti mai le "auto", o le a toe fa'afouina le popover. Mo se faʻataʻitaʻiga, afai o le tuʻuina o le "auto left", o le popover o le a faʻaalia i le agavale pe a mafai, a leai o le a faʻaalia saʻo.

Pe a faʻaaogaina se galuega e fuafua ai le tuʻuina, e taʻua i le popover DOM node e fai ma ana finauga muamua ma le elemene DOM node lona lua. Ua thisseti le tala i le fa'ata'ita'iga popover.

tagata filifilia manoa pepelo Afai e tu'uina atu se tagata filifilia, o mea fa'apipi'i o le a tu'uina atu i fa'amoemoe fa'apitoa. I le fa'ata'ita'iga, o lo'o fa'aaogaina e mafai ai ona fa'aopoopoina mea fa'apitoa HTML e fa'aopoopo ai popovers. Vaʻai i lenei mea ma se faʻataʻitaʻiga faʻamatalaga .
mamanu manoa '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Fa'avae HTML e fa'aoga pe a fai le popover.

O le popover's titleo le a tui i totonu o le .popover-title.

O le popover's contento le a tui i totonu o le .popover-content.

.arrowo le a avea ma aū o le popover.

O le elemene afifi pito i fafo e tatau ona i ai le .popovervasega.

suafa manoa | galuega faatino ''

Fa'aigoa fa'aigoa tau pe afai titlee le o iai le uiga.

Afai e tu'uina atu se galuega, o le a vala'au ma lona thisfa'asinomaga seti i le elemene o lo'o fa'apipi'i i ai le popover.

fa'aoso manoa 'kiliki' E fa'afefea ona fa'aoso popover - kiliki | lele | taula'i | tusi lesona. E mafai ona e pasia le tele o fa'aoso; tuueseese ma se avanoa. manuale le mafai ona tu'ufa'atasia ma se isi fa'aoso.
va'aiga manoa | mea | galuega faatino { filifili: 'tino', fa'aofuofu: 0 }

Taofi le popover i totonu o tuaoi o lenei elemene. Faataitaiga: viewport: '#viewport'po o{ "selector": "#viewport", "padding": 0 }

Afai e tuʻuina atu se galuega, e taʻua i le faʻaosoina elemene DOM node e na o le pau lea o le finauga. Ua thisseti le tala i le fa'ata'ita'iga popover.

Fa'amatalaga uiga mo popovers ta'itasi

O filifiliga mo popovers ta'ito'atasi e mafai ona fa'amaonia e ala i le fa'aogaina o uiga fa'amaumauga, e pei ona fa'amatalaina i luga.

Metotia

$().popover(options)

E amata popovers mo se aoina elemene.

.popover('show')

Fa'aalia le popover o se elemene. Toe fo'i i le tagata vala'au a'o le'i fa'aalia le popover (fa'atusa a'o le'i tupu le shown.bs.popovermea na tupu). E manatu lenei mea o se "manual" faʻaosoina le popover. Popovers o latou igoa ma anotusi e leai se umi e le fa'aalia.

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

.popover('hide')

Natia le popover o se elemene. Toe fo'i i le tagata vala'au a'o le'i natia le popover (fa'atusa a'o le'i tupu le hidden.bs.popovermea na tupu). E manatu lenei mea o se "manual" faʻaosoina le popover.

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

.popover('toggle')

Su'e le fa'apipi'i o se elemene. Toe fo'i i le tagata vala'au a'o le'i fa'aalia pe natia le popover (fa'atusa a'o le'i tupu le shown.bs.popoverpo'o le hidden.bs.popovermea na tupu). E manatu lenei mea o se "manual" faʻaosoina le popover.

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

.popover('destroy')

Natia ma fa'aumatia le popover o se elemene. Popovers e fa'aogaina le tu'uina atu (lea e faia e fa'aaoga ai le selectorfilifiliga ) e le mafai ona fa'aumatia ta'ito'atasi i elemene fa'aoso tupuaga.

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

Mea na tutupu

Ituaiga Mea Fa'amatalaga
show.bs.popover E mu vave lenei mea pe a showvalaʻau le auala faʻataʻitaʻiga.
fa'aalia.bs.popover O lenei mea e tupu pe a faʻaalia le popover i le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa).
hide.bs.popover O lenei mea na tupu e faʻamalo vave pe a hidevalaʻau le auala faʻataʻitaʻiga.
hidden.bs.popover O lenei mea e tupu pe a uma ona natia le popover mai le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa).
inserted.bs.popover O lenei mea na tupu e faʻamalo pe a maeʻa le show.bs.popovermea na tupu ina ua faʻapipiʻi le popover template i le DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Fa'ailoa savali alert.js

Faataitaiga mataala

Fa'aopoopo galuega fa'ate'a i fe'au mataala uma i lenei fa'apipi'i.

A fa'aaoga se .closefaamau, e tatau ona avea ma tama muamua o le .alert-dismissiblema e leai se anotusi e mafai ona muamua mai i le fa'ailoga.

Fa'aoga

Na'o le fa'aopoopo data-dismiss="alert"i lau ki tapuni e otometi ai ona tu'uina atu se fa'agaioiga vavalalata mataalia. O le tapunia o se mataala e aveese ai mai le DOM.

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

Ina ia fa'aoga lau fa'aaliga fa'afiafia pe a tapuni, ia mautinoa o lo'o iai le.fade vasega ma .inua uma ona fa'aoga ia i latou.

Metotia

$().alert()

Faia se mataala e fa'alogo mo kiliki mea e tutupu i elemene tupuaga o lo'o iai le data-dismiss="alert"uiga. (E le manaʻomia pe a faʻaaogaina le faʻamatalaga-autometi a le data-api.)

$().alert('close')

Tapuni se mataala e ala i le aveese mai le DOM. Afai o le .fadema.in vasega o loʻo i ai i luga o le elemene, o le mataala o le a mou ese atu aʻo leʻi aveesea.

Mea na tutupu

O le plugin alert a Bootstrap e fa'aalia ai ni nai mea na tutupu mo le fa'aogaina i galuega mataala.

Ituaiga Mea Fa'amatalaga
close.bs.alert E mu vave lenei mea pe a closevalaʻau le auala faʻataʻitaʻiga.
tapunia.bs.alert O lenei mea e tupu pe a tapunia le mataala (o le a faʻatali mo suiga CSS e maeʻa).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Fa'amauFa'amau

Fai atili i fa'amau. Fa'amalo fa'aigoa po'o le fa'atupuina o vaega o fa'amau mo nisi vaega e pei o meafaigaluega.

Fesoasoani cross-browser

O lo'o fa'aauau pea e Firefox le fa'atonuina o tulaga (le atoatoa ma le siakiina) i luga o uta o itulau . O se fofo mo lenei mea o le faʻaaogaina autocomplete="off". Va'ai Mozilla bug #654072 .

Fa'atutonu

Fa'aopoopo data-loading-text="Loading..."e fa'aoga se tulaga o le utaina i luga o se ki.

O lenei vaega ua le toe faaaogaina talu mai le v3.3.5 ma ua aveese i le v4.

Fa'aaoga so'o se setete e te mana'o iai!

Mo le lelei o lenei faʻataʻitaʻiga, matou te faʻaaogaina data-loading-textma $().button('loading'), ae le naʻo le pau lea o le setete e mafai ona e faʻaogaina. Va'ai atili i lenei mea i lalo ile $().button(string)fa'amaumauga .

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

Kilo tasi

Fa'aopoopo data-toggle="button"e fa'agaoioi ai le sosolo i luga o le ki se tasi.

E mana'omia fa'amau muamua.active maaria-pressed="true"

Mo fa'amau muamua, e tatau ona e fa'aopoopoina le .activevasega ma le aria-pressed="true"uiga ia buttonoe lava.

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

Pusa siaki / Leitio

Fa'aopoopo data-toggle="buttons"i se .btn-groupatigipusa o lo'o i ai po'o mea fa'aoga leitio ina ia mafai ai ona fesuia'i i latou sitaili.

E mana'omia ni filifiliga filifilia.active

Mo filifiliga na mua'i filifilia, e tatau ona e fa'aopoopoina le .activevasega i le mea e fa'aoga ai labeloe.

Na'o le fa'afouga o le tulaga va'aia ile kiliki

Afai e fa'afou le tulaga siaki o le pusa siaki e aunoa ma le fa'aoina o se clickmea na tupu i luga o le ki (fa'ata'ita'iga e ala atu <input type="reset">pe ala i le fa'atulagaina o checkedmeatotino o le mea e fa'aoga ai), e tatau ona e fa'asolo le .activevasega i le mea e ulufale ai labeloe.

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

Metotia

$().button('toggle')

Togi le tulaga tulei. Tu'u atu i le ki le foliga mai ua fa'agaoioia.

$().button('reset')

Toe setiina le tulaga fa'amau - fesuia'i tusitusiga i tusitusiga muamua. O lenei metotia e le fetaui ma toe fo'i mai a'o le'i mae'a le toe setiina.

$().button(string)

Fa'afesuia'i tusitusiga i so'o se fa'amatalaga fa'amatalaina tulaga o tusitusiga.

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

Pa'u collapse.js

Fa'apipi'i fetu'una'i e fa'aogaina ai ni nai vasega mo le fa'agasologa faigofie o amioga.

Fa'alagolago fa'apipi'i

Pa'u e mana'omia le fa'apipi'i suiga e fa'aaofia i lau fa'aliliuga o Bootstrap.

Faataitaiga

Kiliki fa'amau i lalo e fa'aali ma nana se isi elemene e ala i suiga o vasega:

  • .collapsenatia mea e aofia ai
  • .collapsinge fa'aaogaina i taimi o suiga
  • .collapse.infa'aalia anotusi

E mafai ona e faʻaogaina se fesoʻotaʻiga ma le hrefuiga, poʻo se faʻamau ma le data-targetuiga. I tulaga uma e lua, data-toggle="collapse"e manaʻomia.

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>

Fa'ata'ita'iga akordion

Fa'alautele le amio fa'aletonu e fai ai se akordion ma le vaega o le laulau.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 luko masina officia aute, e le o se ipu laupapa sikatusi mo brunch. loli meaai quinoa nesciunt laborum eiusmod. Brunch 3 luko moon tempor, sunt aliqua tu'u se manulele i luga o le kofe tasi le amataga 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 masalo e te le'i fa'alogo iai accusamus laboure sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 luko masina officia aute, e le o se ipu laupapa sikatusi mo brunch. loli meaai quinoa nesciunt laborum eiusmod. Brunch 3 luko moon tempor, sunt aliqua tu'u se manulele i luga o le kofe tasi le amataga 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 masalo e te le'i fa'alogo iai accusamus laboure sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 luko masina officia aute, e le o se ipu laupapa sikatusi mo brunch. loli meaai quinoa nesciunt laborum eiusmod. Brunch 3 luko moon tempor, sunt aliqua tu'u se manulele i luga o le kofe tasi le amataga 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 masalo e te le'i fa'alogo iai accusamus laboure 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>

E mafai fo'i ona fesuia'i le .panel-bodys ma .list-grouple s.

  • Bootply
  • Tasi itmus ac facilin
  • Eros lona lua

Fai fa'alautele/pa'u fa'atonutonu fa'afaigofie ona maua

Ia mautinoa e faaopoopo aria-expandedi le elemene pulea. O lenei uiga o lo'o fa'amatala manino ai le tulaga o lo'o iai nei o le elemene e mafai ona pa'u i le su'esu'eina o le au faitau ma isi tekonolosi fesoasoani tutusa. Afai o le elemene e mafai ona pa'u ua tapunia ona o le faaletonu, e tatau ona i ai se tau o le aria-expanded="false". Afai ua e setiina le mea e mafai ona pa'u e tatala e ala ile fa'aoga ole invasega, setiaria-expanded="true" ile pule. O le plugin e otometi lava ona fesuia'i lenei uiga e fa'atatau pe ua tatala pe tapuni le mea e mafai ona pa'u pe leai.

E le gata i lea, afai o lau elemene e pulea o loʻo tulimataʻia se elemene e tasi e mafai ona paʻu - o le data-targetuiga o loʻo faʻasino i se idtagata filifilia - e mafai ona e faʻaopoopoina se aria-controlsuiga faʻaopoopo i le elemene faʻatonutonu, o loʻo i ai idle elemene e mafai ona paʻu. Ua fa'aogaina e le aufaitau mata fa'aonaponei ma fa'atekonolosi feso'ota'i tutusa lenei uiga e tu'uina atu ai i tagata fa'aoga ni ala pupuu fa'aopoopo e fa'atautaia sa'o ai i le elemene e mafai ona pa'u.

Fa'aoga

O le pa'u fa'apipi'i fa'aoga ni nai vasega e taulima ai le si'i mamafa:

  • .collapsenana le anotusi
  • .collapse.infa'aalia le anotusi
  • .collapsinge faaopoopo pe a amata le suiga, ma aveese pe a uma

O nei vasega e mafai ona maua i component-animations.less.

E ala i fa'amaumauga uiga

Na'o le fa'aopoopo data-toggle="collapse"ma le a data-targeti le elemene e otometi ona tu'uina atu le fa'atonuga o se elemene e mafai ona pa'u. E data-targettalia e le uiga le CSS filifilia e fa'aoga le pa'u i. Ia mautinoa e faaopoopo le vasega collapsei le elemene e mafai ona pa'u. Afai e te mana'o e le'i tatalaina, fa'aopoopo le vasega fa'aopoopo in.

Ina ia fa'aopoopo le pulega vaega e pei o le accordion i se pule e mafai ona pa'u, fa'aopoopo le uiga fa'amaumauga data-parent="#selector". Va'ai i le demo e va'ai ai i lenei gaioiga.

E ala i le JavaScript

Fa'aaga ma le lima ile:

$('.collapse').collapse()

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-parent="".

Igoa ituaiga faaletonu fa'amatalaga
matua tagata filifilia pepelo Afai e tu'uina atu se tagata filifilia, ona tapunia uma lea o elemene e mafai ona pa'u i lalo o le matua fa'amaonia pe a fa'aalia le mea e mafai ona pa'u. (e tutusa ma amioga fa'ale-aganu'u - e fa'alagolago i le panelvasega)
fesuia'i boolean moni Fa'asolo le elemene e mafai ona pa'u i luga ole valaau

Metotia

.collapse(options)

Fa'aagaoioia lau anotusi o se elemene e mafai ona pa'u. Talia se filifiliga faitalia object.

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

.collapse('toggle')

Su'e se elemene e mafai ona pa'u e fa'aali pe natia. Toe fo'i i le tagata vala'au a'o le'i fa'aalia pe natia le elemene e mafai ona pa'u (fa'atusa a'o le'i tupu le shown.bs.collapsepo'o le hidden.bs.collapsemea na tupu).

.collapse('show')

Fa'aalia se elemene e mafai ona pa'u. Toe fo'i i le tagata vala'au a'o le'i fa'aalia moni le elemene e mafai ona pa'u (fa'atusa a'o le'i tupu le shown.bs.collapsemea na tupu).

.collapse('hide')

Natia se elemene e mafai ona pa'u. Toe fo'i i le tagata vala'au a'o le'i natia moni le elemene e mafai ona pa'u (fa'atusa a'o le'i tupu le hidden.bs.collapsemea na tupu).

Mea na tutupu

O le vasega pa'u a Bootstrap o lo'o fa'aalia ni nai mea na tutupu mo le fa'aogaina o galuega fa'aletonu.

Ituaiga Mea Fa'amatalaga
fa'aali.bs.pa'ū E mu vave lenei mea pe a showvalaʻau le auala faʻataʻitaʻiga.
fa'aalia.bs.pa'u O lenei mea e tupu pe a faʻaalia se elemene paʻu i le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa).
hide.bs.collapse O lenei mea na tupu e faʻamalo vave pe a hidevalaʻau le metotia.
hidden.bs.collapse O lenei mea e tupu pe a natia se elemene pa'ū mai le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

O se vaega fa'ata'ita'i mo le tietie uila i elemene, pei o se carousel. E le lagolagoina carousels.

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

Fa'aupuga e filifili ai

Fa'aopoopo fa'amatalaga i au fa'ase'e faigofie ma le .carousel-captionelemene i totonu o so'o se .item. Tu'u toetoe lava o so'o se HTML e filifili i totonu iina ma o le a otometi lava ona fa'aoga ma fa'atulaga.

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

Carousels tele

E mana'omia e ta'avale le fa'aogaina o se idatigipusa pito i fafo (le .carousel) mo fa'atonuga o ta'avale e fa'atino lelei. Pe a fa'aopoopo i ai le tele o ta'avale, po'o le suia o se ta'avale id, ia mautinoa e fa'afou fa'atonuga talafeagai.

E ala i fa'amaumauga uiga

Fa'aoga uiga fa'amaumauga e faigofie ai ona pulea le tulaga o le carousel. data-slidetalia upu autu prevpo'o next, lea e suia ai le tulaga fa'ase'e fa'atatau i lona tulaga o iai nei. I le isi itu, fa'aaoga data-slide-toe pasi ai se fa'ailoga fa'ase'e mata'utia i le carousel data-slide-to="2", lea e sui ai le tulaga fa'ase'e i se fa'ailoga fa'apitoa e amata i le 0.

O le data-ride="carousel"uiga e fa'aoga e fa'ailoga ai se carousel e fa'aola e amata ile utaina o itulau. E le mafai ona fa'aogaina fa'atasi ma (e le toe mana'omia) fa'amatalaga manino JavaScript amata o le carousel tutusa.

E ala i le JavaScript

Valaau ma le lima le carousel ma:

$('.carousel').carousel()

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-interval="".

Igoa ituaiga faaletonu fa'amatalaga
vaeluaga numera 5000 Le aofa'i o le taimi e fa'atuai ai i le va o le ta'avale otometi se mea. Afai e sese, e le otometi le taamilomilo o le carousel.
taofi manoa | null "faapepa" Afai e seti i le "hover", taofi le uila o le carousel i luga mouseenterma toe faaauau le uila o le carousel i luga mouseleave. Afai e seti i le null, o le faapepe i luga o le carousel e le taofia ai.
afifi boolean moni Pe tatau ona fa'aauau le ta'amilosaga o le ta'amilosaga pe fa'agata fo'i.
piano boolean moni Pe tatau ona tali atu le carousel i mea e tutupu i le keyboard.

Fa'amataina le carousel i se filifiliga e filifili objectma amata ai le uila i mea.

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

Taamilomilo i aitema carousel mai le agavale i le taumatau.

Taofi le carousel mai le tietie uila i aitema.

Ta'amilomilo le carousel i se fa'avaa fa'apitoa (fa'avae 0, tutusa ma se fa'asologa).

Ta'amilosaga i le mea muamua.

Ta'amilosaga i le isi mea.

O le vasega carousel a Bootstrap o lo'o fa'aalia ai mea e lua mo le fa'aogaina o galuega fa'aoga.

O mea tutupu uma e lua e iai mea fa'aopoopo nei:

  • direction: Le itu o lo'o fa'ase'e ai le carousel ( "left"po'o le "right").
  • relatedTarget: O le elemene DOM o loʻo faʻasolo i totonu o le mea o loʻo galue.

O mea uma e tutupu i le carousel e fa'amu i le carousel lava ia (ie i le <div class="carousel">).

Ituaiga Mea Fa'amatalaga
slide.bs.carousel E mu vave lenei mea pe a fa'aogaina le slideauala fa'ata'ita'i.
slid.bs.carousel E fa'amu lenei mea pe a mae'a le fa'ase'esega fa'ase'e o le carousel.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Fa'apipi'i affix.js

Faataitaiga

O le fa'apipi'i fa'apipi'i e ki position: fixed;ma tape, fa'aa'oa'o le a'afiaga o lo'o maua i le position: sticky;. O le subnavigation i le itu taumatau o se faʻaaliga ola o le faʻapipiʻi faʻapipiʻi.


Fa'aoga

Fa'aoga le fa'apipi'i fa'apipi'i e ala i fa'amatalaga uiga po'o le lima ma lau lava JavaScript. I tulaga uma e lua, e tatau ona e tuʻuina atu le CSS mo le faʻatulagaina ma le lautele o lau mea faʻapipiʻi.

Manatua: Aua le faʻaogaina le faʻapipiʻi faʻapipiʻi i luga o se elemene o loʻo i totonu o se elemene faʻatulagaina, e pei o se koluma toso pe tuleia, ona o se pusa faʻaalia Safari .

Tulaga e ala ile CSS

O le fa'apipi'i fa'apipi'i e fesuia'i i le va o vasega se tolu, e ta'itasi e fai ma sui o se setete patino: .affix, .affix-top, ma .affix-bottom. E tatau ona e tu'uina atu sitaili, se'i vagana ai le position: fixed;on .affix, mo nei vasega oe lava (tuto'atasi mai lenei fa'apipi'i) e fa'atautaia ai tulaga tonu.

O le auala lenei e galue ai le affix plugin:

  1. Ina ia amata, o le plugin faʻaopoopo .affix-tope faʻaalia ai le elemene o loʻo i lona tulaga pito i luga. I le taimi nei e leai se CSS tulaga e manaʻomia.
  2. O le solo i tua o le elemene e te manaʻo e faʻapipiʻi e tatau ona faʻaosoina le faʻapipiʻi moni. O le mea lea .affixe sui ai .affix-topma seti position: fixed;(tuuina mai e Bootstrap's CSS).
  3. Afai e faʻamalamalamaina se pito i lalo, o le taʻavale i tua atu e tatau ona suia .affixi le .affix-bottom. Talu ai o offsets e filifili, o le setiina e mana'omia ai oe e seti le CSS talafeagai. I lenei tulaga, faaopoopo position: absolute;pe a manaʻomia. O lo'o fa'aogaina e le fa'apipi'i le uiga fa'amaumauga po'o le filifiliga JavaScript e iloa ai le mea e tu'u ai le elemene mai iina.

Mulimuli i laasaga o loʻo i luga e seti ai lau CSS mo se tasi o filifiliga faʻaoga i lalo.

E ala i fa'amaumauga uiga

Ina ia faigofie ona faʻapipiʻi amioga i soʻo se elemene, naʻo le faʻaopoopo data-spy="affix"i le elemene e te manaʻo e sipai ai. Fa'aoga offsets e fa'amatala ai le taimi e sui ai le pine o se elemene.

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

E ala i le JavaScript

Valaau le affix plugin e ala i le JavaScript:

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

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-offset-top="200".

Igoa ituaiga faaletonu fa'amatalaga
fa'apena numera | galuega | mea faitino 10 Pixels e fa'asolo mai le lau pe a fa'atatau le tulaga o le ta'ai. Afai e tu'uina atu se numera tasi, o le a fa'aoga le offset i pito i luga ma lalo. Ina ia tuʻuina atu se mea faʻapitoa, pito i lalo ma le pito i luga naʻo le tuʻuina atu o se mea offset: { top: 10 }poʻo offset: { top: 10, bottom: 5 }. Fa'aoga se galuega pe a mana'omia le fa'atatauina ma le malosi o se offset.
sini tagata filifilia | node | elemene jQuery le windowmea faitino Fa'amaoti le elemene o lo'o fa'atatau i le fa'aopoopo.

Metotia

.affix(options)

Fa'agaoioi lau anotusi e pei o mea fa'apipi'i. Talia se filifiliga faitalia object.

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

.affix('checkPosition')

Toe fuaina le tulaga o le fa'apipi'i e fa'atatau i le fua, tulaga, ma le tulaga ta'ai o elemene talafeagai. O le .affix, .affix-top, ma .affix-bottomvasega e fa'aopoopo pe ave'ese mai mea fa'apipi'i e tusa ai ma le setete fou. E mana'omia le vala'au lea i so'o se taimi e suia ai le tele o mea fa'apipi'i po'o le elemene fa'atatau, ina ia mautinoa le tu'u sa'o o mea fa'apipi'i.

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

Mea na tutupu

O le fa'apipi'i fa'apipi'i a Bootstrap e fa'aalia ai ni nai mea na tutupu mo le fa'aogaina o galuega fa'apipi'i.

Ituaiga Mea Fa'amatalaga
affix.bs.affix O lenei mea na tupu e mu vave a'o le'i fa'apipi'i le elemene.
fa'apipi'i.bs.affix O lenei mea e tupu e faʻamalo pe a uma ona faʻapipiʻi le elemene.
affix-top.bs.affix O lenei mea na tupu e mu vave a'o le'i fa'apipi'i i luga le elemene.
affixed-top.bs.affix O lenei mea e tupu e faʻamalo pe a uma ona faʻapipiʻi le elemene-pito i luga.
affix-bottom.bs.affix O lenei mea na tupu e mu vave a'o le'i fa'apipi'i i lalo le elemene.
affixed-bottom.bs.affix O lenei mea e tupu e faʻamalo pe a uma ona faʻapipiʻi le elemene i lalo.