Javascript ya Bootstrap

Leeta ebitundu bya Bootstrap mu bulamu-kati nga olina 12 custom jQuery plugins.

Ebikozesebwa mu kukola (Modals).

A streamlined, naye flexible, take on the traditional javascript modal plugin nga erimu emirimu emitono gyokka egyetaagisa n'ebisookerwako ebigezi.

Ebintu ebigwa wansi

Okwongerako menus ezikka kumpi ku kintu kyonna mu Bootstrap ne plugin eno ennyangu. Bootstrap erimu obuwagizi bwa menu obujjuvu obukka ku mu navbar, tabs, ne pills.

Ebiwandiiko ebiyitibwa Scrollspy

Kozesa scrollspy okutereeza otomatika enkolagana mu navbar yo okulaga enkolagana ekola kati okusinziira ku kifo ky'okutambula.

Taabu ezikyusibwakyusibwa

Kozesa plugin eno okufuula tabs n’empeke ez’omugaso ennyo ng’ozikkiriza okukyusakyusa okuyita mu tabbable panes ez’ebirimu eby’omu kitundu.

Ebikozesebwa

Ekipya okutwala ku jQuery Tipsy plugin, Tooltips tezeesigama ku bifaananyi—bakozesa CSS3 ku animations ne data-attributes okutereka emitwe egy’omu kitundu.

Popovers * .

Okwongerako obutonotono obubikkiddwako ebirimu, ng’ebyo ebiri ku iPad, ku kintu kyonna eky’okuteeka amawulire ag’okubiri.

* Yeetaaga Tooltips okuteekebwamu

Obubaka obw’okulabula

Plugin y’okulabula kiraasi ntono nnyo ey’okugattako emirimu egy’okumpi ku kulabula.

Ebikondo ebiyitibwa Buttons

Kola ebisingawo ne buttons. Control button states oba tonda ebibinja bya buttons ku bitundu ebisingawo nga toolbars.

Okuzirika

Funa emisono egy’omusingi n’obuwagizi obukyukakyuka obw’ebitundu ebiyinza okugwa nga accordions ne navigation.

Ekyuma ekiyitibwa Carousel

Tonda eky’okusanyuka eky’ebirimu byonna by’oyagala okuwa slideshow ey’okukwatagana ey’ebirimu.

Typeahead

Plugin enkulu, eyangu okugaziwa ey'okukola amangu typeaheads ennungi n'okuyingiza ebiwandiiko bya ffoomu yonna.

Enkyukakyuka * .

Ku bikolwa eby'enkyukakyuka ebyangu, ssaamu bootstrap-transition.js omulundi gumu okusereba mu modals oba okuzikira okulabula.

* Ekyetaagisa okukola animation mu plugins

Emitwe gigulumivu! Plugins zonna eza javascript zeetaaga enkyusa ya jQuery eyasembyeyo.

Ebikwata ku modals

A streamlined, naye flexible, take on the traditional javascript modal plugin nga erimu emirimu emitono gyokka egyetaagisa n'ebisookerwako ebigezi.

Wano wefunire fayiro

Ekyokulabirako ekitali kikyukakyuka

Wansi waliwo modal ekoleddwa mu ngeri ya statically.

Live demo

Toggle a modal okuyita mu javascript nga onyiga button wansi. Kijja kuseeyeeya wansi era kizike okuva waggulu ku lupapula.

Tongoza enkola ya demo

Okukozesa bootstrap-modal

Kuba modal ng'oyita mu javascript:

  1. $ ( '#Modal yange' ). modal ( eby'okulondako ) .

Eby’okulondako

Erinnya okuwandiika okukosamu okunnyonnyola
ekifaananyi eky’emabega boolean kituufu Mulimu ekintu ekiyitibwa modal-backdrop element. Ekirala, lambika staticku backdrop etaggalawo modal ku click.
ekitabo ekikwata ku kibboodi boolean kituufu Eggalawo modal nga escape key enyigiddwa
okulaga boolean kituufu Alaga modal nga etandikiddwawo.

Okuteeka obubonero

Osobola okukola modals ku page yo mu ngeri ennyangu nga tolina kuwandiika layini emu eya javascript. Just set data-toggle="modal"ku controller element ne a data-target="#foo"oba href="#foo"ekikwatagana ne modal element id, era bwekinyiga, kijja kutongoza modal yo.

Era, okwongera ebyokulonda ku modal instance yo, just biteekemu nga data attributes endala ku oba control element oba modal markup yennyini.

  1. <a class = "btn" data-toggle = "enkola" href = "#Modal yange" > Okutongoza Modal </a>
  1. <div class = "okukweka enkola" id = "Modal yange" >
  2. <div class = "omutwe-omuko" >
  3. < ekika kya button = "button" class = "okuggalawo" data-okugoba = "modal" > × </button>
  4. <h3> Omutwe gwa modali </h3>
  5. </div> nga bwe kiri
  6. <div class = "omubiri-ogw'engeri" >
  7. <p> Omubiri gumu omulungi... </p>
  8. </div> nga bwe kiri
  9. <div class = "omutendera-ekigere" >
  10. <a href = "#" ekibiina = "btn" data-dismiss = "modal" > Ggalawo </a>
  11. <a href = "#" class = "btn btn-primary" > Teeka enkyukakyuka </a>
  12. </div> nga bwe kiri
  13. </div> nga bwe kiri
Emitwe gigulumivu! Bw’oba ​​oyagala modal yo okukola animate mu n’okufuluma, just add a .fadeclass to the .modalelement (laba demo okulaba kino mu bikolwa) era oteekemu bootstrap-transition.js.

Enkola

.modal(ebyokulonda) .

Ekola ebirimu byo nga modal. Akkiriza eby'okulonda eby'okwesalirawo object.

  1. $ ( '#Modal yange' ). modal ({ ) .
  2. keyboard : eky'obulimba
  3. }) .

.modal('okukyusakyusa')

Mu ngalo ekyusakyusa modal.

  1. $ ( '#Modal yange' ). modal ( 'okukyusakyusa' ) .

.modal('laga') .

Mu ngalo aggulawo modal.

  1. $ ( '#Modal yange' ). modal ( 'okulaga' ) .

.modal('okukweka') .

Mu ngalo akweka modal.

  1. $ ( '#Modal yange' ). modal ( 'okukweka' ) .

Ebibaddewo

Bootstrap's modal class eraga ebitonotono ebibaawo olw'okuyunga mu nkola ya modal.

Omukolo Okunnyonnyola
okulaga Ekintu kino kikuba amangu ddala nga showenkola ya instance eyitiddwa.
eragiddwa Ekintu kino kikubwa nga modal ekoleddwa okulabika eri omukozesa (ejja kulinda enkyukakyuka za css okuggwa).
okweekweeka Ekintu kino kikubwa amangu ddala nga hideenkola ya instance eyitiddwa.
okukweekebwa Ekintu kino kikubwa nga modal emaze okukwekebwa okuva eri omukozesa (ejja kulinda enkyukakyuka za css okuggwa).
  1. $ ( '#Modal yange' ). ku ( 'ekikwekeddwa' , omulimu () { .
  2. // kola ekintu...
  3. }) .

ScrollSpy plugin ya kulongoosa nav targets mu ngeri ey’otoma okusinziira ku scroll position.

Wano wefunire fayiro

Eky'okulabirako navbar ne scrollspy

Ssenda ekitundu wansi olabe ebipya ebikwata ku ntambula. Ebintu ebitonotono ebigwa wansi nabyo bijja kulagibwa. Gezaako!

@obunene

Ad leggings keytar, brunch id art akabaga ka dolor labore. Pitchfork yr enim lo-fi nga tebannaba kutunda qui. Tumblr eddembe ly'obugaali okuva ku faamu okutuuka ku mmeeza kyonna. Anim keffiyeh kaadi ya carles. Velit seitan mcsweeney's ekifaananyi ekifo 3 omusege omwezi irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui osanga toziwuliddeko et cardigan ssente z'obwesige culpa biodiesel wes anderson aesthetic. Nihil alina ttatu accusamus, cred irony biodiesel keffiyeh omukozi w'emikono ullamco ekivaamu.

@mdo

Veniam marfa ebirevu skateboard, adipisicing ekirevu kya fugiat velit ekirevu eky’ekika kya pitchfork. Freegan ekirevu aliqua cupidatat ekirevu kya mcsweeney. Cupidatat abantu bana loko nisi, ea helvetica nulla carles. Loole y'emmere ya ssweeta ya cosby eriko ttatu, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 eby’okwewunda. Carles non aesthetic okukola dduyiro quis gentrify. Brooklyn adipisicing eby'emikono bbiya vice keytar deserunt.

emu

Occaecat ekika kya commodo ekiyitibwa ekirungo ekiyitibwa occaecat. Fap ebyemikono bbiya deserunt skateboard ea. Lomo obugaali eddembe adipisicing banh mi, velit ea sunt omutendera oguddako locavore kaawa ow’ensibuko emu mu magna veniam. Obulamu obw'amaanyi id vinyl, echo park consequat quis aliquip banh mi ppipa. Vero VHS est okusiiga amasanyalaze. Consectetur nisi DIY minim ensawo y'omubaka. Cred ex mu, okuwangaala delectus consectetur fanny pack iphone.

bbiri

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 ensawo y'omubaka marfa kyonna delectus loole y'emmere. Sapiente synth id okulowooza nti. Locavore sed helvetica cliche irony, okubwatuka osanga towuliddeko consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat nga tebannaba kutunda, terry richardson proident brunch nesciunt quis cosby ssweeta pariatur keffiyeh ut helvetica omukubi w'emikono. Cardigan craft bbiya seitan nga yeetegefu velit. VHS chambray laboris ekika kya veniam eky’ekiseera. Anim mollit minim commodo ullamco okubwatuka kw'okubwatuka.


Okukozesa bootstrap-scrollspy.js

Kuba scrollspy ng'oyita mu javascript:

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

Okuteeka obubonero

Okusobola okwanguyirwa okwongerako enneeyisa ya scrollspy ku topbar navigation yo, just add data-spy="scroll"ku element gyoyagala okuketta (okusinga kino kyandibadde mubiri).

  1. <omubiri data-spy = "okutambula" > ... </omubiri>
Emitwe gigulumivu! Enkolagana za Navbar zirina okuba n'ebigendererwa bya id ebisobola okugonjoolwa. Okugeza, a <a href="#home">home</a>alina okukwatagana n’ekintu ekiri mu dom nga <div id="home"></div>.

Enkola

.scrollspy('okuzza obuggya')

Bw'oba okozesa scrollspy wamu n'okugattako oba okuggyawo ebintu okuva mu DOM, ojja kwetaaga okuyita enkola y'okuzza obuggya nga bwe kityo:

  1. $ ( '[data-spy="okutambula"]' ). buli ( omulimu () { .
  2. var $ omukessi = $ ( kino ). scrollspy ( 'okuzza obuggya' ) .
  3. });

Eby’okulondako

Erinnya okuwandiika okukosamu okunnyonnyola
offset omuwendo 10. 10 Pixels oku offset okuva waggulu nga obala ekifo ky'omuzingo.

Ebibaddewo

Omukolo Okunnyonnyola
okukola Ekintu kino kikuba omuliro buli ekintu ekipya lwe kifuuka ekikozesebwa scrollspy.

Plugin eno eyongerako enkola ya tab ne pill eyangu, ekyukakyuka okukyusa okuyita mu birimu eby’omu kitundu.

Wano wefunire fayiro

Eby’okulabirako tabu

Nywa ku tabu wansi okukyusakyusa wakati w’ebipande ebikwekebwa, wadde ng’oyita mu menyu ezikka.

Raw denim osanga toziwuliddeko jean shorts Austin. Nesciunt tofu stumptown aliqua, okuyonja omukugu mu kukola eby’amaguzi eby’edda. Ebirevu cliche eby’ekiseera, williamsburg carles vegan helvetica. Reprehenderit omunyama retro keffiyeh omukwasi w'ebirooto synth. Ssweeta ya cosby eu banh mi, qui irure terry richardson eyali squid. Aliquip placeat omusajja omulala ayitibwa salvia cillum iphone. Seitan aliquip quis cardigan engoye z'omumerika, omunyama 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.


Okukozesa bootstrap-tab.js

Ssobozesa tabbable tabs nga oyita mu javascript (buli tab yeetaaga okukolebwa kinnoomu):

  1. $ ( '#Tab yange a' ). click ( omulimu ( e ) { .
  2. e . okuziyizaEkisookerwako ();
  3. $ ( kino ). tab ( 'laga' );
  4. }) .

Osobola okukola tabu ssekinnoomu mu ngeri eziwerako:

  1. $ ( '#Tab yange a[href="#profile"]' ). tab ( 'laga' ); // Londa tab okusinziira ku linnya
  2. $ ( '#Tab yange a:esooka' ). tab ( 'laga' ); // Londa ekitundu ekisooka
  3. $ ( '#Tab yange a:esembayo' ). tab ( 'laga' ); // Londa ekitundu ekisembayo
  4. $ ( '#Tab yange li:eq (2) a' ). tab ( 'laga' ); // Londa ekitundu ekyokusatu (0-indexed) .

Okuteeka obubonero

Osobola okukola tab oba pill navigation nga towandiise javascript yonna nga omala kulaga data-toggle="tab"oba data-toggle="pill"ku element. Okwongera navne nav-tabsclasses ku tab ulkijja kukozesa bootstrap tab styling.

  1. <ul ekibiina = "nav nav-tabs" >
  2. <li><a href = "#awaka" data-toggle = "tabu" > Awaka </a></li>
  3. <li><a href = "#profile" data-toggle = "tabu" > Ebifaananyi </a></li>
  4. <li><a href = "#obubaka" data-toggle = "tabu" > Obubaka </a></li>
  5. <li><a href = "#ensengeka" data-toggle = "tabu" > Ensengeka </a></li>
  6. </ul>

Enkola

$().tab

Ekola ekintu kya tabu n'ekintu ekirimu. Tab erina okuba ne oba a data-targetoba an hreftargeting a container node mu DOM.

  1. <ul ekibiina = "nav nav-tabs" id = "Tab yange" >
  2. <li class = "ekola" ><a href = "#awaka" > Awaka </a></li>
  3. <li><a href = "#profile" > Ebifaananyi </a></li>
  4. <li><a href = "#obubaka" > Obubaka </a></li>
  5. <li><a href = "#ensengeka" > Ensengeka </a></li>
  6. </ul>
  7.  
  8. <div class = "ebirimu tabu" >
  9. <div class = "tabu-pane ekola" id = "awaka" > ... </div>
  10. <div kiraasi = "tabu-pane" id = "profayiro" > ... </div>
  11. <div class = "tabu-pane" id = "obubaka" > ... </div>
  12. <div class = "tab-pane" id = "ensengeka" > ... </div>
  13. </div> nga bwe kiri
  14.  
  15. <ekiwandiiko>
  16. $ ( omulimu () { .
  17. $ ( '#Tab yange a:esembayo' ). tab ( 'laga' );
  18. }) .
  19. </script>

Ebibaddewo

Omukolo Okunnyonnyola
okulaga Ekintu kino kikuba omuliro ku tab show, naye nga tab empya tennalagibwa. Kozesa event.targetne event.relatedTargetokutunuulira tabu ekola ne tabu ekola eyasooka (bwe kiba nga kiriwo) mu kulondako.
eragiddwa Ekintu kino kikuba omuliro ku tab show oluvannyuma lwa tab okulagibwa. Kozesa event.targetne event.relatedTargetokutunuulira tabu ekola ne tabu ekola eyasooka (bwe kiba nga kiriwo) mu kulondako.
  1. $ ( 'a[data-okukyusakyusa="tabu"]' ). ku ( 'alagiddwa' , omulimu ( e ) {
  2. e . target // tab ekoleddwa
  3. e . relatedTarget // ekitundu ekiyise
  4. }) .

Ebikwata ku Tooltips

Nga efunye okubudaabudibwa okuva mu nkola ennungi ennyo eya jQuery.tipsy eyawandiikibwa Jason Frame; Tooltips ye nkyusa erongooseddwa, etasinziira ku bifaananyi, ekozesa css3 ku animations, ne data-attributes okutereka emitwe egy'omu kitundu.

Wano wefunire fayiro

Okugeza enkozesa ya Tooltips

Hover ku links wammanga olabe ebikozesebwa:

Tight pants next level keffiyeh osanga toziwuliddeko . Ekifaananyi ekibanda ekirevu embisi denim letterpress vegan omubaka ensawo stumptown. Seitan okuva ku faamu okutuuka ku mmeeza, engoye za mcsweeney eziyitibwa fixie sustainable quinoa 8-bit american apparel zirina terry richardson vinyl chambray. Ekirevu stumptown, cardigans banh mi lomo okubwatuka. Tofu biodiesel williamsburg marfa, bana loko mcsweeney's okuyonja vegan chambray. A really ironic artisan whatever keytar , scenester faamu-ku-mmeeza banksy Austin twitter okukwata freegan cred embisi denim ensibuko emu kaawa viral.


Okukozesa bootstrap-tooltip.js

Trigger the tooltip nga oyita mu javascript:

  1. $ ( '#ekyokulabirako' ). tooltip ( eby'okulonda ) .

Eby’okulondako

Erinnya okuwandiika okukosamu okunnyonnyola
okukola ebifaananyi ebirina obulamu boolean kituufu kozesa enkyukakyuka ya css fade ku tooltip
okuteekebwa mu kifo omuguwa|omulimu 'waggulu' engeri y'okuteeka ekiwandiiko ky'ebikozesebwa - waggulu | wansi | ku kkono | kituufu
omusunsuzi akaguwa -kyaamu Singa omusunsula aweebwa, ebintu ebikozesebwa bijja kuweebwa ebigendererwa ebiragiddwa.
omutwe olunyiriri | enkola '' . omuwendo gw'omutwe ogusookerwako singa `title` tag tebaawo
okusiikula akaguwa 'okuwuubaala'. engeri tooltip gy'etandikibwamu - hover | okussa essira | maniyo
okulwawo ennamba | ekintu 0.

okulwawo okulaga n'okukweka tooltip (ms) - tekwata ku kika kya manual trigger

Singa ennamba eweebwa, okulwawo kukozesebwa ku byombi okukweka/okulaga

Ensengeka y’ekintu eri nti:delay: { show: 500, hide: 100 }

Emitwe gigulumivu! Enkola z’ebikozesebwa ssekinnoomu zisobola okulagibwa mu ngeri endala okuyita mu kukozesa ebikwata ku data.

Okuteeka obubonero

Olw'ensonga z'okukola, Tooltip ne Popover data-apis zibeera opt in. Bw'oba oyagala okuzikozesa just specify a selector option.

  1. <a href = "#" rel = "ekintu ekikozesebwa" title = "ekiwandiiko ekisooka" > hover over me </a>

Enkola

$().ekikozesebwa(ebyokulonda) .

Egattako omukwasi w'ebikozesebwa ku kukungaanya elementi.

.tooltip('laga') .

Abikkula ekiwandiiko ky'ekintu ekiyitibwa tooltip.

  1. $ ( '#ekintu' ). tooltip ( 'laga' ) .

.tooltip('okukweka') .

Ekweka ekiwandiiko ky'ekintu ekiyitibwa tooltip.

  1. $ ( '#ekintu' ). tooltip ( 'kwekweka' ) .

.tooltip('okukyusa')

Ekyusakyusa ekintu ekiyitibwa tooltip.

  1. $ ( '#ekintu' ). tooltip ( 'okukyusa' ) .

Ebikwata ku popovers

Okwongerako obutonotono obubikkiddwako ebirimu, ng’ebyo ebiri ku iPad, ku kintu kyonna eky’okuteeka amawulire ag’okubiri.

* Yeetaaga Tooltip okuteekebwamu

Wano wefunire fayiro

Okugeza hover popover

Hover ku button okutandika popover.


Okukozesa bootstrap-popover.js

Ssobozesa popovers nga oyita mu javascript:

  1. $ ( '#ekyokulabirako' ). popover ( eby'okulondako ) .

Eby’okulondako

Erinnya okuwandiika okukosamu okunnyonnyola
okukola ebifaananyi ebirina obulamu boolean kituufu kozesa enkyukakyuka ya css fade ku tooltip
okuteekebwa mu kifo omuguwa|omulimu 'kituufu' engeri y'okuteeka popover - waggulu | wansi | ku kkono | kituufu
omusunsuzi akaguwa -kyaamu singa omusunsu aweebwa, ebintu ebikozesebwa bijja kuweebwa ebigendererwa ebiragiddwa
okusiikula akaguwa 'okuwuubaala'. engeri tooltip gy'etandikibwamu - hover | okussa essira | maniyo
omutwe olunyiriri | enkola '' . omuwendo gw'omutwe ogusookerwako singa ekintu `title` tekibaawo
okwesiima olunyiriri | enkola '' . omuwendo gw'ebirimu ogusookerwako singa ekintu kya `data-content` tekibaawo
okulwawo ennamba | ekintu 0.

okulwawo okulaga n'okukweka popover (ms) - tekukwata ku kika kya manual trigger

Singa ennamba eweebwa, okulwawo kukozesebwa ku byombi okukweka/okulaga

Ensengeka y’ekintu eri nti:delay: { show: 500, hide: 100 }

Emitwe gigulumivu! Enkola za popovers ssekinnoomu zisobola mu ngeri endala okulagibwa okuyita mu kukozesa data attributes.

Okuteeka obubonero

Olw'ensonga z'okukola, Tooltip ne Popover data-apis zibeera opt in. Bw'oba oyagala okuzikozesa just specify a selector option.

Enkola

$().popover(ebyokulonda) .

Etandikawo popovers olw'okukung'aanya elementi.

.popover('laga') .

Abikkula ekintu ekiyitibwa elements popover.

  1. $ ( '#ekintu' ). popover ( 'okulaga' ) .

.popover('kwekweka') .

Akweka ekintu ekiyitibwa elements popover.

  1. $ ( '#ekintu' ). popover ( 'kwekweka' ) .

.popover('okukyusakyusa')

Ekyusakyusa ekintu ekiyitibwa elements popover.

  1. $ ( '#ekintu' ). popover ( 'okukyusakyusa' ) .

Ebikwata ku kulabula

Plugin y’okulabula kiraasi ntono nnyo ey’okugattako emirimu egy’okumpi ku kulabula.

Okufuna

Eky’okulabirako okulabula

Plugin y'okulabula ekola ku bubaka obw'okulabula obwa bulijjo, n'okuziyiza obubaka.

Guacamole omutukuvu! Best check yo self, tolabika bulungi nnyo.

Oh snap! Ofunye ensobi!

Kyusa kino ne kiri oddemu ogezeeko. Duis mollis, est non commodo luctus, nisi erat ekika ky’omugongo, eget lacinia odio sem nec elit. Cras mattis consectetur purus etuula mu kizimbulukusa.

Kola ekikolwa kino Oba kino kikole


Okukozesa bootstrap-alert.js

Ssobozesa okugoba okulabula ng'oyita mu javascript:

  1. $ ( ".okulabula" ). okulabula () .

Okuteeka obubonero

Just add data-dismiss="alert"ku close button yo okuwa automatically okuwa alert close functionality.

  1. <a class = "okuggalawo" data-dismiss = "okulabula" href = "#" > &emirundi; </a>

Enkola

$().okulabula () .

Azinga okulabula kwonna n'emirimu egy'okumpi. Okusobola okuba n’okulabula kwo animate out nga kuggaddwa, kakasa nti balina the .fadeand .inclass eyakozesebwa dda ku zo.

.alert('okuggalawo')

Aggalawo okulabula.

  1. $ ( ".okulabula" ). alert ( 'okuggalawo' ) .

Ebibaddewo

Bootstrap's alert class eraga ebitonotono ebibaawo olw'okuyunga mu nkola y'okulabula.

Omukolo Okunnyonnyola
okuggalawo Ekintu kino kikuba amangu ddala nga closeenkola ya instance eyitiddwa.
eggaddwawo Ekintu kino kikubwa nga okulabula kuggaddwa (kijja kulinda enkyukakyuka za css okuggwa).
  1. $ ( '#okulabula kwange' ). bind ( 'kiggaddwa' , omulimu () { .
  2. // kola ekintu...
  3. }) .

Ku

Kola ebisingawo ne buttons. Control button states oba tonda ebibinja bya buttons ku bitundu ebisingawo nga toolbars.

Wano wefunire fayiro

Eby’okulabirako by’okukozesa

Kozesa plugin ya buttons ku states ne toggles.

Stateful
Okukyusakyusa okumu
Akabokisi akalaga
Leediyo

Nga okozesa bootstrap-button.js

Ssobozesa buttons nga oyita mu javascript:

  1. $ ( '.nav-ebipande' ). bbaatuuni () .

Okuteeka obubonero

Ebikwata ku data bikulu nnyo mu plugin ya button. Laba ekyokulabirako kya koodi wansi ku bika by’obubonero obw’enjawulo.

  1. <!-- Yongera data-toggle="button" okukola okukyusakyusa ku button emu -->
  2. <button class = "btn" data-toggle = "button" > Okukyusakyusa okumu </button>
  3.  
  4. <!-- Yongera data-toggle="buttons-checkbox" olw'okukyusakyusa sitayiro y'akabokisi ku btn-group -->
  5. <div class = "btn-ekibinja" data-toggle = "akabokisi-okukebera obutambi" >
  6. < ekibiina kya button = "btn" > Kkono </button>
  7. <button class = "btn" > Wakati </button>
  8. <button class = "btn" > Ku ddyo </button>
  9. </div> nga bwe kiri
  10.  
  11. <!-- Yongera data-toggle="buttons-radio" okukyusa sitayiro ya leediyo ku btn-group -->
  12. <div class = "btn-ekibinja" data-okukyusa = "obutambi-leediyo" >
  13. < ekibiina kya button = "btn" > Kkono </button>
  14. <button class = "btn" > Wakati </button>
  15. <button class = "btn" > Ku ddyo </button>
  16. </div> nga bwe kiri

Enkola

$ ().button ('okukyusa')

Ekyusakyusa embeera y'okusika. Awa button endabika nti ebadde ekozeseddwa.

Emitwe gigulumivu! Osobola okusobozesa auto toggling ya button nga okozesa data-toggleattribute.
  1. < ekibiina kya button = "btn" data-toggle = "ekintu" > ... </button>

$().button ('okutikka') .

Eteeka embeera ya button ku kutikka - eremesa button era ewanyisiganya ebiwandiiko okudda ku kutikka ebiwandiiko. Okutikka ebiwandiiko kulina okunnyonnyolwa ku elementi ya button nga okozesa data attribute data-loading-text.

  1. <button class = "btn" data-loading-text = "okutikka ebintu..." > ... </button>
Emitwe gigulumivu! Firefox enyweza embeera eremeddwa okuyita mu kutikka empapula zonna . Eky'okugonjoola kino kwe kukozesa autocomplete="off".

$ ().button ('okuddamu okuteekawo')

Ezzaawo embeera ya button - ekyusa ebiwandiiko okudda mu biwandiiko eby'olubereberye.

$().button(olunyiriri) .

Ezzaawo embeera ya button - ewanyisiganya ebiwandiiko ku mbeera yonna eya data etegeezeddwa embeera y'ekiwandiiko.

  1. <button class = "btn" data-ekiwandiiko-ekijjuvu = "kiwedde!" > ... </button> nga bwe kiri
  2. <ekiwandiiko>
  3. $ ( '.btn' ). button ( 'okumaliriza' ) .
  4. </script>

Ku

Funa emisono egy’omusingi n’obuwagizi obukyukakyuka obw’ebitundu ebiyinza okugwa nga accordions ne navigation.

Wano wefunire fayiro

* Yeetaaga plugin ya Transitions okuteekebwamu.

Okugeza accordion

Nga tukozesa collapse plugin, twazimba widget ennyangu ey’omulembe gwa accordion:

Anim pariatur cliche reprehenderit, enim eiusmod obulamu obw'ekika ekya waggulu accusamus terry richardson ad squid. 3 omusege omwezi officia aute, etali ya cupidatat skateboard dolor brunch. Loole y’emmere quinoa nesciunt laborum eiusmod. Brunch 3 omusege omwezi tempor, sunt aliqua okugiteekako ekinyonyi squid kaawa ow’ensibuko emu nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, bbiya ow’emikono omulimu wes anderson cred nesciunt sapiente ea proident. Ad vegan okujjako ennyama vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt osanga towuliddeko ku bo accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod obulamu obw'ekika ekya waggulu accusamus terry richardson ad squid. 3 omusege omwezi officia aute, etali ya cupidatat skateboard dolor brunch. Loole y’emmere quinoa nesciunt laborum eiusmod. Brunch 3 omusege omwezi tempor, sunt aliqua okugiteekako ekinyonyi squid kaawa ow’ensibuko emu nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, bbiya ow’emikono omulimu wes anderson cred nesciunt sapiente ea proident. Ad vegan okujjako ennyama vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt osanga towuliddeko ku bo accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod obulamu obw'ekika ekya waggulu accusamus terry richardson ad squid. 3 omusege omwezi officia aute, etali ya cupidatat skateboard dolor brunch. Loole y’emmere quinoa nesciunt laborum eiusmod. Brunch 3 omusege omwezi tempor, sunt aliqua okugiteekako ekinyonyi squid kaawa ow’ensibuko emu nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, bbiya ow’emikono omulimu wes anderson cred nesciunt sapiente ea proident. Ad vegan okujjako ennyama vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt osanga towuliddeko ku bo accusamus labore sustainable VHS.

Okukozesa bootstrap-collapse.js

Ssobozesa ng'oyita mu javascript:

  1. $ ( ".okugwa" ). okugwa () .

Eby’okulondako

Erinnya okuwandiika okukosamu okunnyonnyola
omuzadde omusunsuzi -kyaamu Singa selector awo ebintu byonna ebiyinza okugwa wansi w'omuzadde alagiddwa bijja kuggalwawo nga ekintu kino ekiyinza okugwa kiragiddwa. (okufaananako n’enneeyisa ya accordion ey’ekinnansi)
okukyusakyusa boolean kituufu Ekyusa ekintu ekiyinza okugwa ku kuyita

Okuteeka obubonero

Just add data-toggle="collapse"ne a data-targetku element okugaba automatically control ya element eyinza okugwa. Ekintu data-targetkikkiriza css selector okukozesa okugwa. Kakasa nti ogattako kiraasi collapseku elementi eyinza okugwa. Bw'oba oyagala kiggule nga kisookerwako, yongera ku kiraasi ey'okugattako in.

  1. <button class = "btn btn-akabi" data-okukyusa = "okugwa" data-ekigendererwa = "#demo" >
  2. simple eyinza okugwa
  3. </button>
  4.  
  5. <div id = "demo" class = "okugwa mu" > ... </div>
Emitwe gigulumivu! Okwongera okuddukanya ekibinja ekiringa accordion ku control eyinza okugwa, yongera ku data attribute data-parent="#selector". Laba demo olabe kino mu bikolwa.

Enkola

.okugwa(ebyokulonda) .

Ekola ebirimu byo nga ekintu ekiyinza okugwa. Akkiriza eby'okulonda eby'okwesalirawo object.

  1. $ ( '#kiyinza okugwa' ). okugwa ({
  2. toggle : eky'obulimba
  3. }) .

.collapse('okukyusa')

Ekyusa ekintu ekiyinza okugwa okukiragibwa oba okukwekebwa.

.collapse('laga') .

Alaga ekintu ekiyinza okugwa.

.collapse('kwekweka') .

Ekweka ekintu ekiyinza okugwa.

Ebibaddewo

Bootstrap's collapse class eraga ebitonotono ebibaawo olw'oku hooking mu collapse functionality.

Omukolo Okunnyonnyola
okulaga Ekintu kino kikuba amangu ddala nga showenkola ya instance eyitiddwa.
eragiddwa Ekintu kino kikubwa nga ekintu ekigwa kikoleddwa okulabika eri omukozesa (kijja kulinda enkyukakyuka za css okuggwa).
okweekweeka Ekintu kino kikubwa amangu ddala hideng’enkola eyitiddwa.
okukweekebwa Ekintu kino kikubwa nga ekintu ekigwa kikwekeddwa okuva eri omukozesa (kijja kulinda enkyukakyuka za css okuggwa).
  1. $ ( '#kiyinza okugwa' ). ku ( 'ekikwekeddwa' , omulimu () { .
  2. // kola ekintu...
  3. }) .

Ku

Plugin enkulu, eyangu okugaziwa ey'okukola amangu typeaheads ennungi n'okuyingiza ebiwandiiko bya ffoomu yonna.

Wano wefunire fayiro

Eky'okulabirako

Tandika okuwandiika mu kifo wansi okulaga ebivudde mu typeahead.


Okukozesa bootstrap-typeahead.js

Kuba typeahead ng'oyita mu javascript:

  1. $ ( '.okuwandiika mu maaso' ). okuwandiika mu maaso () .

Eby’okulondako

Erinnya okuwandiika okukosamu okunnyonnyola
ensibuko ensengekera [ ] . Ensibuko ya data okubuuza ku.
ebintu omuwendo 8. Omuwendo ogusinga obunene ogw'ebintu eby'okulaga mu dropdown.
omuzannyi w’omupiira enkola obutafaayo ku nnyiriri ennene Enkola ekozesebwa okuzuula oba ekibuuzo kikwatagana n’ekintu. Akkiriza ensonga emu, itemegenda okugezesa okubuuza. Funa ekibuuzo ekiriwo kati ne this.query. Ddamu boolean truesinga okubuuza kuba kukwatagana.
omusunsula enkola okukwatagana okutuufu,
okukwata ku nnyiriri ennene, obutakwata ku
nnyiriri ennene
Enkola ekozesebwa okusunsula ebivudde mu autocomplete. Ekkiriza ensonga emu itemsera erina obuwanvu bw'ekyokulabirako kya typeahead. Jjukira ekibuuzo ekiriwo kati ne this.query.
ekintu ekiraga ebifaananyi enkola eraga ebikwatagana byonna ebisookerwako Enkola ekozesebwa okulaga ebivudde mu autocomplete. Ekkiriza ensonga emu itemera erina obuwanvu bw'ekyokulabirako kya typeahead. Alina okuzzaayo html.

Okuteeka obubonero

Okwongerako data attributes okuwandiisa elementi n'enkola ya typeahead.

  1. < ekika ky'okuyingiza = "ekiwandiiko" data-provide = "ekika mu maaso" >

Enkola

.typeahead(ebyokulonda) .

Etandikawo ekiyingizibwa nga kiriko typeahead.