Hoʻokahi a i hui pū ʻia

Inā ua hoʻoiho ʻoe i ka mana hou loa o Bootstrap, aia nā bootstrap.js a me bootstrap.min.js i nā plugins āpau i helu ʻia ma kēia ʻaoʻao.

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 kūikawā, e hoʻopili wale i ka inoa plugins 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 ʻia kēlā me kēia plugin i kāna mea kūkulu maka ma kahi waiwai `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').

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 ʻia ai ka infinitive (ex. show) i ka hoʻomaka ʻana o kahi hanana, a ʻo ia ka puka 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ʻōki 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 pū 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ʻe a mae paha i nā modals
• Ke hoʻopau nei i nā papa
• ʻO nā makaʻala e nalowale ana
• ʻO nā pani 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 ka modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Hoʻokuʻu i ke ʻano demo </a>    
 
<-- Modal -->
<div class = "modal" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "ʻ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" > Ke poʻ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 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ā pila.

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

He polokalamu api no ka ho'āla ʻ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 kiu (ʻo ia ka mea maʻamau ʻo ke kino) a data-target=".navbar"e 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ā papa 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 ʻole o ke kākau ʻ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 kahi ʻāpana tab a me kahi pahu 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ʻia' , 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.

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

ʻEhā kuhikuhi

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

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

<a href = "#" rel = "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

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

Laʻana makaʻala

Hoʻohui i nā hana hoʻokuʻu i nā memo alerge 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 hoʻomalu a i ʻole hana i nā pūʻulu o nā pihi no nā ʻāpana ʻē aʻe e like me nā mea hana.

Stateful

Hoʻohui i ka 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

E hoʻohui i ka data-toggle="button" e hoʻāla i ka hoʻololi ʻana ma ke pihi hoʻokahi.

<pāpā ʻano = "pākuʻi" papa = "btn" data-toggle = "pihi" > Hoʻokahi Koli </ pihi>   

Pahu koho

E hoʻohui i ka 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" > hema </ pihi>  
  <pāpā ʻano = "pākuʻi" papa = "btn" > Waena </ pihi>  
  <pākuʻi type = "button" class = "btn" > Akau </ pihi>  
</div>

Lekiō

Hoʻohui i ka 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" > hema </ pihi>  
  <pāpā ʻano = "pākuʻi" papa = "btn" > Waena </ pihi>  
  <pākuʻi type = "button" class = "btn" > Akau </ 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 ke pihi i ke ʻano i 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 nā 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 plugin collapse, kūkulu mākou i kahi widget style accordion maʻalahi:

< ʻano kī = "pākuʻi" 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 like accordion i kahi mana collapsible, e hoʻohui i ka ʻ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 hoʻoheheʻe ʻia.

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.

Lepili kiʻi liʻiliʻi lua

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.

Lepili Thumbnail ʻekolu

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.

‹ ›

<div id = "myCarousel" class = "carousel slide" >  
  <!-- 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

...

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(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('hoʻomaha')

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

Hoʻohana

Ma o nā hiʻohiʻona ʻikepili

Hoʻohui i nā ʻano ʻ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, 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" > ... </body>  

Ma o JavaScript

Kāhea i ka plugin affix ma o JavaScript:

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

Nā ʻano hana

.affix('refresh')

I ka hoʻohana ʻana i ka affix me ka hoʻohui ʻana a i ʻole ka wehe ʻana i nā mea mai ka DOM, makemake ʻoe e kāhea i ke ʻano hoʻomaha:

$ ( '[data-spy="affix"]' ). kēlā me kēia ( hana () {  
  $ ( keia ). hoʻopili ( ' 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-top="200".