Javascript ya Bootstrap

Bweretsani zida za Bootstrap - tsopano ndi mapulagini 12 a jQuery .

Makhalidwe

Chosavuta, koma chosinthika, tengerani javascript modal plugin yokhala ndi magwiridwe antchito ochepa komanso zosasintha zanzeru.

Zotsitsa

Onjezani mindandanda yotsitsa pafupifupi chilichonse mu Bootstrap ndi pulogalamu yowonjezera iyi. Bootstrap imakhala ndi chithandizo chonse cha menyu otsikira pa navbar, ma tabo, ndi mapiritsi.

Scrollspy

Gwiritsani ntchito scrollspy kuti musinthe maulalo omwe ali mu navbar yanu kuti muwonetse ulalo womwe ukugwira ntchito potengera malo opukutu.

Ma tabu osinthika

Gwiritsani ntchito pulogalamu yowonjezerayi kuti mupange ma tabo ndi mapiritsi kukhala othandiza powalola kuti azitha kusuntha pazigawo zowoneka bwino zazomwe zili kwanuko.

Malangizo

Kutenga kwatsopano pa pulogalamu yowonjezera ya jQuery Tipsy, Tooltips sadalira zithunzi-amagwiritsira ntchito CSS3 pazithunzithunzi ndi mawonekedwe a deta posungira mitu yanu.

Popovers *

Onjezani zophatikizika zazing'ono, monga zomwe zili pa iPad, kuzinthu zilizonse zachidziwitso chachiwiri.

* Imafunikira Tooltips kuti iphatikizidwe

Mauthenga ochenjeza

Pulagi yochenjeza ndi kagulu kakang'ono kowonjezera magwiridwe antchito ku zidziwitso.

Mabatani

Chitani zambiri ndi mabatani. Batani lowongolera likunena kapena pangani magulu a mabatani azinthu zambiri ngati zida.

Kugwa

Pezani masitayelo oyambira ndi chithandizo chosinthika cha zinthu zomwe zimatha kugwa monga ma accordion ndi navigation.

Carousel

Pangani zosewerera zilizonse zomwe mukufuna kuti mupereke chiwonetsero chazithunzi chazomwe zili.

Typeahead

Pulagi yoyambira, yotalikira mosavuta yopangira mwachangu zilembo zokongola ndi mawu amtundu uliwonse.

Zosintha *

Pazosintha zosavuta, phatikizani bootstrap-transition.js kamodzi kuti mutsike mu modals kapena kuzimitsa zidziwitso.

* Zofunikira pa makanema ojambula pamapulagini

Mungodziwiratu! Mapulagini onse a javascript amafunikira mtundu waposachedwa wa jQuery.

Za ma modals

Chosavuta, koma chosinthika, tengerani javascript modal plugin yokhala ndi magwiridwe antchito ochepa komanso zosasintha zanzeru.

Tsitsani fayilo

Chitsanzo chokhazikika

Pansipa pali statically kumasuliridwa modal.

Chiwonetsero chamoyo

Sinthani modal kudzera pa javascript podina batani pansipa. Idzatsika ndikuzimiririka kuchokera pamwamba pa tsamba.

Yambitsani demo modal

Kugwiritsa ntchito bootstrap-modal

Imbani modal kudzera pa javascript:

  1. $ ( '#myModal' ). modali ( zosankha )

Zosankha

Dzina mtundu kusakhulupirika kufotokoza
kumbuyo boolean zoona Mulinso modal-backdrop element. Kapenanso, tchulani staticzakumbuyo zomwe sizitseka moduli mukadina.
kiyibodi boolean zoona Amatseka modali pamene kiyi yothawa ikanikizidwa
chiwonetsero boolean zoona Imawonetsa modali ikayambika.

Markup

Mutha kuyambitsa ma mods patsamba lanu mosavuta popanda kulemba mzere umodzi wa javascript. Ingoyikani data-toggle="modal"pa chinthu chowongolera chokhala ndi data-target="#foo"kapena href="#foo"chomwe chikufanana ndi id ya chinthu cha modal, ndipo mukadina, imayambitsa modal yanu.

Komanso, kuti muwonjezere zosankha pamwambo wanu wa modal, ingowaphatikiza ngati zowonjezera za data paziwongolero kapena ma modal markup omwe.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal"> Launch Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Mutu wamutu </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Thupi limodzi labwino… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal"> Tsekani </a> _
  11. <a href = "#" class = "btn btn-primary"> Sungani zosintha </a>
  12. </div>
  13. </div>
Mungodziwiratu! Ngati mukufuna kuti modal yanu ikhale ndi moyo mkati ndi kunja, ingowonjezerani .fadekalasi ku .modalchinthucho (onani chiwonetserochi kuti muwone izi zikugwira ntchito) ndikuphatikiza bootstrap-transition.js.

Njira

.modal(zosankha)

Imayambitsa zomwe zili ngati modal. Imavomereza zomwe mungachite object.

  1. $ ( '#myModal' ). modali ({
  2. keyboard : zabodza
  3. })

.modal('kusintha')

Imatembenuza pamanja modali.

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

.modal('show')

Pamanja amatsegula modali.

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

.modal('bisala')

Amabisa pamanja modali.

  1. $ ( '#myModal' ). modali ( 'hide' )

Zochitika

Kalasi ya modal ya Bootstrap imawulula zochitika zingapo kuti zigwirizane ndi machitidwe a modal.

Chochitika Kufotokozera
chiwonetsero Chochitika ichi chimayaka nthawi yomweyo shownjira yachitsanzo itayitanidwa.
zowonetsedwa Chochitikachi chimachotsedwa pomwe modal yawonetsedwa kwa wogwiritsa ntchito (idikirira kuti kusintha kwa css kumalize).
kubisa Chochitika ichi chimachotsedwa nthawi yomweyo pamene hidenjira yachitsanzo yayitanidwa.
zobisika Chochitikachi chimachotsedwa pomwe modal yatha kubisidwa kwa wogwiritsa ntchito (idikirira kuti kusintha kwa css kumalize).
  1. $ ( '#myModal' ). pa ( 'zobisika' , ntchito () {
  2. // kuchitapo kanthu...
  3. })

Pulagi ya ScrollSpy ndi yongosintha zokha za nav kutengera malo opukutira.

Tsitsani fayilo

Chitsanzo navbar ndi scrollspy

Mpukutu m'munsimu ndi kuona navigation update. Zinthu zotsikirapo zidzawonetsedwanso. Yesani!

@mafuta

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi asanagulitse. Ufulu wa njinga zamtundu wa Tumblr zilizonse. Ma cardigan opangidwa ndi manja. Chithunzi cha Velit seitan mcsweeney 3 wolf moon irure. Kabudula wa Cosby lomo wa jean, williamsburg hoodie minim qui mwina simunamvepo za iwo et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa masharubu skateboard, adipisicing fugiat velit pitchfork ndevu. Freegan ndevu aliqua cupidatat mcsweeney's vero. Cupidatat zinayi loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, 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.

imodzi

Occaecat commodo aliqua deelectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights 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. Vero VHS ndi adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable deelectus consectetur fanny pack iphone.

awiri

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id guessnda. Locavore sed helvetica cliche irony, mabingu mwina simunawamvepo consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat asanagulitse, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft mowa seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco mabingu.


Kugwiritsa ntchito bootstrap-scrollspy.js

Imbani scrollspy kudzera pa javascript:

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

Markup

Kuti muwonjezeko machitidwe a scrollspy pakuyenda kwanu kwapamwamba, ingowonjezerani data-spy="scroll"chinthu chomwe mukufuna kuti mukazonde (nthawi zambiri ili lingakhale thupi).

  1. <body data-spy = "scroll" > ... </body>
Mungodziwiratu! Maulalo a Navbar akuyenera kukhala ndi ma id omwe angathetsedwe. Mwachitsanzo, <a href="#home">home</a>kuyenera kufanana ndi chinthu chomwe chili mu dome ngati <div id="home"></div>.

Njira

.scrollspy('refresh')

Mukamagwiritsa ntchito scrollspy molumikizana ndi kuwonjezera kapena kuchotsa zinthu mu DOM, muyenera kuyimbira njira yotsitsimutsa motere:

  1. $ ( '[data-spy="scroll"]' ). chilichonse ( ntchito () {
  2. var $ kazitape = $ ( izi ). scrollspy ( 'refresh' )
  3. });

Zosankha

Dzina mtundu kusakhulupirika kufotokoza
kuchepetsa nambala 10 Ma pixel oti muyike kuchokera pamwamba powerengera malo osindikizira.

Zochitika

Chochitika Kufotokozera
yambitsa Chochitikachi chimayaka nthawi iliyonse chinthu chatsopano chikatsegulidwa ndi scrollspy.

Pulagi iyi imawonjezera tabu yachangu, yosinthika komanso magwiridwe antchito apiritsi kuti asinthe kudzera m'malo am'deralo.

Tsitsani fayilo

Zitsanzo tabu

Dinani ma tabu omwe ali m'munsimu kuti musinthe pakati pa zobisika, ngakhale kudzera pazotsitsa.

denim yaiwisi mwina simunamvepo za iwo akabudula a jean 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. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan American aarel, 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.


Kugwiritsa ntchito bootstrap-tab.js

Yambitsani ma tabbles kudzera pa javascript (tabu iliyonse iyenera kutsegulidwa payekhapayekha):

  1. $ ( '#myTab a' ). dinani ( ntchito ( e ) {
  2. e . preventDefault ();
  3. $ ( izi ). tabu ( 'show' );
  4. })

Mutha kuyambitsa ma tabo amodzi m'njira zingapo:

  1. $ ( '#myTab a[href="#profile"]' ). tabu ( 'show' ); // Sankhani tabu ndi dzina
  2. $ ( '#myTab a:first' ). tabu ( 'show' ); // Sankhani tsamba loyamba
  3. $ ( '#myTab a:last' ). tabu ( 'show' ); // Sankhani tabu yomaliza
  4. $ ( '#myTab li:eq(2) a' ). tabu ( 'show' ); // Sankhani tabu lachitatu (0-indexed)

Markup

Mutha kuyambitsa tabu kapena kuyenda kwa mapiritsi osalemba javascript mwa kungotchulapo data-toggle="tab"kapena data-toggle="pill"pa chinthu. Kuwonjezera navndi nav-tabsmakalasi pa tabu ulidzagwiritsa ntchito kalembedwe ka bootstrap tabu.

  1. <ul class = "nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab"> Kwawo </a></li >
  3. <li><a href = "#profile" data-toggle = "tab"> Mbiri </a></li >
  4. <li><a href = "#messages" data-toggle = "tab"> Mauthenga </a></li >
  5. <li><a href = "#settings" data-toggle = "tab"> Zokonda </a> </li >
  6. </ul>

Njira

$().tabu

Imayatsa chinthu cha tabu ndi chidebe cha zinthu. Tabu iyenera kukhala ndi imodzi data-targetkapena hrefyolunjika ku chidebe mu DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" > <a href = "#home"> Kwawo </a></li>
  3. <li><a href = "#profile"> Mbiri </a> </li>
  4. <li><a href = "#mauthenga"> Mauthenga </a> </li>
  5. <li><a href = "#zikhazikiko"> Zokonda </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 = "mbiri" > ... </div>
  11. <div class = "tab-pane" id = "mauthenga" > ... </div>
  12. <div class = "tab-pane" id = "zikhazikiko" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( ntchito () {
  17. $ ( '#myTab a:last' ). tabu ( 'show' );
  18. })
  19. </script>

Zochitika

Chochitika Kufotokozera
chiwonetsero Chochitikachi chikuyaka pa tabu chiwonetsero, koma tabu yatsopano isanasonyezedwe. Gwiritsani ntchito event.targetndikuwongolera event.relatedTargettabu yomwe ikugwira ntchito ndi tabu yogwira kale (ngati ilipo) motsatana.
zowonetsedwa Chochitika ichi chikuyaka pa tabu chiwonetsero pambuyo poti tabu yawonetsedwa. Gwiritsani ntchito event.targetndikuwongolera event.relatedTargettabu yomwe ikugwira ntchito ndi tabu yogwira kale (ngati ilipo) motsatana.
  1. $ ( 'a[data-toggle="tab"]' ). pa ( 'yawonetsedwa' , ntchito ( e ) {
  2. e . target // tabu yotsegulidwa
  3. e . zokhudzanaTarget // tabu yapita
  4. })

About Tooltips

Kulimbikitsidwa ndi pulogalamu yowonjezera ya jQuery.tipsy yolembedwa ndi Jason Frame; Tooltips ndi mtundu wosinthidwa, womwe sudalira zithunzi, gwiritsani ntchito CSS3 pa makanema ojambula pamanja, ndi mawonekedwe a data posungira mitu yanu.

Tsitsani fayilo

Chitsanzo chogwiritsa ntchito Tooltips

Yendani pamwamba pa maulalo omwe ali pansipa kuti muwone zida zothandizira:

mathalauza olimba next level keffiyeh mwina simunamvepo. Photo booth ndevu za denim yaiwisi letterpress vegan messenger bag stumptown. Zovala za Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american zovala zili ndi terry richardson vinyl chambray. Ndevu stumptown, ma cardigans banh mi lomo mabingu. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really artisan artisan whatever keytar , malo owoneka bwino a famu-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.


Kugwiritsa ntchito bootstrap-tooltip.js

Yambitsani chida kudzera pa javascript:

  1. $ ( '#chitsanzo' ). chida ( zosankha )

Zosankha

Dzina mtundu kusakhulupirika kufotokoza
makanema ojambula boolean zoona gwiritsani ntchito kusintha kwa css ku chida
kuika chingwe | ntchito 'pamwamba' momwe mungakhazikitsire chida - pamwamba | pansi | kumanzere | kulondola
wosankha chingwe zabodza Ngati chosankha chaperekedwa, zida zopangira zida zidzaperekedwa ku zomwe zafotokozedwazo.
mutu chingwe | ntchito '' mtengo wamutu wokhazikika ngati tag ya `title` palibe
choyambitsa chingwe 'pitani' momwe chida chimayambira - hover | kuganizira | buku
kuchedwa nambala | chinthu 0

kuchedwa kusonyeza ndi kubisa chida (ms) - sikugwira ntchito pamanja choyambitsa mtundu

Ngati nambala yaperekedwa, kuchedwetsa kumayikidwa pazithunzi zonse ziwiri

Kapangidwe kachinthu ndi:delay: { show: 500, hide: 100 }

Mungodziwiratu! Zosankha za zida zapayekha zitha kufotokozedwa pogwiritsa ntchito mawonekedwe a data.

Markup

Pazifukwa zogwirira ntchito, Tooltip ndi Popover data-apis alowa. Ngati mukufuna kuzigwiritsa ntchito ingotchulani kusankha.

  1. <a href = "#" rel = "tooltip" title = "chida choyamba"> yendani pamwamba panga </a>

Njira

$().tip(zosankha)

Imangiriza chogwirizira ku zida zosonkhanitsira.

.tooltip('show')

Imawulula zida za chinthu.

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

.tooltip('bisala')

Imabisa chida cha chinthu.

  1. $ ( '#element' ). chida ( 'hide' )

.tooltip('toggle')

Imatembenuza chida cha chinthu.

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

Za popovers

Onjezani zophatikizika zazing'ono, monga zomwe zili pa iPad, kuzinthu zilizonse zachidziwitso chachiwiri.

* Imafunikira Tooltip kuti iphatikizidwe

Tsitsani fayilo

Mwachitsanzo hover popover

Yendetsani pa batani kuti muyambitse popover.


Kugwiritsa ntchito bootstrap-popover.js

Yambitsani popover kudzera pa javascript:

  1. $ ( '#chitsanzo' ). popover ( zosankha )

Zosankha

Dzina mtundu kusakhulupirika kufotokoza
makanema ojambula boolean zoona gwiritsani ntchito kusintha kwa css ku chida
kuika chingwe | ntchito 'chabwino' momwe mungayikitsire popover - pamwamba | pansi | kumanzere | kulondola
wosankha chingwe zabodza ngati chosankha chaperekedwa, zida zothandizira zidzaperekedwa ku zolinga zomwe zatchulidwa
choyambitsa chingwe 'pitani' momwe chida chimayambira - hover | kuganizira | buku
mutu chingwe | ntchito '' mtengo wamutu wokhazikika ngati mawonekedwe a `mutu` palibe
zomwe zili chingwe | ntchito '' mtengo wokhazikika ngati mawonekedwe a `data-contain` palibe
kuchedwa nambala | chinthu 0

kuchedwa kusonyeza ndi kubisa popover (ms) - sikugwira ntchito pamanja choyambitsa mtundu

Ngati nambala yaperekedwa, kuchedwetsa kumayikidwa pazithunzi zonse ziwiri

Kapangidwe kachinthu ndi:delay: { show: 500, hide: 100 }

Mungodziwiratu! Zosankha za popovers pawokha zitha kufotokozedwa mwanjira ina pogwiritsa ntchito mawonekedwe a data.

Markup

Pazifukwa zogwirira ntchito, Tooltip ndi Popover data-apis alowa. Ngati mukufuna kuzigwiritsa ntchito ingotchulani kusankha.

Njira

$().popover(zosankha)

Imayambitsa ma popover pazosonkhanitsira zinthu.

.popover('show')

Imawulula ma element popover.

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

.popover('bisala')

Imabisa zinthu zotuluka.

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

.popover('kusintha')

Imatembenuza ma element popover.

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

Za zidziwitso

Pulagi yochenjeza ndi kagulu kakang'ono kowonjezera magwiridwe antchito ku zidziwitso.

Tsitsani

Zidziwitso zachitsanzo

Pulogalamu yowonjezera yochenjeza imagwira ntchito pa mauthenga ochenjeza nthawi zonse, ndikuletsa mauthenga.

Woyera guacamole! Chabwino, fufuzani nokha, simukuwoneka bwino kwambiri.

O mwachangu! Mwalakwitsa!

Sinthani ichi ndi icho ndikuyesanso. Ndife mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Chitani izi Kapena chitani izi


Kugwiritsa ntchito bootstrap-alert.js

Yambitsani kuchotsedwa kwa chenjezo kudzera pa javascript:

  1. $ ( ".chidziwitso" ). chenjezo ()

Markup

Ingowonjezerani data-dismiss="alert"ku batani lanu lakutseka kuti mungopereka chidziwitso chapafupi.

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

Njira

$().chenjezo()

Zimangiriza zidziwitso zonse ndi magwiridwe antchito apafupi. Kuti zidziwitso zanu ziwonetsedwe zikatsekedwa, onetsetsani kuti zili .fadendi .inkalasi zomwe zagwiritsidwa ntchito kale.

.chenjezo('kutseka')

Kutseka chenjezo.

  1. $ ( ".chidziwitso" ). chenjezo ( 'close' )

Zochitika

Gulu lachidziwitso la Bootstrap limawulula zochitika zingapo kuti zigwirizane ndi zochitika zochenjeza.

Chochitika Kufotokozera
pafupi Chochitika ichi chimayaka nthawi yomweyo closenjira yachitsanzo itayitanidwa.
chatsekedwa Chochitikachi chimachotsedwa pamene chenjezo latsekedwa (lidikirira kuti kusintha kwa css kumalize).
  1. $ ( '#chenjezo langa' ). kumanga ( 'kotsekedwa' , ntchito () {
  2. // kuchitapo kanthu...
  3. })

Za

Chitani zambiri ndi mabatani. Batani lowongolera likunena kapena pangani magulu a mabatani azinthu zambiri ngati zida.

Tsitsani fayilo

Zitsanzo ntchito

Gwiritsani ntchito mabatani owonjezera kuti musinthe ndikusintha.

Zomveka
Kusintha kumodzi
Chongani bokosi
Wailesi

Pogwiritsa ntchito bootstrap-button.js

Yambitsani mabatani kudzera pa javascript:

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

Markup

Makhalidwe a data ndi ofunikira pa batani lowonjezera. Onani chitsanzo pansipa chamitundu yosiyanasiyana yolembera.

  1. <!-- Onjezani data-toggle="batani" kuti mutsegule batani limodzi -->
  2. <button class = "btn" data-toggle = "batani" > Kusintha Kumodzi </button>
  3.  
  4. <!-- Add data-toggle="buttons-checkbox" pakusintha kalembedwe ka bokosi pa btn-group -->
  5. <div class = "btn-group" data-toggle = "mabatani-checkbox" >
  6. <button class = "btn" > Kumanzere </ batani>
  7. <button class = "btn" > Pakati </ batani>
  8. <button class = "btn" > Kumanja </ batani>
  9. </div>
  10.  
  11. <!-- Add data-toggle="buttons-radio" pakusintha kalembedwe ka wailesi pa btn-group -->
  12. <div class = "btn-group" data-toggle = "mabatani-wailesi" >
  13. <button class = "btn" > Kumanzere </ batani>
  14. <button class = "btn" > Pakati </ batani>
  15. <button class = "btn" > Kumanja </ batani>
  16. </div>

Njira

$().batani('kusintha')

Imatembenuza dziko lokankhira. Imawonetsa batani kuwonekera kuti yayatsidwa.

Mungodziwiratu! Mutha kuloleza kusuntha kwa batani pogwiritsa ntchito mawonekedwe data-toggle.
  1. <button class = "btn" data-toggle = "batani" > </button>

$().batani('kutsegula')

Imakhazikitsa mawonekedwe a batani kuti mutsegule - imalepheretsa mabatani ndikusintha mawu pokweza mawu. Kutsegula mawu kuyenera kufotokozedwa pa batani pogwiritsa ntchito mawonekedwe a data data-loading-text.

  1. <button class = "btn" data-loading-text = "kutsitsa zinthu..." > ... </button>
Mungodziwiratu! Firefox imapitilirabe mkhalidwe wolumala pamasamba onse . Njira yothetsera izi ndikugwiritsa ntchito autocomplete="off".

$(). batani ('kukonzanso')

Bwezerani mawonekedwe a batani - kusintha mawu kukhala mawu oyamba.

$(). batani (chingwe)

Bwezerani mawonekedwe a batani - kusinthana mawu kumtundu uliwonse wa data.

  1. <button class = "btn" data-complete-text = "wamaliza!" > ... </ batani>
  2. <script>
  3. $ ( '.btn' ). batani ( 'kumaliza' )
  4. </script>

Za

Pezani masitayelo oyambira ndi chithandizo chosinthika cha zinthu zomwe zimatha kugwa monga ma accordion ndi navigation.

Tsitsani fayilo

* Imafunikira pulogalamu yowonjezera ya Transitions kuti iphatikizidwe.

Chitsanzo cha accordion

Pogwiritsa ntchito pulogalamu yowonjezera ya kugwa, tinapanga widget yosavuta ya accordion:

Pankhani ya cliche reprehenderit, enim eiusmod high life accsamamus terry richardson ad squid. 3 Wolf moon officia aute, non cupidatat skateboard dolor brunch. Zakudya zamagalimoto quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua kuika mbalame pa nyamayo nyama imodzi yochokera khofi nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, ntchito ya mowa wa craft wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft craft famu-to-table, denim yaiwisi yokongoletsedwa ndi nesciunt mwina simunamvepo za iwo accusamus laboratory yokhazikika VHS.
Pankhani ya cliche reprehenderit, enim eiusmod high life accsamamus terry richardson ad squid. 3 Wolf moon officia aute, non cupidatat skateboard dolor brunch. Zakudya zamagalimoto quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua kuika mbalame pa nyamayo nyama imodzi yochokera khofi nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, ntchito ya mowa wa craft wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft craft famu-to-table, denim yaiwisi yokongoletsedwa ndi nesciunt mwina simunamvepo za iwo accusamus laboratory yokhazikika VHS.
Pankhani ya cliche reprehenderit, enim eiusmod high life accsamamus terry richardson ad squid. 3 Wolf moon officia aute, non cupidatat skateboard dolor brunch. Zakudya zamagalimoto quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua kuika mbalame pa nyamayo nyama imodzi yochokera khofi nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, ntchito ya mowa wa craft wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft craft famu-to-table, denim yaiwisi yokongoletsedwa ndi nesciunt mwina simunamvepo za iwo accusamus laboratory yokhazikika VHS.

Kugwiritsa ntchito bootstrap-collapse.js

Yambitsani kudzera pa javascript:

  1. $ ( ".kugwa" ). kugwa ()

Zosankha

Dzina mtundu kusakhulupirika kufotokoza
kholo wosankha zabodza Ngati chosankha ndiye kuti zinthu zonse zomwe zimasokonekera pansi pa kholo lotchulidwa zidzatsekedwa chinthu chosokonekerachi chikuwonetsedwa. (zofanana ndi chikhalidwe cha accordion)
kusintha boolean zoona Imasintha chinthu chomwe chimasokonekera pakuyitanitsa

Markup

Ingowonjezerani data-toggle="collapse"ndi data-targetchinthu kuti muzitha kuwongolera chinthu chomwe chimatha kutha. Malingaliro data-targetamavomereza chosankha cha css kuti agwiritse ntchito kugwa. Onetsetsani kuti mwawonjezera kalasi collapseku chinthu chomwe chimatha. Ngati mukufuna kuti isatseguke, onjezani kalasi yowonjezera in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. zosavuta kukomoka
  3. </ batani>
  4.  
  5. <div id = "demo" class = "kugwera mkati" > </div>
Mungodziwiratu! Kuti muwonjeze kasamalidwe kagulu ka accordion ku chiwongolero chosokonekera, onjezani mawonekedwe a data data-parent="#selector". Onani pachiwonetsero kuti muwone izi zikugwira ntchito.

Njira

.kugwa(zosankha)

Imatsegula zomwe zili patsamba lanu ngati chinthu chosokonekera. Imavomereza zomwe mungachite object.

  1. $ ( '#myCollapsible' ). kugwa ({
  2. toggle : zabodza
  3. })

.kugwa ('kusintha')

Imasintha zinthu zomwe zimagundika kuti ziwonetsedwe kapena zobisika.

.kugwa('show')

Imawonetsa chinthu chomwe chimatha kutha.

.gwa ('bisala')

Imabisa chinthu chomwe chimatha kutha.

Zochitika

Gulu la kugwa la Bootstrap limawulula zochitika zingapo kuti zigwirizane ndi kugwa.

Chochitika Kufotokozera
chiwonetsero Chochitika ichi chimayaka nthawi yomweyo shownjira yachitsanzo itayitanidwa.
zowonetsedwa Chochitikachi chimachotsedwa pomwe chinthu chakugwa chawonetsedwa kwa wogwiritsa ntchito (chidikirira kuti kusintha kwa css kumalize).
kubisa Chochitikachi chimathamangitsidwa nthawi yomweyo hidenjirayo itayitanidwa.
zobisika Chochitikachi chimachotsedwa pomwe chinthu chakugwa chabisidwa kwa wogwiritsa ntchito (chidikirira kuti kusintha kwa css kumalize).
  1. $ ( '#myCollapsible' ). pa ( 'zobisika' , ntchito () {
  2. // kuchitapo kanthu...
  3. })

Za

Pulagi yoyambira, yotalikira mosavuta yopangira mwachangu zilembo zokongola ndi mawu amtundu uliwonse.

Tsitsani fayilo

Chitsanzo

Yambani kulemba m'gawo lomwe lili pansipa kuti muwonetse zotsatira za typeahead.


Kugwiritsa ntchito bootstrap-typeahead.js

Imbani typeahead kudzera javascript:

  1. $ ( '.typeahead' ). mtundu ()

Zosankha

Dzina mtundu kusakhulupirika kufotokoza
gwero gulu [] Gwero la data loti mufunse motsutsa.
zinthu nambala 8 Nambala yochulukitsitsa yazinthu zomwe zikuwonetsedwa pazotsitsa.
wofananira ntchito osamva kanthu Njira yomwe imagwiritsidwa ntchito kudziwa ngati funso likugwirizana ndi chinthu. Amavomereza mkangano umodzi, itemwomwe ungayesere funso. Pezani funso lapano ndi this.query. Bweretsani boolean truengati funso likufanana.
sintha ntchito zofananira ndendende,
kukhudzidwa kwa
nkhani, kusakhudzidwa ndi vuto
Njira yomwe imagwiritsidwa ntchito posankha zotsatira zomaliza zokha. Imavomereza mkangano umodzi itemsndipo imakhala ndi gawo la chitsanzo cha typeahead. Lowetsani funso lomwe lilipo ndi this.query.
chowunikira ntchito ikuwonetsa mafananidwe onse osasinthika Njira yomwe imagwiritsidwa ntchito powunikira zotsatira zomaliza zokha. Imavomereza mkangano umodzi itemndipo imakhala ndi gawo la chitsanzo cha typeahead. Iyenera kubwereranso html.

Markup

Onjezani mawonekedwe a data kuti mulembetse chinthu chokhala ndi typeahead.

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

Njira

.typeahead(zosankha)

Imayambitsa zolowetsa ndi typeahead.