Javascript mo Bootstrap

Fa'aola vaega a Bootstrap—lea ua iai nei fa'apipi'i masani e 12 jQuery .

Modal

Ose fa'amanino, ae fetu'una'i, fa'aaoga le javascript modal plugin fa'atasi ma na'o le fa'aitiitiga mana'omia ma fa'aletonu atamai.

Pa'u i lalo

Faʻaopoopo i lalo menus i le toetoe lava o soʻo se mea i Bootstrap ma lenei faʻapipiʻi faigofie. O le Bootstrap o loʻo faʻaalia ai le lagolago atoa o le lisi i lalo i luga o le navbar, tabs, ma fualaau.

Scrollspy

Fa'aaoga le scrollspy e otometi ona fa'afou so'otaga i lau navbar e fa'aalia ai le so'otaga galue o lo'o iai nei e fa'atatau i le tulaga ta'ai.

Fa'amau e mafai ona fesuia'i

Fa'aoga lenei fa'apipi'i e fa'aoga atili ai laupepa ma pills e ala i le fa'ataga latou e fealua'i i fa'amau fa'amau o mea fa'apitonu'u.

Mea faigaluega

O se manatu fou i luga o le jQuery Tipsy plugin, Tooltips e le fa'alagolago i ata-latou te fa'aogaina le CSS3 mo fa'afiafiaga ma fa'amaumauga-uiga mo le teuina o suafa fa'apitonu'u.

Popovers *

Fa'aopoopo ni fa'aputuga laiti o mea, pei o i luga ole iPad, i so'o se elemene mo fa'amatalaga lona lua o fale.

* Manaomia meafaigaluega e faʻapipiʻi

Fa'ailoa savali

O le fa'apipi'i mataala o se vasega la'ititi mo le fa'aopoopoina o galuega fa'atino i fa'aaliga.

Fa'amau

Fai atili i fa'amau. Fa'amalo fa'aigoa po'o le fa'atupuina o vaega o fa'amau mo nisi vaega e pei o meafaigaluega.

Pa'u

Maua sitaili faavae ma lagolago fetuutuunai mo vaega malepelepe pei o akordion ma le folauga.

Carousel

Fausia se ta'amilosaga fiafia o so'o se mea e te mana'o e tu'uina atu ai se fa'ata'ita'iga fegalegaleai o mea.

Ulua'i tusi

O se mea fa'apipi'i faigofie fa'alautele mo le vave faia o mataitusi mata'itusi ma so'o se fa'aoga tusitusiga.

Suiga *

Mo a'afiaga faigofie o suiga, fa'aaofia le bootstrap-transition.js e tasi e fa'ase'e i fa'ata'ita'iga po'o fa'aliga fa'alilolilo.

* Manaomia mo animation i plugins

Ulu i luga! O fa'apipi'i javascript uma e mana'omia le lomiga fou o le jQuery.

E uiga i modals

Ose fa'amanino, ae fetu'una'i, fa'aaoga le javascript modal plugin fa'atasi ma na'o le fa'aitiitiga mana'omia ma fa'aletonu atamai.

La'u faila

Fa'ata'ita'iga tumau

O lo'o i lalo se faiga fa'atusa fa'atusa.

Live demo

Su'e se modal e ala ile javascript ile kilikiina ole ki lalo. O le a fa'ase'e ifo i lalo ma mou atu mai le pito i luga o le itulau.

Fa'alauiloa le fa'ata'ita'iga auala

Faʻaaogaina bootstrap-modal

Valaau le modal e ala i le javascript:

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

Filifiliga

Igoa ituaiga faaletonu fa'amatalaga
tuaa boolean moni E aofia ai se elemene fa'aola-backdrop. I le isi itu, fa'amaoti staticmo se fa'ata'atia e le tapuni ai le auala ile kiliki.
piano boolean moni Tapuni le auala pe a oomi le ki sola
fa'aali boolean moni Fa'aalia le faiga pe'ā amata.

Fa'ailoga

E mafai ona e faʻagaoioia modals i luga o lau itulau faigofie e aunoa ma le tusiaina o se laina se tasi o javascript. Na'o le tu'u data-toggle="modal"i luga o se elemene fa'atonutonu ma se data-target="#foo"po'o href="#foo"e fetaui ma se id elemene, ma pe a kiliki, o le a fa'alauiloa lau auala.

E le gata i lea, e faʻaopoopo filifiliga i lau faʻataʻitaʻiga faʻataʻitaʻiga, naʻo le faʻapipiʻiina o faʻamatalaga faʻamatalaga i luga ole elemene pulea poʻo le faʻailoga faʻailoga lava ia.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Launch Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Ulutala fa'atatau </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Tasi le tino lelei... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Tapuni </a>
  11. <a href = "#" class = "btn btn-primary" > Sefe suiga </a>
  12. </div>
  13. </div>
Ulu i luga! Afai e te manaʻo i lau auala e faʻaola i totonu ma fafo, naʻo le faʻaopoopoina o se .fadevasega i le .modalelemene (silasila i le demo e vaʻai i lenei gaioiga) ma aofia ai bootstrap-transition.js.

Metotia

.modal(filifiliga)

Fa'agaoioia lau anotusi e fai ma fa'ata'ita'iga. Talia se filifiliga faitalia object.

  1. $ ( '#myModal' ). auala ({
  2. piano : sese
  3. })

.modal('toggle')

Su'e ma le lima se faiga.

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

.modal('fa'aali')

Tatala ma le lima se auala.

  1. $ ( '#myModal' ). modal ( 'fa'aali' )

.modal('natia')

Natia ma le lima se auala.

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

Mea na tutupu

O le vasega fa'apitoa a Bootstrap o lo'o fa'aalia ai ni nai mea na tutupu mo le fa'aogaina o galuega fa'atino.

Mea na tupu Fa'amatalaga
fa'aali E mu vave lenei mea pe a showvalaʻau le auala faʻataʻitaʻiga.
faaalia O lenei mea na tupu e faʻamalo pe a faʻaalia le modal i le tagata faʻaoga (o le a faʻatali mo suiga css e maeʻa).
lalafi O lenei mea na tupu e faʻamalo vave pe a hidevalaʻau le auala faʻataʻitaʻiga.
natia O lenei mea e tupu pe a maeʻa ona natia le modal mai le tagata faʻaoga (o le a faʻatali mo suiga css e maeʻa).
  1. $ ( '#myModal' ). i luga ( 'natia' , galuega () {
  2. // fai se mea...
  3. })

O le ScrollSpy plugin e mo le fa'afouina otometi fa'atatau o le nav e fa'atatau i le tulaga ta'ai.

La'u faila

Faataitaiga navbar ma scrollspy

Fa'asolo le vaega o lo'o i lalo ma matamata i le fa'afouga o fa'atautaiga. O le a fa'amaninoina fo'i le fa'ailoga pito i lalo. Taumafai!

@ga'o

Ad leggings keytar, brunch id art party dolor laboure. Pitchfork yr enim lo-fi ae le'i fa'atau atu. Tumblr farm-to-table uila aia tatau po o le a lava. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui masalo e te le'i faalogo iai ma cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache laupapa, adipisicing fugiat velit pitchfork 'ava. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat fa loko nisi, ea helvetica nulla carles. Ta'u mea'ai ta'avale cosby pe'a, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

tasi

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo uila aia tatau adipisicing 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 le Vero VHS o le faʻaleleia. Consectetur nisi DIY minim avefe'au ato. Cred ex in, sustainable delectus consectetur fanny pack iphone.

lua

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 avefe'au ato marfa so'o se loli meaai. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats masalo e te le'i faalogo ia i latou consequat hoodie gluten-free lo-fi fap aliquip. Laboure elit placeat ae le'i fa'atau atu, 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.


Fa'aaogāina bootstrap-scrollspy.js

Valaau le scrollspy e ala i le javascript:

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

Fa'ailoga

Ina ia faʻafaigofie ona faʻapipiʻi le amio taʻavale i lau faʻasalalauga pito i luga, naʻo le faʻaopopo data-spy="scroll"i le elemene e te manaʻo e sipai ai (sili ona masani o le tino lea).

  1. <body data-spy = "scroll" > ... </body>
Ulu i luga! O feso'ota'iga Navbar e tatau ona i ai ni fa'ailoga id e mafai ona fo'ia. Mo se faʻataʻitaʻiga, e <a href="#home">home</a>tatau ona fetaui ma se mea i totonu o le fale e pei o <div id="home"></div>.

Metotia

.scrollspy('refresh')

A faʻaaoga le scrollspy faʻatasi ma le faʻaopoopoina poʻo le aveesea o elemene mai le DOM, e tatau ona e valaʻau le auala faʻafouina e pei o lea:

  1. $ ( '[data-spy="scroll"]' ). taitasi ( galuega ( ) {
  2. var $spy = $ ( lenei ). scrollspy ( 'refresh' )
  3. });

Filifiliga

Igoa ituaiga faaletonu fa'amatalaga
fa'apena numera 10 Pixels e fa'asolo mai luga pe a fa'atatau le tulaga o le ta'ai.

Mea na tutupu

Mea na tupu Fa'amatalaga
fa'agaoioi E mu lenei mea i so'o se taimi e fa'agaoioi ai se mea fou e le scrollspy.

O lenei mea fa'apipi'i fa'aopoopoina vave, fa'agaioiga fa'agaioiga ma piliki mo le fa'aliliuina i totonu o mea fa'apitonu'u.

La'u faila

Fa'ata'ita'iga tabs

Kiliki fa'amau o lo'o i lalo e fa'asolo i le va o fa'ailo natia, e o'o lava ile fa'aulu i lalo menus.

Raw denim masalo e te le'i fa'alogo i ai Jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Faʻafeiloaʻi i le salvia cillum iphone. Seitan aliquip quis cardigan ofu Amerika, 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.


Fa'aaogāina bootstrap-tab.js

Fa'aaga tabbable tabs e ala i le javascript (e mana'omia ona fa'agaoioia ta'itasi ta'itasi):

  1. $ ( '#myTab a' ). kiliki ( galuega ( e ) {
  2. e . preventDefault ();
  3. $ ( lenei ). tab ( 'fa'aali' );
  4. })

E mafai ona e fa'agaoioia ta'iala ta'itasi i le tele o auala:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'fa'aali' ); // Filifili le lisi ile igoa
  2. $ ( '#myTab a:muamua' ). tab ( 'fa'aali' ); // Filifili le laupepa muamua
  3. $ ( '#myTab a:muli' ). tab ( 'fa'aali' ); // Filifili le laupepa mulimuli
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'fa'aali' ); // Filifili le laupepa lona tolu (0-indexed)

Fa'ailoga

E mafai ona e fa'agaoioia se fa'ailoga po'o se pill navigation e aunoa ma le tusiaina o so'o se javascript i le na'o le fa'amaonia data-toggle="tab"po'o data-toggle="pill"luga o se elemene. O le fa'aopoopoina o le navma nav-tabsvasega i le fa'ailoga o le ula fa'aogaina ai le fa'ailoga o le bootstrap tab.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Fale </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Tala'aga </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Messages </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Seti </a></li>
  6. </ul>

Metotia

$().tab

Fa'aagaoioia se fa'ailoga elemene ma mea o lo'o i totonu. O le Tab e tatau ona i ai se data-targetpoʻo se hreffaʻatatau i se pusa pusa i le DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Home </a></li>
  3. <li><a href = "#profile" > Tala'aga </a></li>
  4. <li><a href = "#messages" > Savali </a></li>
  5. <li><a href = "#settings" > Fa'atonu </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  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 = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( galuega () {
  17. $ ( '#myTab a:muli' ). tab ( 'fa'aali' );
  18. })
  19. </script>

Mea na tutupu

Mea na tupu Fa'amatalaga
fa'aali O lenei mea na tupu e mu i luga o faʻaaliga faʻaaliga, ae leʻi faʻaalia le faʻailoga fou. Fa'aoga event.targetma event.relatedTargetfa'atatau i le ta'i ga'oi ma le fa'agaioiga muamua (pe a maua) ta'itasi.
faaalia O lenei mea e tupu e mu i luga o le faʻaaliga faʻapipiʻi pe a uma ona faʻaalia se tab. Fa'aogaevent.target ma event.relatedTargetfa'atatau i le ta'i ga'oi ma le fa'agaioiga muamua (pe a maua) ta'itasi.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'fa'aalia' , galuega ( e ) {
  2. u . sini // fa'agaoioia tab
  3. u . relatedTarget // tab muamua
  4. })

E uiga i Tooltips

Musuia e le sili jQuery.tipsy plugin tusia e Jason Frame; Tooltips o se fa'afouga fou, e le fa'alagolago i ata, fa'aoga css3 mo fa'afiafiaga, ma fa'amaumauga-uiga mo le teuina o suafa fa'apitonu'u.

La'u faila

Fa'ata'ita'iga le fa'aogaina o Tooltips

Fa'apa i luga o so'oga o lo'o i lalo e va'ai i mea faigaluega:

ofuvae fufusi isi tulaga keffiyeh masalo e te le'i fa'alogo iai. Fa'ato'aga ata 'ava fa'a denim mata'itusi vegan taga avefe'au stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit amerika ofu e iai le terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fa loko mcsweeney's cleanse vegan chambray. O se tufuga fa'atauva'a lava so'o se keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.


Fa'aaogāina bootstrap-tooltip.js

Fa'aoso le mea faigaluega e ala ile javascript:

  1. $ ( '#fa'ata'ita'iga' ). mea faigaluega ( filifiliga )

Filifiliga

Igoa ituaiga faaletonu fa'amatalaga
animation boolean moni fa'aoga se suiga e mou atu css i le mea faigaluega
tu'uga manoa|galuega 'pito' fa'afefea ona fa'atulaga le mea faigaluega - pito i luga | lalo | agavale | tauagavale
tagata filifilia manoa pepelo Afai e tu'uina atu se tagata filifilia, o mea fa'aoga meafaigaluega o le a tu'uina atu i sini fa'apitoa.
suafa manoa | galuega faatino '' fa'aigoa fa'aigoa pe afai e le o iai le pine o le 'igoa'
fa'aoso manoa 'ave'ave' pe fa'afefea ona fa'aosoina meafaigaluega - fa'afefe | taula'i | tusi lesona
tuai numera | mea faitino 0

fa'atuai ona fa'aali ma nana le mea faigaluega (ms) - e le fa'atatau ile ituaiga fa'aoso tusi

Afai e tu'uina atu se numera, fa'atuai e fa'aoga i natia/fa'aali uma

O le fausaga o mea faitino o le:delay: { show: 500, hide: 100 }

Ulu i luga! O filifiliga mo meafaigaluega ta'ito'atasi e mafai ona fa'avasegaina e ala i le fa'aogaina o uiga fa'amaumauga.

Fa'ailoga

Mo mafua'aga o fa'atinoga, o le Tooltip ma le Popover data-apis e tu'u i totonu. Afai e te mana'o e fa'aoga ia na'o le fa'atonuina o se filifiliga filifiliga.

  1. <a href = "#" rel = "tooltip" title = "first tooltip" > fa'ae'e i luga o a'u </a>

Metotia

$(). tooltip(filifiliga)

Fa'apipi'i se tu'u fa'amatalaga meafaigaluega i se aoina elemene.

.tooltip('fa'aali')

Fa'aalia le mea faigaluega o se elemene.

  1. $ ( '#elemene' ). meafaigaluega ( 'fa'aali' )

.tooltip('natia')

Natia le mea faigaluega o se elemene.

  1. $ ( '#elemene' ). meafaigaluega ( 'natia' )

.tooltip('toggle')

Su'e le pito meafaigaluega a se elemene.

  1. $ ( '#elemene' ). mea faigaluega ( ' toggle ' )

E uiga i popovers

Fa'aopoopo ni fa'aputuga laiti o mea, pei o i luga ole iPad, i so'o se elemene mo fa'amatalaga lona lua o fale.

* E manaʻomia le faʻapipiʻiina o meafaigaluega

La'u faila

Fa'aa'oa'oga fa'apa'u popover

Fa'ae'e i luga o le ki e fa'aoso ai le popover.


Fa'aaogāina bootstrap-popover.js

Fa'aaga popovers e ala ile javascript:

  1. $ ( '#fa'ata'ita'iga' ). popover ( filifiliga )

Filifiliga

Igoa ituaiga faaletonu fa'amatalaga
animation boolean moni fa'aoga se suiga e mou atu css i le mea faigaluega
tu'uga manoa|galuega 'tauagavale' fa'afefea ona fa'atulaga le popover - luga | lalo | agavale | tauagavale
tagata filifilia manoa pepelo afai e tu'uina atu se tagata filifilia, o meafaigāluega o le a tu'uina atu i fa'amoemoega fa'apitoa
fa'aoso manoa 'ave'ave' pe fa'afefea ona fa'aosoina meafaigaluega - fa'afefe | taula'i | tusi lesona
suafa manoa | galuega faatino '' fa'aigoa fa'aigoa pe a le o iai le uiga 'igoa'
anotusi manoa | galuega faatino '' le aoga o mea i totonu pe afai e le o iai le uiga o le 'data-content'
tuai numera | mea faitino 0

fa'atuai ona fa'aali ma nana le popover (ms) - e le fa'atatau ile fa'ailoga tusi tusi

Afai e tu'uina atu se numera, fa'atuai e fa'aoga i natia/fa'aali uma

O le fausaga o mea faitino o le:delay: { show: 500, hide: 100 }

Ulu i luga!O filifiliga mo popovers ta'ito'atasi e mafai ona fa'amaonia e ala i le fa'aogaina o uiga fa'amaumauga.

Fa'ailoga

Mo mafua'aga o fa'atinoga, o le Tooltip ma le Popover data-apis e tu'u i totonu. Afai e te mana'o e fa'aoga ia na'o le fa'atonuina o se filifiliga filifiliga.

Metotia

$().popover(filifiliga)

E amata popovers mo se aoina elemene.

.popover('fa'aali')

Fa'aalia se fa'apipi'i elemene.

  1. $ ( '#elemene' ). popover ( 'fa'aali' )

.popover('natia')

Natia se fa'apipi'i elemene.

  1. $ ( '#elemene' ). popover ( 'natia' )

.popover('toggle')

Fa'asolo i luga o se elemene fa'apipi'i.

  1. $ ( '#elemene' ). popover ( 'toggle' )

E uiga i mataala

O le fa'apipi'i mataala o se vasega la'ititi mo le fa'aopoopoina o galuega fa'atino i fa'aaliga.

La'u mai

Faataitaiga mataala

O le fa'apipi'i fa'alilolilo e galue i fe'au mataala masani, ma poloka fe'au.

Guacamole paia! E sili le siaki ia oe lava, e te le o lelei tele.

Oi vave! Ua e sese!

Suia lea mea ma lena ma toe taumafai. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Fai lenei gaioiga Pe fai le mea lea


Fa'aaogāina bootstrap-alert.js

Fa'ataga le fa'ate'aina o se mataala e ala i le javascript:

  1. $ ( ".alert" ). mataala ()

Fa'ailoga

Na'o le fa'aopoopo data-dismiss="alert"i lau ki tapuni e otometi ai ona tu'uina atu se fa'agaioiga vavalalata mataalia.

  1. <a vasega = "close" data-dismiss = "alert" href = "#" > &taimi; </a>

Metotia

$().alert()

Ta'i fa'alilolilo uma fa'atasi ma fa'atinoga vavalalata. Ina ia fa'aoso au fa'ailo pe a tapuni, ia mautinoa o lo'o i ai le .fadema .inle vasega ua uma ona fa'aoga ia i latou.

.alert('tapuni')

Tapuni se mataala.

  1. $ ( ".alert" ). mataala ( 'tapuni' )

Mea na tutupu

O le vasega mataala a Bootstrap o lo'o fa'aalia ni nai mea na tutupu mo le fa'aogaina i galuega mataala.

Mea na tupu Fa'amatalaga
tapunia E mu vave lenei mea pe a closevalaʻau le auala faʻataʻitaʻiga.
tapuni O lenei mea e tupu pe a tapunia le mataala (o le a faʻatali mo suiga css e maeʻa).
  1. $ ( '#my-alert' ). fusifusia ( 'tapuni' , galuega () {
  2. // fai se mea...
  3. })

E uiga i

Fai atili i fa'amau. Fa'amalo fa'aigoa po'o le fa'atupuina o vaega o fa'amau mo nisi vaega e pei o meafaigaluega.

La'u faila

Fa'ata'ita'iga fa'aoga

Fa'aoga le fa'amau fa'amau mo setete ma solo.

Fa'atutonu
Kilo tasi
Pusa siaki
Leitio

Fa'aaogāina bootstrap-button.js

Fa'aaga fa'amau e ala ile javascript:

  1. $ ( '.nav-tabs' ). faamau ()

Fa'ailoga

O uiga fa'amaumauga e tu'ufa'atasia i le fa'amau fa'amau. Siaki le faʻataʻitaʻiga code i lalo mo ituaiga faʻailoga eseese.

  1. <!-- Fa'aopoopo le data-toggle="button" e fa'agaoioi ai le so'ona i luga o le fa'amau e tasi -->
  2. <button class = "btn" data-toggle = "button" > Sui Tasi </button>
  3.  
  4. <!-- Fa'aopoopo le data-toggle="buttons-checkbox" mo le sitaili o le pusa siaki e sui i le btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Agagavale </ button>
  7. <button class = "btn" > Middle </button>
  8. <button class = "btn" > Taumatau </ button>
  9. </div>
  10.  
  11. <!-- Fa'aopoopo data-toggle="buttons-radio" mo le sitaili o le leitio o lo'o fesuia'i ile btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Agagavale </ button>
  14. <button class = "btn" > Middle </button>
  15. <button class = "btn" > Taumatau </ button>
  16. </div>

Metotia

$().button('toggle')

Togi le tulaga tulei. Tu'u atu i le ki le foliga mai ua fa'agaoioia.

Ulu i luga! E mafai ona e fa'aogaina le so'oga fa'amau o se ki i le fa'aogaina o le data-toggleuiga.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('loading')

Seti le tulaga fa'amau i le uta - fa'amalo le fa'amau ma fesuiai tusitusiga i le utaina o tusitusiga. O le utaina o tusitusiga e tatau ona faʻamalamalamaina i luga o le ki elemene e faʻaaoga ai le uiga faʻamatalaga data-loading-text.

  1. <button class = "btn" data-loading-text = "loading mea..." > ... </button>
Ulu i luga! O lo'o fa'aauau pea e Firefox le tulaga fa'aletonu i luga o uta itulau . O se fofo mo lenei mea o le faʻaaogaina autocomplete="off".

$().button('reset')

Toe setiina le tulaga fa'amau - fesuia'i tusitusiga i tusitusiga muamua.

$().button( manoa)

Toe setiina le tulaga fa'amau - fa'afesuia'i tusitusiga i so'o se fa'amatalaga fa'amatalaina tulaga o tusitusiga.

  1. <button class = "btn" data-complete-text = "uma!" > ... </fa'amau>
  2. <script>
  3. $ ( '.btn' ). faamau ( 'maea' )
  4. </script>

E uiga i

Maua sitaili faavae ma lagolago fetuutuunai mo vaega malepelepe pei o akordion ma le folauga.

La'u faila

* Manaomia le faʻapipiʻi Transitions e aofia ai.

Fa'ata'ita'iga accordion

I le faʻaaogaina o le paʻu faʻapipiʻi, na matou fausia ai se widget style accordion faigofie:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 luko masina officia aute, e le o se ipu laupapa sikatusi mo brunch. loli meaai quinoa nesciunt laborum eiusmod. Brunch 3 luko moon tempor, sunt aliqua tu'u se manulele i luga o le kofe tasi le amataga 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 masalo e te le'i fa'alogo iai accusamus laboure sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 luko masina officia aute, e le o se ipu laupapa sikatusi mo brunch. loli meaai quinoa nesciunt laborum eiusmod. Brunch 3 luko moon tempor, sunt aliqua tu'u se manulele i luga o le kofe tasi le amataga 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 masalo e te le'i fa'alogo iai accusamus laboure sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 luko masina officia aute, e le o se ipu laupapa sikatusi mo brunch. loli meaai quinoa nesciunt laborum eiusmod. Brunch 3 luko moon tempor, sunt aliqua tu'u se manulele i luga o le kofe tasi le amataga 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 masalo e te le'i fa'alogo iai accusamus laboure sustainable VHS.

Fa'aaogāina bootstrap-collapse.js

Fa'aaga e ala ile javascript:

  1. $ ( ".collapse" ). pa'u ()

Filifiliga

Igoa ituaiga faaletonu fa'amatalaga
matua tagata filifilia pepelo Afai o le tagata filifilia o lona uiga o elemene uma e mafai ona pa'u i lalo o le matua faʻamaonia o le a tapunia pe a faʻaalia lenei mea faʻapipiʻi. (e taitutusa ma amioga fa'ale-aganu'u)
fesuia'i boolean moni Fa'asolo le elemene e mafai ona pa'u i luga ole valaau

Fa'ailoga

Na'o le fa'aopoopo data-toggle="collapse"ma le data-targeti le elemene e otometi ai ona tu'uina atu le fa'atonuga o se mea e mafai ona fa'apa'ia. E data-targettalia e le uiga le css filifili e fa'aoga le pa'u i. Ia mautinoa e faaopoopo le vasega collapsei le elemene e mafai ona pa'u. Afai e te mana'o e le'i tatalaina, fa'aopoopo le vasega fa'aopoopo in.

  1. <button class = "btn btn-danger" data-toggle = "pa'ū" data-target = "#demo" >
  2. faigofie ona malepe
  3. </fa'amau>
  4.  
  5. <div id = "demo" class = "pa'ū i totonu" > </div>
Ulu i luga! Ina ia fa'aopoopo le pulega vaega e pei o le accordion i se pule e mafai ona pa'u, fa'aopoopo le uiga fa'amaumauga data-parent="#selector". Va'ai i le demo e va'ai ai i lenei gaioiga.

Metotia

.collapse(filifiliga)

Fa'aagaoioia lau anotusi o se elemene e mafai ona pa'u. Talia se filifiliga faitalia object.

  1. $ ( '#myCollapsible' ). pa'u ({
  2. toggle : sese
  3. })

.collapse('toggle')

Su'e se elemene e mafai ona pa'u e fa'aali pe natia.

.collapse('fa'aali')

Fa'aalia se elemene e mafai ona pa'u.

.collapse('natia')

Natia se elemene e mafai ona pa'u.

Mea na tutupu

O le vasega pa'u a Bootstrap o lo'o fa'aalia ni nai mea na tutupu mo le fa'aogaina o galuega fa'aletonu.

Mea na tupu Fa'amatalaga
fa'aali E mu vave lenei mea pe a showvalaʻau le auala faʻataʻitaʻiga.
faaalia O lenei mea e tupu pe a faʻaalia se elemene paʻu i le tagata faʻaoga (o le a faʻatali mo suiga css e maeʻa).
lalafi O lenei mea na tupu e faʻamalo vave pe a hidevalaʻau le metotia.
natia O lenei mea e tupu pe a natia se elemene pa'ū mai le tagata faʻaoga (o le a faʻatali mo suiga css e maeʻa).
  1. $ ( '#myCollapsible' ). i luga ( 'natia' , galuega () {
  2. // fai se mea...
  3. })

E uiga i

O se mea fa'apipi'i faigofie fa'alautele mo le vave faia o mataitusi mata'itusi ma so'o se fa'aoga tusitusiga.

La'u faila

Faataitaiga

Amata le taina i le fanua o lo'o i lalo e fa'aalia ai fa'ai'uga o le mataitusi.


Fa'aaogāina bootstrap-typeahead.js

Valaau le mataitusi e ala i le javascript:

  1. $ ( '.typeahead' ). mataitusi ()

Filifiliga

Igoa ituaiga faaletonu fa'amatalaga
puna fa'asologa [ ] Le puna o fa'amatalaga e fesiligia.
mea numera 8 Le numera maualuga o mea e fa'aalia i le pa'u i lalo.
fa'atusa galuega faatino mata'upu e le maaleale Le auala e fa'aaoga e iloa ai pe fetaui se fesili ma se mea. Talia se finauga e tasi, e itemfaasaga i le su'ega o le fesili. Avanoa i le fesili o iai nei ma this.query. Fa'afo'i se boolean truepe afai o le fesili e fetaui.
fa'avasega galuega faatino fetaui tonu,
mata'upu maaleale,
maaleale
Metotia na fa'aaoga e fa'avasega ai fa'amae'a fa'amae'a. Talia se finauga e tasi itemsma ei ai le lautele o le faʻataʻitaʻiga o le mataitusi. Fa'asino le fesili o iai nei ile this.query.
fa'amalama galuega faatino fa'amanino uma fetauiga fa'aletonu Metotia na fa'aaoga e fa'ailoa ai fa'ai'uga fa'amae'a. Talia se finauga e tasi itemma ei ai le lautele o le faʻataʻitaʻiga o le mataitusi. E tatau ona toe faafoi html.

Fa'ailoga

Fa'aopoopo uiga fa'amaumauga e fa'amauina ai se elemene ma le fa'aogaina o le mataitusi.

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

Metotia

.typeahead(filifiliga)

Fa'amataina se fa'aoga i se mataitusi.