Nānā nui

Hoʻokahi a i hui pū ʻia

Hiki ke hoʻohui pū ʻia nā plugins (me ka hoʻohana ʻana i nā *.jsfaila pilikino a Bootstrap), a i ʻole i ka manawa hoʻokahi (hoʻohana a i bootstrap.jsʻole ka minified bootstrap.min.js).

Ke hoʻohana nei i ka JavaScript i hōʻuluʻulu ʻia

Loaʻa iā bootstrap.jslāua bootstrap.min.jsnā plugins āpau i hoʻokahi faila. Hoʻohui hoʻokahi wale nō.

Hoʻopili pili

Ke hilinaʻi nei kekahi mau plugins a me CSS i nā plugins ʻē aʻe. Inā hoʻokomo ʻoe i nā plugins i kēlā me kēia, e hōʻoia e nānā i kēia mau hilinaʻi i nā docs. E hoʻomaopopo hoʻi e pili ana nā plugins āpau i ka jQuery (ʻo ia hoʻi, pono e hoʻokomo ʻia ʻo jQuery ma mua o nā faila plugin). E kūkākūkā i kā mākoubower.json e ʻike i nā mana o jQuery i kākoʻo ʻia.

Nā hiʻohiʻona ʻikepili

Hiki iā ʻoe ke hoʻohana i nā plugins Bootstrap āpau ma o ka markup API me ka ʻole o ke kākau ʻana i hoʻokahi laina o JavaScript. ʻO kēia ka API papa mua o Bootstrap a pono ʻoe e noʻonoʻo mua i ka wā e hoʻohana ai i kahi plugin.

ʻO kēlā ʻōlelo, i kekahi mau kūlana makemake paha e hoʻopau i kēia hana. No laila, hāʻawi pū mākou i ka hiki ke hoʻopau i ka API huaʻōlelo ma o ka wehe ʻana i nā hanana āpau ma ka palapala inoa i hoʻopaʻa ʻia me data-api. Ua like kēia me kēia:

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

ʻO kahi ʻē aʻe, no ka huli ʻana i kahi plugin kikoʻī, e hoʻopili wale i ka inoa o ka plugin ma ke ʻano he inoa inoa me ka inoa data-api e like me kēia:

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

Hoʻokahi wale nō plugin no kēlā me kēia mea ma o nā hiʻohiʻona ʻikepili

Mai hoʻohana i nā hiʻohiʻona ʻikepili mai nā plugins he nui ma ka mea like. No ka laʻana, ʻaʻole hiki i kahi pihi ke loaʻa kahi hāmeʻa a hoʻololi i kahi modal. No ka hana ʻana i kēia, e hoʻohana i kahi mea hoʻopili.

API papahana

Manaʻo mākou e hiki iā ʻoe ke hoʻohana i nā plugins Bootstrap āpau ma o ka JavaScript API. ʻO nā API lehulehu āpau he ʻano hoʻokahi, hiki ke hoʻopaʻa ʻia, a hoʻihoʻi i ka hōʻiliʻili i hana ʻia.

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

Pono nā ala āpau e ʻae i kahi mea koho koho, kahi kaula e kuhikuhi ana i kahi ala kūikawā, a i ʻole ʻole (e hoʻomaka ana i kahi plugin me ka hana paʻamau):

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

Hōʻike ʻia kēlā me kēia plugin i kāna mea kūkulu maka ma kahi Constructorwaiwai: $.fn.popover.Constructor. Inā makemake ʻoe e kiʻi i kahi laʻana plugin, e kiʻi pololei iā ia mai kahi mea: $('[rel="popover"]').data('popover').

Nā hoʻonohonoho paʻamau

Hiki iā ʻoe ke hoʻololi i nā hoʻonohonoho paʻamau no kahi plugin ma ka hoʻololi ʻana i ka mea o ka plugin Constructor.DEFAULTS:

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

ʻAʻohe paio

I kekahi manawa pono e hoʻohana i nā plugins Bootstrap me nā ʻōnaehana UI ʻē aʻe. I kēia mau kūlana, hiki i nā hui hoʻopaʻa inoa ke hiki i kekahi manawa. Inā hiki kēia, hiki iā ʻoe ke kelepona .noConflicti ka plugin āu e makemake ai e hoʻihoʻi i ka waiwai o.

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

Nā hanana

Hāʻawi ʻo Bootstrap i nā hanana maʻamau no ka hapa nui o nā hana kūʻokoʻa o nā plugins. ʻO ka mea maʻamau, hele mai kēia i loko o kahi ʻano infinitive a me nā mea i hala - kahi i hoʻomaka ai ka infinitive (ex. show) i ka hoʻomaka ʻana o kahi hanana, a ua hoʻāla ʻia kona ʻano participle i hala (ex. shown) i ka pau ʻana o kahi hana.

E like me 3.0.0, ua kapa ʻia nā hanana Bootstrap āpau.

Hāʻawi nā hanana infinitive āpau i preventDefaultka hana. Hāʻawi kēia i ka hiki ke hoʻopau i ka hoʻokō ʻana i kahi hana ma mua o ka hoʻomaka ʻana.

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

Helu helu

Hiki ke kiʻi ʻia ka mana o kēlā me kēia o nā plugins jQuery Bootstrap ma o ka VERSIONwaiwai o ka mea nāna i kūkulu. No ka laʻana, no ka plugin tooltip:

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

ʻAʻohe hāʻule kūikawā inā pio ka JavaScript

ʻAʻole hāʻule maikaʻi nā plugins Bootstrap i ka wā e pio ai ka JavaScript. Inā makemake ʻoe i ka ʻike mea hoʻohana i kēia hihia, e hoʻohana <noscript>e wehewehe i ke kūlana (a pehea e hoʻā hou ai i ka JavaScript) i kāu mea hoʻohana, a/a i ʻole e hoʻohui i kāu mau hāʻule maʻamau.

Nā waihona puke ʻaoʻao ʻekolu

ʻAʻole kākoʻo ʻo Bootstrap i nā waihona JavaScript ʻaoʻao ʻekolu e like me Prototype a i ʻole jQuery UI. ʻOiai .noConflicta me nā hanana i hoʻopaʻa inoa ʻia, aia paha nā pilikia kūpono e pono ai ʻoe e hoʻoponopono iā ʻoe iho.

Nā hoʻololi transition.js

E pili ana i nā hoʻololi

No nā hopena hoʻololi maʻalahi, e hoʻokomo transition.jspū me nā faila JS ʻē aʻe. Inā ʻoe e hoʻohana nei i ka compiled (a i ʻole miniified) bootstrap.js, ʻaʻohe pono e hoʻokomo i kēia - aia ma laila.

He aha ka loko

He mea kōkua kumu ʻo Transition.js no transitionEndnā hanana a me kahi emulator hoʻololi CSS. Hoʻohana ʻia e nā plugins ʻē aʻe e nānā i ke kākoʻo hoʻololi CSS a e hopu i nā hoʻololi e kau ana.

Hoʻopau i nā hoʻololi

Hiki ke hoʻopau ʻia nā hoʻololi ma ka honua holoʻokoʻa me ka hoʻohana ʻana i ka snippet JavaScript aʻe, pono e hele mai ma hope o ka hoʻouka ʻana transition.js(a i bootstrap.jsʻole bootstrap.min.js, e like me ka hihia):

$.support.transition = false

Mods modal.js

Hoʻopili ʻia nā modals, akā maʻalahi, nā kamaʻilio me ka liʻiliʻi o ka hana pono a me nā paʻamau akamai.

ʻAʻole i kākoʻo ʻia nā ʻano hana wehe lehulehu

E ʻoluʻolu ʻaʻole e wehe i kahi modal a ʻike ʻia kekahi. ʻO ka hōʻike ʻana ma mua o hoʻokahi modal i ka manawa e pono ai ke code maʻamau.

Hoʻokomo hōʻailona kumu

E ho'āʻo mau e kau i ke code HTML o ka modal ma kahi kūlana kiʻekiʻe ma kāu palapala e pale aku i nā mea ʻē aʻe e pili ana i ke ʻano o ka modal a/a i ʻole ka hana.

Nā ʻōlelo hoʻopaʻa paʻa lima

Aia kekahi mau hōʻailona e pili ana i ka hoʻohana ʻana i nā modals ma nā polokalamu kelepona. E ʻike i kā mākou palapala kākoʻo polokalamu kele no nā kikoʻī.

Ma muli o ka wehewehe ʻana o HTML5 i kāna mau semantics, autofocusʻaʻohe hopena o ka ʻano HTML i nā modals Bootstrap. No ka loaʻa ʻana o ka hopena like, e hoʻohana i kekahi JavaScript maʻamau:

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

Nā laʻana

Laʻana paʻa

He ʻano hana i hāʻawi ʻia me ke poʻo, ke kino, a me nā ʻano hana ma ka wāwae.

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

Demo ola

E hoʻololi i kahi modal ma o JavaScript ma ke kaomi ʻana i ke pihi ma lalo. E paheʻe ia i lalo a mae mai ka piko o ka ʻaoʻao.

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

Hiki ke loaʻa nā modals

E ʻoluʻolu e hoʻohui role="dialog"a aria-labelledby="...", e kuhikuhi ana i ke poʻo inoa modal, iā .modal, a role="document".modal-dialogia iho.

Eia hou, hiki iā ʻoe ke hāʻawi i kahi wehewehe o kāu kamaʻilio modal me aria-describedbyon .modal.

Hoʻokomo i nā wikiō YouTube

ʻO ka hoʻokomo ʻana i nā wikiō YouTube ma nā modals e pono ai ka JavaScript hou ʻaʻole i Bootstrap e hoʻōki maʻalahi i ka pāʻani a ʻoi aku. E ʻike i kēia pou Stack Overflow kōkua no ka ʻike hou aku.

Nā nui koho

Loaʻa i nā ʻano nui ʻelua koho, loaʻa ma o nā papa hoʻololi e kau ʻia ma kahi .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>

Wehe i ka animation

No nā mods i ʻike wale ʻia ma mua o ka nalo ʻana e nānā, e wehe i ka .fadepapa mai kāu markup modal.

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

Ke hoʻohana nei i ka ʻōnaehana grid

No ka hoʻohana ʻana i ka ʻōnaehana mākia Bootstrap i loko o kahi modal, e hoʻohana wale i nā pūnana .rowi loko o ka .modal-bodya laila hoʻohana i nā papa ʻōnaehana maʻamau.

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

Loaʻa i kahi pūʻulu o nā pihi e hoʻoulu ai i ka ʻano like, me nā mea ʻokoʻa iki? E hoʻohana event.relatedTargeta me nā ʻano HTMLdata-* ( ma o jQuery paha ) e hoʻololi i nā ʻike o ka modal ma muli o ke pihi i kaomi ʻia. E ʻike i nā palapala Modal Events no nā kikoʻī ma relatedTarget,

... pihi hou aku...
<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)
})

Hoʻohana

Hoʻololi ka mod plugin i kāu ʻike huna ma ke koi, ma o nā hiʻohiʻona ʻikepili a i ʻole JavaScript. Hoʻohui pū ia .modal-openi ka <body>e override default scrolling behavior a hana i kahi .modal-backdrope hāʻawi i kahi kaomi no ka hoʻokuʻu ʻana i nā modals i hōʻike ʻia ke kaomi ʻana ma waho o ka modal.

Ma o nā hiʻohiʻona ʻikepili

E ho'ā i kahi modal me ke kākau ʻole i ka JavaScript. Hoʻonoho ʻia data-toggle="modal"ma kahi mea hoʻoponopono, e like me ke pihi, me kahi data-target="#foo"a href="#foo"i ʻole e kuhikuhi i kahi ʻano kikoʻī e hoʻololi.

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

Ma o JavaScript

Kāhea i kahi modal me ka id myModalme kahi laina o JavaScript:

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

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-backdrop="".

inoa ʻano ʻano paʻamau wehewehe
kāʻei kua boolean a i ʻole ke kaula'static' ʻoiaʻiʻo Loaʻa i kahi ʻāpana modal-backdrop. ʻO kahi ʻē aʻe, e kuhikuhi statici kahi backdrop ʻaʻole i pani i ka modal ma ke kaomi.
keyboard boolean ʻoiaʻiʻo Pani i ka modal ke kaomi ʻia ke kī pakele
hōʻike boolean ʻoiaʻiʻo Hōʻike i ka modal i ka wā i hoʻomaka ai.
mamao alahele wahahee

Hoʻopau ʻia kēia koho mai ka v3.3.0 a ua wehe ʻia i ka v4. Manaʻo mākou e hoʻohana i ka hoʻohālikelike ʻaoʻao o ka mea kūʻai aku a i ʻole kahi papa hana paʻa ʻikepili, a i ʻole ke kāhea ʻana iā jQuery.load iā ʻoe iho.

Inā hāʻawi ʻia kahi URL mamao, e hoʻouka ʻia ka ʻike i hoʻokahi manawa ma ke ʻano o jQuery loada hoʻokomo ʻia i loko o ka .modal-contentdiv. Inā ʻoe e hoʻohana ana i ka data-api, hiki iā ʻoe ke hoʻohana i ke hrefʻano e kuhikuhi i ke kumu mamao. Hōʻike ʻia kahi laʻana o kēia ma lalo.

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

Nā ʻano hana

Ho'ā i kāu ʻike ma ke ʻano he modal. ʻAe i kahi koho koho object.

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

Hoʻololi lima i kahi ʻano. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana a i ʻole huna ʻia ke modal (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hanana shown.bs.modala i ʻole).hidden.bs.modal

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

Wehe lima ʻia kahi modal. Hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka modal (ʻo ia hoʻi ma mua o ka hiki ʻana o ka shown.bs.modalhanana).

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

Hūnā lima ʻia kahi ʻano. E hoʻi i ka mea kelepona ma mua o ka hūnā ʻia ʻana o ka modal (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hidden.bs.modalhanana).

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

Hoʻoponopono hou i ke kūlana o ka modal e kūʻē i kahi scrollbar inā ʻike ʻia kekahi, kahi e lele ai ka modal i ka hema.

Pono wale i ka wā e loli ai ke kiʻekiʻe o ka modal i ka wā e wehe ana.

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

Nā hanana

Hōʻike ka papa modal Bootstrap i kekahi mau hanana no ka hoʻopili ʻana i ka hana modal.

Hoʻopau ʻia nā hanana modal āpau ma ka modal ponoʻī (ʻo ia ma ka <div class="modal">).

ʻAno Hanana wehewehe
hōʻike.bs.modal Hoʻomaka koke kēia hanana i ke showkāhea ʻia ʻana o ke ʻano hana. Inā hoʻokumu ʻia e kahi kaomi, loaʻa ka mea kaomi ma ke ʻano he relatedTargetwaiwai o ka hanana.
hōʻike.bs.modal Hoʻopau ʻia kēia hanana ke ʻike ʻia ka modal e ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS). Inā hoʻokumu ʻia e kahi kaomi, loaʻa ka mea kaomi ma ke ʻano he relatedTargetwaiwai o ka hanana.
huna.bs.modal Hoʻopau koke ʻia kēia hanana i ka wā hidei kāhea ʻia ai ke ʻano hana.
huna.bs.modal Hoʻopau ʻia kēia hanana i ka pau ʻana o ka huna ʻana o ka modal mai ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS).
loaded.bs.modal Hoʻopau ʻia kēia hanana i ka wā i hoʻouka ai ka modal i nā ʻike me ka hoʻohana ʻana i ke remotekoho.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

Hoʻohui i nā menus dropdown i nā mea āpau me kēia plugin maʻalahi, me ka navbar, tabs, a me nā huaʻōlelo.

I loko o kahi navbar

I loko o nā pila

Ma o nā ʻikepili ʻikepili a i ʻole JavaScript, hoʻololi ka plugin dropdown i ka ʻike huna (nā menus dropdown) ma ka hoʻololi ʻana i ka .openpapa ma ka mea papa inoa makua.

Ma nā polokalamu kelepona, e wehe ana i kahi hāʻule e hoʻohui i .dropdown-backdropkahi wahi paʻi no ka pani ʻana i nā menus dropdown i ke kaomi ʻana ma waho o ka papa kuhikuhi, he koi no ke kākoʻo kūpono ʻo iOS. ʻO ia ke ʻano o ka hoʻololi ʻana mai kahi papa hāʻule hāmama i kahi papa iho hāʻule ʻē aʻe e pono ai kahi paʻi hou ma ka mobile.

Nānā: Ua data-toggle="dropdown"hilinaʻi ʻia ka ʻano no ka pani ʻana i nā menus dropdown ma kahi pae noi, no laila he manaʻo maikaʻi e hoʻohana mau ia.

Ma o nā hiʻohiʻona ʻikepili

Hoʻohui data-toggle="dropdown"i kahi loulou a i ʻole pihi e hoʻololi i kahi hāʻule iho.

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

No ka mālama pono ʻana i nā URL me nā pihi loulou, e hoʻohana i ke data-targetʻano ma kahi o 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>

Ma o JavaScript

Kāhea i nā hāʻule iho ma o JavaScript:

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

data-toggle="dropdown"koi mau

Inā ʻoe e kāhea i kāu hāʻule iho ma o JavaScript a i ʻole e hoʻohana i ka data-api, data-toggle="dropdown"pono mau e noho ma ka mea hoʻoiho o ka dropdown.

ʻAʻohe

Hoʻololi i ka papa kuhikuhi hāʻule iho o kahi hoʻokele hoʻokele i hāʻawi ʻia.

Hoʻopau ʻia nā hanana hāʻule i lalo i ka .dropdown-menu'element makua.

Loaʻa i nā hanana hāʻule i lalo kahi relatedTargetwaiwai, nona ka waiwai i ka mea heleuma e hoʻohuli ana.

ʻAno Hanana wehewehe
hōʻike.bs.dropdown Hoʻopau koke ʻia kēia hanana ke kāhea ʻia ke ʻano hana hōʻike.
hōʻike.bs.dropdown Hoʻopau ʻia kēia hanana i ka wā i ʻike ʻia ai ka hāʻule iho i ka mea hoʻohana (e kali no nā hoʻololi CSS, e hoʻopau).
hide.bs.dropdown Hoʻopau koke ʻia kēia hanana i ka wā i kāhea ʻia ai ke ʻano hide instance.
huna.bs.dropdown Hoʻopau ʻia kēia hanana i ka pau ʻana o ka hūnā ʻia mai ka mea hoʻohana (e kali no ka hoʻololi CSS, e hoʻopau).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Laʻana ma navbar

ʻO ka plugin ScrollSpy no ka hoʻonui ʻokoʻa ʻana i nā pahuhopu nav e pili ana i ke kūlana scroll. E ʻōwili i ka ʻāpana ma lalo o ka navbar a nānā i ka loli o ka papa hana. E hōʻike ʻia nā mea kikoʻī i lalo.

@momona

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ma mua o ko lākou kūʻai ʻana aku. Tumblr farm-to-table bike rights i kēlā me kēia mea. Anim keffiyeh carles cardigan. ʻO ka pahu kiʻi a Velit seitan mcsweeney 3 wolf moon irure. ʻO Cosby sweater lomo jean shorts, williamsburg hoodie minim qui ʻaʻole paha ʻoe i lohe iā lākou a me ka 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 umiumi. ʻO ka ʻumiʻumi Aliqua cupidatat ka vero a mcsweeney. Cupidatat eha loko nisi, ea helvetica nulla carles. Kalaka meaʻai cosby sweater tattooed, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. ʻO Brooklyn adipisicing craft beer vice keytar deserunt.

ʻekahi

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Loaʻa nā kuleana paʻa paikikala ʻo Lomo i hoʻopaʻa ʻia i ka 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 Vero VHS ka hoʻololi. Consectetur kekahi ʻeke ʻelele liʻiliʻi DIY. Cred ex in, hoʻomau delectus consectetur fanny pack iphone.

ʻelua

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 whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats ʻaʻole paha ʻoe i lohe no lākou consequat hoodie gluten-free lo-fi fap aliquip. Ma mua o ke kūʻai ʻia ʻana aku, ʻo 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.

Hoʻohana

Pono ʻo Bootstrap nav

Pono ʻo Scrollspy i kēia manawa i ka hoʻohana ʻana i kahi ʻāpana Bootstrap nav no ka hōʻike pono ʻana i nā loulou ikaika.

Pono nā pahuhopu ID hiki ke hoʻoholo

Pono nā loulou Navbar i nā pahuhopu id hiki ke hoʻoholo. No ka laʻana, <a href="#home">home</a>pono e pili i kekahi mea ma ka DOM e like me <div id="home"></div>.

ʻAʻole :visiblemālama ʻia nā mea ʻaʻole i manaʻo ʻia

E nānā ʻole ʻia nā mea kikoʻī ʻaʻole :visiblee like me ka jQuery a ʻaʻole e hōʻike ʻia kā lākou mau mea nav pili.

Pono ke kūlana pili

ʻAʻole pili i ke ʻano hoʻokō, pono ʻo scrollspy i ka hoʻohana ʻana position: relative;i ka mea āu e mākaʻikaʻi nei. I ka nui o na hihia keia ka <body>. I ka wā e ʻimi ana i nā mea ʻē aʻe ma mua o ka <body>, e ʻike pono e loaʻa kahi heighthoʻonohonoho a overflow-y: scroll;hoʻohana ʻia.

Ma o nā hiʻohiʻona ʻikepili

No ka hoʻohui maʻalahi i ka hana scrollspy i kāu hoʻokele topbar, e hoʻohui data-spy="scroll"i ka mea āu e makemake ai e kiu (ʻo ka mea maʻamau ʻo ia ka <body>). A laila e hoʻohui i ke data-targetʻano me ka ID a i ʻole ka papa o ka mea makua o kekahi ʻāpana Bootstrap .nav.

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Ma o JavaScript

Ma hope o ka hoʻohui position: relative;ʻana i kāu CSS, e kāhea i ka scrollspy ma o JavaScript:

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

Nā ʻano hana

.scrollspy('refresh')

Ke hoʻohana nei i ka scrollspy me ka hoʻohui a wehe ʻana paha i nā mea mai ka DOM, pono ʻoe e kāhea i ke ʻano hoʻomaha e like me:

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

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-offset="".

inoa ʻano ʻano paʻamau wehewehe
offset helu 10 Pikika e hoʻoneʻe mai luna mai ke helu ʻana i ke kūlana o ka ʻōwili.

Nā hanana

ʻAno Hanana wehewehe
activate.bs.scrollspy Hoʻomaka kēia hanana i ka wā e hoʻāla ʻia ai kahi mea hou e ka scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Nā ʻaoʻao hiki ke hoʻololi ʻia tab.js

Nā pahu laʻana

E hoʻohui i ka hana papa kuhikuhi wikiwiki a hoʻoikaika i ka hoʻololi ʻana ma nā pane o ka ʻike kūloko, ʻoiai ma o nā menus dropdown. ʻAʻole kākoʻo ʻia nā ʻaoʻao pūnana.

ʻAʻole paha ʻoe i lohe iā lākou ʻo Jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. ʻO ka ʻūhā cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan ʻaʻahu ʻAmelika, 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.

Hoʻonui i ka hoʻokele papa

Hoʻonui kēia plugin i ka ʻāpana hoʻokele tabbed e hoʻohui i nā wahi papa.

Hoʻohana

E hoʻā i nā ʻaoʻao papa ma o JavaScript (pono e hoʻāla ʻia kēlā me kēia ʻaoʻao):

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

Hiki iā ʻoe ke hoʻāla i nā pā pākahi ma nā ʻano he nui:

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

Hiki iā ʻoe ke hoʻoikaika i ka ʻaoʻao a i ʻole ka hoʻokele pila me ka kākau ʻole ʻana i kekahi JavaScript ma ke kuhikuhi wale ʻana a i data-toggle="tab"ʻole data-toggle="pill"ma kahi mea. ʻO ka hoʻohui ʻana i nā papa nava me nav-tabsnā papa i ka pā ule hoʻopili i ke kāʻei Bootstrap tab , ʻoiai e hoʻohui ana i ka nava me nav-pillsnā papa e hoʻopili i ka styling pila .

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

Ka hopena mae

No ka hoʻopau ʻana i nā tabs, hoʻohui .fadei kēlā me kēia .tab-pane. Pono ka pane ʻaoʻao mua e ʻike .ini ka ʻike mua.

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

Nā ʻano hana

$().tab

Ho'ā i ka ʻeleʻele tab a me ka ipu maʻiʻo. data-targetPono e loaʻa i ka Tab hrefkahi pahu pahu pahu ma ka DOM. Ma nā hiʻohiʻona i luna, ʻo nā ʻaoʻao nā <a>s me nā ʻano data-toggle="tab".

.tab('show')

Koho i ka ʻaoʻao i hāʻawi ʻia a hōʻike i kāna ʻike pili. ʻAʻole i koho ʻia kekahi papa ʻē aʻe i koho mua ʻia a hūnā ʻia kāna ʻike pili. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka pane tab (ʻo ia hoʻi ma mua o ka hiki ʻana o ka shown.bs.tabhanana).

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

Nā hanana

I ka hōʻike ʻana i kahi ʻaoʻao hou, e ʻā nā hanana ma ke ʻano penei:

  1. hide.bs.tab(ma ka papa hana o kēia manawa)
  2. show.bs.tab(ma ka ʻaoʻao e hōʻike ʻia)
  3. hidden.bs.tab(ma ka papa hana mua, e like me ka hide.bs.tabhanana)
  4. shown.bs.tab(ma ka ʻaoʻao hou i hōʻike ʻia, e like me ka show.bs.tabhanana)

Inā ʻaʻohe papa i hana mua ʻia, ʻaʻole e puhi ʻia nā hanana hide.bs.taba me nā hanana.hidden.bs.tab

ʻAno Hanana wehewehe
hōʻike.bs.tab Hoʻomaka kēia hanana ma ka hōʻike pā, akā ma mua o ka hōʻike ʻia ʻana o ka pā hou. E hoʻohana event.targeta event.relatedTargete hoʻopaʻa i ka pā hana a me ka pā hana mua (inā loaʻa).
hōʻike ʻia.bs.tab Hoʻomaka kēia hanana ma ka hōʻike pā ma hope o ka hōʻike ʻia ʻana o kahi pā. E hoʻohana event.targeta event.relatedTargete hoʻopaʻa i ka pā hana a me ka pā hana mua (inā loaʻa).
huna.bs.tab Ke ahi kēia hanana i ka wā e hōʻike ʻia ai kahi pā hou (a no laila e hūnā ʻia ka pā hana mua). E hoʻohana event.targeta event.relatedTargete hoʻopaʻa i ka ʻaoʻao ʻeleu o kēia manawa a me ka ʻaoʻao koke-e-ʻeleu hou.
huna.bs.tab Ke ahi kēia hanana ma hope o ka hōʻike ʻia ʻana o kahi pā hou (a no laila ua hūnā ʻia ka pā hana mua). E hoʻohana event.targeta event.relatedTargete hoʻopaʻa i ka papa hana mua a me ka pā hana hou.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Hoʻoulu ʻia e ka plugin jQuery.tipsy maikaʻi loa i kākau ʻia e Jason Frame; He mana hou ʻo Tooltips, ʻaʻole hilinaʻi i nā kiʻi, hoʻohana i ka CSS3 no nā animation, a me nā ʻano ʻikepili no ka mālama ʻana i nā poʻo inoa kūloko.

ʻAʻole hōʻike ʻia nā mea hana me nā poʻo inoa lōʻihi ʻole.

Nā laʻana

E kau ma luna o nā loulou ma lalo nei e ʻike i nā ʻōlelo kōkua:

ʻAʻole paha ʻoe i lohe iā lākou. Paʻi kiʻi umiumi maka denim letterpress vegan messenger bag stumptown. Loaʻa iā mcsweeney's fixie sustainable quinoa 8-bit ʻaʻahu ʻAmelika kahi terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, eha loko mcsweeney's cleanse vegan chambray. He kanaka hana hoʻohenehene i kēlā me kēia keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Mea hana paʻa

Loaʻa nā koho ʻehā: luna, ʻākau, lalo, a hema.

ʻEhā kuhikuhi

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

Nā hana koho

No nā kumu hana, ua koho ʻia ka Tooltip a me Popover data-apis, ʻo ia hoʻi , pono ʻoe e hoʻomaka iā ʻoe iho .

ʻO kahi ala e hoʻomaka ai i nā ʻōlelo aʻoaʻo a pau ma kahi ʻaoʻao, ʻo ia ke koho iā lākou e ko lākou data-toggleʻano:

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

Hoʻohana

Hoʻokumu ka plugin tooltip i ka ʻike a me ka markup ma ke koi, a ma ke ʻano maʻamau e waiho i nā tooltips ma hope o kā lākou mea hoʻomaka.

E hoʻomaka i ka mea hana ma o JavaScript:

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

Markup

ʻO ka māka i makemake ʻia no kahi hāmeʻa he datahiʻohiʻona wale nō a titlema ka mea HTML āu e makemake ai e loaʻa kahi hāmeʻa. He mea maʻalahi ka markup i hana ʻia o kahi hāmeʻa, ʻoiai pono ia i kahi kūlana (ma ka paʻamau, hoʻonohonoho ʻia tope ka 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>

Nā loulou laina lehulehu

I kekahi manawa makemake ʻoe e hoʻohui i kahi hāmeʻa i kahi loulou e hoʻopili ai i nā laina he nui. ʻO ke ʻano maʻamau o ka plugin tooltip e hoʻokaʻawale iā ia ma ke ākea a me ka pololei. E hoʻohui white-space: nowrap;i kāu heleuma e pale aku i kēia.

Pono nā mea hana ma nā pūʻulu pihi, nā pūʻulu hoʻokomo, a me nā papa i kahi hoʻonohonoho kūikawā

Ke hoʻohana ʻoe i nā ʻōlelo kōkua ma nā mea i loko o kahi .btn-groupa i ʻole .input-group, a i ʻole ma nā mea pili i ka papa ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), pono ʻoe e kuhikuhi i ke koho container: 'body'(i kākau ʻia ma lalo) e pale i nā hopena ʻaoʻao makemake ʻole (e like me ka ulu ʻana o ka mea a me/ a i ʻole e nalowale ana kona mau kihi pōʻai i ka wā e hoʻāla ʻia ai ka mea hana).

Mai ho'āʻo e hōʻike i nā mea hana ma nā mea huna

ʻO ke kāhea $(...).tooltip('show')ʻana i ka wā display: none;e loaʻa ai ka mea i manaʻo ʻia e hoʻonoho hewa ʻia ka mea hana.

Nā ʻōlelo kōkua no nā mea hoʻohana ʻenehana kōkua

No nā mea hoʻohana e hoʻokele ana me kahi kīpē, a me nā mea hoʻohana i nā ʻenehana kōkua, pono ʻoe e hoʻohui i nā ʻōlelo kōkua i nā mea kikoʻī e pili ana i ka keyboard e like me nā loulou, nā mana hoʻoponopono, a i ʻole kekahi mea ʻokoʻa me kahi tabindex="0"ʻano.

Pono nā mea hana no nā mea hoʻopaʻa ʻole i nā mea wīwī

No ka hoʻohui ʻana i kahi hāmeʻa i kahi mea a i disabledʻole .disabledmea, e hoʻokomo i ka mea i loko o kahi <div>a hoʻopili i ka mea hana i kēlā <div>.

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-animation="".

inoa ʻAno Default wehewehe
hoʻouluulu boolean ʻoiaʻiʻo E noi i kahi hoʻololi fade CSS i ka mea hana
ipu kaula | wahahee wahahee

Hoʻopili i ka mea hana i kahi mea kikoʻī. Laʻana: container: 'body'. He mea pono loa kēia koho no ka mea hiki iā ʻoe ke hoʻonoho i ka mea hana ma ke kahe o ka palapala ma kahi o ka mea hoʻāla - e pale aku i ka mea hana mai ka lana ʻana mai ka mea hoʻāla i ka wā e hoʻololi ai ka puka makani.

lohi helu | mea 0

Hoʻopaneʻe ka hōʻike ʻana a me ka hūnā ʻana i ka hāmeʻa (ms) - ʻaʻole pili i ke ʻano hoʻoiho lima

Inā hāʻawi ʻia kahi helu, hoʻopili ʻia ka lohi i ka huna/hōʻike ʻelua

ʻO ka hoʻolālā mea:delay: { "show": 500, "hide": 100 }

html boolean wahahee E hoʻokomo i ka HTML i loko o ka mea hana. Inā he wahaheʻe, texte hoʻohana ʻia ke ʻano o jQuery e hoʻokomo i ka ʻike i loko o ka DOM. E hoʻohana i ka kikokikona inā hopohopo ʻoe e pili ana i ka hoʻouka kaua XSS.
hoʻokomo kaula | hana 'luna'

Pehea e hoʻonoho ai i ka mea hana - top | lalo | waiho | pololei | kaʻa.
Ke kuhikuhi ʻia ʻo "auto", e hoʻohuli hou ia i ka tooltip. No ka laʻana, inā he "auto left" ke kau ʻana, e hōʻike ʻia ka mea hana ma ka hema inā hiki, inā ʻaʻole e hōʻike ʻia ia ma ka ʻākau.

Ke hoʻohana ʻia kahi hana no ka hoʻoholo ʻana i ka hoʻokomo ʻana, ua kapa ʻia ʻo ia me ka mea hana DOM node ma ke ʻano he kumu hoʻopaʻapaʻa mua a me ka mea hoʻomaka DOM node ʻo ia ka lua. Hoʻonohonoho ʻia ka thispōʻaiapili i ka laʻana mea hana.

mea koho kaulahao wahahee Inā hāʻawi ʻia kahi mea koho, e hāʻawi ʻia nā mea hāmeʻa i nā pahuhopu i kuhikuhi ʻia. I ka hoʻomaʻamaʻa ʻana, hoʻohana ʻia kēia e hiki ai i ka ʻike HTML ikaika ke hoʻohui i nā mea hana. E ʻike i kēia a me kahi laʻana ʻike .
template kaulahao '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML e hoʻohana i ka hana ʻana i ka mea hana.

E titlehoʻokomo ʻia nā mea hana i loko o ka .tooltip-inner.

.tooltip-arrowe lilo i pua o ka mea hana.

Pono e loaʻa ka .tooltippapa i ka mea ʻōwili waho loa.

inoa kaula | hana ''

Waiwai poʻo inoa paʻamau inā titleʻaʻole i loaʻa ke ʻano.

Inā hāʻawi ʻia kahi hana, e kāhea ʻia ia me kāna thiskuhikuhi i hoʻonohonoho ʻia i ka mea i hoʻopili ʻia ka tooltip.

hoʻomaka kaulahao 'hover focus' Pehea ka hoʻomaka ʻana o ka mea hana - kaomi | lele | kālele | manual. Hiki iā ʻoe ke hāʻawi i nā kumu he nui; e hoʻokaʻawale iā lākou me kahi ākea. manualʻAʻole hiki ke hoʻohui ʻia me kekahi mea hoʻoulu ʻē aʻe.
puka ʻike kaula | mea | hana { mea koho: 'kino', pale: 0 }

Mālama i ka mea hana i loko o nā palena o kēia mea. Laʻana: viewport: '#viewport'a i ʻole{ "selector": "#viewport", "padding": 0 }

Inā hāʻawi ʻia kahi hana, ua kapa ʻia ʻo ia me ka triggering element DOM node ma ke ʻano he hoʻopaʻapaʻa wale nō. Hoʻonohonoho ʻia ka thispōʻaiapili i ka laʻana mea hana.

Nā hiʻohiʻona ʻikepili no kēlā me kēia mea hana

Hiki ke ho'ākāka 'ia nā koho no nā mea hana hoʻokahi ma o ka hoʻohana ʻana i nā ʻano ʻikepili, e like me ka wehewehe ʻana ma luna.

Nā ʻano hana

$().tooltip(options)

Hoʻopili i kahi mea hoʻohana mea hana i kahi hōʻiliʻili mea.

.tooltip('show')

Hōʻike i ka ʻōlelo kōkua o kahi mea. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka mea paahana (ʻo ia hoʻi ma mua o ka hiki ʻana o ka shown.bs.tooltiphanana). Manaʻo ʻia kēia he "manual" triggering of the tooltip. ʻAʻole hōʻike ʻia nā mea hana me nā poʻo inoa lōʻihi ʻole.

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

.tooltip('hide')

Hūnā i ka ʻōlelo aʻoaʻo mea paahana. E hoʻi i ka mea kelepona ma mua o ka hūnā ʻia ʻana o ka mea hana (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hidden.bs.tooltiphanana). Manaʻo ʻia kēia he "manual" triggering of the tooltip.

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

.tooltip('toggle')

Hoʻololi i ka ʻōkuhi mea hana o kahi mea. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana a i ʻole huna ʻia ka mea hana (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hanana shown.bs.tooltipa i ʻole). hidden.bs.tooltipManaʻo ʻia kēia he "manual" triggering of the tooltip.

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

.tooltip('destroy')

Hūnā a hoʻopau i ka mea paahana o kahi mea. ʻAʻole hiki ke hoʻopau pākahi ʻia nā mea hana e hoʻohana ana i ka ʻelele (i hana ʻia me ka hoʻohana ʻana i ke selectorkoho ).

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

Nā hanana

ʻAno Hanana wehewehe
hōʻike.bs.tooltip Hoʻomaka koke kēia hanana i ke showkāhea ʻia ʻana o ke ʻano hana.
hōʻike.bs.tooltip Hoʻopau ʻia kēia hanana ke ʻike ʻia ka mea hoʻohana i ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS).
hide.bs.tooltip Hoʻopau koke ʻia kēia hanana i ka wā hidei kāhea ʻia ai ke ʻano hana.
huna.bs.tooltip Hoʻopau ʻia kēia hanana i ka pau ʻana o ka huna ʻana o ka mea hana mai ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS).
inserted.bs.tooltip Hoʻopau ʻia kēia hanana ma hope o ka show.bs.tooltiphanana i ka wā i hoʻohui ʻia ai ka ʻōkuhi hāmeʻa i ka DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Hoʻohui i nā ʻāpana liʻiliʻi o ka ʻike, e like me nā mea ma ka iPad, i kekahi mea no ka ʻike lua hale.

ʻAʻole hōʻike ʻia nā Popovers nona ke poʻo inoa a me ka ʻike.

Hoʻopili pili

Pono nā Popovers e hoʻokomo i ka plugin tooltip i kāu mana o Bootstrap.

Nā hana koho

No nā kumu hana, ua koho ʻia ka Tooltip a me Popover data-apis, ʻo ia hoʻi , pono ʻoe e hoʻomaka iā ʻoe iho .

ʻO kahi ala e hoʻomaka ai i nā popovers a pau ma kahi ʻaoʻao ʻo ke koho ʻana iā lākou ma ko lākou data-toggleʻano:

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

Pono nā Popovers i nā pūʻulu pihi, nā pūʻulu hoʻokomo, a me nā papa i kahi hoʻonohonoho kūikawā

Ke hoʻohana ʻoe i nā popovers ma nā mea i loko o kahi .btn-groupa i ʻole .input-group, a i ʻole ma nā mea pili i ka papaʻaina ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), pono ʻoe e kuhikuhi i ke koho container: 'body'(i kākau ʻia ma lalo) e pale i nā hopena ʻaoʻao makemake ʻole (e like me ka ulu ʻana o ka mea e ulu ākea a// a i ʻole e nalowale ana kona mau kihi pōʻai i ka wā e hoʻomaka ai ka popover).

Mai ho'āʻo e hōʻike i nā popovers ma nā mea huna

ʻO ke kāhea $(...).popover('show')ʻana i ka wā e loaʻa ai ka mea i manaʻo ʻia display: none;e hoʻonoho hewa ʻia ka popover.

Pono nā popovers ma nā mea kīnā ʻole i nā mea wīwī

No ka hoʻohui ʻana i kahi popover i kahi a i disabledʻole .disabledelement, e hoʻokomo i ka mea i loko o kahi <div>a hoʻopili i ka popover i kēlā <div>.

Nā loulou laina lehulehu

I kekahi manawa makemake ʻoe e hoʻohui i kahi popover i kahi loulou e hoʻopili ai i nā laina he nui. ʻO ka hana maʻamau o ka popover plugin e hoʻokaʻawale iā ia ma ke ākea a me ka pololei. E hoʻohui white-space: nowrap;i kāu heleuma e pale aku i kēia.

Nā laʻana

Paʻa popover

Loaʻa nā koho ʻehā: luna, ʻākau, lalo, a hema.

Popover luna

Hiki ke hoʻopaʻa ʻia ma ka lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover akau

Hiki ke hoʻopaʻa ʻia ma ka lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover lalo

Hiki ke hoʻopaʻa ʻia ma ka lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Ua haʻalele ʻo Popover

Hiki ke hoʻopaʻa ʻia ma ka lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Demo ola

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

ʻEhā kuhikuhi

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

Hoʻokuʻu i ke kaomi aʻe

E hoʻohana i ke focuskumu no ka hoʻokuʻu ʻana i nā popovers ma ke kaomi aʻe a ka mea hoʻohana e hana ai.

Pono ka māka kikoʻī no ka hoʻokuʻu ʻana ma ka kaomi aʻe

No ka hoʻohana ʻana i ka <a>ʻōkuhi, ʻaʻole ka <button>tag, a pono ʻoe e hoʻokomo i nā ʻano role="button"a me tabindexnā ʻano.

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

Hoʻohana

E ho'ā i nā popovers ma o JavaScript:

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

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-animation="".

inoa ʻAno Default wehewehe
hoʻouluulu boolean ʻoiaʻiʻo E noi i kahi hoʻololi fade CSS i ka popover
ipu kaula | wahahee wahahee

Hoʻopili i ka popover i kahi mea kikoʻī. Laʻana: container: 'body'. He mea maikaʻi loa kēia koho no ka mea hiki iā ʻoe ke hoʻonoho i ka popover i ke kahe o ka palapala ma kahi o ka mea hoʻāla - e pale aku i ka popover mai ka lana ʻana mai ka mea hoʻāla i ka wā e hoʻololi ai ka puka makani.

maʻiʻo kaula | hana ''

Waiwai maʻiʻo paʻamau inā data-contentʻaʻole i loaʻa ke ʻano.

Inā hāʻawi ʻia kahi hana, e kāhea ʻia me kāna thiskuhikuhi i hoʻonohonoho ʻia i ka mea i hoʻopili ʻia ka popover.

lohi helu | mea 0

Hoʻopaneʻe ka hōʻike ʻana a me ka hūnā ʻana i ka popover (ms) - ʻaʻole pili i ke ʻano hoʻoiho manual

Inā hāʻawi ʻia kahi helu, hoʻopili ʻia ka lohi i ka huna/hōʻike ʻelua

ʻO ka hoʻolālā mea:delay: { "show": 500, "hide": 100 }

html boolean wahahee E hoʻokomo i ka HTML i ka popover. Inā he wahaheʻe, texte hoʻohana ʻia ke ʻano o jQuery e hoʻokomo i ka ʻike i loko o ka DOM. E hoʻohana i ka kikokikona inā hopohopo ʻoe e pili ana i ka hoʻouka kaua XSS.
hoʻokomo kaula | hana 'akau'

Pehea e hoʻonoho ai i ka popover - top | lalo | waiho | pololei | kaʻa.
Ke kuhikuhi ʻia ka "auto", e hoʻohuli hou ia i ka popover. No ka laʻana, inā he "auto left" ka waiho ʻana, e hōʻike ʻia ka popover ma ka hema inā hiki, inā ʻaʻole e hōʻike ʻia ia ma ka ʻākau.

Ke hoʻohana ʻia kahi hana no ka hoʻoholo ʻana i ka hoʻokomo ʻana, ua kapa ʻia ʻo ia me ka popover DOM node ma ke ʻano he kumu hoʻopaʻapaʻa mua a ʻo ka mea hoʻomaka DOM node ʻo ia ka lua. Hoʻonohonoho ʻia ka thispōʻaiapili i ka laʻana popover.

mea koho kaulahao wahahee Inā hāʻawi ʻia kahi mea koho, e hāʻawi ʻia nā mea popover i nā pahuhopu i kuhikuhi ʻia. I ka hoʻomaʻamaʻa ʻana, hoʻohana ʻia kēia e hiki ai i nā ʻike HTML ikaika ke hoʻohui i nā popovers. E ʻike i kēia a me kahi laʻana ʻike .
template kaulahao '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Base HTML e hoʻohana i ka hana ʻana i ka popover.

E hoʻokomo ʻia ka popover i titleloko o ka .popover-title.

E hoʻokomo ʻia ka popover i contentloko o ka .popover-content.

.arrowe lilo i ka pua popover.

Pono e loaʻa ka .popoverpapa i ka mea ʻōwili waho loa.

inoa kaula | hana ''

Waiwai poʻo inoa paʻamau inā titleʻaʻole i loaʻa ke ʻano.

Inā hāʻawi ʻia kahi hana, e kāhea ʻia me kāna thiskuhikuhi i hoʻonohonoho ʻia i ka mea i hoʻopili ʻia ka popover.

hoʻomaka kaulahao ' kaomi ' Pehea e hoʻomaka ai ka popover - kaomi | lele | kālele | manual. Hiki iā ʻoe ke hāʻawi i nā kumu he nui; e hoʻokaʻawale iā lākou me kahi ākea. manualʻAʻole hiki ke hoʻohui ʻia me kekahi mea hoʻoulu ʻē aʻe.
puka ʻike kaula | mea | hana { mea koho: 'kino', pale: 0 }

Mālama i ka popover i loko o nā palena o kēia mea. Laʻana: viewport: '#viewport'a i ʻole{ "selector": "#viewport", "padding": 0 }

Inā hāʻawi ʻia kahi hana, ua kapa ʻia ʻo ia me ka triggering element DOM node ma ke ʻano he hoʻopaʻapaʻa wale nō. Hoʻonohonoho ʻia ka thispōʻaiapili i ka laʻana popover.

Nā hiʻohiʻona ʻikepili no nā popovers pākahi

Hiki ke koho ʻia nā koho no nā popovers pākahi ma o ka hoʻohana ʻana i nā ʻano ʻikepili, e like me ka wehewehe ʻana ma luna.

Nā ʻano hana

$().popover(options)

Hoʻomaka i nā popovers no kahi hōʻiliʻili mea.

.popover('show')

Hōʻike i ka popover o kekahi mea. Hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka popover (ʻo ia hoʻi ma mua o ka hiki ʻana o ka shown.bs.popoverhanana). Manaʻo ʻia kēia he "manual" triggering o ka popover. ʻAʻole hōʻike ʻia nā Popovers nona ke poʻo inoa a me ka ʻike.

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

.popover('hide')

Hūnā i ka popover o kekahi mea. Hoʻi i ka mea kelepona ma mua o ka hūnā ʻia ʻana o ka popover (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hidden.bs.popoverhanana). Manaʻo ʻia kēia he "manual" triggering o ka popover.

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

.popover('toggle')

Hoʻololi i ka popover o kekahi mea. Hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana a huna ʻana paha o ka popover (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hanana shown.bs.popovera i ʻole). hidden.bs.popoverManaʻo ʻia kēia he "manual" triggering o ka popover.

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

.popover('destroy')

Huna a luku i ka popover o kekahi mea. ʻAʻole hiki ke hoʻopau pākahi ʻia nā popovers e hoʻohana ana i ka ʻelele (i hana ʻia me ka hoʻohana ʻana i ke selectorkoho ).

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

Nā hanana

ʻAno Hanana wehewehe
hōʻike.bs.popover Hoʻomaka koke kēia hanana i ke showkāhea ʻia ʻana o ke ʻano hana.
hoikeia.bs.popover Hoʻopau ʻia kēia hanana i ka wā i ʻike ʻia ai ka popover i ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS).
huna.bs.popover Hoʻopau koke ʻia kēia hanana i ka wā hidei kāhea ʻia ai ke ʻano hana.
huna.bs.popover Hoʻopau ʻia kēia hanana i ka pau ʻana o ka huna ʻana o ka popover mai ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS).
hookomo.bs.popover Hoʻopau ʻia kēia hanana ma hope o ka show.bs.popoverhanana i ka wā i hoʻohui ʻia ai ka template popover i ka DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Nā memo makaʻala alert.js

Hoʻolaha laʻana

Hoʻohui i nā hana hoʻokuʻu i nā memo makaʻala a pau me kēia plugin.

I ka hoʻohana ʻana i kahi .closepihi, pono ʻo ia ke keiki mua .alert-dismissiblea ʻaʻole hiki ke loaʻa kahi kikokikona ma mua o ka markup.

Hoʻohana

E hoʻohui wale data-dismiss="alert"i kāu pihi pani e hāʻawi ʻakomi i kahi hana kokoke. ʻO ka pani ʻana i kahi makaʻala e wehe iā ia mai ka DOM.

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

No ka hoʻohana ʻana i kāu mau makaʻala i ka animation i ka wā e pani ai, e hōʻoia i loaʻa iā lākou nā papa .fadea me .innā papa i hoʻopili ʻia iā lākou.

Nā ʻano hana

$().alert()

E hoʻolohe i nā hanana kaomi ma nā ʻano mamo nona ka data-dismiss="alert"ʻano. (ʻAʻole pono i ka wā e hoʻohana ai i ka hoʻomaka ʻana o ka data-api.)

$().alert('close')

Pani i kahi makaʻala ma ka wehe ʻana iā ia mai ka DOM. Inā loaʻa ka .fadea me .innā papa ma ka mea, e mae ka makaʻala ma mua o ka wehe ʻana.

Nā hanana

Hōʻike ka plugin alert a Bootstrap i kekahi mau hanana no ka hoʻopili ʻana i ka hana makaʻala.

ʻAno Hanana wehewehe
close.bs.alert Hoʻomaka koke kēia hanana i ke closekāhea ʻia ʻana o ke ʻano hana.
pani.bs.alert Hoʻopau ʻia kēia hanana i ka wā i pani ʻia ai ka makaʻala (e kali no ka hoʻopau ʻana o CSS).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Nā pihi pihi.js

E hana hou me nā pihi. Hōʻike ka pihi mana a i ʻole hana i nā pūʻulu o nā pihi no nā ʻāpana ʻē aʻe e like me nā hāmeʻa.

Ka hoʻolike like ʻana o ka polokalamu kele pūnaewele

Ke hoʻomau nei ʻo Firefox i nā kūlana mana (nā kīnā a me ka nānā ʻana) ma nā ʻaoʻao āpau . ʻO kahi hoʻoponopono no kēia ka hoʻohana ʻana autocomplete="off". E ʻike i ka pōʻino Mozilla #654072 .

Stateful

Hoʻohui data-loading-text="Loading..."e hoʻohana i kahi kūlana hoʻouka ma kahi pihi.

Hoʻopau ʻia kēia hiʻohiʻona mai v3.3.5 a ua wehe ʻia ma v4.

E hoʻohana i ka mokuʻāina āu e makemake ai!

No kēia hōʻikeʻike, hoʻohana mākou data-loading-texta $().button('loading'), akā ʻaʻole ʻo ia wale nō ka mokuʻāina hiki iā ʻoe ke hoʻohana. E ʻike hou aʻe i kēia ma lalo i ka $().button(string)palapala .

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

Hoʻololi hoʻokahi

Pākuʻi data-toggle="button"e hoʻā i ka hoʻololi ʻana ma ke pihi hoʻokahi.

Pono nā pihi pre-toggled .activeaaria-pressed="true"

No nā pihi i hoʻololi mua ʻia, pono ʻoe e hoʻohui i ka .activepapa a me ke aria-pressed="true"ʻano iā buttonʻoe iho.

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

Pahu leka / Lekiō

E hoʻohui data-toggle="buttons"i kahi .btn-grouppahu pahu a i ʻole nā ​​mea hoʻokomo lekiō e hiki ai ke hoʻololi i ko lākou ʻano.

Pono nā koho i koho mua ʻia.active

No nā koho i koho mua ʻia, pono ʻoe e hoʻohui i ka .activepapa i ka hoʻokomo ʻana iā labelʻoe iho.

Hōʻano hou ʻia ka mokuʻāina nānā ʻia ma ke kaomi

Inā hōʻano hou ʻia ke kūlana i hoʻopaʻa ʻia o kahi pihi pahu pahu me ke kī ʻole ʻana i kahi clickhanana ma ke pihi (e laʻa <input type="reset">me ka hoʻonohonoho ʻana i ka checkedwaiwai o ka mea hoʻokomo), pono ʻoe e hoʻololi i ka .activepapa ma ka mea hoʻokomo iā labelʻoe iho.

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

Nā ʻano hana

$().button('toggle')

Hoʻololi i ke kūlana pana. Hāʻawi i ke pihi i ke ʻano ua hoʻāla ʻia.

$().button('reset')

Hoʻoponopono hou i ke kūlana pihi - hoʻololi i ke kikokikona i ka kikokikona kumu. Asynchronous kēia ʻano hana a hoʻi mai ma mua o ka pau ʻana o ka hoʻoponopono hou ʻana.

$().button(string)

Hoʻololi i ke kikokikona i kekahi ʻano kikokikona i wehewehe ʻia.

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

E hiolo collapse.js

Hiki ke hoʻohana i nā papa liʻiliʻi no ka hoʻololi maʻalahi.

Hoʻopili pili

Pono ʻo Collapse e hoʻokomo i ka plugin transitions i kāu mana o Bootstrap.

Laʻana

Kaomi i nā pihi ma lalo nei e hōʻike a hūnā i kekahi mea ma o nā hoʻololi papa:

  • .collapsehuna mea
  • .collapsinghoʻohana ʻia i ka wā hoʻololi
  • .collapse.inhōʻike maʻiʻo

Hiki iā ʻoe ke hoʻohana i kahi loulou me ka hrefʻano, a i ʻole ke pihi me ka data-targetʻano. I nā hihia ʻelua, data-toggle="collapse"pono ka mea.

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>

Laʻana Accordion

E hoʻolōʻihi i ka hana hāʻule paʻamau no ka hana ʻana i kahi accordion me ka ʻāpana panel.

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

Hiki ke hoʻololi i ka .panel-bodys me .list-groupka s.

  • Bootply
  • Hookahi itmus ac facilin
  • Eros lua

Hiki ke ʻike ʻia nā mana hoʻonui/holo

E hōʻoia e hoʻohui aria-expandedi ka mea hoʻomalu. Hōʻike maopopo kēia ʻano i ke kūlana o kēia manawa o ka mea hiki ke hoʻoheheʻe ʻia i ka nānā ʻana i nā mea heluhelu a me nā ʻenehana kōkua like. Inā pani ʻia ka ʻāpana collapsible ma ka paʻamau, pono ke loaʻa ka waiwai o aria-expanded="false". Inā ua hoʻonoho ʻoe i ka mea hiki ke hoʻoheheʻe ʻia e wehe ʻia ma ka hoʻohana ʻana i ka inpapa, e hoʻonoho aria-expanded="true"ma ka mana. E hoʻololi ʻokoʻa ka plugin i kēia ʻano ma muli o ka wehe ʻana a i ʻole ka mea hiki ke hoʻopili ʻia.

Eia hou, inā e huli ana kāu mea hoʻomalu i kahi mea hiki ke hoʻoheheʻe ʻia - ʻo ia hoʻi ke data-targetkuhikuhi nei ka ʻano i kahi idmea koho - hiki iā ʻoe ke hoʻohui i kahi ʻano ʻē aʻe aria-controlsi ka mea hoʻomalu, i loaʻa ka idmea hiki ke hoʻoneʻe. Hoʻohana ka poʻe heluhelu ʻaoʻao o kēia wā a me nā ʻenehana kōkua like i kēia ʻano e hāʻawi i nā mea hoʻohana i nā ʻaoʻao pōkole hou e hoʻokele pololei i ka mea hiki ke collapsible ponoʻī.

Hoʻohana

Hoʻohana ka collapse plugin i kekahi mau papa e hoʻokō i ka hāpai kaumaha:

  • .collapsehūnā i ka ʻike
  • .collapse.inhōʻike i ka ʻike
  • .collapsinghoʻohui ʻia i ka wā e hoʻomaka ai ka hoʻololi, a wehe ʻia i ka wā e pau ai

Hiki ke loaʻa kēia mau papa ma component-animations.less.

Ma o nā hiʻohiʻona ʻikepili

E hoʻohui wale data-toggle="collapse"a me kahi data-targeti ka mea e hāʻawi ʻakomi i ka mana o kahi mea hiki ke collapsible. data-targetʻAe ka ʻano i kahi mea koho CSS e hoʻopili ai i ka hāʻule . E hōʻoia e hoʻohui i ka papa collapsei ka mea hiki ke collapsible. Inā makemake ʻoe e wehe paʻamau, e hoʻohui i ka papa hou in.

No ka hoʻohui ʻana i ka hoʻokele hui e like me ka accordion i kahi mana collapsible, e hoʻohui i ke ʻano ʻikepili data-parent="#selector". E nānā i ka demo e ʻike i kēia i ka hana.

Ma o JavaScript

E ho'ā me ka lima me:

$('.collapse').collapse()

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-parent="".

inoa ʻano ʻano paʻamau wehewehe
makua mea koho wahahee Inā hāʻawi ʻia kahi mea koho, a laila e pani ʻia nā mea hiki ke hoʻoheheʻe ʻia ma lalo o ka makua i ʻōlelo ʻia ke hōʻike ʻia kēia mea hiki ke hiki. (e like me ka hana accordion kuʻuna - pili kēia i ka panelpapa)
hoʻololi boolean ʻoiaʻiʻo Hoʻololi i ka mea hiki ke collapsible ma ke kāhea ʻana

Nā ʻano hana

.collapse(options)

Ho'ā i kāu ʻike ma ke ʻano he mea hiki ke collapsible. ʻAe i kahi koho koho object.

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

.collapse('toggle')

Hoʻololi i kahi mea hiki ke hōʻike ʻia a hūnā ʻia paha. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana a i ʻole huna ʻia o ka mea hiki ke hoʻoneʻe ʻia (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hanana shown.bs.collapsea i ʻole).hidden.bs.collapse

.collapse('show')

Hōʻike i kahi mea hiki ke collapsible. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka mea hiki ke hoʻoheheʻe ʻia (ʻo ia hoʻi ma mua o ka hiki ʻana o ka shown.bs.collapsehanana).

.collapse('hide')

Hūnā i kahi mea hiki ke hoʻoheheʻe ʻia. E hoʻi i ka mea kelepona ma mua o ka hūnā ʻia ʻana o ka mea hiki ke hoʻoneʻe ʻia (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hidden.bs.collapsehanana).

Nā hanana

Hōʻike ka papa hāʻule o Bootstrap i kekahi mau hanana no ka hoʻopili ʻana i ka hana hāʻule.

ʻAno Hanana wehewehe
hōʻike.bs.collapse Hoʻomaka koke kēia hanana i ke showkāhea ʻia ʻana o ke ʻano hana.
hōʻike ʻia.bs.collapse Hoʻopau ʻia kēia hanana ke ʻike ʻia kahi mea hāʻule i ka mea hoʻohana (e kali no ka hoʻopau ʻana o CSS).
hide.bs.collapse Hoʻopau koke ʻia kēia hanana ke hidekāhea ʻia ke ʻano.
huna.bs.collapse Hoʻopau ʻia kēia hanana ke hūnā ʻia kahi mea hāʻule mai ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

He kiʻi kiʻiʻoniʻoni no ka holo kaʻa ʻana ma waena o nā mea, e like me kahi carousel. ʻAʻole kākoʻo ʻia nā carousels pūnana.

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

Nā huaʻōlelo koho

Hoʻohui maʻalahi i nā huaʻōlelo i kāu mau paheʻe me ka .carousel-captionmea i loko o kekahi .item. E kau ma kahi o kekahi HTML koho i loko o laila a e hoʻopololei ʻia a hoʻohālikelike ʻia.

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

Nā carousels he nui

Pono nā Carousels i ka hoʻohana ʻana i kahi pahu idma waho loa (ka .carousel) no ka hoʻokele pono ʻana o nā carousel. I ka hoʻohui ʻana i nā carousel he nui, a i ʻole ke hoʻololi ʻana i nā carousel id, e hōʻoia e hōʻano hou i nā mana kūpono.

Ma o nā hiʻohiʻona ʻikepili

E hoʻohana i nā hiʻohiʻona ʻikepili e hoʻomalu maʻalahi i ke kūlana o ka carousel. data-slideʻae i nā huaʻōlelo a i prevʻole next, e hoʻololi i ke kūlana paheʻe e pili ana i kona kūlana i kēia manawa. ʻO kahi ʻē aʻe, e hoʻohana data-slide-toi ka hāʻawi ʻana i kahi papa kuhikuhi paheʻe maka i ka carousel data-slide-to="2", e hoʻololi i ke kūlana paheʻe i kahi kuhikuhi kikoʻī e hoʻomaka ana me 0.

Hoʻohana data-ride="carousel"ʻia ka ʻano e hōʻailona ai i kahi carousel ma ke ʻano he animating e hoʻomaka ana ma ka hoʻouka ʻana i ka ʻaoʻao. ʻAʻole hiki ke hoʻohana pū ʻia me (nui a pono ʻole) ka hoʻomaka mua ʻana o JavaScript o ka carousel like.

Ma o JavaScript

Kāhea lima ʻia ka carousel me:

$('.carousel').carousel()

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-interval="".

inoa ʻano ʻano paʻamau wehewehe
waena helu 5000 ʻO ka nui o ka manawa e hoʻopaneʻe ai ma waena o ke kaʻa ʻakomi i kahi mea. Inā hoʻopunipuni, ʻaʻole e holo ʻokoʻa ka carousel.
hoʻomaha kaula | null "holo" Inā hoʻonoho ʻia i "hover", hoʻomaha i ke kaʻa kaʻa o ka carousel mouseentera hoʻomaka hou i ke kaʻa kaʻa o ka carousel ma mouseleave. Inā hoʻonoho ʻia iā null, ʻaʻole e hoʻomaha ke kau ʻana ma luna o ka carousel.
kāʻei boolean ʻoiaʻiʻo Inā pono ke kaʻa kaʻa kaʻa kaʻa kaʻa a i ʻole ka paʻakikī.
keyboard boolean ʻoiaʻiʻo Inā paha e hana ka carousel i nā hanana keyboard.

Hoʻomaka ka carousel me nā koho koho objecta hoʻomaka i ka holo kaʻa i nā mea.

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

Kaʻapuni i nā mea carousel mai ka hema a i ka ʻākau.

Hoʻopau i ka carousel mai ka holo paikikala ma nā mea.

Hoʻololi i ka carousel i kahi kiʻi kikoʻī (ma muli o 0, e like me kahi array).

Hoʻoholo i ka mea mua.

Hoʻoholo i ka mea aʻe.

Hōʻike ka papa carousel o Bootstrap i ʻelua hanana no ka hoʻopili ʻana i ka hana carousel.

Loaʻa i nā hanana ʻelua nā waiwai hou aʻe:

  • direction: ʻO ka ʻaoʻao e heʻe ana ka carousel (a i "left"ʻole "right").
  • relatedTarget: ʻO ka mea DOM e hoʻoneʻe ʻia ana ma ke ʻano he mea hana.

Hoʻopau ʻia nā hanana carousel a pau i ka carousel ponoʻī (ʻo ia hoʻi ma ka <div class="carousel">).

ʻAno Hanana wehewehe
slide.bs.carousel Hoʻopau koke ʻia kēia hanana i ka wā slidee kāhea ʻia ke ʻano hana.
slid.bs.carousel Hoʻopau ʻia kēia hanana ke hoʻopau ka carousel i kāna hoʻololi paheʻe.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Hoʻopili affix.js

Laʻana

Hoʻopili ka plugin affix position: fixed;a hoʻopau, e hoʻohālike ana i ka hopena i loaʻa me position: sticky;. ʻO ka subnavigation ma ka ʻākau he demo ola o ka plugin affix.


Hoʻohana

E hoʻohana i ka plugin affix ma o ka ʻikepili ʻikepili a i ʻole ma ka lima me kāu JavaScript ponoʻī.Ma nā kūlana ʻelua, pono ʻoe e hāʻawi i ka CSS no ke kūlana a me ka laulā o kāu ʻike i hoʻopili ʻia.

'Ōlelo Aʻo: Mai hoʻohana i ka plugin affix ma kekahi mea i loko o kahi mea i hoʻonohonoho pono ʻia, e like me ke kolamu huki a paʻi ʻia paha, ma muli o kahi pahu hana Safari .

Hoʻonohonoho ma o CSS

Hoʻololi ka plugin affix ma waena o ʻekolu papa, e hōʻike ana kēlā me kēia i kahi mokuʻāina: .affix, .affix-top, a me .affix-bottom. Pono ʻoe e hāʻawi i nā ʻano, koe wale nō position: fixed;ma .affix, no kēia mau papa iā ʻoe iho (kūʻokoʻa i kēia plugin) e mālama i nā kūlana maoli.

Eia ke ʻano o ka hana affix plugin:

  1. E hoʻomaka, hoʻohui ka plugin.affix-top e hōʻike i ka mea i kona kūlana kiʻekiʻe loa. I kēia manawa ʻaʻole koi ʻia kahi kūlana CSS.
  2. ʻO ka hele ʻana ma mua o ka mea āu e makemake ai e hoʻopili ʻia e hoʻomaka i ka hoʻopili maoli. ʻO kēia kahi kahi .affixe pani ai .affix-topa hoʻonohonoho position: fixed;(i hāʻawi ʻia e Bootstrap's CSS).
  3. Inā wehewehe ʻia kahi offset lalo, pono e hoʻololi .affixʻia me ka .affix-bottom. No ka mea he koho nā offsets, pono ʻoe e hoʻonohonoho i ka CSS kūpono. I kēia hihia, hoʻohui position: absolute;i ka wā e pono ai. Hoʻohana ka plugin i ka ʻikepili data a i ʻole ke koho JavaScript e hoʻoholo i kahi e hoʻonoho ai i ka mea mai laila.

E hahai i nā ʻanuʻu i luna e hoʻonohonoho i kāu CSS no kekahi o nā koho hoʻohana ma lalo nei.

Ma o nā hiʻohiʻona ʻikepili

No ka hoʻohui maʻalahi i ka hana affix i kekahi mea, e hoʻohui wale data-spy="affix"i ka mea āu e makemake ai e kiu. E hoʻohana i nā offset e wehewehe i ka wā e hoʻololi ai i ka paʻi ʻana o kahi mea.

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

Ma o JavaScript

Kāhea i ka plugin affix ma o JavaScript:

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

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-offset-top="200".

inoa ʻano ʻano paʻamau wehewehe
offset helu | hana | mea 10 E hoʻopau ʻia nā Pixels mai ka pale ke helu ʻana i ke kūlana o ka ʻōwili. Inā hāʻawi ʻia kahi helu hoʻokahi, e hoʻohana ʻia ka offset ma nā ʻaoʻao luna a lalo. No ka hāʻawi ʻana i kahi ʻokoʻa kūʻokoʻa, lalo a me luna offset e hāʻawi wale i kahi mea a i offset: { top: 10 }ʻole offset: { top: 10, bottom: 5 }. E hoʻohana i kahi hana i ka wā e pono ai ʻoe e helu dynamically i kahi offset.
pahu hopu mea koho | node | mea jQuery ka windowmea Hōʻike i ka mea i manaʻo ʻia o ka affix.

Nā ʻano hana

.affix(options)

Ho'ā i kāu ʻike ma ke ʻano he maʻiʻo i hoʻopili ʻia. ʻAe i kahi koho koho object.

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

.affix('checkPosition')

Hoʻopili hou i ke kūlana o ka affix e pili ana i nā ana, kūlana, a me ke kūlana ʻōwili o nā mea pili. Hoʻohui ʻia ka .affix, .affix-top, a me .affix-bottomnā papa mai ka ʻikepili i hoʻopili ʻia e like me ka mokuʻāina hou. Pono e kāhea ʻia kēia ʻano i ka wā e hoʻololi ʻia ai nā ana o ka maʻiʻo i hoʻopili ʻia a i ʻole ka mea i hoʻopaʻa ʻia, e hōʻoia i ke kūlana kūpono o ka maʻiʻo i hoʻopili ʻia.

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

Nā hanana

Hōʻike ka plugin affix a Bootstrap i kekahi mau hanana no ka hoʻopili ʻana i ka hana affix.

ʻAno Hanana wehewehe
affix.bs.affix Hoʻomaka koke kēia hanana ma mua o ka hoʻopili ʻana i ka mea.
affixed.bs.affix Hoʻopau ʻia kēia hanana ma hope o ka hoʻopili ʻana i ka mea.
affix-top.bs.affix Hoʻomaka koke kēia hanana ma mua o ka hoʻopili ʻia ʻana o ka element-luna.
affixed-top.bs.affix Hoʻopau ʻia kēia hanana ma hope o ka hoʻopili ʻana o ka mea i luna.
affix-bottom.bs.affix Hoʻomaka koke kēia hanana ma mua o ka hoʻopili ʻia ʻana o ka element-lalo.
affixed-bottom.bs.affix Hoʻopau ʻia kēia hanana ma hope o ka hoʻopili ʻia ʻana o ka element-lalo.