JavaScript

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

A kula! Waɗannan takaddun na v2.3.2 ne, waɗanda ba a tallafawa bisa hukuma. Duba sabuwar sigar Bootstrap!

Mutum ko harhada

Ana iya haɗa plugins daban-daban (ko da yake wasu suna buƙatar abin dogaro), ko gaba ɗaya. Duka bootstrap.js da bootstrap.min.js sun ƙunshi duk plugins a cikin fayil ɗaya.

Bayanan bayanai

Kuna iya amfani da duk Bootstrap plugins zalla ta hanyar API ɗin alama ba tare da rubuta layi ɗaya na JavaScript ba. Wannan shine API ɗin aji na farko na Bootstrap kuma yakamata ya zama abin lura na farko lokacin amfani da plugin.

Wannan ya ce, a wasu yanayi yana iya zama kyawawa a kashe wannan aikin. Sabili da haka, muna kuma ba da ikon musaki sifa ta API ta hanyar cire duk abubuwan da suka faru akan sunan jikin da aka ware tare da ''data-api''. Wannan yayi kama da haka:

  1. $ ( 'jiki' ). kashe ( '.data-api' )

A madadin, don ƙaddamar da takamaiman plugin ɗin, kawai haɗa sunan plugin ɗin azaman sarari suna tare da bayanan-api sunaye kamar haka:

  1. $ ( 'jiki' ). kashe ( '.alert.data-api' )

API ɗin shirye-shirye

Mun kuma yi imanin ya kamata ku iya amfani da duk abubuwan Bootstrap kawai ta JavaScript API. Duk APIs na jama'a guda ɗaya ne, hanyoyin da za a iya sarƙa, da dawo da tarin da aka yi aiki da su.

  1. $ ( ".btn.danger" ). button ( "juyawa" ). addClass ( "mai" )

Duk hanyoyin ya kamata su karɓi zaɓin zaɓi na zaɓi, kirtani wanda ke nufin wata hanya, ko ba komai (wanda ke fara plugin ɗin tare da halayen tsoho):

  1. $ ( "#myModal" ). modal () // an fara shi tare da ɓatanci
  2. $ ( "#myModal" ). modal ({allon madannai : ƙarya }) // an fara shi ba tare da keyboard ba
  3. $ ( "#myModal" ). modal ( 'show' ) // farawa da kiran nuni nan da nan

Kowane plugin kuma yana fallasa ɗanyen ginin sa akan kayan 'Constructor': $.fn.popover.Constructor. Idan kuna son samun misalan plugin ɗin, dawo da shi kai tsaye daga wani abu: $('[rel=popover]').data('popover').

Babu Rikici

Wani lokaci yana da mahimmanci a yi amfani da plugins Bootstrap tare da wasu tsarin UI. A cikin waɗannan yanayi, karon sararin samaniya na iya faruwa lokaci-lokaci. Idan wannan ya faru, kuna iya kiran .noConflictplugin ɗin da kuke son mayar da darajar.

  1. var bootstrapButton = $ . fn . maballin . noConflict () // mayar da maɓallin $.fn. zuwa ƙimar da aka sanya a baya
  2. $ . fn . bootstrapBtn = bootstrapButton // bada $() .bootstrapBtn aikin bootstrap

Abubuwan da suka faru

Bootstrap yana ba da al'amuran al'ada don yawancin ayyukan plugins na musamman. Gabaɗaya, waɗannan suna zuwa ne a cikin sigar ɓarna mai ƙarewa kuma ta wuce - inda ƙarshen (misali show) ke haifar da shi a farkon wani lamari, kuma sigar ɓangarorin sa na baya (misali shown) yana haifar da ƙarshen aikin.

Duk abubuwan da ba su da iyaka suna ba da aikin hana tsoho. Wannan yana ba da ikon dakatar da aiwatar da wani aiki kafin ya fara.

  1. $ ( '#myModal' ). kan ( 'nuna' , aiki ( e ) {
  2. idan (! data ) dawo e . hanaDefault () // yana dakatar da nunawa
  3. })

Game da sauyi

Don sauƙaƙan tasirin canji, haɗa da bootstrap-transition.js sau ɗaya tare da sauran fayilolin JS. Idan kana amfani da harhada (ko rage) bootstrap.js , babu buƙatar haɗa wannan - ya riga ya kasance.

Yi amfani da lokuta

Misalai kaɗan na plugin ɗin canji:

  • Zamewa ko faduwa a cikin modal
  • Fashewa daga shafuka
  • Fashewar faɗakarwa
  • Zamiya carousel pans

Misalai

Modals an daidaita su, amma masu sassauƙa, maganganun tattaunawa tare da mafi ƙarancin aikin da ake buƙata da kuma rashin daidaituwa.

Misali a tsaye

Modal da aka yi tare da kai, jiki, da saitin ayyuka a cikin ƙafar ƙafa.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. < nau'in maballin = "button" class = "kusa" data-dismiss = "modal" aria-hidden = "gaskiya" > × </button>
  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>

Live demo

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

  1. <!-- Maballin don kunna modal -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Kaddamar da modal demo </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" class = "modal boye fade" tabindex = "-1" rawar = "dialog" aria-labeledby = "myModalLabel" aria-hidden = "gaskiya" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "rufe" data-dismiss = "modal" aria-hidden = "gaskiya" > × </button>
  8. <h3 id = "myModalLabel" > Modal header </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Jiki mai kyau… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "gaskiya" > Rufe </button>
  15. <button class = "btn btn-primary" > Ajiye canje-canje </button>
  16. </div>
  17. </div>

Amfani

Ta hanyar bayanan halayen

Kunna modal ba tare da rubuta JavaScript ba. Saita data-toggle="modal"a kan abin sarrafawa, kamar maɓalli, tare da data-target="#foo"ko href="#foo"don ƙaddamar da takamaiman tsari don juyawa.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Kaddamar da modal </button>

Ta hanyar JavaScript

Kira modal tare da id myModaltare da layi ɗaya na JavaScript:

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

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-backdrop="".

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.
m hanya karya

Idan an samar da url mai nisa, za a loda abun ciki ta hanyar jQuery loadkuma a shigar da shi cikin .modal-body. Idan kuna amfani da api na bayanai, zaku iya amfani da hrefalamar a madadin ku don tantance tushen nesa. Ana nuna misalin wannan a ƙasa:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

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 korar 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 korar 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. })

Misali a cikin navbar

The ScrollSpy plugin shine don sabunta makasudin nav ta atomatik dangane da matsayin gungurawa. Gungura wurin da ke ƙasa da maɓallin kewayawa kuma duba canjin aji mai aiki. Za a kuma haskaka ƙananan abubuwan da aka zazzage su ma.

@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 da su, 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

Ta hanyar bayanan halayen

Don sauƙin ƙara halayyar scrollspy zuwa kewayawar saman saman ku, kawai ƙara data-spy="scroll"zuwa ɓangaren da kuke son yin rahõto a kai (mafi yawanci wannan zai zama jiki) kuma data-target=".navbar"don zaɓar wanne nav don amfani. Kuna so ku yi amfani da scrollspy tare da .navsashi.

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

Ta hanyar JavaScript

Kira scrollspy ta JavaScript:

  1. $ ( '#navbar' ). scrollspy ()
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>.

Hanyoyin

.scrollspy('refresh')

Lokacin amfani da scrollspy tare da ƙara ko cire abubuwa daga DOM, kuna buƙatar kiran hanyar wartsakewa kamar haka:

  1. $ ( '[data-leken asiri = " gungura"]' ). kowane ( aiki () {
  2. var $ Spy = $ ( wannan ). scrollspy ( 'refresh' )
  3. });

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-offset="".

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

Abubuwan da suka faru

Lamarin Bayani
kunna Wannan taron yana ƙonewa a duk lokacin da sabon abu ya kunna ta scrollspy.

Misali shafuka

Ƙara aikin shafin mai sauri, mai ƙarfi don canzawa ta cikin fakitin abun ciki na gida, har ma ta menu na zazzagewa.

Raw denim tabbas 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

Kunna shafukan da za a iya amfani da su ta hanyar JavaScript (kowane shafin yana buƙatar kunna shi daban):

  1. $ ( '#myTab a' ). danna ( aikin ( e ) {
  2. e . default ();
  3. $ ( wannan ). tab ( 'show' );
  4. })

Kuna iya kunna shafuka guda ɗaya ta hanyoyi da yawa:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'show' ); // Zaɓi shafin da suna
  2. $ ( '#myTab a: farko' ). tab ( 'show' ); // Zaɓi shafin farko
  3. $ ( '#myTab a: karshe' ). tab ( 'show' ); // Zaɓi shafin ƙarshe
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'show' ); // Zaɓi shafin na uku (0-indexed)

Alamar alama

Kuna iya kunna shafi ko kewayawa kwaya ba tare da rubuta kowane JavaScript ba ta hanyar tantancewa kawai data-toggle="tab"ko data-toggle="pill"akan wani abu. Ƙara navda nav-tabsazuzuwan zuwa shafin ulzai yi amfani da salo na Bootstrap.

  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 data-targetko wani hrefkumburin kwantena mai niyya a cikin DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  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. $ ( '#myTab a: karshe' ). 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 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 da ya gabata (idan akwai) bi da bi.
  1. $ ( 'a[data-toggle = "tab"]' ). akan ( 'an nuna' , aiki ( e ) {
  2. e . manufa // kunna tab
  3. e . relatedTarget // shafi na baya
  4. })

Misalai

Ƙ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, amfani da CSS3 don rayarwa, da sifofin bayanai don ajiyar take na gida.

Don dalilan aiki, kayan aiki da bayanan popover-apis sun shiga, ma'ana dole ne ka fara su da kanka .

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 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. A really ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin kofi viral.

Hanyoyi hudu

Nasihun kayan aiki a cikin ƙungiyoyin shigarwa

Lokacin amfani da tukwici na kayan aiki da popovers tare da ƙungiyoyin shigar da Bootstrap, dole ne ku saita containerzaɓin (rubutun ƙasa) don guje wa illolin da ba'a so.


Amfani

Ƙaddamar da kayan aiki ta hanyar JavaScript:

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

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-animation="".

Suna nau'in tsoho bayanin
tashin hankali boolean gaskiya Yi amfani da canjin css fade zuwa tip ɗin kayan aiki
html boolean karya Saka html a cikin kayan aiki. Idan ƙarya, za a yi amfani da hanyar jquery textdon saka abun ciki a cikin gidan. Yi amfani da rubutu idan kun damu da harin XSS.
jeri zaren | 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ƙasudai.
take zaren | aiki '' Tsohuwar darajar take idan alamar ` take` ba ta nan
jawo kirtani 'Hover focus' yadda ake kunna kayan aiki - danna | shawa | mayar da hankali | manual. Lura cewa yanayin wucewa yana haifar da mutliple, sararin samaniya, nau'ikan fararwa.
jinkiri lamba | abu 0

jinkirin nunawa da ɓoye kayan aiki (ms) - baya aiki ga nau'in faɗakarwa na hannu

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

Tsarin abu shine:delay: { show: 500, hide: 100 }

ganga zaren | karya karya

Yana haɗa tip ɗin kayan aiki zuwa takamaiman yankicontainer: 'body'

A kula! Zaɓuɓɓuka don ƙayyadaddun kayan aiki ɗaya ɗaya ana iya ƙayyade su ta hanyar amfani da sifofin bayanai.

Alamar alama

  1. <a href = "#" data-toggle = "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 tushen 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' )

.tooltip('lalata')

Yana ɓoyewa da lalata kayan aikin wani abu.

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

Misalai

Ƙara ƙarami mai rufi na abun ciki, kamar waɗanda ke kan iPad, zuwa kowane nau'i na bayanan sakandare na gidaje. Juya kan maɓallin don kunna popover. Yana buƙatar haɗa Tushen kayan aiki .

A tsaye popover

Akwai zaɓuɓɓuka huɗu: saman, dama, ƙasa, da hagu masu layi.

Popover saman

Sed posuere consectetur est a lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover dama

Sed posuere consectetur est a lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover kasa

Sed posuere consectetur est a lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover hagu

Sed posuere consectetur est a lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Babu alamar da aka nuna kamar yadda aka samar da popovers daga JavaScript da abun ciki a cikin datasifa.

Live demo

Hanyoyi hudu


Amfani

Kunna popovers ta JavaScript:

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

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-animation="".

Suna nau'in tsoho bayanin
tashin hankali boolean gaskiya Yi amfani da canjin css fade zuwa tip ɗin kayan aiki
html boolean karya Saka html a cikin popover. Idan ƙarya, za a yi amfani da hanyar jquery textdon saka abun ciki a cikin gidan. Yi amfani da rubutu idan kun damu da harin XSS.
jeri zaren | 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 ga takamaiman maƙasudin
jawo kirtani 'danna' yadda popover ke jawo - danna | shawa | 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

jinkirin nunawa da ɓoye popover (ms) - baya shafi nau'in fararwa na hannu

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

Tsarin abu shine:delay: { show: 500, hide: 100 }

ganga zaren | karya karya

Haɗa popover zuwa takamaiman yankicontainer: 'body'

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' )

.popover('lalata')

Yana ɓoyewa da lalata faɗuwar wani abu.

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

Misali faɗakarwa

Ƙara aikin korar zuwa duk saƙonnin faɗakarwa tare da wannan plugin ɗin.

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

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. })

Misali amfani

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.

Jiha

Ƙara data-loading-text="Loading..."don amfani da yanayin lodi akan maɓalli.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Yanayin lodawa </button>

Juyawa guda ɗaya

Ƙara data-toggle="button"don kunna juyawa akan maɓalli ɗaya.

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Juya Juya </button>

Akwatin ajiya

Ƙara data-toggle="buttons-checkbox"don salon jujjuyawar akwati akan rukunin btn.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Hagu </button>
  3. <button type = "button" class = "btn btn-primary" > Tsakiyar </button>
  4. <button type = "button" class = "btn btn-primary" > Dama </button>
  5. </div>

Rediyo

Ƙara data-toggle="buttons-radio"don jujjuya salon rediyo akan rukunin btn.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Hagu </button>
  3. <button type = "button" class = "btn btn-primary" > Tsakiyar </button>
  4. <button type = "button" class = "btn btn-primary" > Dama </button>
  5. </div>

Amfani

Kunna maɓalli ta JavaScript:

  1. $ ( '.nav-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.

Zabuka

Babu

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 type = "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 type = "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 ta fi dacewa don amfani da ita ita ce 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 type = "button" class = "btn" data-complete-text = "gama!" > ... </button>
  2. <rubutu>
  3. $ ( '.btn' ). button ( 'cikakke' )
  4. </script>

Game da

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

* Yana buƙatar plugin ɗin Transition don haɗawa.

Misali accordion

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

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.
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.
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.
  1. <div class = "accordion" id = "accordion2" >
  2. <div class = "kungiyar accordion" >
  3. <div class = "accordion-heading" >
  4. <a class = "accordion-toggle" data-toggle = "rushe" data-parent = "#accordion2" href = "#collapseOne" >
  5. Rukunin Rukuni na #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "accordion-body rushe in" >
  9. <div class = "accordion-inner" >
  10. Anim pariatur cliche...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "kungiyar accordion" >
  15. <div class = "accordion-heading" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Abun Rukuni na #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "accordion-body rushe" >
  21. <div class = "accordion-inner" >
  22. Anim pariatur cliche...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Hakanan zaka iya amfani da plugin ɗin ba tare da alamar accordion ba. Yi maɓalli don jujjuya faɗaɗawa da rushewar wani abu.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. sauki rugujewa
  3. </button>
  4.  
  5. <div id = "demo" class = "rushewa" > </div>

Amfani

Ta hanyar bayanan halayen

Kawai ƙara data-toggle="collapse"da kuma data-targetzuwa kashi don ba da ikon sarrafa abin da zai iya rugujewa 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.

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.

Ta hanyar JavaScript

Kunna da hannu tare da:

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

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-parent="".

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

Hanyoyin

.rushe (zaɓuɓɓuka)

Yana kunna abun cikin ku azaman abun 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. })

Misali

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

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

Za ku so a saita autocomplete="off"don hana tsoffin menu na burauza daga bayyana a kan zazzagewar nau'in Bootstrap.


Amfani

Ta hanyar bayanan halayen

Ƙara sifofin bayanai don yin rajistar wani kashi mai aikin nau'in rubutu kamar yadda aka nuna a misalin da ke sama.

Ta hanyar JavaScript

Kira typeahead da hannu tare da:

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

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-source="".

Suna nau'in tsoho bayanin
tushe tsararru, aiki [] Tushen bayanan don tambaya akan. Yana iya zama tsararrun igiyoyi ko aiki. An ƙetare aikin gardama biyu, queryƙima a cikin filin shigarwa da processdawowar kira. Ana iya amfani da aikin tare da haɗin gwiwa ta hanyar mayar da tushen bayanai kai tsaye ko a daidaita ta ta hanyar processhujja guda ɗaya ta dawo da kira.
abubuwa lamba 8 Matsakaicin adadin abubuwan da za a nuna a cikin zaɓuka.
Tsawon min lamba 1 Matsakaicin tsayin halayen da ake buƙata kafin fara aiwatar da shawarwarin cikawa ta atomatik
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.
updater aiki yana dawo da abin da aka zaɓa Hanyar da ake amfani da ita don dawo da abin da aka zaɓa. Ya yarda da hujja guda ɗaya, itemkuma yana da iyakar misalin nau'in rubutu.
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.

Hanyoyin

.typehead(zaɓi)

Yana fara shigarwa tare da nau'in rubutu.

Misali

Ƙarƙashin kewayawa na hagu shine nunin nunin rayayye na affix plugin.


Amfani

Ta hanyar bayanan halayen

Don ƙara ɗabi'ar affix cikin sauƙi zuwa kowane nau'in, kawai ƙara data-spy="affix"zuwa ɓangaren da kuke son yin leken asiri. Sannan yi amfani da kashe-kashe don ayyana lokacin kunna kunnawa da kashewa.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
A kula! Dole ne ku sarrafa matsayin abin da aka liƙa da kuma halin iyayensa na kusa. Ana sarrafa matsayi ta affix, affix-top, da affix-bottom. Ka tuna don bincika iyaye mai yuwuwar rugujewa lokacin da alamar ta shiga yayin da take cire abun ciki daga gudana na yau da kullun na shafin.

Ta hanyar JavaScript

Kira plugin ɗin affix ta JavaScript:

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

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-offset-top="200".

Suna nau'in tsoho bayanin
biya diyya lamba | aiki | abu 10 Pixels don kashewa daga allo lokacin ƙididdige matsayi na gungurawa. Idan an samar da lamba ɗaya, za a yi amfani da kashewa a duka sama da hagu. Don sauraron jagora guda ɗaya, ko maɓalli na musamman, kawai samar da wani abu offset: { x: 10 }. Yi amfani da aiki lokacin da kuke buƙatar samar da koma baya (mai amfani ga wasu ƙira masu amsawa).