Javascript
Aumai vaega a Bootstrap i le ola ma le sili atu ma le sefulu ma le lua fa'apipi'i masani a le jQuery. Fa'afaigofie ona fa'aofi uma, pe ta'itasi.
Aumai vaega a Bootstrap i le ola ma le sili atu ma le sefulu ma le lua fa'apipi'i masani a le jQuery. Fa'afaigofie ona fa'aofi uma, pe ta'itasi.
E mafai ona fa'apipi'i fa'apipi'i ta'ito'atasi (fa'aaogā *.js
faila ta'itasi a Bootstrap), po'o fa'atasi uma (fa'aoga bootstrap.js
po'o le fa'aitiitiga bootstrap.min.js
).
E lua bootstrap.js
ma bootstrap.min.js
aofia uma plugins i se faila e tasi. Fa'aaofia na'o le tasi.
O nisi fa'apipi'i ma vaega CSS fa'alagolago i isi fa'apipi'i. Afai e te faʻapipiʻi faʻapipiʻi taʻitasi, ia mautinoa e siaki mo nei faʻalagolago i le docs. Ia maitauina foi o plugini uma e faalagolago i le jQuery (o lona uiga e tatau ona aofia ai le jQuery i luma o faila faila). Fa'afeso'ota'i matoubower.json
e va'ai po'o fea fa'aliliuga o le jQuery e lagolagoina.
E mafai ona e fa'aogaina uma Bootstrap plugins mama e ala i le fa'ailoga API e aunoa ma le tusiaina o se laina se tasi o le JavaScript. O le API muamua lea a Bootstrap ma e tatau ona avea ma au iloiloga muamua pe a faʻaaogaina se mea faʻapipiʻi.
Na faapea mai, i nisi tulaga atonu e manaʻomia e tape lenei galuega. O le mea lea, matou te tuʻuina atu foʻi le malosi e faʻamalo ai le faʻamatalaga uiga API e ala i le tatalaina o mea uma na tutupu i luga o le igoa o le pepa faʻatasi ma le data-api
. E pei o lenei:
I le isi itu, e faʻatatau i se mea faʻapipiʻi faʻapitoa, naʻo le faʻapipiʻiina o le igoa ole plugin o se igoa avanoa faʻatasi ai ma le data-api namespace pei o lenei:
Aua le fa'aogaina uiga fa'amatalaga mai le tele o plugini i luga ole elemene e tasi. Mo se fa'ata'ita'iga, e le mafai e se fa'amau ona maua uma se mea faigaluega ma fa'asolo i se auala. Ina ia ausia lenei mea, faʻaaoga se elemene afifi.
Matou te talitonu foi e tatau ona e faʻaogaina uma Bootstrap plugins mama e ala i le JavaScript API. O API fa'alaua'itele uma e tasi, auala e mafai ona filifili, ma toe fa'afo'i le aoina na fa'atino.
O metotia uma e tatau ona talia se mea e filifili ai filifiliga, se manoa e faʻatatau i se metotia faʻapitoa, poʻo leai se mea (lea e amataina ai se faʻapipiʻi ma amioga le lelei):
E fa'aalia fo'i e fa'apipi'i ta'itasi lona faufale mata'utia i luga o se Constructor
meatotino: $.fn.popover.Constructor
. Afai e te manaʻo e maua se faʻataʻitaʻiga faʻapitoa faʻapipiʻi, aumai saʻo mai se elemene: $('[rel="popover"]').data('popover')
.
E mafai ona e suia tulaga fa'aletonu mo se fa'apipi'i e ala i le suia o le Constructor.DEFAULTS
mea fa'apipi'i:
O nisi taimi e manaʻomia le faʻaogaina o Bootstrap plugins ma isi faʻavae UI. I ia tulaga, e mafai ona tupu i nisi taimi le fete'ena'iga o igoa. Afai e tupu lenei mea, e mafai ona e valaʻau .noConflict
i le plugin e te manaʻo e toe faʻafoʻi le tau o.
O le Bootstrap e tuʻuina atu mea faʻapitoa mo le tele o mea faʻapitoa a plugins. E masani lava, o nei mea e sau i se fa'ailoga fa'apitoa ma le taimi ua tuana'i - lea e fa'aosoina ai le infinitive (ex. show
) i le amataga o se mea na tupu, ma lona fa'ailoga participle ua mavae (ex. shown
) e fa'aosoina pe a mae'a se gaioiga.
E pei o le 3.0.0, o mea uma a Bootstrap o loʻo faʻaigoaina igoa.
O mea fa'apitoa uma e maua ai preventDefault
galuega fa'atino. O lenei mea e maua ai le malosi e taofi ai le faʻatinoina o se gaioiga aʻo leʻi amataina.
E mafai ona maua le fa'asologa o mea ta'itasi a Bootstrap's jQuery plugins e ala i le VERSION
meatotino a le faufale o le plugin. Mo se faʻataʻitaʻiga, mo le meafaigaluega faʻapipiʻi:
O plugini a Bootstrap e le toe fo'i fa'apitoa pe a fa'aletonu le JavaScript. Afai e te popole e uiga i le tagata faʻaoga i lenei tulaga, faʻaaoga <noscript>
e faʻamatala ai le tulaga (ma pe faʻafefea ona toe faʻaogaina le JavaScript) i au tagata faʻaoga, ma / pe faʻaopoopo au lava faʻaleaga masani.
E le lagolagoina aloaia e Bootstrap faletusi JavaScript isi vaega e pei o le Prototype poʻo le jQuery UI. E ui lava .noConflict
ma fa'aigoa mea tutupu, e ono iai fa'afitauli feso'ota'iga e mana'omia ona e fa'aleleia e oe lava.
Mo a'afiaga faigofie o suiga, transition.js
fa'atasi ma isi faila JS. Afai o loʻo e faʻaaogaina le tuʻufaʻatasia (poʻo le faʻaititia) bootstrap.js
, e leai se manaʻoga e aofia ai lenei mea-ua uma ona iai.
Transition.js ose fesoasoani fa'avae mo transitionEnd
mea e tutupu fa'apea fo'i ma le CSS transition emulator. O lo'o fa'aogaina e isi fa'apipi'i e siaki ai le lagolago mo suiga o le CSS ma pu'e fa'aoga fa'atautau.
O suiga e mafai ona fa'aletonu i le lalolagi atoa e ala i le fa'aogaina o le snippet JavaScript o lo'o mulimuli mai, lea e tatau ona o'o mai pe a mae'a ona utaina transition.js
(po'o bootstrap.js
le bootstrap.min.js
, pe a o'o i ai le tulaga):
O auala e fa'afaigofie, ae fetu'una'i, fa'asalalauga fa'atasi ma le fa'aitiitiga mana'omia ma fa'aletonu atamai.
Ia mautinoa e aua le tatalaina se auala ae o loʻo iloa pea se isi. O le fa'aalia o le sili atu ma le tasi fa'apena i le taimi e mana'omia ai le fa'ailoga masani.
Taumafai i taimi uma e tuʻu le code HTML a le modal i se tulaga maualuga i lau pepa e aloese ai mai isi vaega e aʻafia ai foliga o le modal ma / poʻo galuega.
O loʻo i ai nisi faʻamatalaga e uiga i le faʻaaogaina o modals i luga o masini feaveaʻi. Va'ai la matou su'esu'ega lagolago docs mo fa'amatalaga.
Ona o le auala e faʻamatalaina ai e le HTML5 ona faʻaoga, o le autofocus
uiga HTML e leai se aoga i Bootstrap modals. Ina ia ausia le aafiaga tutusa, faʻaaoga nisi JavaScript masani:
Se fa'atusa fa'atusa fa'atasi ai ma ulutala, tino, ma se seti o gaioiga i le vae.
Su'e se fa'aoga 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.
Ia mautinoa e faʻaopoopo role="dialog"
ma aria-labelledby="..."
, faʻasino i le ulutala modal, i .modal
, ma role="document"
ia .modal-dialog
lava.
E le gata i lea, e mafai ona e tuʻuina atu se faʻamatalaga o lau faʻasalalauga faʻatasi ma aria-describedby
on .modal
.
O le fa'apipi'iina o vitio YouTube i fa'aola e mana'omia ai le JavaScript fa'aopoopo ae le o le Bootstrap e otometi ai ona taofi le toe ta'alo ma sili atu. Va'ai lenei pou fesoasoani Stack Overflow mo nisi fa'amatalaga.
E lua lapopo'a filifiliga, e maua e ala i vasega modifier e tu'u i luga o se .modal-dialog
.
Mo auala e foliga mai nai lo le mou atu e matamata ai, aveese le .fade
vasega mai lau faʻailoga faʻailoga.
Ina ia fa'aoga lelei le faiga fa'asologa o Bootstrap i totonu o se fa'ata'ita'iga, na'o le ofaga .row
i totonu o le .modal-body
fa'aoga ona fa'aaoga lea o vasega masani fa'asologa.
E i ai ni fa'amau fa'amau e fa'aosoina uma le faiga e tasi, na'o sina mea e 'ese'ese ai? Fa'aoga event.relatedTarget
ma uiga HTMLdata-*
(atonu e ala i le jQuery ) e fesuia'i mea o lo'o i totonu o le modal fa'atatau i le fa'amau na kiliki. Va'ai le Modal Events docs mo fa'amatalaga i luga relatedTarget
,
O le modal plugin e fesuia'i au mea natia pe a mana'omia, e ala i fa'amatalaga uiga po'o le JavaScript. E fa'aopoopoina fo'i .modal-open
i le <body>
fa'ato'a fa'aletonu le ta'avale amio ma fa'atupuina se .modal-backdrop
e tu'uina atu ai se vaega kiliki mo le fa'ate'aina o fa'aaliga fa'aalia pe a kiliki i fafo atu o le fa'ailoga.
Fa'agaoioia se faiga e aunoa ma le tusia o le JavaScript. Seti data-toggle="modal"
i luga o se elemene e pulea, pei o se faamau, faatasi ai ma se data-target="#foo"
po href="#foo"
o le taulaʻi i se faiga faʻapitoa e fesuiaʻi.
Valaau se modal ma id myModal
ma se laina e tasi o le JavaScript:
O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-
, pei o le data-backdrop=""
.
Igoa | ituaiga | faaletonu | fa'amatalaga |
---|---|---|---|
tuaa | boolean po'o le manoa'static' |
moni | E aofia ai se elemene fa'aola-backdrop. I le isi itu, fa'amaoti static mo 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. |
mamao | ala | pepelo | O lenei filifiliga ua le toe faaaogaina talu mai le v3.3.0 ma ua aveese i le v4. Matou te fautua atu nai lo le faʻaaogaina o faʻataʻitaʻiga a le tagata o tausia poʻo se faʻavae faʻamaumauga, pe valaʻau oe i le jQuery.load . Afai e tuʻuina atu se URL mamao, o le a faʻapipiʻiina mea e tasi i le auala a le jQuery |
.modal(options)
Fa'agaoioia lau anotusi e fai ma fa'ata'ita'iga. Talia se filifiliga faitalia object
.
.modal('toggle')
Su'e ma le lima se faiga. Toe fo'i i le tagata vala'au a'o le'i fa'aalia pe natia le modal (fa'atusa a'o le'i tupu le shown.bs.modal
po'o le hidden.bs.modal
mea na tupu).
.modal('show')
Tatala ma le lima se auala. Toe fo'i atu i le tagata vala'au a'o le'i fa'aalia moni le modal (fa'atusa a'o le'i tupu le shown.bs.modal
mea na tupu).
.modal('hide')
Natia ma le lima se auala. Toe fo'i i le tagata vala'au a'o le'i natia moni le modal (fa'atusa a'o le'i tupu le hidden.bs.modal
mea na tupu).
.modal('handleUpdate')
Toe fetu'una'i le tulaga o le modal e fa'asaga i se ta'avale pe a aliali mai se tasi, o le a oso ai le auala i le agavale.
E na'o le mana'omia pe a suia le maualuga o le auala a'o tatala.
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.
O mea faʻapitoa uma e faʻaumatia i le modal lava ia (ie i le <div class="modal">
).
Ituaiga Mea | Fa'amatalaga |
---|---|
show.bs.modal | E mu vave lenei mea pe a show valaʻau le auala faʻataʻitaʻiga. Afai e mafua mai i se kiliki, o le elemene kiliki e avanoa e avea ma relatedTarget meatotino o le mea na tupu. |
fa'aalia.bs.modal | 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). Afai e mafua mai i se kiliki, o le elemene kiliki e avanoa e avea ma relatedTarget meatotino o le mea na tupu. |
hide.bs.modal | O lenei mea na tupu e faʻamalo vave pe a hide valaʻau le auala faʻataʻitaʻiga. |
hidden.bs.modal | 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). |
loaded.bs.modal | O lenei mea e tupu e faʻamalo pe a faʻapipiʻi e le modal mea e faʻaaoga ai le remote filifiliga. |
Fa'aopoopo i lalo menus i le toetoe lava o so'o se mea fa'atasi ma lenei fa'aoga faigofie, e aofia ai le navbar, tabs, ma pills.
E ala i fa'amatalaga uiga po'o le JavaScript, o le pa'ū fa'apipi'i fa'apipi'i mea natia (pa'u i lalo menus) e ala i le fa'anofoina o le .open
vasega i le lisi o matua.
I luga o masini feaveaʻi, o le tatalaina o se pa'ū faʻaopoopo faʻaopoopo a .dropdown-backdrop
e fai ma tapuni e tapuni ai menus pa'ū pe a tapuni i fafo o le lisi, o se manaʻoga mo le lagolago iOS talafeagai. O lona uiga o le fesuia'i mai se lisi fa'atulalo tatala i se isi fa'ailoga fa'alalo e mana'omia ai se tap fa'aopoopo ile telefoni feavea'i.
Fa'aaliga: O le data-toggle="dropdown"
uiga e fa'alagolago i ai mo le tapunia o menus pa'u i lalo i se tulaga o talosaga, o se manatu lelei le fa'aaogaina i taimi uma.
Fa'aopoopo data-toggle="dropdown"
i se so'oga po'o se fa'amau e fa'asolo i lalo.
Ina ia fa'atumauina URL ma fa'amau so'otaga, fa'aoga le data-target
uiga nai lo le href="#"
.
Valaau le to'alalo e ala i le JavaScript:
data-toggle="dropdown"
manaomia peaTusa lava pe e te valaʻau lau pa'ū i lalo e ala i le JavaScript pe faʻaaoga le data-api, data-toggle="dropdown"
e manaʻomia i taimi uma le i ai i luga o le elemene faʻaoso.
Leai
$().dropdown('toggle')
Fa'asolo i lalo le lisi o le navbar ua tu'uina atu po'o le fa'atautaiga fa'apipi'i.
O mea uma e pa'u i lalo e fa'ao i le .dropdown-menu
'elemene matua.
O mea uma e pa'u i lalo o lo'o i ai se relatedTarget
mea totino, o lona tau o le elemene taula fa'afefe.
Ituaiga Mea | Fa'amatalaga |
---|---|
show.bs.dropdown | E mu vave lenei mea pe a valaau le auala fa'ata'ita'iga. |
fa'aalia.bs.dropdown | O lenei mea e tupu pe a faʻaalia le pa'ū i lalo i le tagata faʻaoga (o le a faʻatali mo suiga CSS, e faʻamaeʻa). |
hide.bs.dropdown | O lenei mea e tupu e faʻamalo vave pe a valaʻau le auala faʻataʻitaʻiga natia. |
hidden.bs.dropdown | O lenei mea e tupu pe a maeʻa ona natia le pa'ū i lalo mai le tagata faʻaoga (o le a faʻatali mo suiga CSS, e faʻamaeʻa). |
O le ScrollSpy plugin e mo le fa'afouina otometi fa'atatau i luga ole laiga e fa'atatau ile tulaga ta'ai. Fa'asolo le vaega i lalo o le navbar ma matamata le suiga o le vasega. O le a fa'amaninoina fo'i le fa'ailoga pito i lalo.
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.
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.
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.
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.
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.
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 le DOM pei <div id="home"></div>
.
:visible
elemene e le fa'atatauina ua le amana'iaO elemene faʻatatau e le :visible
tusa ai ma le jQuery o le a le amanaʻia ma o latou mea nav fetaui o le a le faʻamaonia lava.
Po o le a lava le faiga o le faatinoga, scrollspy e manaʻomia le faʻaogaina o position: relative;
le elemene o loʻo e vaʻavaʻai i ai. I le tele o tulaga o le <body>
. Pe a taʻavale i elemene e ese mai i le <body>
, ia mautinoa e iai se height
seti ma overflow-y: scroll;
faʻaoga.
Ina ia fa'afaigofie ona fa'aopoopo le amio ta'avale i lau ta'avale pito i luga, fa'aopoopo data-spy="scroll"
i le elemene e te mana'o e sipai ai (sili ona masani o le <body>
). Ona faʻaopoopo lea o le data-target
uiga faʻatasi ma le ID poʻo le vasega o le matua elemene o soʻo se .nav
vaega Bootstrap.
A uma ona faʻaopoopo position: relative;
i lau CSS, valaʻau le scrollspy e ala i le JavaScript:
.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:
O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-
, pei o le data-offset=""
.
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. |
Ituaiga Mea | Fa'amatalaga |
---|---|
activate.bs.scrollspy | E mu lenei mea i so'o se taimi e fa'agaoioi ai se mea fou e le scrollspy. |
Fa'aopoopo le fa'agaioiga fa'agaoioiga fa'avavevave ma fa'amalosi i le fa'aliliuina atu i fa'amalama o mea fa'apitonu'u, e o'o lava ile fa'aulu i lalo menus. E le lagolagoina fa'amau fa'aputuga.
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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
O lenei fa'apipi'i fa'alautele le vaega fa'asaga i luga o fa'amau e fa'aopoopo ai vaega e mafai ona ta'ua.
Fa'aaga tabbable tabs e ala i le JavaScript (ta'itasi ta'itasi e mana'omia ona fa'agaoioia ta'ito'atasi):
E mafai ona e fa'agaoioia ta'iala ta'itasi i le tele o auala:
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'ama'oti data-toggle="tab"
po'o data-toggle="pill"
luga o se elemene. O le fa'aopoopoina o le nav
ma nav-tabs
vasega i le fa'ailoga o le ul
a fa'aaoga ai le Bootstrap tab styling , a'o fa'aopoopoina le nav
ma nav-pills
vasega o le a fa'aogaina ai le styling pili .
Ina ia fa'agesegese fa'amau i totonu, fa'aopoopo .fade
i .tab-pane
. E tatau fo'i .in
i le fa'ailoga muamua ona fa'aalia le mea muamua.
$().tab
Fa'aagaoioia se fa'ailoga elemene ma mea o lo'o i totonu. O le Tab e tatau ona i ai se data-target
poʻo se href
faʻatatau i se pusa pusa i le DOM. I faʻataʻitaʻiga o loʻo i luga, o laupepa o le <a>
s ma data-toggle="tab"
uiga.
.tab('show')
Filifili le lisi o loʻo tuʻuina atu ma faʻaalia ai mea e fesoʻotaʻi ai. So'o se isi lava fa'amau na filifilia muamua e le'i filifilia ma o lo'o natia mea fa'atasi. Toe fo'i atu i le tagata vala'au a'o le'i fa'aalia moni le fa'ailoga (fa'atusa a'o le'i tupu le shown.bs.tab
mea na tupu).
Pe a fa'aalia se lisi fou, e mu mea na tutupu i le fa'asologa lenei:
hide.bs.tab
(i luga o le lisi o lo'o galue nei)show.bs.tab
(i luga o le faʻailoga o le a faʻaalia)hidden.bs.tab
(i luga o le lisi galue muamua, tutusa ma le hide.bs.tab
mea na tupu)shown.bs.tab
(i luga o le faʻailoga fou faatoa faʻaalia, tutusa ma le show.bs.tab
mea na tupu)Afai e le'i fa'agaoioi le tab, o le a le tapeina le hide.bs.tab
ma mea tutupu.hidden.bs.tab
Ituaiga Mea | Fa'amatalaga |
---|---|
show.bs.tab | 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.target ma event.relatedTarget fa'atatau i le ta'i ga'oi ma le fa'agaioiga muamua (pe a maua) ta'itasi. |
fa'aalia.bs.tab | O lenei mea na tupu e mu i luga o le faʻaaliga faʻapipiʻi pe a uma ona faʻaalia se tab. Fa'aoga event.target ma event.relatedTarget fa'atatau i le ta'i ga'oi ma le fa'agaioiga muamua (pe a maua) ta'itasi. |
hide.bs.tab | E mu lenei mea pe a fa'aalia se fa'ailoga fou (ma fa'apea e natia ai le fa'agaioiga muamua). Fa'aoga event.target ma event.relatedTarget fa'atatau i le lisi o lo'o i ai nei ma le lisi fou e le o toe mamao-to-be-active. |
hidden.bs.tab | O lenei mea na tupu e mu pe a uma ona faʻaalia se laupepa fou (ma faʻapea o loʻo natia le laupepa muamua). Fa'aoga event.target ma event.relatedTarget fa'atatau i le ta'ifa'agaaga muamua ma le fa'ailoga fou fou, fa'asologa. |
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 le CSS3 mo fa'afiafiaga, ma fa'amaumauga-uiga mo le teuina o suafa fa'apitonu'u.
E le fa'aalia lava ni mea faigaluega e leai ni fa'ailoga umi.
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.
E fa filifiliga o lo'o avanoa: luga, taumatau, pito i lalo, ma agavale fa'aoga.
Mo mafua'aga o fa'atinoga, o le Tooltip ma Popover data-apis o lo'o filifili i totonu, o lona uiga e tatau ona e amataina oe lava ia .
O se tasi o auala e amata ai meafaigaluega uma i luga o se itulau o le filifilia lea i latou data-toggle
uiga:
O le tooltip plugin e fa'atupuina ai mea ma fa'ailoga pe a mana'omia, ma e le mafai ona tu'u meafaigaluega pe a mae'a a latou elemene fa'aoso.
Fa'aoso le mea faigaluega e ala ile JavaScript:
Ole fa'ailoga mana'omia mo se mea faigaluega e na'o se data
uiga ma title
luga ole elemene HTML e te mana'o e maua se meafaigaluega. O le faʻailoga faʻatupuina o se meafaigaluega e faigofie tele, e ui lava e manaʻomia se tulaga (e ala i le faaletonu, seti i top
le plugin).
O nisi taimi e te mana'o e fa'aopoopo se mea faigaluega i se hyperlink e afifi ai laina se tele. O le amio fa'aletonu a le mea fa'apipi'i meafaigaluega o le fa'atotonugalemu ma fa'alava. Faaopoopo white-space: nowrap;
i lau taula e aloese ai mai lenei mea.
Pe a faʻaogaina meafaigaluega i elemene i totonu .btn-group
poʻo se .input-group
, poʻo luga o elemene e fesoʻotaʻi ma laulau ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), e tatau ona e faʻamaonia le filifiliga container: 'body'
(faʻamauina i lalo) e aloese ai mai aʻafiaga e le manaʻomia (e pei o le elemene o loʻo tuputupu aʻe lautele ma/ po'o le leiloa o ona tulimanu lapotopoto pe a fa'aoso le mea faigaluega).
Mo tagata fa'aoga o lo'o fa'atautaia ma le piano, aemaise o tagata fa'aoga o tekonolosi fesoasoani, e tatau ona e fa'aopoopo na'o mea faigaluega i elemene e fa'atatau i le keyboard e pei o so'otaga, fa'atonuga, po'o so'o se mea fa'apitoa e iai se tabindex="0"
uiga.
Ina ia fa'aopoopo se mea faigaluega i se disabled
po'o se .disabled
elemene, tu'u le elemene i totonu o le a <div>
ma fa'aoga le mea faigaluega i lena <div>
nai lo lena.
O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-
, pei o le data-animation=""
.
Igoa | Ituaiga | Fa'atonu | Fa'amatalaga |
---|---|---|---|
animation | boolean | moni | Fa'aoga se suiga e mou atu CSS i le mea faigaluega |
pusa | manoa | pepelo | pepelo | Fa'apipi'i le mea faigaluega i se elemene fa'apitoa. Faataitaiga: |
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: |
html | boolean | pepelo | Fa'aofi le HTML i totonu o le meafaigaluega. Afai e sese, o le a faʻaaogaina le text auala a le jQuery e faʻaofi ai mea i totonu ole DOM. Fa'aoga tusitusiga pe a e popole i osofa'iga a le XSS. |
tu'uga | manoa | galuega faatino | 'pito' | Fa'afefea ona fa'atulagaina le mea faigaluega - pito i luga | lalo | agavale | taumatau | ta'avale. Pe a faʻaaogaina se galuega e fuafua ai le tuʻuina, e taʻua i le tooltip DOM node e fai ma ana finauga muamua ma le elemene DOM node lona lua. O |
tagata filifilia | manoa | pepelo | Afai e tu'uina atu se tagata filifilia, o mea fa'aoga meafaigaluega o le a tu'uina atu i fa'amoemoega fa'apitoa. I le fa'ata'ita'iga, o lo'o fa'aaogaina e mafai ai ona fa'aopoopoina mea faigaluega fa'aopoopo. Vaʻai i lenei mea ma se faʻataʻitaʻiga faʻamatalaga . |
mamanu | manoa | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Fa'avae HTML e fa'aoga pe a fai le mea faigaluega. O mea faigaluega o le
O le elemene afifi pito i fafo e tatau ona i ai le |
suafa | manoa | galuega faatino | '' | Fa'aigoa fa'aigoa tau pe afai Afai e tu'uina atu se galuega, o le a vala'au ma lona |
fa'aoso | manoa | 'ave le taulai' | E fa'afefea ona fa'aosoina meafaigaluega - kiliki | lele | taula'i | tusi lesona. E mafai ona e pasia le tele o fa'aoso; tuueseese ma se avanoa. manual e le mafai ona tu'ufa'atasia ma se isi fa'aoso. |
va'aiga | manoa | mea | galuega faatino | { filifili: 'tino', fa'aofuofu: 0 } | Taofi le mea faigaluega i totonu o tuaoi o lenei elemene. Faataitaiga: Afai e tuʻuina atu se galuega, e taʻua i le faʻaosoina elemene DOM node e na o le pau lea o le finauga. O |
O filifiliga mo meafaigaluega ta'ito'atasi e mafai ona fa'amaonia e ala i le fa'aogaina o uiga fa'amaumauga, e pei ona fa'amatalaina i luga.
$().tooltip(options)
Fa'apipi'i se tu'u fa'amatalaga meafaigaluega i se aoina elemene.
.tooltip('show')
Fa'aalia le mea faigaluega o se elemene. Toe fo'i atu i le tagata vala'au a'o le'i fa'aalia moni mai le mea faigaluega (fa'atusa a'o le'i tupu le shown.bs.tooltip
mea na tupu). E manatu lenei mea o se "manu'al" faʻaosoina o le meafaigaluega. E le fa'aalia lava ni mea faigaluega e leai ni fa'ailoga umi.
.tooltip('hide')
Natia le mea faigaluega o se elemene. Toe fo'i atu i le tagata vala'au a'o le'i natia le mea faigaluega (fa'atusa a'o le'i tupu le hidden.bs.tooltip
mea na tupu). E manatu lenei mea o se "manu'al" faʻaosoina o le meafaigaluega.
.tooltip('toggle')
Su'e le pito meafaigaluega a se elemene. Toe fo'i i le tagata vala'au a'o le'i fa'aalia pe natia le mea faigaluega (fa'atusa a'o le'i tupu le shown.bs.tooltip
po'o le hidden.bs.tooltip
mea na tupu). E manatu lenei mea o se "manu'al" faʻaosoina o le meafaigaluega.
.tooltip('destroy')
Natia ma fa'aleaga le pito meafaigaluega a se elemene. Tooltips e fa'aogaina le tu'uina atu (lea e faia i le fa'aogaina o le selector
filifiliga ) e le mafai ona fa'aumatia ta'ito'atasi i elemene fa'aoso tupuaga.
Ituaiga Mea | Fa'amatalaga |
---|---|
show.bs.tooltip | E mu vave lenei mea pe a show valaʻau le auala faʻataʻitaʻiga. |
fa'aalia.bs.tooltip | O lenei mea na tupu e faʻamalo pe a faʻaalia le meafaigaluega i le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa). |
hide.bs.tooltip | O lenei mea na tupu e faʻamalo vave pe a hide valaʻau le auala faʻataʻitaʻiga. |
hidden.bs.tooltip | O lenei mea e tupu pe a uma ona natia le meafaigaluega mai le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa). |
inserted.bs.tooltip | O lenei mea na tupu e faʻamalo pe a maeʻa le show.bs.tooltip mea na tupu ina ua faʻaopoopo le faʻataʻitaʻiga meafaigaluega i le DOM. |
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.
Popovers o latou igoa ma anotusi e leai se umi e le fa'aalia.
Popovers e manaʻomia le faʻapipiʻi meafaigaluega e faʻapipiʻi i lau lomiga o Bootstrap.
Mo mafua'aga o fa'atinoga, o le Tooltip ma Popover data-apis o lo'o filifili i totonu, o lona uiga e tatau ona e amataina oe lava ia .
O se tasi o auala e amata ai popovers uma i luga o se itulau o le filifilia lea e ala i o latou data-toggle
uiga:
A faʻaaoga popovers i elemene i totonu .btn-group
poʻo se .input-group
, poʻo luga o elemene e fesoʻotaʻi ma laulau ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), e tatau ona e faʻamaonia le filifiliga container: 'body'
(faʻamauina i lalo) e aloese ai mai aʻafiaga e le manaʻomia (e pei o le elemene o loʻo tuputupu aʻe lautele ma / po'o le leiloa o ona tulimanu lapotopoto pe a fa'aoso le popover).
Ina ia fa'aopoopo se popover i se disabled
po'o se .disabled
elemene, tu'u le elemene i totonu ole a <div>
ma fa'aoga le popover i lena <div>
nai lo lena.
O nisi taimi e te mana'o e fa'aopoopo se popover i se hyperlink e afifi ai laina se tele. O le amio fa'aletonu a le popover plugin o le fa'atotonugalemu fa'alava ma tu'u sa'o. Faaopoopo white-space: nowrap;
i lau taula e aloese ai mai lenei mea.
E fa filifiliga o lo'o avanoa: luga, taumatau, pito i lalo, ma agavale fa'aoga.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Fa'aaoga le focus
fa'aoso e fa'ate'a ai popovers i le isi kiliki e faia e le tagata fa'aoga.
Mo le fetaui lelei o le suʻesuʻega ma le faʻaogaina o amioga, e tatau ona e faʻaogaina le <a>
pine, ae le o le <button>
pine, ma e tatau foi ona e aofia ai role="button"
ma tabindex
uiga.
Fa'amalo popovers e ala i le JavaScript:
O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-
, pei o le data-animation=""
.
Igoa | Ituaiga | Fa'atonu | Fa'amatalaga |
---|---|---|---|
animation | boolean | moni | Fa'aoga se suiga e mou atu CSS i le popover |
pusa | manoa | pepelo | pepelo | Fa'aopoopo le popover i se elemene patino. Faataitaiga: |
anotusi | manoa | galuega faatino | '' | Fa'aleaogaina mea taua pe afai Afai e tu'uina atu se galuega, o le a vala'au ma lona |
tuai | numera | mea faitino | 0 | Fa'atuai ona fa'aali ma nana le popover (ms) - e le fa'atatau i le 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: |
html | boolean | pepelo | Fa'aofi le HTML i totonu o le popover. Afai e sese, o le a faʻaaogaina le text auala a le jQuery e faʻaofi ai mea i totonu ole DOM. Fa'aoga tusitusiga pe a e popole i osofa'iga a le XSS. |
tu'uga | manoa | galuega faatino | 'tauagavale' | Faʻafefea ona faʻatulagaina le popover - luga | lalo | agavale | taumatau | ta'avale. Pe a faʻaaogaina se galuega e fuafua ai le tuʻuina, e taʻua i le popover DOM node e fai ma ana finauga muamua ma le elemene DOM node lona lua. Ua |
tagata filifilia | manoa | pepelo | Afai e tu'uina atu se tagata filifilia, o mea fa'apipi'i o le a tu'uina atu i fa'amoemoe fa'apitoa. I le fa'ata'ita'iga, o lo'o fa'aaogaina e mafai ai ona fa'aopoopoina mea fa'apitoa HTML e fa'aopoopo ai popovers. Vaʻai i lenei mea ma se faʻataʻitaʻiga faʻamatalaga . |
mamanu | manoa | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Fa'avae HTML e fa'aoga pe a fai le popover. O le popover's O le popover's
O le elemene afifi pito i fafo e tatau ona i ai le |
suafa | manoa | galuega faatino | '' | Fa'aigoa fa'aigoa tau pe afai Afai e tu'uina atu se galuega, o le a vala'au ma lona |
fa'aoso | manoa | 'kiliki' | E fa'afefea ona fa'aoso popover - kiliki | lele | taula'i | tusi lesona. E mafai ona e pasia le tele o fa'aoso; tuueseese ma se avanoa. manual e le mafai ona tu'ufa'atasia ma se isi fa'aoso. |
va'aiga | manoa | mea | galuega faatino | { filifili: 'tino', fa'aofuofu: 0 } | Taofi le popover i totonu o tuaoi o lenei elemene. Faataitaiga: Afai e tuʻuina atu se galuega, e taʻua i le faʻaosoina elemene DOM node e na o le pau lea o le finauga. Ua |
O filifiliga mo popovers ta'ito'atasi e mafai ona fa'amaonia e ala i le fa'aogaina o uiga fa'amaumauga, e pei ona fa'amatalaina i luga.
$().popover(options)
E amata popovers mo se aoina elemene.
.popover('show')
Fa'aalia le popover o se elemene. Toe fo'i i le tagata vala'au a'o le'i fa'aalia le popover (fa'atusa a'o le'i tupu le shown.bs.popover
mea na tupu). E manatu lenei mea o se "manual" faʻaosoina le popover. Popovers o latou igoa ma anotusi e leai se umi e le fa'aalia.
.popover('hide')
Natia le popover o se elemene. Toe fo'i i le tagata vala'au a'o le'i natia le popover (fa'atusa a'o le'i tupu le hidden.bs.popover
mea na tupu). E manatu lenei mea o se "manual" faʻaosoina le popover.
.popover('toggle')
Su'e le fa'apipi'i o se elemene. Toe fo'i i le tagata vala'au a'o le'i fa'aalia pe natia le popover (fa'atusa a'o le'i tupu le shown.bs.popover
po'o le hidden.bs.popover
mea na tupu). E manatu lenei mea o se "manual" faʻaosoina le popover.
.popover('destroy')
Natia ma fa'aumatia le popover o se elemene. Popovers e fa'aogaina le tu'uina atu (lea e faia e fa'aaoga ai le selector
filifiliga ) e le mafai ona fa'aumatia ta'ito'atasi i elemene fa'aoso tupuaga.
Ituaiga Mea | Fa'amatalaga |
---|---|
show.bs.popover | E mu vave lenei mea pe a show valaʻau le auala faʻataʻitaʻiga. |
fa'aalia.bs.popover | O lenei mea e tupu pe a faʻaalia le popover i le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa). |
hide.bs.popover | O lenei mea na tupu e faʻamalo vave pe a hide valaʻau le auala faʻataʻitaʻiga. |
hidden.bs.popover | O lenei mea e tupu pe a uma ona natia le popover mai le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa). |
inserted.bs.popover | O lenei mea na tupu e faʻamalo pe a maeʻa le show.bs.popover mea na tupu ina ua faʻapipiʻi le popover template i le DOM. |
Fa'aopoopo galuega fa'ate'a i fe'au mataala uma i lenei fa'apipi'i.
A fa'aaoga se .close
faamau, e tatau ona avea ma tama muamua o le .alert-dismissible
ma e leai se anotusi e mafai ona muamua mai i le fa'ailoga.
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.
Na'o le fa'aopoopo data-dismiss="alert"
i lau ki tapuni e otometi ai ona tu'uina atu se fa'agaioiga vavalalata mataalia. O le tapunia o se mataala e aveese ai mai le DOM.
Ina ia fa'aoga lau fa'aaliga fa'afiafia pe a tapuni, ia mautinoa o lo'o iai le.fade
vasega ma .in
ua uma ona fa'aoga ia i latou.
$().alert()
Faia se mataala e fa'alogo mo kiliki mea e tutupu i elemene tupuaga o lo'o iai le data-dismiss="alert"
uiga. (E le manaʻomia pe a faʻaaogaina le faʻamatalaga-autometi a le data-api.)
$().alert('close')
Tapuni se mataala e ala i le aveese mai le DOM. Afai o le .fade
ma.in
vasega o loʻo i ai i luga o le elemene, o le mataala o le a mou ese atu aʻo leʻi aveesea.
O le plugin alert a Bootstrap e fa'aalia ai ni nai mea na tutupu mo le fa'aogaina i galuega mataala.
Ituaiga Mea | Fa'amatalaga |
---|---|
close.bs.alert | E mu vave lenei mea pe a close valaʻau le auala faʻataʻitaʻiga. |
tapunia.bs.alert | O lenei mea e tupu pe a tapunia le mataala (o le a faʻatali mo suiga CSS e maeʻa). |
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.
O lo'o fa'aauau pea e Firefox le fa'atonuina o tulaga (le atoatoa ma le siakiina) i luga o uta o itulau . O se fofo mo lenei mea o le faʻaaogaina autocomplete="off"
. Va'ai Mozilla bug #654072 .
Fa'aopoopo data-loading-text="Loading..."
e fa'aoga se tulaga o le utaina i luga o se ki.
O lenei vaega ua le toe faaaogaina talu mai le v3.3.5 ma ua aveese i le v4.
Mo le lelei o lenei faʻataʻitaʻiga, matou te faʻaaogaina data-loading-text
ma $().button('loading')
, ae le naʻo le pau lea o le setete e mafai ona e faʻaogaina. Va'ai atili i lenei mea i lalo ile $().button(string)
fa'amaumauga .
Fa'aopoopo data-toggle="button"
e fa'agaoioi ai le sosolo i luga o le ki se tasi.
.active
maaria-pressed="true"
Mo fa'amau muamua, e tatau ona e fa'aopoopoina le .active
vasega ma le aria-pressed="true"
uiga ia button
oe lava.
Fa'aopoopo data-toggle="buttons"
i se .btn-group
atigipusa o lo'o i ai po'o mea fa'aoga leitio ina ia mafai ai ona fesuia'i i latou sitaili.
.active
Mo filifiliga na mua'i filifilia, e tatau ona e fa'aopoopoina le .active
vasega i le mea e fa'aoga ai label
oe.
Afai e fa'afou le tulaga siaki o le pusa siaki e aunoa ma le fa'aoina o se click
mea na tupu i luga o le ki (fa'ata'ita'iga e ala atu <input type="reset">
pe ala i le fa'atulagaina o checked
meatotino o le mea e fa'aoga ai), e tatau ona e fa'asolo le .active
vasega i le mea e ulufale ai label
oe.
$().button('toggle')
Togi le tulaga tulei. Tu'u atu i le ki le foliga mai ua fa'agaoioia.
$().button('reset')
Toe setiina le tulaga fa'amau - fesuia'i tusitusiga i tusitusiga muamua. O lenei metotia e le fetaui ma toe fo'i mai a'o le'i mae'a le toe setiina.
$().button(string)
Fa'afesuia'i tusitusiga i so'o se fa'amatalaga fa'amatalaina tulaga o tusitusiga.
Fa'apipi'i fetu'una'i e fa'aogaina ai ni nai vasega mo le fa'agasologa faigofie o amioga.
Pa'u e mana'omia le fa'apipi'i suiga e fa'aaofia i lau fa'aliliuga o Bootstrap.
Kiliki fa'amau i lalo e fa'aali ma nana se isi elemene e ala i suiga o vasega:
.collapse
natia mea e aofia ai.collapsing
e fa'aaogaina i taimi o suiga.collapse.in
fa'aalia anotusiE mafai ona e faʻaogaina se fesoʻotaʻiga ma le href
uiga, poʻo se faʻamau ma le data-target
uiga. I tulaga uma e lua, data-toggle="collapse"
e manaʻomia.
Fa'alautele le amio fa'aletonu e fai ai se akordion ma le vaega o le laulau.
E mafai fo'i ona fesuia'i le .panel-body
s ma .list-group
le s.
Ia mautinoa e faaopoopo aria-expanded
i le elemene pulea. O lenei uiga o lo'o fa'amatala manino ai le tulaga o lo'o iai nei o le elemene e mafai ona pa'u i le su'esu'eina o le au faitau ma isi tekonolosi fesoasoani tutusa. Afai o le elemene e mafai ona pa'u ua tapunia ona o le faaletonu, e tatau ona i ai se tau o le aria-expanded="false"
. Afai ua e setiina le mea e mafai ona pa'u e tatala e ala ile fa'aoga ole in
vasega, setiaria-expanded="true"
ile pule. O le plugin e otometi lava ona fesuia'i lenei uiga e fa'atatau pe ua tatala pe tapuni le mea e mafai ona pa'u pe leai.
E le gata i lea, afai o lau elemene e pulea o loʻo tulimataʻia se elemene e tasi e mafai ona paʻu - o le data-target
uiga o loʻo faʻasino i se id
tagata filifilia - e mafai ona e faʻaopoopoina se aria-controls
uiga faʻaopoopo i le elemene faʻatonutonu, o loʻo i ai id
le elemene e mafai ona paʻu. Ua fa'aogaina e le aufaitau mata fa'aonaponei ma fa'atekonolosi feso'ota'i tutusa lenei uiga e tu'uina atu ai i tagata fa'aoga ni ala pupuu fa'aopoopo e fa'atautaia sa'o ai i le elemene e mafai ona pa'u.
O le pa'u fa'apipi'i fa'aoga ni nai vasega e taulima ai le si'i mamafa:
.collapse
nana le anotusi.collapse.in
fa'aalia le anotusi.collapsing
e faaopoopo pe a amata le suiga, ma aveese pe a umaO nei vasega e mafai ona maua i component-animations.less
.
Na'o le fa'aopoopo data-toggle="collapse"
ma le a data-target
i le elemene e otometi ona tu'uina atu le fa'atonuga o se elemene e mafai ona pa'u. E data-target
talia e le uiga le CSS filifilia e fa'aoga le pa'u i. Ia mautinoa e faaopoopo le vasega collapse
i le elemene e mafai ona pa'u. Afai e te mana'o e le'i tatalaina, fa'aopoopo le vasega fa'aopoopo in
.
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.
Fa'aaga ma le lima ile:
O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-
, pei o le data-parent=""
.
Igoa | ituaiga | faaletonu | fa'amatalaga |
---|---|---|---|
matua | tagata filifilia | pepelo | Afai e tu'uina atu se tagata filifilia, ona tapunia uma lea o elemene e mafai ona pa'u i lalo o le matua fa'amaonia pe a fa'aalia le mea e mafai ona pa'u. (e tutusa ma amioga fa'ale-aganu'u - e fa'alagolago i le panel vasega) |
fesuia'i | boolean | moni | Fa'asolo le elemene e mafai ona pa'u i luga ole valaau |
.collapse(options)
Fa'aagaoioia lau anotusi o se elemene e mafai ona pa'u. Talia se filifiliga faitalia object
.
.collapse('toggle')
Su'e se elemene e mafai ona pa'u e fa'aali pe natia. Toe fo'i i le tagata vala'au a'o le'i fa'aalia pe natia le elemene e mafai ona pa'u (fa'atusa a'o le'i tupu le shown.bs.collapse
po'o le hidden.bs.collapse
mea na tupu).
.collapse('show')
Fa'aalia se elemene e mafai ona pa'u. Toe fo'i i le tagata vala'au a'o le'i fa'aalia moni le elemene e mafai ona pa'u (fa'atusa a'o le'i tupu le shown.bs.collapse
mea na tupu).
.collapse('hide')
Natia se elemene e mafai ona pa'u. Toe fo'i i le tagata vala'au a'o le'i natia moni le elemene e mafai ona pa'u (fa'atusa a'o le'i tupu le hidden.bs.collapse
mea na tupu).
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.
Ituaiga Mea | Fa'amatalaga |
---|---|
fa'aali.bs.pa'ū | E mu vave lenei mea pe a show valaʻau le auala faʻataʻitaʻiga. |
fa'aalia.bs.pa'u | 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). |
hide.bs.collapse | O lenei mea na tupu e faʻamalo vave pe a hide valaʻau le metotia. |
hidden.bs.collapse | 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). |
O se vaega fa'ata'ita'i mo le tietie uila i elemene, pei o se carousel. E le lagolagoina carousels.
O le vaega o le carousel e masani lava ona le ogatasi ma tulaga fa'aogaina. Afai e te manaʻomia le tausisia, faʻamolemole mafaufau i isi filifiliga mo le tuʻuina atu o au mea.
O Bootstrap e fa'aaoga na'o le CSS3 mo ana fa'afiafiaga, ae le lagolagoina e le Internet Explorer 8 & 9 ia mea totino CSS talafeagai. O le mea lea, e leai ni fa'asologa o suiga fa'asolo pe a fa'aogaina nei su'esu'ega. Ua matou filifili ma le loto i ai e aua ne'i fa'aaofia ai fa'aletonu e fa'atatau i le jQuery mo suiga.
E .active
tatau ona fa'aopoopo le vasega i se tasi o fa'ata'ita'iga. A leai, o le a le mafai ona iloa le carousel.
O vasega .glyphicon .glyphicon-chevron-left
ma .glyphicon .glyphicon-chevron-right
e le mana'omia mo fa'atonuga. O le Bootstrap e tuʻuina atu .icon-prev
ma .icon-next
e avea ma faʻamatalaga manino unicode.
Fa'aopoopo fa'amatalaga i au fa'ase'e faigofie ma le .carousel-caption
elemene i totonu o so'o se .item
. Tu'u toetoe lava o so'o se HTML e filifili i totonu iina ma o le a otometi lava ona fa'aoga ma fa'atulaga.
E mana'omia e ta'avale le fa'aogaina o se id
atigipusa pito i fafo (le .carousel
) mo fa'atonuga o ta'avale e fa'atino lelei. Pe a fa'aopoopo i ai le tele o ta'avale, po'o le suia o se ta'avale id
, ia mautinoa e fa'afou fa'atonuga talafeagai.
Fa'aoga uiga fa'amaumauga e faigofie ai ona pulea le tulaga o le carousel. data-slide
talia upu autu prev
po'o next
, lea e suia ai le tulaga fa'ase'e fa'atatau i lona tulaga o iai nei. I le isi itu, fa'aaoga data-slide-to
e pasi ai se fa'ailoga fa'ase'e mata'utia i le carousel data-slide-to="2"
, lea e sui ai le tulaga fa'ase'e i se fa'ailoga fa'apitoa e amata i le 0
.
O le data-ride="carousel"
uiga e fa'aoga e fa'ailoga ai se carousel e fa'aola e amata ile utaina o itulau. E le mafai ona fa'aogaina fa'atasi ma (e le toe mana'omia) fa'amatalaga manino JavaScript amata o le carousel tutusa.
Valaau ma le lima le carousel ma:
O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-
, pei o le data-interval=""
.
Igoa | ituaiga | faaletonu | fa'amatalaga |
---|---|---|---|
vaeluaga | numera | 5000 | Le aofa'i o le taimi e fa'atuai ai i le va o le ta'avale otometi se mea. Afai e sese, e le otometi le taamilomilo o le carousel. |
taofi | manoa | null | "faapepa" | Afai e seti i le "hover" , taofi le uila o le carousel i luga mouseenter ma toe faaauau le uila o le carousel i luga mouseleave . Afai e seti i le null , o le faapepe i luga o le carousel e le taofia ai. |
afifi | boolean | moni | Pe tatau ona fa'aauau le ta'amilosaga o le ta'amilosaga pe fa'agata fo'i. |
piano | boolean | moni | Pe tatau ona tali atu le carousel i mea e tutupu i le keyboard. |
.carousel(options)
Fa'amataina le carousel i se filifiliga e filifili object
ma amata ai le uila i mea.
.carousel('cycle')
Taamilomilo i aitema carousel mai le agavale i le taumatau.
.carousel('pause')
Taofi le carousel mai le tietie uila i aitema.
.carousel(number)
Ta'amilomilo le carousel i se fa'avaa fa'apitoa (fa'avae 0, tutusa ma se fa'asologa).
.carousel('prev')
Ta'amilosaga i le mea muamua.
.carousel('next')
Ta'amilosaga i le isi mea.
O le vasega carousel a Bootstrap o lo'o fa'aalia ai mea e lua mo le fa'aogaina o galuega fa'aoga.
O mea tutupu uma e lua e iai mea fa'aopoopo nei:
direction
: Le itu o lo'o fa'ase'e ai le carousel ( "left"
po'o le "right"
).relatedTarget
: O le elemene DOM o loʻo faʻasolo i totonu o le mea o loʻo galue.O mea uma e tutupu i le carousel e fa'amu i le carousel lava ia (ie i le <div class="carousel">
).
Ituaiga Mea | Fa'amatalaga |
---|---|
slide.bs.carousel | E mu vave lenei mea pe a fa'aogaina le slide auala fa'ata'ita'i. |
slid.bs.carousel | E fa'amu lenei mea pe a mae'a le fa'ase'esega fa'ase'e o le carousel. |
O le fa'apipi'i fa'apipi'i e ki position: fixed;
ma tape, fa'aa'oa'o le a'afiaga o lo'o maua i le position: sticky;
. O le subnavigation i le itu taumatau o se faʻaaliga ola o le faʻapipiʻi faʻapipiʻi.
Fa'aoga le fa'apipi'i fa'apipi'i e ala i fa'amatalaga uiga po'o le lima ma lau lava JavaScript. I tulaga uma e lua, e tatau ona e tuʻuina atu le CSS mo le faʻatulagaina ma le lautele o lau mea faʻapipiʻi.
Manatua: Aua le faʻaogaina le faʻapipiʻi faʻapipiʻi i luga o se elemene o loʻo i totonu o se elemene faʻatulagaina, e pei o se koluma toso pe tuleia, ona o se pusa faʻaalia Safari .
O le fa'apipi'i fa'apipi'i e fesuia'i i le va o vasega se tolu, e ta'itasi e fai ma sui o se setete patino: .affix
, .affix-top
, ma .affix-bottom
. E tatau ona e tu'uina atu sitaili, se'i vagana ai le position: fixed;
on .affix
, mo nei vasega oe lava (tuto'atasi mai lenei fa'apipi'i) e fa'atautaia ai tulaga tonu.
O le auala lenei e galue ai le affix plugin:
.affix-top
e faʻaalia ai le elemene o loʻo i lona tulaga pito i luga. I le taimi nei e leai se CSS tulaga e manaʻomia..affix
e sui ai .affix-top
ma seti position: fixed;
(tuuina mai e Bootstrap's CSS)..affix
i le .affix-bottom
. Talu ai o offsets e filifili, o le setiina e mana'omia ai oe e seti le CSS talafeagai. I lenei tulaga, faaopoopo position: absolute;
pe a manaʻomia. O lo'o fa'aogaina e le fa'apipi'i le uiga fa'amaumauga po'o le filifiliga JavaScript e iloa ai le mea e tu'u ai le elemene mai iina.Mulimuli i laasaga o loʻo i luga e seti ai lau CSS mo se tasi o filifiliga faʻaoga i lalo.
Ina ia faigofie ona faʻapipiʻi amioga i soʻo se elemene, naʻo le faʻaopoopo data-spy="affix"
i le elemene e te manaʻo e sipai ai. Fa'aoga offsets e fa'amatala ai le taimi e sui ai le pine o se elemene.
Valaau le affix plugin e ala i le JavaScript:
O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-
, pei o le data-offset-top="200"
.
Igoa | ituaiga | faaletonu | fa'amatalaga |
---|---|---|---|
fa'apena | numera | galuega | mea faitino | 10 | Pixels e fa'asolo mai le lau pe a fa'atatau le tulaga o le ta'ai. Afai e tu'uina atu se numera tasi, o le a fa'aoga le offset i pito i luga ma lalo. Ina ia tuʻuina atu se mea faʻapitoa, pito i lalo ma le pito i luga naʻo le tuʻuina atu o se mea offset: { top: 10 } poʻo offset: { top: 10, bottom: 5 } . Fa'aoga se galuega pe a mana'omia le fa'atatauina ma le malosi o se offset. |
sini | tagata filifilia | node | elemene jQuery | le window mea faitino |
Fa'amaoti le elemene o lo'o fa'atatau i le fa'aopoopo. |
.affix(options)
Fa'agaoioi lau anotusi e pei o mea fa'apipi'i. Talia se filifiliga faitalia object
.
.affix('checkPosition')
Toe fuaina le tulaga o le fa'apipi'i e fa'atatau i le fua, tulaga, ma le tulaga ta'ai o elemene talafeagai. O le .affix
, .affix-top
, ma .affix-bottom
vasega e fa'aopoopo pe ave'ese mai mea fa'apipi'i e tusa ai ma le setete fou. E mana'omia le vala'au lea i so'o se taimi e suia ai le tele o mea fa'apipi'i po'o le elemene fa'atatau, ina ia mautinoa le tu'u sa'o o mea fa'apipi'i.
O le fa'apipi'i fa'apipi'i a Bootstrap e fa'aalia ai ni nai mea na tutupu mo le fa'aogaina o galuega fa'apipi'i.
Ituaiga Mea | Fa'amatalaga |
---|---|
affix.bs.affix | O lenei mea na tupu e mu vave a'o le'i fa'apipi'i le elemene. |
fa'apipi'i.bs.affix | O lenei mea e tupu e faʻamalo pe a uma ona faʻapipiʻi le elemene. |
affix-top.bs.affix | O lenei mea na tupu e mu vave a'o le'i fa'apipi'i i luga le elemene. |
affixed-top.bs.affix | O lenei mea e tupu e faʻamalo pe a uma ona faʻapipiʻi le elemene-pito i luga. |
affix-bottom.bs.affix | O lenei mea na tupu e mu vave a'o le'i fa'apipi'i i lalo le elemene. |
affixed-bottom.bs.affix | O lenei mea e tupu e faʻamalo pe a uma ona faʻapipiʻi le elemene i lalo. |