Javascript ya Bootstrap

Zana ibice bya Bootstrap mubuzima-ubungubu hamwe na plugin 12 yihariye ya jQuery .

Uburyo

Byoroheje, ariko byoroshye, fata kuri gakondo ya javascript modal plugin hamwe nibikorwa byibuze bisabwa nibikorwa bisanzwe.

Ibitonyanga

Ongeraho ibimanuka hafi ya byose muri Bootstrap hamwe niyi plugin yoroshye. Bootstrap iranga menu yuzuye yamanutse kuri navbar, tabs, nibinini.

Umuzingo

Koresha umuzingo kugirango uhite uvugurura amahuza muri navbar yawe kugirango werekane ihuriro rikora rishingiye kumwanya wizingo.

Togglable tabs

Koresha iyi plugin kugirango ukore tabs hamwe nibinini byingirakamaro mubemerera guhinduranya binyuze mumeza yibirimo.

Ibikoresho

Gufata ibintu bishya kuri jQuery Tipsy plugin, Tooltips ntabwo yishingikiriza kumashusho-bakoresha CSS3 kuri animasiyo na data-ibiranga kubika izina ryibanze.

Popovers *

Ongeraho uduce duto twibirimo, nkibiri kuri iPad, kubintu byose byo guturamo amakuru yisumbuye.

* Irasaba ibikoresho byashyizwemo

Menyesha ubutumwa

Amacomeka yo kumenyesha nicyiciro gito cyo kongeramo imikorere yegeranye.

Utubuto

Kora byinshi hamwe na buto. Kugenzura buto ivuga cyangwa gukora amatsinda ya buto kubindi bikoresho nkibikoresho.

Gusenyuka

Shakisha uburyo bwibanze nubufasha bworoshye kubintu bishobora gusenyuka nka bordion hamwe nogukora.

Carousel

Kora umunezero-wo-kuzenguruka ibintu byose wifuza gutanga interineti yerekana ibiyirimo.

Imyandikire

A shingiro, byoroshye kwagura plugin yo gukora byihuse gukora imashini yimyandikire hamwe nuburyo ubwo aribwo bwose bwanditse.

Inzibacyuho *

Kubintu byoroshye byinzibacyuho, shyiramo bootstrap-inzibacyuho.js rimwe kunyerera muburyo cyangwa kuzimangana.

* Birakenewe kuri animasiyo mumacomeka

Umutwe! Amacomeka yose ya javascript arasaba verisiyo yanyuma ya jQuery.

Ibyerekeye uburyo

Byoroheje, ariko byoroshye, fata kuri gakondo ya javascript modal plugin hamwe nibikorwa byibuze bisabwa nibikorwa bisanzwe.

Kuramo dosiye

Urugero ruhamye

Hasi nuburyo bwahinduwe muburyo.

Kubaho

Hindura modal ukoresheje javascript ukanze buto hepfo. Bizanyerera kandi bishire hejuru yurupapuro.

Tangiza uburyo bwo kwerekana

Gukoresha bootstrap-modal

Hamagara modal ukoresheje javascript:

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

Amahitamo

Izina Ubwoko Mburabuzi ibisobanuro
Inyuma boolean ni ukuri Harimo modal-backdrop element. Ubundi, vuga statickuri backdrop idafunga modal kanda.
Mwandikisho boolean ni ukuri Gufunga modal mugihe urufunguzo rwo guhunga rukanda
kwerekana boolean ni ukuri Erekana modal mugihe yatangijwe.

Markup

Urashobora gukora modal kurupapuro rwawe byoroshye utiriwe wandika umurongo umwe wa javascript. Gusa shyira data-toggle="modal"kubintu bigenzura hamwe na a data-target="#foo"cyangwa href="#foo"bihuye na modal element id, kandi iyo ukanze, bizatangiza modal yawe.

Na none, kugirango wongere amahitamo kurugero rwawe, gusa ubishyiremo nkibintu byongeweho biranga ibintu haba kugenzura ibintu cyangwa modal ubwayo.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal"> Gutangiza Moderi </a>
  1. <div class = "modal guhisha" id = "myModal" >
  2. <div class = "modal-umutwe" >
  3. <buto ubwoko = "buto" urwego = "gufunga" data-gusezerera = "modal" > × </button>
  4. <h3> Umutwe wuburyo </h3>
  5. </div>
  6. <div class = "modal-umubiri" >
  7. <p> Umubiri umwe mwiza… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal"> Funga </a> _
  11. <a href = "#" class = "btn btn-primary"> Bika impinduka </a>
  12. </div>
  13. </div>
Umutwe! Niba ushaka modal yawe kugirango ibeho kandi isohoke, kongeramo urwego .fadekubintu .modal(reba kuri demo kugirango ubone ibi mubikorwa) hanyuma ushiremo bootstrap-inzibacyuho.js.

Uburyo

.modal (amahitamo)

Koresha ibikubiyemo nkibisanzwe. Emera amahitamo object.

  1. $ ( '#myModal' ). modal ({
  2. Mwandikisho : ibinyoma
  3. })

.modal ('guhinduranya')

Intoki ihinduranya modal.

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

.modal ('kwerekana')

Nintoki ifungura modal.

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

.modal ('guhisha')

Nintoki ihishe modal.

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

Ibyabaye

Icyiciro cya Bootstrap cyerekana ibyabaye bike kugirango bifatanye mubikorwa.

Icyabaye Ibisobanuro
kwerekana Ibirori birasa ako kanya mugihe showurugero rwitwa.
yerekanwe Ibirori birukanwa mugihe modal yakozwe igaragara kubakoresha (izategereza ko css inzibacyuho zirangira).
kwihisha Ibi birori birahita bisohoka mugihe uburyo hidebwurugero bwahamagawe.
byihishe Ibirori birukanwa mugihe modal yarangije guhishwa kumukoresha (izategereza ko css inzibacyuho zirangira).
  1. $ ( '#myModal' ). kuri ( 'bihishe' , imikorere () {
  2. // Gira icyo ukora…
  3. })

Gucomeka kwa ScrollSpy nuguhita uvugurura intego za nav ukurikije umwanya wizingo.

Kuramo dosiye

Urugero navbar hamwe na muzingo

Kuzenguruka aha hepfo hanyuma urebe ibishya bigenda. Ibitonyanga byamanuka bizagaragazwa kandi. Gerageza!

@fat

Ad leggings keytar, brunch id art ibirori dolor labore. Pitchfork yr enim lo-fi mbere yuko bagurisha qui. Tumblr umurima-kumeza uburenganzira bwamagare ibyo aribyo byose. Anim keffiyeh carles cardigan. Velit seitan mcsweeney ifoto yicyumba 3 impyisi ukwezi irure. Cosby swater lomo jean ikabutura, williamsburg hoodie minim qui ushobora kuba utarigeze ubyumva et cardigan kwizera ikigega culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, inguzanyo irony biodiesel keffiyeh artisan ullamco ingaruka.

@mdo

Veniam marfa ubwanwa bwa skateboard, adipisising fugiat velit pitchfork ubwanwa. Freegan ubwanwa aliqua cupidatat mcsweeney's vero. Cupidatat bane loko nisi, ea helvetica nulla carles. Tattooed cosby swater ikamyo y'ibiryo, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles imyitozo idahwitse quis gentrify. Brooklyn adipisising ubukorikori byeri vice keytar deserunt.

imwe

Occaecat commodo aliqua delectus. Fap craft inzoga deserunt skateboard ea. Lomo uburenganzira bwamagare adipisising banh mi, velit ea sunt urwego rukurikira locavore ikawa imwe ikomoka muri magna veniam. Ubuzima burebure id vinyl, echo parike ibisubizo quis aliquip banh mi pitchfork. Vero VHS est adipisising. Consectetur nisi DIY minim messenger umufuka. Cred ex in, irambye delectus consectetur fanny pack iphone.

bibiri

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 umufuka marfa icyaricyo cyose cya delectus ikamyo. Sapiente synth id assnda. Lokavore sed helvetica cliche irony, inkuba ushobora kuba utarigeze uyumva ingaruka za hoodie gluten-yubusa lo-fi fap aliquip. Umurimo elit umwanya mbere yuko bagurisha, terry richardson proident brunch nesciunt quis cosby swater pariatur keffiyeh ut helvetica umunyabukorikori. Cardigan craft byeri seitan yiteguye gukora velit. VHS chambray laboris by'agateganyo veniam. Anim mollit minim commodo ullamco inkuba.


Ukoresheje bootstrap-scrollspy.js

Hamagara umuzingo ukoresheje javascript:

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

Markup

Kugirango byoroshye kongeramo imyitwarire ya scrollspy kumurongo wawe wo hejuru, gusa ongeraho data-spy="scroll"kubintu ushaka kuneka (mubisanzwe iyi yaba umubiri).

  1. < amakuru yumubiri-maneko = "umuzingo" > ... </body>
Umutwe! Imiyoboro ya Navbar igomba kuba ifite intego id idakemuka. Kurugero, <a href="#home">home</a>ugomba guhuza ikintu muri dom nka <div id="home"></div>.

Uburyo

.scrolllspy ('kugarura')

Mugihe ukoresheje umuzingo ufatanije no kongera cyangwa gukuraho ibintu muri DOM, uzakenera guhamagara uburyo bushya nka gutya:

  1. $ ( '[data-maneko = "umuzingo"]' ). buri ( imikorere () {
  2. var $ maneko = $ ( iyi ). umuzingo ( 'kugarura' )
  3. });

Amahitamo

Izina Ubwoko Mburabuzi ibisobanuro
offset umubare 10 Pixels kugirango uve hejuru iyo ubaze umwanya wumuzingo.

Ibyabaye

Icyabaye Ibisobanuro
gukora Ibirori birashya igihe cyose ikintu gishya gihinduwe na muzingo.

Gucomeka kongeramo byihuse, imbaraga za tab hamwe nibinini bikora kugirango bihindurwe mubirimo byaho.

Kuramo dosiye

Urugero

Kanda ahanditse hepfo kugirango uhindure hagati yihishe, ndetse unyuze kumurongo.

Raw denim ushobora kuba utarigeze wumva ibya jean ikabutura Austin. Nesciunt tofu stumptown aliqua, retro synth master suku. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh inzozi zo gufata. Cosby swater eu banh mi, qui irure terry richardson ex squid. Aliquip umwanya wa saliviya cillum iphone. Seitan aliquip quis cardigan imyambaro yabanyamerika, 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.


Ukoresheje bootstrap-tab.js

Gushoboza tabbable ukoresheje javascript (buri tab igomba gukenera kugiti cye):

  1. $ ( '#myTab a' ). kanda ( imikorere ( e ) {
  2. e . gukumiraIbisanzwe ();
  3. $ ( iyi ). tab ( 'kwerekana' );
  4. })

Urashobora gukora ama tabs kugiti cye muburyo butandukanye:

  1. $ ( '#myTab a [href = "# umwirondoro"]' ). tab ( 'kwerekana' ); // Hitamo tab ukoresheje izina
  2. $ ( '#myTab a: ubanza' ). tab ( 'kwerekana' ); // Hitamo tab ya mbere
  3. $ ( '#myTab a: iheruka' ). tab ( 'kwerekana' ); // Hitamo tab ya nyuma
  4. $ ( '#myTab li: eq (2) a' ). tab ( 'kwerekana' ); // Hitamo tab ya gatatu (0-yerekana)

Markup

Urashobora gukora tab cyangwa ibinini bigenda utanditse javascript iyo ari yo yose ugaragaza gusa data-toggle="tab"cyangwa data-toggle="pill"kubintu. Ongeraho i navhamwe nav-tabsnamasomo kuri tab ulbizakoresha bootstrap tab styling.

  1. <ul class = "nav nav-tabs" >
  2. <li> <a href = "#home" data-toggle = "tab"> Urugo </a> </li>
  3. <li> <a href = "#profile" data-toggle = "tab"> Umwirondoro </a> </li>
  4. <li> <a href = "#messages" data-toggle = "tab"> Ubutumwa </a> </li>
  5. <li> <a href = "#settings" data-toggle = "tab"> Igenamiterere </a> </li>
  6. </ul>

Uburyo

$ (). tab

Gukora tab element hamwe nibikoresho birimo. Tab igomba kuba ifite a data-targetcyangwa hrefigamije icyerekezo cya kontineri muri DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li urwego = "rukora" > <a href = "#urugo"> Urugo </a> </li>
  3. <li> <a href = "#profile"> Umwirondoro </a> </li>
  4. <li> <a href = "#messages"> Ubutumwa </a> </li>
  5. <li> <a href = "#settings"> Igenamiterere </a> </li>
  6. </ul>
  7.  
  8. <div class = "tab-ibirimo" >
  9. <div class = "tab-pane ikora" id = "urugo" > ... </div>
  10. <div class = "tab-pane" id = "umwirondoro" > ... </div>
  11. <div class = "tab-pane" id = "ubutumwa" > ... </div>
  12. <div class = "tab-pane" id = "igenamiterere" > ... </div>
  13. </div>
  14.  
  15. <Inyandiko
  16. $ ( imikorere () {
  17. $ ( '#myTab a: iheruka' ). tab ( 'kwerekana' );
  18. })
  19. </script>

Ibyabaye

Icyabaye Ibisobanuro
kwerekana Ibirori birasa kuri tab yerekana, ariko mbere yuko tab nshya yerekanwe. Koresha event.targetno event.relatedTargetgutondekanya tab ikora hamwe na tab yabanjirije gukora (niba ihari).
yerekanwe Ibirori birasa kuri tab yerekanwe nyuma ya tab yerekanwe. Koresha event.targetno event.relatedTargetgutondekanya tab ikora hamwe na tab yabanjirije gukora (niba ihari).
  1. $ ( 'a [data-toggle = "tab"]' ). kuri ( 'yerekanwe' , imikorere ( e ) {
  2. e . intego // tab ikora
  3. e . bifitanye isano Intego // tab ibanza
  4. })

Ibyerekeye Ibikoresho

Ahumekewe na jQuery nziza cyane.ipipsy plugin yanditswe na Jason Frame; Ibikoresho ni verisiyo ivuguruye, idashingiye ku mashusho, koresha css3 kuri animasiyo, hamwe namakuru-ibiranga kubikwa umutwe waho.

Kuramo dosiye

Urugero rwo gukoresha ibikoresho

Hisha hejuru yibi bikurikira kugirango urebe ibikoresho:

Ipantaro ifatanye urwego rukurikira keffiyeh birashoboka ko utigeze ubyumva. Ifoto icyumba cyogosha ubwanwa mbisi denim inyuguti ya vegan messenger umufuka stumptown. Umurima-kumeza seitan, mcsweeney's fixie irambye quinoa 8-biti byabanyamerika bafite terry richardson vinyl chambray. Ubwanwa bwatsitaye, abakarigani banh mi lomo inkuba. Tofu biodiesel williamsburg marfa, bane loko mcsweeney yoza vegan chambray. Umunyabukorikori rwose birasekeje icyaricyo cyose keytar , scenester umurima-kumeza banki bankin Austin twitter ikora freegan inguzanyo mbisi denim inkomoko yikawa ya virusi.


Ukoresheje bootstrap-tooltip.js

Koresha ibikoresho ukoresheje javascript:

  1. $ ( '#Urugero' ). ibikoresho ( amahitamo )

Amahitamo

Izina Ubwoko Mburabuzi ibisobanuro
animasiyo boolean ni ukuri Koresha css fade inzibacyuho kubikoresho
gushyira umugozi | imikorere 'hejuru' uburyo bwo gushyira ibikoresho - hejuru | munsi | ibumoso | iburyo
uwatoranije umugozi ibinyoma Niba uwatoranije atanzwe, ibikoresho byibikoresho bizahabwa intego zerekanwe.
Umutwe umugozi | imikorere '' agaciro ka titre agaciro niba `titre` tag idahari
imbarutso umugozi 'hover' burya ibikoresho byifashishwa - hover | kwibanda | imfashanyigisho
gutinda umubare | ikintu 0

gutinda kwerekana no guhisha ibikoresho (ms) - ntabwo bikoreshwa muburyo bwintoki

Niba umubare watanzwe, gutinda gukoreshwa byombi guhisha / kwerekana

Imiterere yibintu ni:delay: { show: 500, hide: 100 }

Umutwe! Amahitamo kubikoresho byihariye birashobora gusobanurwa hakoreshejwe ikoreshwa ryamakuru.

Markup

Kubwimpamvu zimikorere, Tooltip na Popover data-apis irahitamo. Niba ushaka kubikoresha gusa garagaza amahitamo.

  1. <a href = "#" rel = "tooltip" title = "ibikoresho bya mbere"> unyereke hejuru yanjye </a>

Uburyo

$ (). ibikoresho (amahitamo)

Ongeraho ibikoresho byifashishwa mugukusanya ibintu.

.ibikoresho ('kwerekana')

Yerekana igikoresho cyibikoresho.

  1. $ ( '#element' ). ibikoresho ( 'kwerekana' )

.ibikoresho ('guhisha')

Hisha igikoresho cyibikoresho.

  1. $ ( '#element' ). ibikoresho ( 'guhisha' )

.ibikoresho ('guhinduranya')

Kuzuza ibikoresho by'ibikoresho.

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

Ibyerekeye popovers

Ongeraho uduce duto twibirimo, nkibiri kuri iPad, kubintu byose byo guturamo amakuru yisumbuye.

* Irasaba Tooltip gushyirwamo

Kuramo dosiye

Urugero rwimbere

Hisha hejuru ya buto kugirango utere popover.


Ukoresheje bootstrap-popover.js

Gushoboza popovers ukoresheje javascript:

  1. $ ( '#Urugero' ). popover ( amahitamo )

Amahitamo

Izina Ubwoko Mburabuzi ibisobanuro
animasiyo boolean ni ukuri Koresha css fade inzibacyuho kubikoresho
gushyira umugozi | imikorere 'iburyo' uburyo bwo gushyira popover - hejuru | munsi | ibumoso | iburyo
uwatoranije umugozi ibinyoma niba uwatoranije yatanzwe, ibikoresho byibikoresho bizahabwa intego zerekanwe
imbarutso umugozi 'hover' burya ibikoresho byifashishwa - hover | kwibanda | imfashanyigisho
Umutwe umugozi | imikorere '' Mburabuzi Umutwe Agaciro niba `titre` ikiranga idahari
ibirimo umugozi | imikorere '' agaciro gasanzwe agaciro niba `data-ibirimo` ikiranga kidahari
gutinda umubare | ikintu 0

gutinda kwerekana no guhisha popover (ms) - ntabwo ikoreshwa muburyo bwintoki

Niba umubare watanzwe, gutinda gukoreshwa byombi guhisha / kwerekana

Imiterere yibintu ni:delay: { show: 500, hide: 100 }

Umutwe! Amahitamo kubantu kugiti cyabo arashobora gutondekwa muburyo bwo gukoresha amakuru yibiranga.

Markup

Kubwimpamvu zimikorere, Tooltip na Popover data-apis irahitamo. Niba ushaka kubikoresha gusa garagaza amahitamo.

Uburyo

$ (). popover (amahitamo)

Itangiza popovers yikintu cyo gukusanya.

.kwerekana ('kwerekana')

Kugaragaza ibintu popover.

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

.kwerekana ('guhisha')

Hisha ibintu popover.

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

.kwerekana ('guhinduranya')

Kuzuza ibintu popover.

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

Ibyerekeye kumenyesha

Amacomeka yo kumenyesha nicyiciro gito cyo kongeramo imikorere yegeranye.

Kuramo

Urugero

Gucomeka plugin ikora kubutumwa busanzwe bwo kumenyesha, no guhagarika ubutumwa.

Guacamole yera! Byiza kugenzura yo wenyine, ntabwo ureba neza cyane.

Yoo! Wabonye ikosa!

Hindura ibi n'ibi hanyuma ugerageze. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus yicara amet fermentum.

Fata iki gikorwa Cyangwa ukore ibi


Ukoresheje bootstrap-alert.js

Emera kwirukana integuza ukoresheje javascript:

  1. $ ( ".alert" ). kuba maso ()

Markup

Gusa ongeraho data-dismiss="alert"kuri bouton yawe yegeranye kugirango uhite utanga integuza yimikorere.

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

Uburyo

$ (). Kumenyesha ()

Kuzuza integuza zose hamwe nibikorwa bya hafi. Kugira ngo imenyesha ryawe risohoke iyo rifunze, menya neza ko bafite icyiciro .fadehamwe .innishuri ryabasabye.

.alert ('hafi')

Funga integuza.

  1. $ ( ".alert" ). kuba maso ( 'gufunga' )

Ibyabaye

Bootstrap yo kumenyesha ibyiciro byerekana ibintu bike byo guhuza ibikorwa.

Icyabaye Ibisobanuro
hafi Ibirori birasa ako kanya mugihe closeurugero rwitwa.
gufunga Ibirori birukanwa mugihe integuza yafunzwe (izategereza ko css inzibacyuho zirangira).
  1. $ ( '# my-alert' ). guhambira ( 'gufunga' , imikorere () {
  2. // Gira icyo ukora…
  3. })

Ibyerekeye

Kora byinshi hamwe na buto. Kugenzura buto ivuga cyangwa gukora amatsinda ya buto kubindi bikoresho nkibikoresho.

Kuramo dosiye

Urugero rukoreshwa

Koresha utubuto plugin kuri leta no guhinduranya.

Leta
Guhindura umwe
Agasanduku
Radiyo

Ukoresheje bootstrap-buto.js

Gushoboza buto ukoresheje javascript:

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

Markup

Ibiranga amakuru nibyingenzi kuri buto plugin. Reba urugero kode iri munsi yubwoko butandukanye.

  1. <! - Ongeraho data-toggle = "buto" kugirango utangire guhinduranya kuri buto imwe ->
  2. <buto icyiciro = "btn" data-toggle = "buto" > Toggle imwe </button>
  3.  
  4. <! - Ongeraho amakuru-toggle = "buto-igenzura" kugirango agenzure imiterere yisanduku ihinduka kuri btn-itsinda ->
  5. <div class = "btn-itsinda" data-toggle = "buto-igenzura" >
  6. <buto icyiciro = "btn" > Ibumoso </button>
  7. <buto icyiciro = "btn" > Hagati </button>
  8. <buto icyiciro = "btn" > Iburyo </button>
  9. </div>
  10.  
  11. <! - Ongeraho amakuru-toggle = "buto-radio" kuburyo bwa radio ihindagurika kuri btn-itsinda ->
  12. <div class = "btn-itsinda" data-toggle = "buto-radio" >
  13. <buto icyiciro = "btn" > Ibumoso </button>
  14. <buto icyiciro = "btn" > Hagati </button>
  15. <buto icyiciro = "btn" > Iburyo </button>
  16. </div>

Uburyo

$ (). buto ('guhinduranya')

Toggles gusunika leta. Itanga buto igaragara ko yakoreshejwe.

Umutwe! Urashobora gushoboza auto guhinduranya buto ukoresheje data-toggleikiranga.
  1. <buto icyiciro = "btn" data-toggle = "buto" > </button>

$ (). buto ('gupakira')

Gushiraho buto ya reta kugirango yikore - guhagarika buto hanyuma uhinduranya inyandiko kumpapuro zipakurura. Gupakurura inyandiko bigomba gusobanurwa kuri buto yibintu ukoresheje ikiranga amakuru data-loading-text.

  1. <buto urwego = "btn" amakuru-yipakurura-inyandiko = "ibintu byo gupakira ..." > ... </button>
Umutwe! Firefox ikomeza leta yamugaye kurupapuro rwuzuye . Imikorere kuriyi ni ugukoresha autocomplete="off".

$ (). buto ('gusubiramo')

Kugarura buto leta - guhinduranya inyandiko kumyandiko yumwimerere.

$ (). buto (umugozi)

Kugarura buto ya leta - ihinduranya inyandiko kubintu byose byasobanuwe inyandiko.

  1. <buto icyiciro = "btn" amakuru-yuzuye-inyandiko = "yarangije!" > ... </button>
  2. <Inyandiko
  3. $ ( '.btn' ). buto ( 'byuzuye' )
  4. </script>

Ibyerekeye

Shakisha uburyo bwibanze nubufasha bworoshye kubintu bishobora gusenyuka nka bordion hamwe nogukora.

Kuramo dosiye

* Irasaba plugin yinzibacyuho gushyirwamo.

Urugero

Twifashishije plugin yo gusenyuka, twubatsemo widget yoroheje yuburyo bwa widget:

Anim pariatur cliche reprehenderit, enim eiusmod ubuzima bwo hejuru accusamus terry richardson ad squid. 3 impyisi ukwezi officia aute, non cupidatat skateboard dolor brunch. Ikamyo y'ibiryo quinoa nesciunt laborum eiusmod. Brunch 3 impyisi ukwezi kwigihe, sunt aliqua shyiramo inyoni kuri squid inkomoko imwe yikawa nulla assome shoreditch et. Nihil anim keffiyeh helvetica, ubukorikori bwinzoga labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat ubukorikori bwinzoga umurima-kumeza, mbisi denim aesthetic synth nesciunt ushobora kuba utarigeze wumva bavuga accusamus labore irambye VHS.
Anim pariatur cliche reprehenderit, enim eiusmod ubuzima bwo hejuru accusamus terry richardson ad squid. 3 impyisi ukwezi officia aute, non cupidatat skateboard dolor brunch. Ikamyo y'ibiryo quinoa nesciunt laborum eiusmod. Brunch 3 impyisi ukwezi kwigihe, sunt aliqua shyiramo inyoni kuri squid inkomoko imwe yikawa nulla assome shoreditch et. Nihil anim keffiyeh helvetica, ubukorikori bwinzoga labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat ubukorikori bwinzoga umurima-kumeza, mbisi denim aesthetic synth nesciunt ushobora kuba utarigeze wumva bavuga accusamus labore irambye VHS.
Anim pariatur cliche reprehenderit, enim eiusmod ubuzima bwo hejuru accusamus terry richardson ad squid. 3 impyisi ukwezi officia aute, non cupidatat skateboard dolor brunch. Ikamyo y'ibiryo quinoa nesciunt laborum eiusmod. Brunch 3 impyisi ukwezi kwigihe, sunt aliqua shyiramo inyoni kuri squid inkomoko imwe yikawa nulla assome shoreditch et. Nihil anim keffiyeh helvetica, ubukorikori bwinzoga labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat ubukorikori bwinzoga umurima-kumeza, mbisi denim aesthetic synth nesciunt ushobora kuba utarigeze wumva bavuga accusamus labore irambye VHS.

Ukoresheje bootstrap-gusenyuka.js

Gushoboza ukoresheje javascript:

  1. $ ( ".gusenyuka" ). gusenyuka ()

Amahitamo

Izina Ubwoko Mburabuzi ibisobanuro
umubyeyi uwatoranije ibinyoma Niba uwatoranije noneho ibintu byose bishobora kugwa munsi yumubyeyi wabigenewe bizafungwa mugihe iki kintu gishobora kugwa. (bisa nimyitwarire ya gakondo)
guhinduranya boolean ni ukuri Kuzuza ibintu bishobora kugwa kuri invocation

Markup

Gusa ongeraho data-toggle="collapse"na a data-targetto element kugirango uhite ugenera kugenzura ibintu bishobora kugwa. Ikiranga data-targetcyemera css uwatoranije kugirango akoreshe gusenyuka kuri. Wemeze kongeramo urwego collapsekubintu bishobora kugwa. Niba wifuza ko byafungura, ongeraho urwego rwinyongera in.

  1. <buto icyiciro = "btn btn-akaga" data-toggle = "gusenyuka" data-intego = "#demo" >
  2. byoroshye gusenyuka
  3. </button>
  4.  
  5. <div id = "demo" urwego = "gusenyuka muri" > </div>
Umutwe! Kugirango wongere imiyoborere isa nitsinda rishinzwe kugenzura kugabanuka, ongeramo amakuru ikiranga data-parent="#selector". Reba kuri demo kugirango ubone ibi mubikorwa.

Uburyo

gusenyuka (amahitamo)

Koresha ibikubiyemo nkibintu bishobora gusenyuka. Emera amahitamo object.

  1. $ ( '#Collapsible' ). gusenyuka ({
  2. guhinduranya : ibinyoma
  3. })

gusenyuka ('guhinduranya')

Kuzuza ikintu gishobora kugwa kugirango cyerekanwe cyangwa cyihishe.

gusenyuka ('kwerekana')

Erekana ikintu gishobora kugwa.

gusenyuka ('guhisha')

Hisha ikintu gishobora kugwa.

Ibyabaye

Bootstrap yo gusenyuka ibyiciro byerekana ibintu bike byo guhuza ibikorwa.

Icyabaye Ibisobanuro
kwerekana Ibirori birasa ako kanya mugihe showurugero rwitwa.
yerekanwe Ibirori birukanwa mugihe ikintu cyo gusenyuka cyakozwe kigaragara kubakoresha (bizategereza ko css inzibacyuho zirangira).
kwihisha Iki gikorwa kirahita gihita iyo hideuburyo bwahamagawe.
byihishe Ibirori birukanwa mugihe ikintu cyo gusenyuka cyihishe kumukoresha (uzategereza ko css inzibacyuho zirangira).
  1. $ ( '#Collapsible' ). kuri ( 'bihishe' , imikorere () {
  2. // Gira icyo ukora…
  3. })

Ibyerekeye

A shingiro, byoroshye kwagura plugin yo gukora byihuse gukora imashini yimyandikire hamwe nuburyo ubwo aribwo bwose bwanditse.

Kuramo dosiye

Urugero

Tangira wandika mumurima hepfo kugirango werekane ibisubizo byanditse.


Ukoresheje bootstrap-typeahead.js

Hamagara typhahead ukoresheje javascript:

  1. $ ( '.ubwoko' ). Imyandikire ()

Amahitamo

Izina Ubwoko Mburabuzi ibisobanuro
isoko array [] Inkomoko yamakuru yo kubaza.
ibintu umubare 8 Umubare ntarengwa wibintu byo kwerekana mumanuka.
matcher imikorere urubanza rutumva Uburyo bwakoreshejwe mukumenya niba ikibazo gihuye nikintu. Emera impaka imwe, itemirwanya kugerageza ikibazo. Shikira ikibazo kiriho hamwe this.query. Subiza boolean trueniba ikibazo gihuye.
sorter imikorere bihuye neza,
urubanza rworoshye,
urubanza rutumva
Uburyo bukoreshwa mugutondekanya ibisubizo byuzuye. Emera impaka imwe itemskandi ifite intera ya typahead urugero. Reba ikibazo kiriho hamwe this.query.
urumuri imikorere Kugaragaza Byose Bidasanzwe Uburyo bukoreshwa mukugaragaza ibisubizo byuzuye. Emera impaka imwe itemkandi ifite intera ya typahead urugero. Ugomba gusubira html.

Markup

Ongeraho ibiranga amakuru kugirango wandike ikintu gifite imikorere ya typahead.

  1. <iyinjiza ubwoko = "inyandiko" data-gutanga = "typeahead" >

Uburyo

.ubwoko (amahitamo)

Itangiza icyinjijwe hamwe nimyandikire.