Bootstrap

Javascript don Bootstrap

Kawo abubuwan haɗin Bootstrap zuwa rai-yanzu tare da 12 al'ada jQuery plugins.

jQuery plugins Dozin Bootstrap plugins don farawa ku

A kula! Duk plugins javascript suna buƙatar sabuwar sigar jQuery.

Modal bootstrap-modal.js

Game da modals

Sauƙaƙe, amma mai sassauƙa, ɗauki kayan aikin javascript na al'ada tare da mafi ƙarancin aikin da ake buƙata kawai da rashin iyawa.

Zazzage fayil

Misali a tsaye

A ƙasa akwai ƙirar ƙididdiga.

×

Modal header

Jiki mai kyau…

Kusa Ajiye canje-canje

Live demo

Juya modal ta javascript ta danna maɓallin da ke ƙasa. Zai zame ƙasa ya dushe daga saman shafin.

Kaddamar demo modal

Yin amfani da bootstrap-modal

Kira modal ta hanyar javascript:

  1. $ ( '#myModal' ). modal ( zaɓi )

Zabuka

Suna nau'in tsoho bayanin
baya boolean gaskiya Ya ƙunshi nau'in modal-backdrop. A madadin, saka staticdon bayanan baya wanda baya rufe tsarin a dannawa.
keyboard boolean gaskiya Yana rufe tsarin lokacin da aka danna maɓallin guduwa
nuna boolean gaskiya Yana nuna tsarin lokacin farawa.

Alamar alama

Kuna iya kunna modals akan shafinku cikin sauƙi ba tare da rubuta layi ɗaya na javascript ba. Kawai saita data-toggle="modal"kan abin sarrafawa tare da data-target="#foo"ko href="#foo"wanda yayi daidai da nau'in nau'in ID, kuma lokacin da aka danna, zai ƙaddamar da tsarin ku.

Hakanan, don ƙara zaɓuɓɓuka zuwa misalin ƙirar ku, kawai haɗa su azaman ƙarin sifofin bayanai akan ko dai ɓangaren sarrafawa ko alamar yanayin kanta.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Ƙaddamar da Modal </a>    
  1. <div class = "modal" id = "myModal" >  
  2.   <div class = "modal-header" > 
  3.     <a class = "rufe" data-dismiss = "modal" > × </a>  
  4.     <h3> Modal header </h3>
  5.   </div>
  6.   <div class = "modal-body" > 
  7.     <p> Jiki mai kyau… </p>
  8.   </div>
  9.   <div class = "modal-footer" > 
  10.     <a href = "#" class = "btn"> Rufe </a> _  
  11.     <a href = "#" class = "btn btn-primary" > Ajiye canje-canje </a>  
  12.   </div>
  13. </div>
A kula! Idan kana son modal ɗinka ya motsa ciki da waje, kawai ƙara .fadeaji zuwa .modalkashi (duba demo don ganin wannan a aikace) kuma haɗa da bootstrap-transition.js.

Hanyoyin

.modal(zaɓi)

Yana kunna abun cikin ku azaman tsari. Yana yarda da zaɓin zaɓi object.

  1. $ ( '#myModal' ). modal ({
  2.   keyboard : karya 
  3. })

.modal('toggle')

Da hannu yana jujjuya modal.

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

.modal('show')

Da hannu yana buɗe modal.

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

.modal('boye')

Da hannu yana ɓoye modal.

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

Abubuwan da suka faru

Ajin modal na Bootstrap yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan modal.

Lamarin Bayani
nuna Wannan taron yana gobara nan da nan lokacin da showaka kira hanyar misali.
nunawa Ana kora wannan taron lokacin da aka bayyana yanayin ga mai amfani (zai jira canjin css don kammala).
boye Ana korar wannan taron nan da nan lokacin da hideaka kira hanyar misali.
boye Ana kora wannan taron lokacin da tsarin ya gama ɓoyewa daga mai amfani (zai jira canjin css don kammala). 
  1. $ ( '#myModal' ). akan ( 'boye' , aiki () {   
  2.   // yi wani abu…
  3. })

ScrollSpy bootstrap-scrollspy.js

The ScrollSpy plugin shine don sabunta makasudin nav ta atomatik dangane da matsayin gungurawa.

Zazzage fayil

Misali navbar tare da scrollspy

Gungura wurin da ke ƙasa kuma duba sabunta kewayawa. Za a kuma haskaka ƙananan abubuwan da aka zazzage su ma. Gwada shi!

@mai

Ad leggings keytar, brunch id art party dolor laborre. Pitchfork yr enim lo-fi kafin su sayar da qui. Tumblr gona-zuwa tebur haƙƙin keke komai. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby suwaita lomo Jean shorts, williamsburg hoodie minim qui mai yiwuwa ba ku ji labarin su ba da cardigan Trust fund culpa biodiesel wes anderson aesthetical. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa gashin baki skateboard, adipisicing fugiat velit pitchfork gemu. Freegan gemu aliqua cupidatat mcsweeney's vero. Cupidatat guda huɗu loko nisi, da helvetica nulla carles. Tattooed cosby sweater truck abinci, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles ba kayan motsa jiki ba yana buƙatar kulawa. Brooklyn adipisicing craft giya mataimakin keytar desrunt.

daya

Occaecat commodo aliqua delectus. Fap craft giya deserunt skateboard ea. Haƙƙin keke na Lomo adipisicing banh mi, velit ea sunt next level locavore kofi mai asali guda a magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS yana da matukar damuwa. Consectetur nisi DIY minim jakar jaka. Cred ex in, dorewa delectus consectetur fanny fakitin iphone.

biyu

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 jakar marfa duk abin da motar abinci ta delectus. Sapiente synth id zatonnda. Locavore sed helvetica cliche irony, tsawa mai yiwuwa ba ku ji labarin su ba sakamakon hoodie gluten-free lo-fi fap aliquip. Labour elit placeat kafin su sayar, Terry Richardson proident brunch nesciunt quis cosby suweter pariatur keffiyeh ut helvetica artisan. Cardigan craft giya seitan readymade velit. VHS chambray labs na dan lokaci veniam. Anim mollit minim commodo ullamco thundercats.

Amfani da bootstrap-scrollspy.js

Kira scrollspy ta hanyar javascript:

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

Alamar alama

Don sauƙaƙe ƙara halayyar scrollspy zuwa kewayawa na sama, kawai ƙara data-spy="scroll"zuwa kashi da kuke son rahõto a kai (mafi yawanci wannan zai zama jiki).

  1. <body data-spy = "gungurawa" > ... </ jiki>
A kula! Dole ne hanyoyin haɗin Navbar su kasance da maƙasudin id masu warwarewa. Misali, <a href="#home">home</a>dole ne ya dace da wani abu a cikin gidan kamar <div id="home"></div>.

Zabuka

Suna nau'in tsoho bayanin
biya diyya lamba 10 Pixels don kashewa daga sama yayin ƙididdige matsayi na gungurawa.

Abubuwan da za a iya juyawa bootstrap- tab.js

Wannan plugin ɗin yana ƙara sauri, shafi mai ƙarfi da aikin kwaya don canzawa ta abun cikin gida.

Zazzage fayil

Misali shafuka

Danna shafukan da ke ƙasa don kunna tsakanin ɓoyayyun fa'idodin, ko da ta hanyar menu na zazzagewa.

Raw denim mai yiwuwa ba ku ji labarin su jeans shorts Austin ba. Nesciunt tofu stumptown aliqua, retro synth master cleanse. gashin baki cliche tempor, williamsburg carles vegan helvetica. Reprehenderit mahauci retro keffiyeh dreamcatcher synth. Cosby suwaita eu banh mi, qui irure terry richardson ex squid. Yadda ake yin salvia cillum iphone. Seitan aliquip quis cardigan Amurka tufafi, mahauta 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.

Amfani da bootstrap-tab.js

Kunna tabbbable tabs ta javascript:

  1. $ ( '#myTab' ). tab ( 'show' )

Alamar alama

Kuna iya kunna kewayawa tab ko kwaya ba tare da rubuta kowane javascript ba ta hanyar tantancewa kawai data-toggle="tab"ko data-toggle="pill"akan wani abu.

  1. <ul class = "nav nav-tabs" > 
  2.   <li><a href = "#home" data-toggle = "tab" > Gida </a></li>  
  3.   <li><a href = "#profile" data-toggle = "tab" > Bayanan martaba </a></li>  
  4.   <li><a href = "#messages" data-toggle = "tab" > Saƙonni </a></li>  
  5.   <li><a href = "#settings" data-toggle = "tab" > Saituna </a></li>  
  6. </ul>

Hanyoyin

$().taba

Yana kunna abun shafi da kwandon abun ciki. Tab ya kamata ya kasance yana da ko dai 'manufa-bayanai' ko 'href' wanda ke nufin kumburin kwantena a cikin gidan.

  1. <ul class = "nav nav-tabs" > 
  2.   <li class = "active" ><a href = "#gida" > Gida </a></li>  
  3.   <li><a href = "#profile" > Bayanan martaba </a></li> 
  4.   <li><a href = "#messages" > Saƙonni </a></li> 
  5.   <li><a href = "#Settings" > Saituna </a></li> 
  6. </ul>
  7.  
  8. <div class = "tab-content" > 
  9.   <div class = "tab-pane active" id = "gida" > ... </div>  
  10.   <div class = "tab-pane" id = "profile" > ... </div>  
  11.   <div class = "tab-pane" id = "saƙonni" > ... </div>  
  12.   <div class = "tab-pane" id = "saituna" > ... </div>  
  13. </div>
  14.  
  15. <rubutu>
  16.   $ ( aiki () {  
  17.     $ ( '.tabs a: last' ). tab ( 'show' )
  18.   })
  19. </script>

Abubuwan da suka faru

Lamarin Bayani
nuna Wannan taron yana gobara akan nunin shafin, amma kafin a nuna sabon shafin. Yi amfani event.targetda event.relatedTargetniyya shafi mai aiki da shafin mai aiki da ya gabata (idan akwai) bi da bi.
nunawa Wannan taron yana gobara akan nunin shafin bayan an nuna shafin. Yi amfani event.targetda event.relatedTargetniyya shafi mai aiki da shafin mai aiki da ya gabata (idan akwai) bi da bi. 
  1. $ ( 'a[data-toggle = "tab"]' ). kan ( 'an nuna' , aiki ( e ) {   
  2.   e . manufa // kunna tab
  3.   e . relatedTarget // shafi na baya
  4. })

Kayan aiki bootstrap-tooltip.js

Game da Tukwici

Ƙaddamar da kyakkyawan jQuery.tipsy plugin wanda Jason Frame ya rubuta; Tukwici kayan aiki sigar da aka sabunta ne, waɗanda ba su dogara da hotuna ba, yi amfani da css3 don rayarwa, da sifofin bayanai don ajiyar take na gida.

Zazzage fayil

Misali amfani da Tukwici

Tsallake kan hanyoyin da ke ƙasa don ganin kayan aiki:

Tattara wando next level keffiyeh kila ba ki ji labarin su ba. Hoton hoton gemu raw denim wasiƙar vegan messenger jakar stumptown. Farm-to-tebur seitan, mcsweeney's fixie mai dorewa quinoa 8-bit tufafin Amurka suna da terry Richardson vinyl chambray. Gemu stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, hudu loko mcsweeney's tsabtace vegan chambray. Mai fasaha mai ban mamaki da gaske duk abin da keytar, scenester farm-to-table banksy Austin twitter rike freegan cred raw denim guda- asali kofi hoto bidiyo.

Amfani da bootstrap-tooltip.js

Ƙaddamar da kayan aiki ta hanyar javascript:

  1. $ ( '#misali' ). kayan aiki ( zaɓuɓɓuka )

Zabuka

Suna nau'in tsoho bayanin
tashin hankali boolean gaskiya Yi amfani da canjin css fade zuwa tip ɗin kayan aiki
jeri string | aiki ' saman' yadda ake sanya kayan aiki - saman | kasa | hagu | dama
mai zaɓe kirtani karya Idan an samar da mai zaɓe, za a ba da abubuwan da suka shafi kayan aiki zuwa takamaiman maƙasudan.
take zaren | aiki '' Tsohuwar darajar take idan alamar ` take` ba ta nan
jawo kirtani 'tsayawa' yadda ake kunna kayan aiki - hover | mayar da hankali | manual
jinkiri lamba | abu 0

jinkirta nunawa da ɓoye bayanan kayan aiki (ms)

Idan an ba da lamba, ana amfani da jinkiri ga duka ɓoye/nunawa

Tsarin abu shine:delay: { show: 500, hide: 100 }
A kula! Zaɓuɓɓuka don ƙayyadaddun kayan aiki ɗaya ɗaya ana iya ƙayyade su ta hanyar amfani da sifofin bayanai.

Alamar alama

Don dalilan aiki, Tooltip da Popover data-apis sun shiga ciki. Idan kuna son amfani da su kawai saka zaɓin zaɓi.

  1. <a href = "#" rel = "tooltip" take = "farkon kayan aiki" > shawagi a kaina </a>

Hanyoyin

$().tooltip(zaɓi)

Haɗa mai sarrafa kayan aiki zuwa tarin abubuwa.

Tooltip('show')

Yana bayyana matakin kayan aiki.

  1. $ ( '# element' ). kayan aiki ( 'show' )

.tooltip('boye')

Yana ɓoye bayanan kayan aiki.

  1. $ ( '# element' ). kayan aiki ( 'boye' )

.tooltip('toggle')

Yana jujjuya matakin kayan aiki.

  1. $ ( '# element' ). Tooltip ( 'canzawa' )

Popovers bootstrap-popover.js

Game da popovers

Ƙara ƙarami mai rufi na abun ciki, kamar waɗanda ke kan iPad, zuwa kowane nau'i na bayanan sakandare na gidaje.

* Yana buƙatar haɗa kayan aiki

Zazzage fayil

Misali bugu da kari

Juya kan maɓallin don kunna popover.

shawagi don popover

Amfani da bootstrap-popover.js

Kunna popovers ta hanyar javascript:

  1. $ ( '#misali' ). popover ( zaɓi )

Zabuka

Suna nau'in tsoho bayanin
tashin hankali boolean gaskiya Yi amfani da canjin css fade zuwa tip ɗin kayan aiki
jeri string | aiki 'dama' yadda ake sanya popover - top | kasa | hagu | dama
mai zaɓe kirtani karya idan an samar da mai zaɓe, za a ba da abubuwan da suka shafi kayan aiki zuwa takamaiman maƙasudan
jawo kirtani 'tsayawa' yadda ake kunna kayan aiki - hover | mayar da hankali | manual
take zaren | aiki '' Tsohuwar darajar take idan sifa ' take' ba ta nan
abun ciki zaren | aiki '' Tsohuwar ƙimar abun ciki idan 'abun cikin bayanai' ba ya kasancewa
jinkiri lamba | abu 0

jinkirta nunawa da ɓoye popover (ms)

Idan an ba da lamba, ana amfani da jinkiri ga duka ɓoye/nunawa

Tsarin abu shine:delay: { show: 500, hide: 100 }
A kula! Zaɓuɓɓuka don faɗuwar ɗaiɗaikun ana iya a madadin su ta hanyar amfani da sifofin bayanai.

Alamar alama

Don dalilan aiki, Tooltip da Popover data-apis sun shiga ciki. Idan kuna son amfani da su kawai saka zaɓin zaɓi.

Hanyoyin

$().popover(zabuka)

Yana farawa popovers don tarin abubuwa.

.popover('show')

Yana bayyanar da abubuwa masu tasowa.

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

.popover('boye')

Yana ɓoye abubuwan haɓakawa.

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

.popover('toggle')

Yana jujjuya abubuwan haɓakawa.

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

Saƙonnin faɗakarwa bootstrap-alert.js

Game da faɗakarwa

Plugin faɗakarwa ƙaramin aji ne don ƙara ayyuka na kusa zuwa faɗakarwa.

Zazzagewa

Misali faɗakarwa

Fitin ɗin faɗakarwa yana aiki akan saƙonnin faɗakarwa na yau da kullun, kuma yana toshe saƙonni.

× Guacamole mai tsarki! Mafi kyawun duba kanku, ba ku da kyau sosai.
×

Oh karye! Kun sami kuskure!

Canza wannan da wancan kuma a sake gwadawa. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras Mattis consectetur purus zauna amet fermentum.

Ɗauki wannan matakin Ko kuma yi wannan

Amfani da bootstrap-alert.js

Kunna korar faɗakarwa ta hanyar javascript:

  1. $ ( "jijjiga" ). faɗakarwa ()

Alamar alama

Kawai ƙara data-dismiss="alert"zuwa maɓallin ku don ba da aikin kusa da faɗakarwa ta atomatik.

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

Hanyoyin

$() faɗakarwa()

Yana tattara duk faɗakarwa tare da ayyuka na kusa. Don faɗakarwar ku ta raye lokacin rufewa, tabbatar cewa an riga an yi amfani .fadeda .inajin da ajin.

faɗakarwa('kusa')

Yana rufe faɗakarwa.

  1. $ ( "jijjiga" ). faɗakarwa ( 'kusa' )

Abubuwan da suka faru

Ajin faɗakarwa na Bootstrap yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan faɗakarwa.

Lamarin Bayani
kusa Wannan taron yana gobara nan da nan lokacin da closeaka kira hanyar misali.
rufe Ana kunna wannan taron lokacin da aka rufe faɗakarwa (zai jira canjin css don kammala). 
  1. $ ( '#ajiya na' ). ɗaure ( 'rufe' , aiki () {   
  2.   // yi wani abu…
  3. })

Maɓallin bootstrap-button.js

Game da

Yi ƙari tare da maɓalli. Maɓallin sarrafawa ko ƙirƙiri ƙungiyoyin maɓalli don ƙarin abubuwan haɗin gwiwa kamar sandunan kayan aiki.

Zazzage fayil

Misali amfani

Yi amfani da plugin ɗin maɓalli don jihohi da jujjuyawa.

Jiha
Juyawa guda ɗaya
Akwatin ajiya
Rediyo

Amfani da bootstrap-button.js

Kunna maɓallan ta hanyar javascript:

  1. $ ( '.tabs' ). button ()

Alamar alama

Halayen bayanai suna da alaƙa da maɓalli plugin. Duba lambar misalin da ke ƙasa don nau'ikan alama iri-iri.

  1. <!-- Ƙara data-toggle="button" don kunna kunnawa akan maɓalli ɗaya -->
  2. <button class = "btn" data-toggle = "button" > Juya Juya </button>  
  3.  
  4. <!-- Ƙara data-toggle="buttons-checkbox" don canza salon akwati akan btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >  
  6.   <button class = "btn" > Hagu </button> 
  7.   < class class = "btn" > Tsakiya </button> 
  8.   <button class = "btn" > Dama </button> 
  9. </div>
  10.  
  11. <!-- Ƙara data-toggle="buttons-radio" don kunna salon rediyo akan btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >  
  13.   <button class = "btn" > Hagu </button> 
  14.   < class class = "btn" > Tsakiya </button> 
  15.   <button class = "btn" > Dama </button> 
  16. </div>

Hanyoyin

$().button('toggle')

Canza yanayin turawa. Yana ba da maɓallin kamannin cewa an kunna shi.

A kula! Kuna iya kunna maɓalli ta atomatik ta amfani da data-togglesifa. 
  1. <button class = "btn" data-toggle = "button" > … </button>

$().button('loading')

Yana saita yanayin maɓalli zuwa lodawa - yana kashe maɓallin kuma yana musanya rubutu zuwa loda rubutu. Ya kamata a ayyana rubutun lodawa akan maɓalli ta amfani da sifa ta bayanai data-loading-text.

  1. <button class = "btn" data-loading-text = "loading kaya..." > ... </button>
A kula! Firefox ta ci gaba da kasancewa naƙasasshen yanayin a cikin nauyin shafi . Hanyar da za a yi amfani da ita don wannan shine autocomplete="off".

$().button('sake saita')

Yana sake saita yanayin maɓallin - musanya rubutu zuwa rubutu na asali.

$().button(string)

Sake saita yanayin maɓallin - musanya rubutu zuwa kowane yanayin rubutu da aka ayyana.

  1. <button class = "btn" data-complete-text = "gama!" > ... </button>   
  2. <rubutu>
  3.   $ ( '.btn' ). button ( 'cikakke' )
  4. </script>

Rushe bootstrap-collapse.js

Game da

Sami salon tushe da sassauƙan tallafi don abubuwan haɗin gwiwa masu rugujewa kamar accordions da kewayawa.

Zazzage fayil

Misali accordion

Yin amfani da plugin ɗin rushewa, mun gina widget ɗin salon accordion mai sauƙi:

Rukunin Rukuni na #1
Anim pariatur cliche reprehenderit, babban rayuwa wanda ake zargi Terry Richardson da squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Motar abinci quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua ya sa tsuntsu a kai squid guda- asali kofi nulla zaton shoreditch et. Nihil anim keffiyeh helvetica, craft beer laborre wes anderson cred nesciunt sapiente ea proident. Ad vegan banda mahauta mataimakin lomo. Leggings occaecat sana'ar giya gona-zuwa tebur, danyen denim aesthetic synth nesciunt mai yiwuwa ba ka ji labarin su accusamus labore VHS mai dorewa.
Abun Rukuni na #2
Anim pariatur cliche reprehenderit, babban rayuwa wanda ake zargi Terry Richardson da squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Motar abinci quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua ya sa tsuntsu a kai squid guda- asali kofi nulla zaton shoreditch et. Nihil anim keffiyeh helvetica, craft beer laborre wes anderson cred nesciunt sapiente ea proident. Ad vegan banda mahauta mataimakin lomo. Leggings occaecat sana'ar giya gona-zuwa tebur, danyen denim aesthetic synth nesciunt mai yiwuwa ba ka ji labarin su accusamus labore VHS mai dorewa.
Abun Rukuni na #3
Anim pariatur cliche reprehenderit, babban rayuwa wanda ake zargi Terry Richardson da squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Motar abinci quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua ya sa tsuntsu a kai squid guda- asali kofi nulla zaton shoreditch et. Nihil anim keffiyeh helvetica, craft beer laborre wes anderson cred nesciunt sapiente ea proident. Ad vegan banda mahauta mataimakin lomo. Leggings occaecat sana'ar giya gona-zuwa tebur, danyen denim aesthetic synth nesciunt mai yiwuwa ba ka ji labarin su accusamus labore VHS mai dorewa.

Amfani da bootstrap-collapse.js

Kunna ta hanyar javascript:

  1. $ ( ".rushe" ). rugujewa ()

Zabuka

Suna nau'in tsoho bayanin
iyaye mai zaɓe karya Idan mai zaɓi to duk abubuwan da za su iya haɗuwa a ƙarƙashin ƙayyadadden iyaye za a rufe su lokacin da aka nuna wannan abu mai yuwuwa. (mai kama da dabi'un gargajiya na gargajiya)
juya boolean gaskiya Yana kunna abin da zai iya rushewa akan kira

Alamar alama

Kawai ƙara data-toggle="collapse"da kuma data-targetzuwa kashi don sanya ikon sarrafa abun da zai iya rushewa ta atomatik. Siffar data-targettana karɓar mai zaɓin css don amfani da rushewar zuwa. Tabbatar ƙara ajin collapsezuwa kashi mai rugujewa. Idan kuna son buɗewa ta tsohuwa, ƙara ƙarin ajin in.

  1. <button class = "btn btn-danger" data-toggle = "rushewa" data-target = "#demo" >   
  2.   sauki rugujewa
  3. </button>
  4.  
  5. <div id = "demo" class = "rushewa" > … </div>
A kula! Don ƙara gudanarwar rukuni-kamar accordion zuwa sarrafawa mai yuwuwa, ƙara sifa na bayanai data-parent="#selector". Koma zuwa demo don ganin wannan a aikace.

Hanyoyin

.rushe (zaɓuɓɓuka)

Yana kunna abun cikin ku azaman abin da zai iya rugujewa. Yana yarda da zaɓin zaɓi object.

  1. $ ( '#myCollapsible' ). rugujewa ({
  2.   juya : karya 
  3. })

.rushe ('juya')

Yana juya wani abu mai rugujewa zuwa nunawa ko ɓoye.

.rushe ('show')

Yana nuna kashi mai rugujewa.

.rushe('boye')

Yana ɓoye wani abu mai rugujewa.

Abubuwan da suka faru

Ajin rushewar Bootstrap yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan rugujewa.

Lamarin Bayani
nuna Wannan taron yana gobara nan da nan lokacin da showaka kira hanyar misali.
nunawa Ana korar wannan taron lokacin da aka bayyana ɓangaren rugujewa ga mai amfani (zai jira canjin css ya kammala).
boye Ana korar wannan taron nan da nan lokacin da hideaka kira hanyar.
boye Ana kora wannan taron lokacin da aka ɓoye ɓoyayyiyar ɓarna daga mai amfani (zai jira canjin css don kammala). 
  1. $ ( '#myCollapsible' ). akan ( 'boye' , aiki () {   
  2.   // yi wani abu…
  3. })

Nau'in bootstrap-typeahead.js

Game da

Ainihin plugin ɗin mai sauƙi mai sauƙi don ƙirƙirar ƙayatattun rubutun rubutu tare da kowane nau'i na shigar da rubutu.

Zazzage fayil

Misali

Fara bugawa a cikin filin da ke ƙasa don nuna sakamakon rubutu.

Yin amfani da bootstrap-typeahead.js

Kira typeahead ta hanyar javascript:

  1. $ ( '.typehead' ). irin ()

Zabuka

Suna nau'in tsoho bayanin
tushe tsararru [] Tushen bayanan don tambaya akan.
abubuwa lamba 8 Matsakaicin adadin abubuwan da za a nuna a cikin zaɓuka.
mai daidaitawa aiki yanayin rashin jin daɗi Hanyar da ake amfani da ita don tantance idan tambaya ta dace da abu. Ya yarda da hujja guda ɗaya, itemwacce za a gwada tambayar. Samun damar tambayar yanzu tare da this.query. Koma boolean trueidan tambaya ta dace.
mai rarrabawa aiki daidai wasa,
yanayin yanayi,
yanayin rashin jin daɗi		 Hanyar da ake amfani da ita don warware sakamakon da aka kammala ta atomatik. Ya yarda da hujja guda ɗaya itemskuma yana da iyakar misalin nau'in rubutu. Yi magana da tambayar yanzu tare da this.query.
mai haskakawa aiki yana haskaka duk tsoffin matches Hanyar da aka yi amfani da ita don haskaka sakamakon da aka kammala ta atomatik. Ya yarda da hujja guda ɗaya itemkuma yana da iyakar misalin nau'in rubutu. Ya kamata a dawo da html.

Alamar alama

Ƙara sifofin bayanai don yin rajistar wani kashi mai aikin nau'in rubutu.

  1. < nau'in shigarwa = "rubutu" data- provide = "typehead" >

Hanyoyin

.typehead(zaɓi)

Yana fara shigarwa tare da nau'in rubutu.