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

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

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

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>

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

Ke hoʻololi ʻana i ka ʻikepili modal ma muli o ke pihi hoʻomaka

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,

<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="".

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

Nā ʻano hana

.modal(options)

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

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

.modal('toggle')

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

.modal('show')

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

.modal('hide')

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

.modal('handleUpdate')

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">).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

Nā laʻana

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

Hoʻohana

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

Nā koho

ʻAʻohe

Nā ʻano hana

$().dropdown('toggle')

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

Nā hanana

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.

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

Hoʻohana

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="".

Nā hanana

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

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

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

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>

$(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ā 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="".

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

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

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

Nā laʻana

Paʻa popover

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

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.

<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="".

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

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

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

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.

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

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

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

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.

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

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

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="".

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.

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

Nā laʻana

Mamua Aʻe

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

Lepili paheʻe mua

Nulla vitae elit libero, a pharetra augue mollis interdum.

Lepili paheʻe lua

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lepili paheʻe kolu

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Mamua Aʻe

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

Hoʻohana

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

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-interval="".

Nā ʻano hana

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

Hoʻoholo i ka mea mua.

.carousel('next')

Hoʻoholo i ka mea aʻe.

Nā hanana

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">).

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

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.