Javascript ho an'ny Bootstrap

Ampiaina ny singa ao amin'ny Bootstrap — miaraka amin'ny plugins jQuery 12 mahazatra.

Modals

Mifanaraka amin'ny fomba tsotra nefa mora ampiasaina, maka ny plugin javascript modal nentim-paharazana miaraka amin'ny fampiasa kely indrindra ilaina sy ny default.

Dropdowns

Ampio ny menio midina amin'ny zavatra rehetra ao amin'ny Bootstrap miaraka amin'ity plugin tsotra ity. Ny Bootstrap dia manasongadina ny fanohanan'ny menio midina feno ao amin'ny navbar, tabilao ary pilina.

Scrollspy

Ampiasao ny scrollspy hanavao ho azy ireo rohy ao amin'ny navbaro mba hampisehoana ny rohy mavitrika ankehitriny mifototra amin'ny toeran'ny horonam-boky.

Tabs azo togglable

Ampiasao ity plugin ity mba hahatonga ny tabilao sy ny pilina ho ilaina kokoa amin'ny alàlan'ny famelana azy ireo hivezivezy amin'ny takelaka misy tabilao amin'ny atiny eo an-toerana.

Tooltips

Hevitra vaovao momba ny jQuery Tipsy plugin, Tooltips dia tsy miantehitra amin'ny sary — mampiasa CSS3 izy ireo ho an'ny sary mihetsika sy data-attributes amin'ny fitahirizana lohateny eo an-toerana.

Popovers *

Manampia votoaty mipetaka kely, toy ny ao amin'ny iPad, amin'ny singa rehetra amin'ny fametrahana fampahalalana faharoa.

* Mitaky Tooltips ampidirina

Hafatra fanairana

Ny plugin fampandrenesana dia kilasy kely hanampiana fampiasa akaiky amin'ny fanairana.

bokotra

Manaova bebe kokoa amin'ny bokotra. Ny bokotra fanaraha-maso dia manambara na mamorona vondrona bokotra ho an'ny singa maro kokoa toy ny barazy.

firodanan'ny

Mahazoa fomba fototra sy fanohanana mora azo ho an'ny singa azo harodana toy ny akorandriaka sy ny fitetezana.

Carousel

Mamorona rindran-damina amin'ny votoaty tianao homena sary mihetsika misy votoaty.

Typeahead

Plugin fototra sy mora miitatra ho an'ny famoronana haingana karazana lohan-dahatsoratra kanto miaraka amin'ny endri-tsoratra rehetra.

Tetezamita *

Ho an'ny vokatry ny tetezamita tsotra dia ampidiro indray mandeha indray mandeha ny bootstrap-transition.js mba hivezivezy amin'ny modals na fampandrenesana fampandrenesana.

* Ilaina amin'ny animation amin'ny plugins

Fampitandremana! Ny plugins javascript rehetra dia mitaky ny dikan-teny farany amin'ny jQuery.

Momba ny modals

Mifanaraka amin'ny fomba tsotra nefa mora ampiasaina, maka ny plugin javascript modal nentim-paharazana miaraka amin'ny fampiasa kely indrindra ilaina sy ny default.

Misintona rakitra

Ohatra static

Ity ambany ity ny modèle nadika statika.

Demo mivantana

Toggle modal amin'ny alalan'ny javascript amin'ny fipihana ny bokotra eto ambany. Hivezivezy midina izy io ary hanjavona avy any an-tampon'ny pejy.

Alefaso ny modal demo

Mampiasa bootstrap-modal

Antsoy ny modal amin'ny javascript:

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

FANDIKANA

Anarana karazana toerana misy anao Description
resahana boolean marina Ahitana singa modal-backdrop. Raha tsy izany, manendry staticny backdrop izay tsy manidy ny modal amin'ny tsindry.
Ohatra boolean marina Manakatona ny modal rehefa tsindriana ny fanalahidin'ny escape
FAMPISEHOANA boolean marina Mampiseho ny modal rehefa natomboka.

fanamarihana

Azonao atao ny manetsika ny modals amin'ny pejinao mora nefa tsy mila manoratra andalana iray amin'ny javascript. Apetraho fotsiny data-toggle="modal"amin'ny singa mpanara-maso misy a data-target="#foo"na href="#foo"mifanitsy amin'ny id singa modal, ary rehefa kitihina dia hanomboka ny modal-nao.

Ary koa, mba hanampiana safidy amin'ny ohatra modal anao, ampidiro fotsiny izy ireo ho toetra angon-drakitra fanampiny amin'ny singa fanaraha-maso na ny marika modal.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Mandehana Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. < karazana bokotra = "button" class = "akaiky" data-dismiss = "modal" > × </bt>
  4. <h3> Lohatenin'ny modely </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Vatana tsara iray… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Akatona </a>
  11. <a href = "#" class = "btn btn-primary" > Tehirizo ny fanovana </a>
  12. </div>
  13. </div>
Fampitandremana! Raha tianao ny hamelona sy hivoaka ny modanao dia ampio .fadekilasy iray fotsiny ny .modalsinga (jereo ny demo raha te hahita izany amin'ny hetsika) ary ampidiro ny bootstrap-transition.js.

fomba

.modal(safidy)

Mampihetsika ny atiny ho toy ny modal. Manaiky safidy azo atao object.

  1. $ ( '#myModal' ). modal ({
  2. fitendry : diso
  3. })

.modal('toggle')

Manova fomba tanana iray.

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

.modal('show')

Manokatra modal amin'ny tanana.

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

.modal('afina')

Manafina modal iray amin'ny tanana.

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

zava-mitranga

Ny kilasy modal an'ny Bootstrap dia mampiseho hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fiasa modal.

Event Description
FAMPISEHOANA Mirehitra avy hatrany ity hetsika ity rehefa showantsoina ny fomba fiasa.
naseho Ity hetsika ity dia voaroaka rehefa natao ho hitan'ny mpampiasa ny modal (hiandry ny famitana ny fifindrana css).
afeno ny Ity hetsika ity dia alefa avy hatrany rehefa hidenantsoina ny fomba fiasa.
Zavatra tsy Ity hetsika ity dia alefa rehefa vita ny nafenina tamin'ny mpampiasa ny modal (hiandry ny famitana ny css transition).
  1. $ ( '#myModal' ). on ( 'miafina' , asa () {
  2. // manao zavatra…
  3. })

Ny plugin ScrollSpy dia natao hanavao ho azy ireo tanjona nav mifototra amin'ny toeran'ny horonam-boky.

Misintona rakitra

Ohatra navbar misy scrollspy

Tsindrio ny faritra etsy ambany ary jereo ny fanavaozam-baovao. Hasongadina ihany koa ireo singa ambany midina. Andramo io!

@matavy

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi talohan'ny namidy azy ireo. Tumblr farm-to-table zon'ny bisikileta na inona na inona. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui mety mbola tsy naheno azy ireo ianao ary ny cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tatoazy accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa volombava skateboard, adipisicing fugiat velit pitchfork volombava. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat efatra loko nisi, ea helvetica nulla carles. Kamiao sakafo palitao cosby misy tatoazy, vinyl's quis non freegan an'i mcsweeney. Lo-fi wes anderson +1 sartorial. Carles tsy aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

iray

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bike rights adipisicing banh mi, velit ea sunt next level locavore single-original coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS dia adipisicing. Consectetur misy DIY kely messenger kitapo. Cred ex in, maharitra delectus consectetur fanny pack iphone.

rOA

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 na inona na inona kamiao sakafo delectus. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats angamba mbola tsy henonao momba azy ireo consequat hoodie tsy misy gluten lo-fi fap aliquip. Miasa elit placeat alohan'ny hamidy, 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.


Mampiasa bootstrap-scrollspy.js

Antsoy ny scrollspy amin'ny alàlan'ny javascript:

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

fanamarihana

Raha te hampiditra mora foana ny fihetsika scrollspy amin'ny navigateur topbar anao, ampio fotsiny data-spy="scroll"ny singa tianao hitsikilo (matetika dia ny vatana izany).

  1. <body data-spy = "scroll" > ... </body>
Fampitandremana! Ny rohy Navbar dia tsy maintsy manana tanjona id azo vahana. Ohatra, <a href="#home">home</a>tsy maintsy mifanaraka amin'ny zavatra ao amin'ny dom toy ny <div id="home"></div>.

fomba

.scrollspy('refresh')

Rehefa mampiasa scrollspy miaraka amin'ny fanampiana na fanesorana singa ao amin'ny DOM ianao dia mila miantso ny fomba fanavaozana toy izao:

  1. $ ( '[data-spy="scroll"]' ). tsirairay ( function () {
  2. var $spy = $ ( ity ). scrollspy ( 'refresh' )
  3. });

FANDIKANA

Anarana karazana toerana misy anao Description
offset isa 10 Pikaola ho entin'ny tampony rehefa manao kajy ny toeran'ny horonam-boky.

zava-mitranga

Event Description
hampavitrika Ity hetsika ity dia mirehitra isaky ny misy singa vaovao mampandeha ny scrollspy.

Ity plugin ity dia manampy tabilao haingana sy mavitrika ary takelaka ho an'ny fifindrana amin'ny atiny eo an-toerana.

Misintona rakitra

Ohatra tabilao

Kitiho ny kiheba etsy ambany raha hivezivezy eo amin'ny tontonana miafina, na dia amin'ny alàlan'ny menio midina.

Denim manta angamba mbola tsy henonao ny momba azy ireo pataloha jeans Austin. Nesciunt tofu stumptown aliqua, fanadiovana retro synth master. Ny volombava cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Alefaso toerana amin'ny salvia cillum iphone. Seitan aliquip quis cardigan akanjo amerikana, mpivaro-kena 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.


Mampiasa bootstrap-tab.js

Alefaso amin'ny alalan'ny javascript ny tabilao misy tabilao (mila ampihetsika tsirairay ny tabilao tsirairay):

  1. $ ( '#myTab a' ). tsindrio ( function ( e ) {
  2. e . preventDefault ();
  3. $ ( ity ). tabilao ( 'show' );
  4. })

Azonao atao ny manetsika ny tabilao tsirairay amin'ny fomba maro:

  1. $ ( '#myTab a[href="#profile"]' ). tabilao ( 'show' ); // Mifidiana tabilao amin'ny anarana
  2. $ ( '#myTab a:voalohany' ). tabilao ( 'show' ); // Safidio ny tabilao voalohany
  3. $ ( '#myTab a:last' ). tabilao ( 'show' ); // Fidio ny tabilao farany
  4. $ ( '#myTab li:eq(2) a' ). tabilao ( 'show' ); // Mifidiana tabilao fahatelo (0-indexed)

fanamarihana

Azonao atao ny manetsika kiheba na pilule navigation nefa tsy manoratra javascript amin'ny alalan'ny famaritana fotsiny data-toggle="tab"na data-toggle="pill"amin'ny singa iray. Ny fampidirana ny navsy ny nav-tabskilasy amin'ny tabilao uldia hampihatra ny styling kiheba bootstrap.

  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" > Hafatra </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Fikirana </a></li>
  6. </ul>

fomba

$().tab

Manetsika singa kiheba sy fitoeran'ny atiny. Ny tabilao dia tokony hanana na data-targetkendrena hrefny node container ao amin'ny 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" > Hafatra </a></li>
  5. <li><a href = "#settings" > Fikirana </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 = "message" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( asa () {
  17. $ ( '#myTab a:last' ). tabilao ( 'show' );
  18. })
  19. </script>

zava-mitranga

Event Description
FAMPISEHOANA Ity hetsika ity dia mirehitra amin'ny seho kiheba, saingy alohan'ny hisehoan'ny kiheba vaovao. Ampiasao event.targetsy event.relatedTargetlasibatra ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy).
naseho Ity hetsika ity dia mirehitra amin'ny seho kiheba rehefa avy naseho ny kiheba iray. Ampiasao event.targetsy event.relatedTargetlasibatra ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'aseho' , asa ( e ) {
  2. e . tanjona // vakizoro mavitrika
  3. e . relatedTarget // tabilao teo aloha
  4. })

Momba ny Tooltips

Nahazo aingam-panahy avy amin'ny plugin jQuery.tipsy tena tsara nosoratan'i Jason Frame; Tooltips dia kinova nohavaozina, izay tsy miankina amin'ny sary, mampiasa css3 ho an'ny sary mihetsika, ary data-attributes ho an'ny fitahirizana lohateny eo an-toerana.

Misintona rakitra

Ohatra amin'ny fampiasana Tooltips

Mitsangàna eo amin'ny rohy etsy ambany raha te hahita fitaovana:

pataloha tery next level keffiyeh angamba mbola tsy naheno azy ireo ianao. Tranon-tsary volombava manta denim letterpress vegan messenger bag stumptown. Seitan Farm-to-table, mcsweeney's fixie sustainable quinoa 8-bit american apparel dia manana terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, efatra loko mcsweeney's cleanse vegan chambray. Mpanao asa tanana tena mahatsikaiky na inona na inona keytar , scenester farm-to-table banksy Austin twitter mitantana freegan cred denim manta kafe tokana nipoitra.


Mampiasa bootstrap-tooltip.js

Alefaso amin'ny alàlan'ny javascript ny toro-hevitra:

  1. $ ( '#ohatra' ). tooltip ( safidy )

FANDIKANA

Anarana karazana toerana misy anao Description
fanentanana boolean marina ampiharo css fade transition amin'ny tooltip
fametrahana string|function 'top' ahoana ny fametrahana ny tondro-fitaovana - top | ambany | ankavia | TSARA
mpifidy tady DISO Raha misy mpifidy omena dia atolotra amin'ireo tanjona voafaritra ireo zavatra momba ny fitaovana.
lohateny string | asa '' sandan'ny lohateny default raha tsy misy ny tenifototra `title`
miteraka tady 'hover' ny fomba fampandehanana ny topy fitaovana - hover | mifantoka | boky fampianarana
fahatarana laharana | zavatra 0

fanemorana ny fampisehoana sy ny fanafenana ny tondro fitaovana (ms) - tsy mihatra amin'ny karazana trigger manual

Raha misy laharana omena dia mihatra amin'ny fanafenana/seho ny fahatarana

Ny firafitry ny zavatra dia:delay: { show: 500, hide: 100 }

Fampitandremana! Ny safidy ho an'ny toro-làlana tsirairay dia azo faritana amin'ny alàlan'ny fampiasana ny toetran'ny data.

fanamarihana

Noho ny antony fampandehanana, ny Tooltip sy Popover data-apis dia nifidy.

  1. <a href = "#" rel = "tooltip" title = "voalohany fitaovana" > asio antsasany eo amboniny </a>

fomba

$().tooltip(safidy)

Ampifandraiso amin'ny fanangonana singa iray ny mpitantana fitaovana.

.tooltip('show')

Maneho ny tondro-fitaovan'ny singa iray.

  1. $ ( '#element' ). tooltip ( 'show' )

.tooltip('manafina')

Manafina ny tondro-fitaovan'ny singa iray.

  1. $ ( '#element' ). tondro -fitaovana ( 'manafina' )

.tooltip('toggle')

Manova ny tondro-fitaovan'ny singa iray.

  1. $ ( '#element' ). fitaovana ( 'toggle' )

Momba ny popovers

Manampia votoaty mipetaka kely, toy ny ao amin'ny iPad, amin'ny singa rehetra amin'ny fametrahana fampahalalana faharoa.

* Mitaky Tooltip ampidirina

Misintona rakitra

Ohatra hover popover

Atsofohy eo amin'ny bokotra mba hanesorana ny popover.


Mampiasa bootstrap-popover.js

Alefaso ny popovers amin'ny javascript:

  1. $ ( '#ohatra' ). popover ( safidy )

FANDIKANA

Anarana karazana toerana misy anao Description
fanentanana boolean marina ampiharo css fade transition amin'ny tooltip
fametrahana string|function 'marina' ahoana ny fametrahana ny popover - top | ambany | ankavia | TSARA
mpifidy tady DISO raha misy mpifidy omena, dia atolotra amin'ireo tanjona voafaritra ireo zavatra momba ny fitaovana
miteraka tady 'hover' ny fomba fampandehanana ny topy fitaovana - hover | mifantoka | boky fampianarana
lohateny string | asa '' sanda titre default raha tsy misy ny toetra `title`
votoaty string | asa '' sandan'ny atiny default raha tsy misy ny toetra `data-content`
fahatarana laharana | zavatra 0

fanemorana ny fampisehoana sy ny fanafenana ny popover (ms) - tsy mihatra amin'ny karazana trigger manual

Raha misy laharana omena dia mihatra amin'ny fanafenana/seho ny fahatarana

Ny firafitry ny zavatra dia:delay: { show: 500, hide: 100 }

Fampitandremana! Ny safidy ho an'ny popovers tsirairay dia azo faritana amin'ny alàlan'ny fampiasana ny toetran'ny data.

fanamarihana

Noho ny antony fampandehanana, ny Tooltip sy Popover data-apis dia nifidy.

fomba

$().popover(safidy)

Manomboha popover ho an'ny fanangonana singa.

.popover('show')

Manambara singa popover.

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

.popover('afeno')

Manafina singa popover.

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

.popover('toggle')

Manova singa popover.

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

Momba ny fanairana

Ny plugin fampandrenesana dia kilasy kely hanampiana fampiasa akaiky amin'ny fanairana.

DOWNLOAD

Fampandrenesana ohatra

Ny plugin fampandrenesana dia miasa amin'ny hafatra fanairana mahazatra, ary manakana ny hafatra.

Guacamole masina! Jereo tsara ny tenanao, tsy dia tsara loatra ianao.

Oh snap! Nahazo fahadisoana ianao!

Ovay izao sy izao ary andramo indray. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Raiso ity hetsika ity Na ataovy izao


Mampiasa bootstrap-alert.js

Alefaso ny fandroahana fanairana amin'ny alàlan'ny javascript:

  1. $ ( ".alert" ). mailo ()

fanamarihana

Ampio fotsiny data-dismiss="alert"amin'ny bokotra akaiky anao mba hanomezana fampiasa akaiky fanairana ho azy.

  1. <a class = "akaiky" data-dismiss = "alert" href = "#" > × </a>

fomba

$().alert()

Manarona ny fanairana rehetra miaraka amin'ny fiasa akaiky. Mba hampihetsi-po ny fanairanao rehefa mihidy dia ataovy azo antoka fa efa nampiharina tamin'izy ireo ny .fadesy kilasy..in

.alert('akaiky')

Manidy fanairana.

  1. $ ( ".alert" ). fanairana ( 'akaiky' )

zava-mitranga

Ny kilasy fanairana ao amin'ny Bootstrap dia mampiseho hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fiasa fanairana.

Event Description
AKAIKY Mirehitra avy hatrany ity hetsika ity rehefa closeantsoina ny fomba fiasa.
mihidy Tafavoaka ity hetsika ity rehefa nakatona ny fanairana (hiandry ny fahavitan'ny fifindrana css).
  1. $ ( '#my-alert' ). mamatotra ( 'nakatona' , asa () {
  2. // manao zavatra…
  3. })

About

Manaova bebe kokoa amin'ny bokotra. Ny bokotra fanaraha-maso dia manambara na mamorona vondrona bokotra ho an'ny singa maro kokoa toy ny barazy.

Misintona rakitra

Fampiasana ohatra

Ampiasao ny plugins bokotra ho an'ny fanjakana sy ny toggles.

Stateful
Toggle tokana
Checkbox
fampielezam-peo

Mampiasa bootstrap-button.js

Alefaso amin'ny alalan'ny javascript ny bokotra:

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

fanamarihana

Ny toetran'ny data dia tafiditra ao amin'ny plugin bokotra. Jereo ny kaody ohatra etsy ambany ho an'ny karazana marika isan-karazany.

  1. <!-- Ampio data-toggle="button" mba hampavitrika ny famadihana amin'ny bokotra tokana -->
  2. <button class = "btn" data-toggle = "button" > Toggle Toggle </button>
  3.  
  4. <!-- Ampio data-toggle="buttons-checkbox" ho an'ny fomba fanodikodinana amin'ny btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Ankavia </bt>
  7. <button class = "btn" > Afovoany </button>
  8. <button class = "btn" > Right </button>
  9. </div>
  10.  
  11. <!-- Ampio data-toggle="buttons-radio" ho an'ny fomba fampielezam-peo amin'ny btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Ankavia </bt>
  14. <button class = "btn" > Afovoany </button>
  15. <button class = "btn" > Right </button>
  16. </div>

fomba

$().button('toggle')

Manova ny toetry ny fanosehana. Manome ny bokotra ny endrika fa efa navitrika.

Fampitandremana! Azonao atao ny manova ny bokotra automatique amin'ny fampiasana ny data-toggletoetra.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('loading')

Mametraka ny toetry ny bokotra amin'ny fametahana - manafoana ny bokotra ary manova lahatsoratra amin'ny fandefasana lahatsoratra. Ny fametahana lahatsoratra dia tokony hofaritana amin'ny singa bokotra amin'ny fampiasana ny toetra angona data-loading-text.

  1. <button class = "btn" data-loading-text = "loading stuff..." > ... </button>
Fampitandremana! Firefox dia manohy ny toetry ny kilema amin'ny famoahana pejy . Ny vahaolana amin'izany dia ny fampiasana autocomplete="off".

$().button('reset')

Mamerina ny toetry ny bokotra - manova lahatsoratra amin'ny lahatsoratra tany am-boalohany.

$().button(string)

Mamerina ny toetry ny bokotra - manova lahatsoratra amin'ny toetry ny lahatsoratra voafaritra.

  1. <button class = "btn" data-complete-text = "vita!" > ... </bokotra>
  2. <script>
  3. $ ( '.btn' ). bokotra ( 'feno' )
  4. </script>

About

Mahazoa fomba fototra sy fanohanana mora azo ho an'ny singa azo harodana toy ny akorandriaka sy ny fitetezana.

Misintona rakitra

* Mila ampidirina ny plugin Transitions.

Ohatra accordion

Amin'ny fampiasana ny plugin collapse, dia nanamboatra widget fomba accordion tsotra izahay:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 amboadia volana officia aute, tsy cupidatat skateboard dolor brunch. Kamiao sakafo quinoa nesciunt laborum eiusmod. Brunch 3 amboadia moon tempor, sunt aliqua asio vorona eo amboniny angisy kafe tokana niaviany nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur mpivaro-kena vice lomo. Leggings occaecat craft beer farm-to-table, denim manta aesthetic synth nesciunt mety mbola tsy naheno azy ireo ianao accusamus labore VHS maharitra.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 amboadia volana officia aute, tsy cupidatat skateboard dolor brunch. Kamiao sakafo quinoa nesciunt laborum eiusmod. Brunch 3 amboadia moon tempor, sunt aliqua asio vorona eo amboniny angisy kafe tokana niaviany nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur mpivaro-kena vice lomo. Leggings occaecat craft beer farm-to-table, denim manta aesthetic synth nesciunt mety mbola tsy naheno azy ireo ianao accusamus labore VHS maharitra.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 amboadia volana officia aute, tsy cupidatat skateboard dolor brunch. Kamiao sakafo quinoa nesciunt laborum eiusmod. Brunch 3 amboadia moon tempor, sunt aliqua asio vorona eo amboniny angisy kafe tokana niaviany nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur mpivaro-kena vice lomo. Leggings occaecat craft beer farm-to-table, denim manta aesthetic synth nesciunt mety mbola tsy naheno azy ireo ianao accusamus labore VHS maharitra.

Mampiasa bootstrap-collapse.js

Alefa amin'ny javascript:

  1. $ ( ".collapse" ). mirodana ()

FANDIKANA

Anarana karazana toerana misy anao Description
ray aman-dreny mpifidy DISO Raha mifidy dia hikatona avokoa ny singa azo harodana eo ambanin'ny ray aman-dreny voatondro rehefa aseho io singa azo rava io. (mitovy amin'ny fihetsika akordionina nentim-paharazana)
mifamadika boolean marina Manova ny singa azo harodana amin'ny fiantsoana

fanamarihana

Ampio fotsiny data-toggle="collapse"ary a data-targetho singa hanendry ho azy ny fanaraha-maso ny singa azo rava. Ny data-targettoetra dia manaiky mpifidy css hampiharana ny fianjerana. Ataovy azo antoka ny manampy ny kilasy collapseamin'ny singa azo rava. Raha tianao ny hisokatra ho default dia ampio ny kilasy fanampiny in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. tsotra azo collapsible
  3. </bokotra>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Fampitandremana! Mba hanampiana ny fitantanana vondrona mitovy amin'ny akorandriaka amin'ny fanaraha-maso azo harodana, ampio ny toetran'ny data data-parent="#selector". Jereo ny demo raha te hahita an'ity hetsika ity.

fomba

.collapse(safidy)

Mampihetsika ny atiny ho singa azo harodana. Manaiky safidy azo atao object.

  1. $ ( '#myCollapsible' ). mirodana ({
  2. toggle : diso
  3. })

.collapse('toggle')

Manova singa azo harodana ho aseho na afenina.

.collapse('show')

Mampiseho singa azo harodana.

.collapse('afina')

Manafina singa azo harodana.

zava-mitranga

Ny kilasin'ny firodanan'ny Bootstrap dia mampiharihary hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fampandehanana mirodana.

Event Description
FAMPISEHOANA Mirehitra avy hatrany ity hetsika ity rehefa showantsoina ny fomba fiasa.
naseho Ity hetsika ity dia alefa rehefa misy singa mirodana hita ho hitan'ny mpampiasa (hiandry ny css transition ho vita).
afeno ny Ity hetsika ity dia alefa avy hatrany rehefa hidenantsoina ny fomba.
Zavatra tsy Ity hetsika ity dia alefa rehefa misy singa mianjera nafenina tamin'ny mpampiasa (hiandry ny fifindran'ny css ho vita).
  1. $ ( '#myCollapsible' ). on ( 'miafina' , asa () {
  2. // manao zavatra…
  3. })

About

Plugin fototra sy mora miitatra ho an'ny famoronana haingana karazana lohan-dahatsoratra kanto miaraka amin'ny endri-tsoratra rehetra.

Misintona rakitra

OHATRA

Manomboha mitendry eo amin'ny saha etsy ambany mba hampisehoana ny valin'ny lohan-tsoratra.


Mampiasa bootstrap-typeahead.js

Antsoy amin'ny alàlan'ny javascript ny loha-tendry:

  1. $ ( '.typeahead' ). litera ()

FANDIKANA

Anarana karazana toerana misy anao Description
Source fihaingoana [ ] Ny loharanom-baovao hanontaniana.
zavatra isa 8 Ny isan'ny zavatra ambony indrindra haseho ao amin'ny fidina.
matcher asa case insensitive Ny fomba ampiasaina hamaritana raha mifanaraka amin'ny singa ny fanontaniana iray. Manaiky hevitra tokana, itemizay hanoherana ny fanontaniana. Midira amin'ny fangatahana ankehitriny miaraka amin'ny this.query. Avereno boolean trueraha mifanaraka ny fangatahana.
sorter asa mifanandrify marina,
saro-pady, saro-
pady
Fomba ampiasaina handaminana ny valin'ny autocomplete. Manaiky tohan-kevitra tokana itemsary manana ny sahan'ny ohatra eo amin'ny fanoratana. Tondroy amin'ny this.query.
miloko asa manasongadina ny lalao default rehetra Fomba ampiasaina hanasongadinana ny valin'ny autocomplete. Manaiky tohan-kevitra tokana itemary manana ny sahan'ny ohatra eo amin'ny fanoratana. Tokony hamerina html.

fanamarihana

Manampia toetra angon-drakitra hanoratana singa iray misy fampiasa amin'ny typeahead.

  1. < karazana fampidirana = "text" data-provide = "typeahead" >

fomba

.typeahead(safidy)

Manomboha fampidirana miaraka amin'ny lohamilina.