Javascript no Bootstrap

E hoʻolaʻa i nā ʻāpana o Bootstrap—i kēia manawa me 12 mau plugins jQuery maʻamau.

Modal

ʻO kahi maʻalahi, akā maʻalahi, e lawe i ka plugin javascript modal kuʻuna me ka liʻiliʻi o ka hana pono a me nā paʻamau akamai.

Nā hāʻule iho

Hoʻohui i nā menus dropdown i nā mea āpau ma Bootstrap me kēia plugin maʻalahi. Hāʻawi ʻo Bootstrap i ke kākoʻo papa kuhikuhi piha i ka navbar, tabs, a me nā pila.

Scrollspy

E hoʻohana i ka scrollspy e hoʻohou i nā loulou i kāu navbar e hōʻike i ka loulou hana o kēia manawa ma muli o ke kūlana ʻōwili.

Nā pā hiki ke hoʻololi

E hoʻohana i kēia plugin no ka hoʻohana ʻana i nā ʻaoʻao a me nā pila ma o ka ʻae ʻana iā lākou e hoʻololi i nā pane tabable o ka ʻike kūloko.

Mea kōkua

He mea hou i ka jQuery Tipsy plugin, Tooltips ʻaʻole hilinaʻi i nā kiʻi-hoʻohana lākou i ka CSS3 no nā animations a me nā ʻano ʻikepili no ka mālama ʻana i nā inoa kūloko.

Poovers *

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.

* Pono e hoʻokomo i nā mea hana

Nā memo makaʻala

ʻO ka plugin alert kahi papa liʻiliʻi no ka hoʻohui ʻana i nā hana kokoke i nā makaʻala.

Nā pihi

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.

Hāneʻe

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.

Carousel

E hana i kahi ʻoluʻolu o nā ʻike āu e makemake ai e hāʻawi i kahi kiʻi kiʻiʻoniʻoni pili o ka ʻike.

ʻAno mua

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

Nā hoʻololi *

No nā hopena hoʻololi maʻalahi, e hoʻokomo i ka bootstrap-transition.js i hoʻokahi manawa e paheʻe i nā modals a i ʻole e hoʻopau i nā makaʻala.

* Pono no ka animation i nā plugins

Nā poʻo i luna! Pono nā plugins javascript āpau i ka mana hou o jQuery.

E pili ana i nā modals

ʻO kahi maʻalahi, akā maʻalahi, e lawe i ka plugin javascript modal kuʻuna me ka liʻiliʻi o ka hana pono a me nā paʻamau akamai.

Hoʻoiho i ka faila

Laʻana paʻa

Aia ma lalo kahi ʻano hoʻohālike statically.

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.

E hoʻokuʻu i ka mod demo

Ke hoʻohana nei i ka bootstrap-modal

Kāhea i ka modal ma o javascript:

  1. $ ( '#myModal' ). modal ( koho )

Nā koho

inoa ʻano ʻano paʻamau wehewehe
kāʻei kua boolean ʻ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.

Markup

Hiki iā ʻoe ke hoʻoikaika i nā modals ma kāu ʻaoʻao me ka ʻole e kākau i hoʻokahi laina o javascript. Hoʻonoho wale ʻia data-toggle="modal"ma kahi mea hoʻoponopono me kahi a i data-target="#foo"ʻole href="#foo"e pili ana i kahi id element modal, a ke kaomi ʻia, e hoʻomaka ia i kāu modal.

Eia kekahi, no ka hoʻohui ʻana i nā koho i kāu laʻana modal, e hoʻopili wale iā lākou ma ke ʻano he ʻikepili ʻikepili hou aʻe ma ka mea mana a i ʻole ka markup modal ponoʻī.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Launch Modal </a>
  1. <div class = "huna huna" id = "myModal" >
  2. <div class = "modal-header" >
  3. < ʻano kī = "pāpā" papa = "kokoke" data-dismiss = "modal" > × </ pihi>
  4. <h3> Ke poʻo kumu </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Hoʻokahi kino maikaʻi… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Pani </a>
  11. <a href = "#" class = "btn btn-primary" > E mālama i nā hoʻololi </a>
  12. </div>
  13. </div>
Nā poʻo i luna! Inā makemake ʻoe i kāu modal e animate i loko a i waho, e hoʻohui wale i kahi .fadepapa i ka .modalelement (e nānā i ka demo e ʻike i kēia i ka hana) a hoʻokomo i ka bootstrap-transition.js.

Nā ʻano hana

.modal(koho)

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

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

.modal('hoʻololi')

Hoʻololi lima i kahi ʻano.

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

.modal('hōʻike')

Wehe lima ia i kahi modal.

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

.modal('huna')

Hūnā lima ʻia kahi ʻano.

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

Nā hanana

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

Hanana wehewehe
hōʻike Hoʻomaka koke kēia hanana i ke showkāhea ʻia ʻana o ke ʻano hana.
hōʻike ʻia Hoʻopau ʻia kēia hanana i ka wā i ʻike ʻia ai ka modal e ka mea hoʻohana (e kali no ka hoʻopau css e hoʻopau).
huna Hoʻopau koke ʻia kēia hanana i ka wā hidei kāhea ʻia ai ke ʻano hana.
hunaia 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).
  1. $ ( '#myModal' ). ma ( 'huna' , hana () {
  2. // hana i kekahi mea…
  3. })

ʻO ka plugin ScrollSpy no ka hoʻonui ʻokoʻa ʻana i nā pahuhopu nav e pili ana i ke kūlana scroll.

Hoʻoiho i ka faila

Laʻana navbar me scrollspy

E ʻōwili i ka ʻāpana ma lalo a e nānā i ka hōʻano hou o ka hoʻokele. E hōʻike ʻia nā mea kikoʻī i lalo. E ho'āʻo!

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


Ke hoʻohana nei i ka bootstrap-scrollspy.js

Kāhea i ka scrollspy ma o javascript:

  1. $ ( '#navbar' ). scrollspy ()

Markup

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 ka mea maʻamau ʻo ia ke kino).

  1. <body data-spy = "scroll" > ... </body>
Nā poʻo i luna! 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 i loko o ka dom e like me <div id="home"></div>.

Nā ʻano hana

.scrollspy('refresh')

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

  1. $ ( '[data-spy="scroll"]' ). kēlā me kēia ( hana () {
  2. var $spy = $ ( keia ). scrollspy ( 'refresh' )
  3. });

Nā koho

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

Hanana wehewehe
hoʻoikaika Hoʻomaka kēia hanana i ka wā e hoʻāla ʻia ai kahi mea hou e ka scrollspy.

Hoʻohui kēia plugin i ka wikiwiki, dynamic tab a me ka hana pila no ka hoʻololi ʻana ma o ka ʻike kūloko.

Hoʻoiho i ka faila

Nā pahu laʻana

Kaomi i nā ʻaoʻao ma lalo nei e hoʻololi i waena o nā pane huna, ʻoiai ma o nā papa kuhikuhi.

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


Ke hoʻohana nei i ka bootstrap-tab.js

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

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

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

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'hōʻike' ); // E koho i ka papa ma ka inoa
  2. $ ( '#myTab a:mua' ). tab ( 'hōʻike' ); // E koho i ka papa mua
  3. $ ( '#myTab a:hope' ). tab ( 'hōʻike' ); // E koho i ka papa hope
  4. $ ( '#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 ai i ke kāʻei ʻana i ka bootstrap tab.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Home </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profile </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Nā memo </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Nā hoʻonohonoho </a></li>
  6. </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.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Home </a></li>
  3. <li><a href = "#profile" > Profile </a></li>
  4. <li><a href = "#messages" > Nā memo </a></li>
  5. <li><a href = "#settings" > Nā hoʻonohonoho </a></li>
  6. </ul>
  7.  
  8. <div class = "ʻaoʻao-papa" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "nā hoʻonohonoho" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( hana () {
  17. $ ( '#myTab a:hope' ). tab ( 'hōʻike' );
  18. })
  19. </script>

Nā hanana

Hanana wehewehe
hōʻike 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 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).
  1. $ ( 'a[data-toggle="tab"]' ). ma ( 'hōʻike' , hana ( e ) {
  2. e . pahu hopu // i hoʻāla ʻia
  3. e . relatedTarget // tab mua
  4. })

E pili ana i nā mea kōkua

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ā inoa kūloko.

Hoʻoiho i ka faila

Laʻana hoʻohana ʻana i Tooltips

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.


Ke hoʻohana nei i ka bootstrap-tooltip.js

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

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

Nā koho

inoa ʻano ʻano paʻamau wehewehe
hoʻouluulu boolean ʻoiaʻiʻo e hoʻopili i kahi hoʻololi css fade i ka mea hana
hoʻokomo kaula|hana 'luna' pehea e hoʻonoho ai i ka mea hana - top | lalo | waiho | akau
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.
inoa kaula | hana '' ka waiwai poʻo inoa paʻamau inā ʻaʻole i loaʻa ka tag `title`
hoʻomaka kaulahao 'hover' pehea ka hoʻomaka ʻana o ka mea hana - hover | kālele | manual
lohi helu | mea 0

hoʻokaʻulua i ka hōʻike ʻana a hūnā i ka mea hana (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 }

Nā poʻo i luna! Hiki ke koho ʻia nā koho no nā ʻōlelo aʻoaʻo hoʻokahi ma o ka hoʻohana ʻana i nā ʻano ʻikepili.

Markup

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

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

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

.tooltip('huna')

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

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

.tooltip('hoʻololi')

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

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

E pili ana i nā popovers

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.

* Pono e hoʻokomo ʻia ka mea hana

Hoʻoiho i ka faila

Laʻana hover popover

E kau ma luna o ke pihi e hoʻomaka i ka popover.


Ke hoʻohana nei i ka bootstrap-popover.js

E hoʻā i nā popovers ma o javascript:

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

Nā koho

inoa ʻano ʻano paʻamau wehewehe
hoʻouluulu boolean ʻoiaʻiʻo e hoʻopili i kahi hoʻololi css fade i ka mea hana
hoʻokomo kaula|hana 'akau' pehea e hoʻonoho ai i ka popover - top | lalo | waiho | akau
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
hoʻomaka kaulahao 'hover' pehea ka hoʻomaka ʻana o ka mea hana - hover | kālele | manual
inoa kaula | hana '' ka waiwai poʻo inoa paʻamau inā ʻaʻole i loaʻa ke ʻano `title`
maʻiʻo kaula | hana '' waiwai maʻiʻo paʻamau inā ʻaʻole i loaʻa ke ʻano `data-content`
lohi helu | mea 0

hoʻokaʻulua i ka hōʻike ʻana a hūnā 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 }

Nā poʻo i luna! Hiki ke koho ʻia nā koho no nā popovers pākahi ma o ka hoʻohana ʻana i nā ʻano ʻikepili.

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.

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

.popover('huna')

Hūnā i ka popover element.

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

.popover('hoʻololi')

Hoʻololi i ka popover element.

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

E pili ana i nā makaʻala

ʻO ka plugin alert kahi papa liʻiliʻi no ka hoʻohui ʻana i nā hana kokoke i nā makaʻala.

Hoʻoiho

Hoʻolaha laʻana

Hoʻohana ka plugin alerts i nā memo makaʻala maʻamau, a poloka i nā memo.

Guacamole hemolele! ʻO ka nānā maikaʻi iā ʻoe iho, ʻaʻole maikaʻi ʻoe.

ʻŌ! Loaʻa iā ʻoe kahi hewa!

E hoʻololi i kēia a me kēlā a hoʻāʻo hou. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus noho amet fermentum.

E lawe i kēia hana A i ʻole e hana i kēia


Ke hoʻohana nei i ka bootstrap-alert.js

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

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

Markup

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

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

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

Hanana wehewehe
pili Hoʻomaka koke kēia hanana i ke closekāhea ʻia ʻana o ke ʻano hana.
pani ʻia Hoʻopau ʻia kēia hanana i ka wā i pani ʻia ai ka makaʻala (e kali no ka hoʻololi ʻana o css).
  1. $ ( '#my-alert' ). hoʻopaʻa ( 'pani ' , hana () {
  2. // hana i kekahi mea…
  3. })

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

Hoʻoiho i ka faila

Hoʻohana laʻana

E hoʻohana i nā pihi pihi no nā mokuʻāina a me nā hoʻololi.

Stateful
Hoʻololi hoʻokahi
Pahu koho
Lekiō

Ke hoʻohana nei i ka bootstrap-button.js

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

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

  1. <!-- Hoʻohui i ka data-toggle="button" no ka hoʻāla ʻana i ke pihi hoʻokahi -->
  2. <pāpā pāʻani = " btn" data-toggle = "pākuʻi" > Hoʻololi hoʻokahi </ pihi>
  3.  
  4. <!-- Hoʻohui i ka data-toggle="buttons-checkbox" no ke kaila pahu pahu e huli ana ma ka btn-group -->
  5. <div class = "btn-group" data-toggle = "nā pihi-pahu" >
  6. <Pōʻihi papa = "btn" > Hema </ pihi>
  7. <button class = "btn" > Middle </button>
  8. <button class = "btn" > Akau </ pihi>
  9. </div>
  10.  
  11. <!-- Hoʻohui i ka data-toggle="buttons-radio" no ka hoʻololi ʻana i ke ʻano lekiō ma btn-group -->
  12. <div class = "btn-group" data-toggle = "nā pihi-radio" >
  13. <Pōʻihi papa = "btn" > Hema </ pihi>
  14. <button class = "btn" > Middle </button>
  15. <button class = "btn" > Akau </ pihi>
  16. </div>

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.

Nā poʻo i luna! Hiki iā ʻoe ke hoʻololi i ke pihi ʻokoʻa me ka hoʻohana ʻana i ke data-toggleʻano.
  1. <pāpāpāpāpāho = " btn" data-toggle = "pihi" > </ 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.

  1. <button class = "btn" data-loading-text = "hoʻouka mea..." > ... </ pihi>
Nā poʻo i luna! Ke hoʻomau nei ʻo Firefox i ka mokuʻāina kīnā ma nā hoʻouka ʻaoʻao . ʻO kahi hoʻoponopono no kēia ka hoʻohana ʻana autocomplete="off".

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.

  1. <button class = "btn" data-complete-text = "ua pau!" > ... </ pihi>
  2. <script>
  3. $ ( '.btn' ). pihi ( 'complete' )
  4. </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.

Hoʻoiho i ka faila

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

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.

Ke hoʻohana nei i ka bootstrap-collapse.js

E ho'ā ma o javascript:

  1. $ ( ".collapse" ). hāʻule ()

Nā koho

inoa ʻano ʻano paʻamau wehewehe
makua mea koho wahahee Inā koho ʻia, 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. (e like me ka hana accordion kuʻuna)
hoʻololi boolean ʻoiaʻiʻo Hoʻololi i ka mea hiki ke collapsible ma ke kāhea ʻana

Markup

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.

  1. <pāpā pāʻani = " btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. maʻalahi hiki ke collapsible
  3. </ pihi>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Nā poʻo i luna! 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.

Nā ʻano hana

.collapse(koho)

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

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

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

Hanana wehewehe
hōʻike Hoʻomaka koke kēia hanana i ke showkāhea ʻia ʻana o ke ʻano hana.
hōʻike ʻia Hoʻopau ʻia kēia hanana i ka wā i ʻike ʻia ai kahi mea hāʻule i ka mea hoʻohana (e kali no ka pau ʻana o nā hoʻololi css).
huna Hoʻopau koke ʻia kēia hanana ke hidekāhea ʻia ke ʻano.
hunaia Hoʻopau ʻia kēia hanana i ka wā i hūnā ʻia ai kahi mea hāʻule mai ka mea hoʻohana (e kali i ka hoʻololi ʻana o css).
  1. $ ( '#myCollapsible' ). ma ( 'huna' , hana () {
  2. // hana i kekahi mea…
  3. })

E pili ana

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

Hoʻoiho i ka faila

Laʻana

E hoʻomaka i ka paʻi ʻana ma ke kahua ma lalo nei e hōʻike i nā hualoaʻa typeahead.


Ke hoʻohana nei i ka bootstrap-typeahead.js

Kāhea i ka typeahead ma o javascript:

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

Nā koho

inoa ʻano ʻano paʻamau wehewehe
kumu pūʻulu [ ] ʻO ke kumu ʻikepili e nīnau ai.
mau mea helu 8 Ka helu kiʻekiʻe o nā mea e hōʻike ʻia ma ka hāʻule iho.
mea hoʻokūkū hana hihia ʻole ʻO ke ala i hoʻohana ʻia e hoʻoholo ai inā pili kekahi nīnau i kahi mea. ʻAe ʻo ia i kahi hoʻopaʻapaʻa hoʻokahi, ʻo itemia ka mea e hoʻāʻo ai i ka nīnau. E komo i ka nīnau o kēia manawa me this.query. E hoʻihoʻi i kahi boolean trueinā pili ka nīnau.
mea hoʻokaʻawale hana kūlike pololei,
hihia pili,
hihia ʻole
Hoʻohana ʻia no ka hoʻokaʻawale ʻana i nā hopena autocomplete. E ʻae i kahi hoʻopaʻapaʻa hoʻokahi itemsa loaʻa iā ia ka laulā o ka laʻana typeahead. E kuhikuhi i ka nīnau o kēia manawa me this.query.
mea hōʻailona hana hōʻike i nā pāʻani paʻamau a pau Hoʻohana ʻia ke ʻano no ka hōʻike ʻana i nā hopena autocomplete. E ʻae i kahi hoʻopaʻapaʻa hoʻokahi itema loaʻa iā ia ka laulā o ka laʻana typeahead. Pono e hoʻihoʻi i ka html.

Markup

Hoʻohui i nā hiʻohiʻona ʻikepili e hoʻopaʻa inoa i kahi mea me ka hana typeahead.

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

Nā ʻano hana

.typeahead(koho)

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