Hoʻokahi a i hui pū ʻia

Hiki ke hoʻopili paʻa ʻia nā plugins (ʻoiai ua makemake kekahi i nā hilinaʻi), a i ʻole nā ​​​​mea āpau i ka manawa hoʻokahi. Loaʻa iā bootstrap.js a me bootstrap.min.js nā plugins āpau i hoʻokahi faila.

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 waiwai ʻikepili ma ka wehe ʻana i nā hanana āpau ma ke kino i hoʻopaʻa ʻia me `'data-api'`. Ua like kēia me kēia:

$ ( 'kino' ). paʻa ( ' .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:

$ ( 'kino' ). pio ( ' .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" ). pihi ( "hoʻololi" ). addClass ( "momona" )

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 () // hoʻomaka me nā mea paʻamau                       
$ ( "#myModal" ). modal ({ keyboard : false }) // i hoʻomaka me ka ʻole o ka papa keyboard     
$ ( "#myModal" ). modal ( 'hōʻike' ) // hoʻomaka a kāhea koke i ka hōʻike                

Hōʻike pū kēlā me kēia plugin i kāna mea kūkulu maka ma kahi waiwai ʻo `Constructor`: $.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').

ʻ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 . pihi . noConflict () // hoʻihoʻi $.fn.button i ka waiwai i hāʻawi mua ʻia 
$ . fn . bootstrapBtn = bootstrapButton             // hāʻawi $().bootstrapBtn i ka hana bootstrap

Nā hanana

Hāʻawi ʻo Bootstrap i nā hanana maʻamau no ka hapa nui o nā hana kūʻokoʻa o ka plugin. ʻO ka mea maʻamau, hele mai kēia ma 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 ʻo kona ʻano participle i hala (ex. shown) ke hoʻomaka i ka pau ʻana o kahi hana.

Hāʻawi nā hanana infinitive āpau i ka hana preventDefault. 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' ). ma ( 'hōʻike' , hana ( e ) {   
    inā (! ʻikepili ) hoʻihoʻi e . preventDefault () // ho'ōki i ka hōʻike ʻana i ka modal   
})

E pili ana i nā hoʻololi

No nā hopena hoʻololi maʻalahi, e hoʻokomo i ka bootstrap-transition.js me nā faila JS ʻē aʻe. Inā ʻoe e hoʻohana nei i ka bootstrap.js i hōʻuluʻulu ʻia, ʻaʻohe pono e hoʻokomo i kēia—aia ma laila.

Hoʻohana i nā hihia

ʻO kekahi mau hiʻohiʻona o ka plugin transition:

• Hehe a mae paha i nā modals
• ʻO ka pau ʻana o nā papa
• ʻO nā makaʻala e nalowale ana
• ʻO nā ʻaoʻao carousel sliding

Nā laʻana

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.

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 = "ʻalo huna kālā" > 
  <div class = "modal-header" > 
    < ʻano kī = "pāpā" papa = "kokoke" data-dismiss = "modal" aria-huna = "ʻoiaʻiʻo" > & manawa; </ pihi>    
    <h3> Ke poʻo kumu </h3>
  </div>
  <div class = "modal-body" > 
    <p> Hoʻokahi kino maikaʻi… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Pani </a>  
    <a href = "#" class = "btn btn-primary" > E mālama i nā hoʻololi </a>  
  </div>
</div>

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.

<!-- Pākuʻi e hoʻomaka i ke ʻano -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Hoʻokuʻu i ke ʻano demo </a>    
 
<!-- Modal -->
<div id = "myModal" class = "mode huna fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-huna = "ʻoiaʻiʻo" >      
  <div class = "modal-header" > 
    < ʻano kī = "pāpā" papa = "kokoke" data-dismiss = "modal" aria-huna = "ʻoiaʻiʻo" > × </ pihi>    
    <h3 id = "myModalLabel" > Poʻomanaʻo kumu </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Hoʻokahi kino maikaʻi… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "ʻoiaʻiʻo" > pani </ pihi>   
    <button class = "btn btn-primary" > E mālama i nā loli </button> 
  </div>
</div>

Hoʻohana

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

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

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

$ ( '#myModal' ). ʻano ({
  keyboard : wahahee 
})

.modal('hoʻololi')

Hoʻololi lima i kahi ʻano.

$ ( '#myModal' ). modal ( 'hoʻololi' )

.modal('hōʻike')

Wehe lima ia i kahi modal.

$ ( '#myModal' ). modal ( 'hōʻike' )

.modal('huna')

Hūnā lima ʻia kahi ʻano.

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

Nā hanana

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

$ ( '#myModal' ). ma ( 'huna' , hana () {   
  // hana i kekahi mea…
})

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

Hoʻohana

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" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Dropdown trigger </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

No ka mālama pono ʻana i nā URL, e hoʻohana i ke data-targetʻano ma kahi o href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    hāʻule iho
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Ma o JavaScript

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

$ ( '.dropdown-toggle' ). hāʻule iho ()

Nā koho

ʻAʻohe

Nā ʻano hana

$().dropdown('hoʻololi')

ʻO kahi api papahana no ka hoʻololi ʻana i nā menus no kahi hoʻokele hoʻokele i hāʻawi ʻia.

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

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 wale data-spy="scroll"i ka mea āu e makemake ai e mākaʻikaʻi (ʻo ka mea maʻamau ʻo ia ke kino) a data-target=".navbar"koho i ka nav e hoʻohana ai. Makemake ʻoe e hoʻohana i ka scrollspy me kahi ʻāpana .nav.

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

Ma o JavaScript

Kāhea i ka scrollspy ma o JavaScript:

$ ( '#navbar' ). scrollspy ()

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"]' ). kēlā me kēia ( hana () {  
  var $spy = $ ( keia ). 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

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.

Hoʻohana

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

$ ( '#myTab a' ). kaomi ( hana ( e ) {  
  e . preventDefault ();
  $ ( keia ). tab ( 'hōʻike' );
})

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

$ ( '#myTab a[href="#profile"]' ). tab ( 'hōʻike' ); // E koho i ka papa ma ka inoa 
$ ( '#myTab a:mua' ). tab ( 'hōʻike' ); // E koho i ka papa mua 
$ ( '#myTab a:hope' ). tab ( 'hōʻike' ); // E koho i ka papa hope 
$ ( '#myTab li:eq(2) a' ). tab ( 'hōʻike' ); // Koho i ka papa ʻekolu (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.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profile </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Nā memo </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Nā hoʻonohonoho </a></li>  
</ul>

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.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profile </a></li> 
  <li><a href = "#messages" > Nā memo </a></li> 
  <li><a href = "#settings" > Nā hoʻonohonoho </a></li> 
</ul>
 
<div class = "ʻaoʻao-papa" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "nā hoʻonohonoho" > ... </div>  
</div>
 
<script>
  $ ( hana () {  
    $ ( '#myTab a:hope' ). tab ( 'hōʻike' );
  })
</script>

Nā hanana

$ ( 'a[data-toggle="tab"]' ). ma ( 'hōʻike' , hana ( e ) {   
  e . pahu hopu // i hoʻāla ʻia
  e . relatedTarget // tab mua
})

Nā laʻana

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.

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

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

ʻEhā kuhikuhi

Nā mea kōkua ma nā pūʻulu hoʻokomo

I ka hoʻohana ʻana i nā hāmeʻa a me nā popovers me nā pūʻulu komo Bootstrap, pono ʻoe e hoʻonohonoho i ke containerkoho (i kākau ʻia ma lalo) e pale i nā hopena ʻaoʻao makemake ʻole.

Hoʻohana

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

$ ( '#example' ). mea kōkua ( koho )

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

Markup

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > lele ma luna oʻu </a>   

Nā ʻano hana

$().mea hana (koho)

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

.tooltip('hōʻike')

Hōʻike i ka ʻōlelo kōkua o kahi mea.

$ ( '#element' ). mea kōkua ( 'hōʻike' )

.tooltip('huna')

Hūnā i ka ʻōlelo aʻoaʻo mea paahana.

$ ( '#element' ). mea kōkua ( 'huna' )

.tooltip('hoʻololi')

Hoʻololi i ka ʻōlelo kōkua o kekahi mea.

$ ( '#element' ). mea kōkua ( 'hoʻololi' )

.tooltip('destroy')

Hūnā a hoʻopau i ka mea paahana o kahi mea.

$ ( '#element' ). mea hana ( 'hoʻopau' )

Nā laʻana

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. E kau ma luna o ke pihi e hoʻomaka i ka popover. Pono e hoʻokomo ʻia i ka Tooltip .

Paʻa popover

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

ʻAʻohe māka i hōʻike ʻia ma ke ʻano he popovers i hana ʻia mai JavaScript a me ka ʻike i loko o kahi dataʻano.

Demo ola

ʻEhā kuhikuhi

Hoʻohana

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

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

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

Markup

No nā kumu hana, ua koho ʻia ka Tooltip a me Popover data-apis.

Nā ʻano hana

$().popover(koho)

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

.popover('hōʻike')

Hōʻike i kahi mea popover.

$ ( '#element' ). popover ( 'hōʻike' )

.popover('huna')

Hūnā i ka popover element.

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

.popover('hoʻololi')

Hoʻololi i ka popover element.

$ ( '#element' ). popover ( 'hoʻololi' )

.popover('destroy')

Huna a luku i ka popover o kekahi mea.

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

Hoʻolaha laʻana

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

Hoʻohana

E ʻae i ka wehe ʻana i kahi makaʻala ma o JavaScript:

$ ( ".alert" ). makaʻala ()

Markup

E hoʻohui wale data-dismiss="alert"i kāu pihi pani e hāʻawi ʻakomi i kahi hana kokoke.

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

Nā ʻano hana

$().alert()

Hoʻopili i nā mākaʻikaʻi āpau me ka hana kokoke. I mea e hoʻolalelale ai kāu mau makaʻala i ka wā i pani ʻia ai, e ʻike pono ua pili ka papa .fadea me .inka papa iā lākou.

.alert('kokoke')

Pani i kahi makaʻala.

$ ( ".alert" ). makaʻala ( 'close' )

Nā hanana

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

$ ( '#my-alert' ). hoʻopaʻa ( 'pani ' , hana () {   
  // hana i kekahi mea…
})

Hoʻohana laʻana

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.

<button type = "button" class = "btn btn-primary" data-loading-text = "Ke hoʻouka nei..." > Moku'āina hoʻouka </button>   

Hoʻololi hoʻokahi

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

<pākuʻi type = "kī" class = "btn btn-primary" data-toggle = "button" > Hoʻokahi Toggle </button>   

Pahu koho

Pākuʻi data-toggle="buttons-checkbox"no ka hoʻololi ʻana i ke ʻano pahu pahu ma ka hui btn.

<div class = "btn-group" data-toggle = "nā pihi-pahu" >  
  < ʻano kī = "pākuʻi" papa = "btn btn-mua" > hema </ pihi>  
  < ʻano kī = "pākuʻi" papa = "btn btn-kumu mua" > Waena </ pihi>  
  < ʻano kī = "pākuʻi" papa = "btn btn-kumu mua" > ʻĀkau </ pihi>  
</div>

Lekiō

Hoʻohui data-toggle="buttons-radio"no ka hoʻololi ʻana i ke ʻano lekiō ma ka hui btn.

<div class = "btn-group" data-toggle = "nā pihi-radio" >  
  < ʻano kī = "pākuʻi" papa = "btn btn-mua" > hema </ pihi>  
  < ʻano kī = "pākuʻi" papa = "btn btn-kumu mua" > Waena </ pihi>  
  < ʻano kī = "pākuʻi" papa = "btn btn-kumu mua" > ʻĀkau </ pihi>  
</div>

Hoʻohana

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

$ ( '.nav-tabs' ). pihi ()

Markup

Hoʻohui ʻia nā ʻikepili ʻikepili i ka plugin pihi. E nānā i ka code code ma lalo no nā ʻano markup like ʻole.

Nā koho

ʻAʻohe

Nā ʻano hana

pihi $().('hoʻololi')

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

< ʻano kī = "pāpā" papa = "btn" data-toggle = "pāpā" > … </ pihi>    

pihi $().('hoʻouka')

Hoʻonohonoho i ke kūlana pihi i ka hoʻouka ʻana - hoʻopau i ke pihi a hoʻololi i ke kikokikona i ka hoʻouka ʻana i ke kikokikona. Pono e wehewehe ʻia ka hoʻouka ʻana i ke kikokikona ma ka ʻāpana pihi me ka hoʻohana ʻana i ke ʻano ʻikepili data-loading-text.

<button type = "button" class = "btn" data-loading-text = "hoʻouka mea..." > ... </ pihi>    

pihi $().('reset')

Hoʻoponopono hou i ke kūlana pihi - hoʻololi i ke kikokikona i ka kikokikona kumu.

$(). pihi(string)

Hoʻihoʻi hou i ke kūlana pihi - hoʻololi i ke kikokikona i kekahi kūlana kikokikona i wehewehe ʻia.

< ʻano kī = "kī" papa = "btn" data-complete-text = "ua pau!" > ... </ pihi>    
<script>
  $ ( '.btn' ). pihi ( 'complete' )
</script>

E pili ana

E kiʻi i nā ʻano kumu a me ke kākoʻo maʻalahi no nā mea hiki ke hoʻoheheʻe ʻia e like me nā accordions a me ka hoʻokele.

* Pono e hoʻokomo i ka plugin Transitions.

Laʻana accordion

Ke hoʻohana nei i ka collapse plugin, kūkulu mākou i kahi widget style accordion maʻalahi:

<div  class = "accordion" id = "accordion2" > 
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse"    data-parent = "#accordion2" href = "#collapseOne" > 
        ʻImimi hui hiki ke ʻohi ʻia #1
      </a>
    </div>
    <div id =  "collapseOne" class = "accordion-body collapse in" > 
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div papa = "accordion-group" >
    <div papa = "accordion-heading" >
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2"     href = "#collapseTwo" >
        ʻImimi hui hiki ke hoʻopili ʻia #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body collapse"   >
      <div papa = "accordion-inner" >
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Hiki iā ʻoe ke hoʻohana i ka plugin me ka ʻole o ka accordion markup. E hana i kahi pihi hoʻololi i ka hoʻonui ʻana a me ka hāʻule ʻana o kekahi mea ʻē aʻe.

< ʻano kī = "pāpā" papa = "btn btn-pilikia" data- toggle = "hōʻuluʻulu " data-target = "#demo" >    
  maʻalahi hiki ke collapsible
</ pihi>
 
<div id = "demo" class = "collapse in" > … </div>  

Hoʻohana

Ma o nā hiʻohiʻona ʻikepili

E hoʻohui wale data-toggle="collapse"a me ka mea data-targeti ka mea e hoʻonoho ʻakomi i ka mana o kahi mea hiki ke collapsible. ʻAe ke data-targetʻano i kahi 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" ). hāʻule ()

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

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

$ ( '#myCollapsible' ). hāʻule ({
  hoololi : wahahee 
})

.collapse('toggle')

Hoʻololi i kahi mea hiki ke hōʻike ʻia a hūnā ʻia paha.

.collapse('hōʻike')

Hōʻike i kahi mea hiki ke collapsible.

.collapse('huna')

Hūnā i kahi mea hiki ke collapsible.

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' ). ma ( 'huna' , hana () {   
  // hana i kekahi mea…
})

Laʻana carousel

Hōʻike ka kiʻi kiʻiʻoniʻoni ma lalo nei i kahi plugin maʻamau a me kahi mea no ka holo kaʻa i nā mea like me kahi carousel.

Lepili liʻiliʻi mua

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida and eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "carousel slide" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Nā mea Carousel -->
  <div class = "carousel-inner" > 
    <div class = "mea hana" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Hoʻohana

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 lele ana i ke kūlana paheʻe i kahi kuhikuhi kikoʻī e hoʻomaka ana me 0.

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 JavaScriptz. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-interval="".

Nā ʻano hana

.carousel(koho)

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

$ ( '.carousel' ). carousel ({
  kaawale : 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(helu)

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.

Laʻana

ʻO kahi plugin maʻalahi i hoʻonui ʻia no ka hana wikiwiki ʻana i nā typeaheads nani me nā ʻano kikokikona.

<input type = "text" data-provide = "typeahead" >  

Makemake ʻoe e hoʻonohonoho autocomplete="off"i ka pale ʻana i nā menus browser paʻamau mai ka ʻike ʻia ʻana ma luna o ka hāʻule ʻana o Bootstrap typeahead.

Hoʻohana

Ma o nā hiʻohiʻona ʻikepili

Hoʻohui i nā hiʻohiʻona ʻikepili e hoʻopaʻa inoa i kahi mea me ka hana typeahead e like me ka hōʻike ʻana ma ka laʻana ma luna.

Ma o JavaScript

Kāhea lima ʻia ke poʻo kikokiko me:

$ ( '.typeahead' ). poʻomanaʻo ()

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

Nā ʻano hana

.typeahead(koho)

Hoʻomaka i kahi hoʻokomo me kahi poʻo kikokiko.

Laʻana

ʻO ka subnavigation ma ka hema he demo ola o ka plugin affix.

Hoʻohana

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. A laila e hoʻohana i nā offsets e wehewehe i ka wā e hoʻololi ai i ka paʻi ʻana o kahi mea a i ʻole.

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

Ma o JavaScript

Kāhea i ka plugin affix ma o JavaScript:

$ ( '#navbar' ). hoʻopili ()

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