JavaScript

Tliša dikarolo tša Bootstrap bophelong-bjale ka di-plugin tše 13 tša jQuery tša tlwaelo.

Motho ka o tee ka o tee goba e kgobokeditšwego

Di-plugin di ka akaretšwa ka botee (le ge e le gore tše dingwe di na le dilo tšeo di nyakago go ithekga), goba ka moka ka nako e tee. Bobedi bootstrap.js le bootstrap.min.js di na le di-plugin ka moka ka faeleng e tee.

Dika tša datha

O ka šomiša di-plugin ka moka tša Bootstrap ka go hlweka ka API ya go swaya ntle le go ngwala mola o tee wa JavaScript. Ye ke API ya maemo a pele ya Bootstrap gomme e swanetše go ba go naganelwa ga gago ga mathomo ge o diriša plugin.

Seo se boletšwe, maemong a mangwe go ka ba mo go kganyogegago go tima mošomo wo. Ka hona, re boetse re fana ka bokgoni ba ho thibela ya data tšobotsi API ka unbinding liketsahalo tsohle ka 'mele namespaced le `'data-api'`. Se se lebelega ka tsela ye:

  1. $ ( 'mmele' ). tima ( '.data-api' ) .

Ka go fapana le moo, go nepiša plugin ye e itšego, akaretša fela leina la plugin bjalo ka sekgoba sa maina gotee le sekgoba sa maina sa data-api ka tsela ye:

  1. $ ( 'mmele' ). tima ( '.temošo.data-api' ) .

API ya lenaneo

Re dumela gape gore o swanetše go kgona go diriša di-plugin ka moka tša Bootstrap feela ka JavaScript API. Di-API ka moka tša setšhaba ke mekgwa e tee, yeo e ka tsenywago diketane, gomme e bušetša kgoboketšo yeo e dirilwego ka yona.

  1. $ ( ".btn.kotsi" ). konopo ( "toggle" ). addClass ( "mafura" ) .

Mekgwa ka moka e swanetše go amogela selo sa dikgetho tša boikhethelo, thapo yeo e nepišago mokgwa wo o itšego, goba go se be le selo (yeo e thomago polaka ka boitshwaro bja go se fetoge):

  1. $ ( "#Modal ya ka" ). modal () // e thomilwe ka di-default
  2. $ ( "#Modal ya ka" ). modal ({ khiboto : maaka }) // e thomilwe ka ha ho khiboto
  3. $ ( "#Modal ya ka" ). modal ( 'bontšha' ) // e thoma le go bitša pontšho ka pela

Plugin ye nngwe le ye nngwe gape e pepentšha moagi wa yona wo tala godimo ga thepa ya `Moagi`: $.fn.popover.Constructor. Ge o rata go hwetša mohlala wo o itšego wa plugin, o e bušetše thwii go tšwa go elemente: $('[rel=popover]').data('popover').

Ga go na Thulano

Ka dinako tše dingwe go a nyakega go diriša di-plugin tša Bootstrap le ditlhako tše dingwe tša UI. Maemong a, dithulano tša sekgoba sa maina di ka direga ka dinako tše dingwe. Ge se se direga, o ka bitša .noConflictplugin yeo o nyakago go bušetša boleng bja yona.

  1. var Konopo ya bootstrap = $ . fn . konopo ya . noConflict () // bušetša $.fn.button go boleng bjo bo abetšwego peleng
  2. $ . fn . bootstrapBtn = bootstrapButton // fana ka $ (). bootstrapBtn tshebetso ya bootstrap

Ditiragalo

Bootstrap e fana ka ditiragalo tša tlwaelo bakeng sa bontši bja ditiro tše di kgethegilego tša plugin. Ka kakaretšo, tše di tla ka mokgwa wa go se fele le wa lediri la nakong ye e fetilego - moo lediri la go se fele (ex. show) le hlohleletšwago mathomong a tiragalo, gomme sebopego sa lona sa lediri la nakong ye e fetilego (ex. shown) e hlohleletša ge tiro e phethilwe.

Ditiragalo ka moka tša go se fele di fa mošomo wa preventDefault. Se se fa bokgoni bja go emiša phethagatšo ya tiro pele e thoma.

  1. $ ( '#Modal ya ka' ). ka ( 'bontša' , mosebetsi ( e ) {
  2. ge e ba (! ya data ) khutlela e . preventDefault () // e emiša modal go bontšhwa
  3. }) .

Mabapi le diphetogo

Bakeng sa diphetho tše bonolo tša phetogo, akaretša bootstrap-transition.js gatee go bapa le difaele tše dingwe tša JS. Ge e ba o diriša bootstrap.js yeo e kgobokeditšwego (goba yeo e fokoditšwego) , ga go nyakege gore o akaretše se—se šetše se le gona.

Diriša melato

Mehlala e mmalwa ya plugin ya phetogo:

  • Sliding kapa fading ka modals
  • Fading tsoa dithepo
  • Ditemošo tša go fifala
  • Diphaephe tša carousel tše di thelelago

Mehlala

Di-modal di nolofaditšwe, eupša di feto-fetoga, di kgopela poledišano ka bonnyane bjo bo nyakegago bja mošomo le dilo tše di sa fetogego tše bohlale.

Mohlala wa static

Modal ye e tšweleditšwego ka hlogo, mmele, le sete ya ditiro ka go letlakala la ka fase.

  1. <div sehlopha = "modal pata fifala" >
  2. <div sehlopha = "modal-hlooho" >
  3. < mofuta wa konopo = "konopo" sehlopha = "tswalela" ya data-dismiss = "modal" aria-hidden = "nete" > &nako; </konope>
  4. <h3> Hlogo ya modale </h3>
  5. </div> e
  6. <div sehlopha = "modal-mmele" >
  7. <p> Mmele o tee o mobotse... </p>
  8. </div> e
  9. <div sehlopha = "modal-footer" >
  10. <a href = "#" sehlopha = "btn" > Tswala </a>
  11. <a href = "#" class = "btn btn-primary" > Boloka diphetogo </a>
  12. </div> e
  13. </div> e

Demo e phelang

Toggle a modal ka JavaScript ka ho tobetsa konopo e ka tlase. E tla thelela fase gomme ya fifala ka gare go tšwa godimo ga letlakala.

  1. <!-- Konopo ya go hlohleletša modal -->
  2. <a href = "#myModal" karolo = "konope" sehlopha = "btn" data-toggle = "modal" > Thoma mokgwa wa demo </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" sehlopha = "modal pata fifala" tabindex = "-1" karolo = "poledisano" aria-labelledby = "myModalLabel" aria-patilwe = "nete" >
  6. <div sehlopha = "modal-hlooho" >
  7. < mofuta wa konopo = "konopo" sehlopha = "tswala" ya data-dismiss = "modal" aria-hidden = "nete" > × </konopo>
  8. <h3 id = "myModalLabel" > Hlogo ya mokgwa </h3>
  9. </div> e
  10. <div sehlopha = "modal-mmele" >
  11. <p> Mmele o tee o mobotse... </p>
  12. </div> e
  13. <div sehlopha = "modal-footer" >
  14. < sehlopha sa konopo = "btn" ya data-dismiss = "modal" aria-hidden = "nete" > Tswala </konopo>
  15. <button class = "btn btn-primary" > Boloka diphetogo </konope>
  16. </div> e
  17. </div> e

Tšhomišo

Ka dika ya data

Dira gore modal e šome ntle le go ngwala JavaScript. Beakanya data-toggle="modal"godimo ga elemente ya molaodi, go swana le konope, gotee le data-target="#foo"goba href="#foo"go nepiša modal ye e itšego go fetola.

  1. < mohuta wa konope = "konope" ya data-toggle = "modal" ya data-sepheo = "#myModal" > Thoma modal </konopo>

Ka JavaScript

Bitsa modal ka id myModalka mola o le mong oa JavaScript:

  1. $ ( '#Modal ya ka' ). modal ( dikgetho ) .

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-backdrop="".

Leina mohuta hlokomologa tlhalošo
lemorago la ka morago boolean ya go swana nnete E akaretša elemente ya modal-backdrop. Ka go fapana le moo, laetša staticbakeng sa backdrop yeo e sa tswalelego modal ka go klika.
khiiboto ya boolean ya go swana nnete E tswalela modal ge senotlelo sa go tšhaba se tobetšwe
bontšha boolean ya go swana nnete E bontšha modal ge e thongwa.
kgole tsela maaka

Ge e le gore url ya kgole e filwe, diteng di tla imelwa ka loadmokgwa wa jQuery gomme tša tsenywa ka gare ga .modal-body. Ge e ba o diriša api ya data, o ka diriša hrefleswao ka tsela e nngwe go laetša mothopo wa kgole. Mohlala wa se o bontšhitšwe ka mo tlase:

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

Mekgwa ya go šoma

.modal(dikgetho) .

E dira gore diteng tša gago di šome bjalo ka modal. E amogela dikgetho tša boikhethelo object.

  1. $ ( '#Modal ya ka' ). modal ({ ) .
  2. khiiboto : maaka
  3. }) .

.modal (' go fetola') .

Ka seatla e fetola modal.

  1. $ ( '#Modal ya ka' ). modal ( 'go fetola' ) .

.modal ('bontša') .

Ka letsoho bula e modal.

  1. $ ( '#Modal ya ka' ). modal ( 'bontša' ) .

.modal('pata') .

Ka letsoho pata e modal.

  1. $ ( '#Modal ya ka' ). modal ( 'pata' ) .

Ditiragalo

Bootstrap o modal sehlopha pepesa liketsahalo tse seng kae bakeng sa hooking ka modal tshebetso.

Tiragalo Tlhalošo
bontšha Tiragalo ye e thunya ka pela ge showmokgwa wa mohlala o bitšwa.
e bontšhitšwe Tiragalo ye e thuntšhwa ge modal e dirilwe gore e bonagale go mosediriši (e tla emela gore diphetogo tša css di phethe).
fihla Tiragalo ye e thuntšhwa ka pela ge hidemokgwa wa mohlala o biditšwe.
fihlilwe Tiragalo ye e thuntšhwa ge modal e feditše go utollwa go tšwa go mosediriši (e tla emela gore diphetogo tša css di phethe).
  1. $ ( '#Modal ya ka' ). ka ( 'e patiloeng' , mosebetsi () {
  2. // dira se sengwe...
  3. }) .

Mohlala ka navbar

The ScrollSpy plugin ke bakeng sa ka tsela e iketsang ntjhafatsa nav diphetho thehiloeng scroll boemo. Scroll lefelo ka fase ga navbar gomme o lebelele phetogo ya sehlopha se se šomago. Diaetheme tša ka fasana tša go theoga di tla hlaolwa gape.

@lekhura

Ad leggings keytar, brunch id bonono mokga dolor labore. Pitchfork yr enim lo-fi pele ba rekisa qui. Tumblr polasa-ho-tafoleng baesekele ditokelo eng kapa eng. Anim keffiyeh carles cardigan ya go swana le yona. Velit seitan mcsweeney o photo photo photo lephephe 3 phiri ngwedi irure. Cosby jesi lomo jean shorts, williamsburg hoodie minim qui mohlomong ha ua utloa ka bona et cardigan letlole la tšepo culpa biodiesel wes anderson botsebi. Nihil tattooed accusamus, cred kgegeo biodiesel keffiyeh mosebetsi oa matsoho ullamco consequat.

@mdo

Veniam marfa ditedu skateboard, adipisicing fugiat velit ditedu tša foroko ya pitchfork. Freegan ditedu aliqua cupidatat vero ya mcsweeney. Cupidatat ba bane loko nisi, ea helvetica nulla carles. Tattooed cosby jesi lijo teraka, mcsweeney o quis bao e seng freegan vinyl. Lo-fi wes anderson +1 seaparo sa go robala. Carles bao e seng botsebi boitšhidullo quis gentrify. Brooklyn adipisicing mesebetsi ea matsoho biri motlatsi keytar deserunt.

tee

Occaecat commodo ya go swana le ya go swana le ya delectus. Fap mesebetsi ea matsoho biri deserunt skateboard ea. Lomo baesekele ditokelo adipisicing banh mi, velit ea sunt boemo bo latelang locavore e le 'ngoe-tšimoloho kofi ka magna veniam. Bophelo bo phahameng id vinyl, echo phakeng consequat quis aliquip banh mi foroko ea pitchfork. Vero VHS est go godiša. Consectetur nisi DIY bonyane mokotla wa moromiwa. Cred ex ka, tšoarellang delectus consectetur fanny pakete iphone.

pedi

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 mokotla wa moromiwa marfa eng kapa eng delectus lijo teraka. Sapiente synth id assumenda. Locavore sed helvetica cliche kgegeo, thundercats mohlomong ha ua utloa ka bona consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat pele ba rekisa, terry richardson proident brunch nesciunt quis cosby jesi pariatur keffiyeh ut helvetica mosebetsi oa matsoho. Cardigan mesebetsi ea matsoho biri seitan readymade velit. VHS chambray laboris veniam ya nakwana. Anim mollit minima commodo ullamco dikatse tsa diaduma.


Tšhomišo

Ka dika ya data

Go oketša gabonolo boitshwaro bja scrollspy go go sepelasepela ga gago ga topbar, oketša feela data-spy="scroll"go elemente yeo o nyakago go e hlola (ka tlwaelo kudu se e tla ba mmele) le data-target=".navbar"go kgetha gore ke nav efe yeo o tlago go e diriša. O tla nyaka go šomiša scrollspy ka .navkarolo.

  1. <mmele ya data-spy = "phetola" ya data-sepheo = ".navbar" > ... </mmele>

Ka JavaScript

Bitsa scrollspy ka JavaScript:

  1. $ ( '# navbar' ). scrollspy () .
Dihlogo godimo! Dikgokagano tša Navbar di swanetše go ba le diphetho tša id tšeo di ka rarollwago. Ka mohlala, a e <a href="#home">home</a>swanetše go sepelelana le selo se sengwe ka dom go swana le <div id="home"></div>.

Mekgwa ya go šoma

.scrollspy (' hlabolla') .

Ge o diriša scrollspy ka kopanelo le go tlaleletša goba go tloša dielemente go tšwa go DOM, o tla swanelwa ke go bitša mokgwa wa go hlabolla go swana le bjalo:

  1. $ ( '[data-spy = "phetola"]' ). e mong le e ( mosebetsi () { .
  2. var $ sehloela = $ ( ena ). scrollspy ( 'tlhabolla' ) .
  3. });

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-offset="".

Leina mohuta hlokomologa tlhalošo
offset nomoro 10. Dipiksele go offset go tšwa godimo ge o bala boemo bja go phurolla.

Ditiragalo

Tiragalo Tlhalošo
tsenya tirišong Tiragalo ye e a tuka neng le neng ge selo se sefsa se thoma go šoma ke scrollspy.

Dithepo tša mohlala

Oketša mošomo wa thepo ya ka pela, ye e fetogago go phetogo ka diphanephe tša diteng tša selegae, gaešita le ka dimenu tša go theoga.

Raw denim mohlomongwe ga se wa kwa ka bona jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth mong'a hloekisa. Ditedu cliche nakwana, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh mohlapetši wa ditoro synth. Cosby jesi eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.. Ke nyaka go nyoba nnywana ya mosadi. Seitan aliquip quis cardigan liaparo tsa american, 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.


Tšhomišo

Kgontšha dithepo tša dithepo ka JavaScript (thepo ye nngwe le ye nngwe e swanetše go tsenywa tirišong ka botee):

  1. $ ( '#Tab ya ka a' ). klika ( mosebetsi ( e ) { .
  2. e . thibelaDefault ();
  3. $ ( ena ). tab ( 'bontša' );
  4. }) .

O ka tsenya tirišong dithepo ka botee ka ditsela tše mmalwa:

  1. $ ( '# Tab ya ka a [href="#profaele"]' ). tab ( 'bontša' ); // Kgetha tab ka lebitso
  2. $ ( '#Tab ya ka a:pele' ). tab ( 'bontša' ); // Kgetha tab ya pele
  3. $ ( '# Tab ya ka a: ya mafelelo' ). tab ( 'bontša' ); // Kgetha tab ya ho qetela
  4. $ ( '# Tab ya ka li: eq (2) a' ). tab ( 'bontša' ); // Kgetha tab ya boraro (0-indexed) .

Go swaya

O ka tsenya tirišong go sepelasepela ga thepo goba pilisi ntle le go ngwala JavaScript efe goba efe ka go fo laetša data-toggle="tab"goba data-toggle="pill"godimo ga elemente. Go tlaleletša diklase tša navle nav-tabsgo thepo go ultla diriša setaele sa thepo ya Bootstrap.

  1. <ul sehlopha = "nav nav-dithepo" >
  2. <li><a href = "#gae" data-toggle = "thepo" > Gae </a></li>
  3. <li><a href = "#profaele" data-toggle = "thepo" > Profaele </a></li>
  4. <li><a href = "#melaetša" data-toggle = "thepo" > Melaetša </a></li>
  5. <li><a href = "#dipeakanyo" data-toggle = "thepo" > Dipeakanyo </a></li>
  6. </ul>

Mekgwa ya go šoma

$ (). thepo ya

E tsenya tirišong elemente ya thepo le setshelo sa diteng. Tab e swanetše go ba le e ka ba a data-targetgoba a go hrefnepiša noutu ya setshelo ka go DOM.

  1. <ul sehlopha = "nav nav-dithepo" id = "Tab ya ka" >
  2. <li class = "mafolofolo" ><a href = "#gae" > Gae </a></li>
  3. <li><a href = "#profaele" > Profaele </a></li>
  4. <li><a href = "#melaetša" > Melaetša </a></li>
  5. <li><a href = "#dipeakanyo" > Dipeakanyo </a></li>
  6. </ul>
  7.  
  8. <div sehlopha = "tab-diteng" >
  9. <div sehlopha = "thepo-lefasetere le sebetsang" id = "gae" > ... </div>
  10. <div sehlopha = "thepo-lefasetere" id = "profaele" > ... </div>
  11. <div class = "tab-pane" id = "melaetša" > ... </div>
  12. <div sehlopha = "tab-pane" id = "dipeakanyo" > ... </div>
  13. </div> e
  14.  
  15. <sengwalwa>
  16. $ ( mosebetsi () { .
  17. $ ( '# Tab ya ka a: ya mafelelo' ). tab ( 'bontša' );
  18. }) .
  19. </script>

Ditiragalo

Tiragalo Tlhalošo
bontšha Tiragalo ye e thunya ka pontšho ya thepo, eupša pele ga ge thepo ye mpsha e bontšhitšwe. Šomiša event.targetle event.relatedTargetgo nepiša thepo ye e šomago le thepo ye e šomago ya peleng (ge e le gona) ka go latelelana.
e bontšhitšwe Tiragalo ye e thunya pontšhong ya thepo ka morago ga ge thepo e bontšhitšwe. Šomiša event.targetle event.relatedTargetgo nepiša thepo ye e šomago le thepo ye e šomago ya peleng (ge e le gona) ka go latelelana.
  1. $ ( 'a [data-toggle = "thepo"]' ). ka ( 'bontšhitšwe' , mošomo ( e ) { .
  2. e . sepheo // kenya tshebetsong tab
  3. e . relatedTarget // thepo ya peleng
  4. }) .

Mehlala

E hlohleleditšwe ke plugin ye botse kudu ya jQuery.tipsy yeo e ngwadilwego ke Jason Frame; Dikeletšo tša didirišwa ke phetolelo ye e mpshafaditšwego, yeo e sa ithekgego ka diswantšho, e šomiša CSS3 bakeng sa ditshwantšho tša go phela, le dika tša datha bakeng sa polokelo ya thaetlele ya selegae.

Ka mabaka a tshebetso, tooltip le popover data-apis ba kgetha ka, ho bolela hore u lokela ho qala ka bowena .

Beakanya godimo ga dikgokagano tše di lego ka mo tlase go bona ditšhišinyo tša didirišwa:

Tight pants next level keffiyeh mohlomongwe ga se wa kwa ka tšona. Photo lephephe ditedu tala denim letterpress vegan moromiwa mokotla stumptown. Polase-ho-tafoleng seitan, mcsweeney o fixie tšoarellang quinoa 8-bit american liaparo na le terry richardson vinyl chambray. Ditedu stumptown, di-cardigan banh mi lomo dikatse tša diaduma. Tofu biodiesel williamsburg marfa, tse 'nè loko mcsweeney o hloekisa vegan chambray. A hlile ironic artisan eng kapa eng keytar , scenester polasi-ho-tafoleng banksy Austin twitter sebetsana freegan cred tala denim e le 'ngoe-tšimoloho kofi kokoana-hloko.

Ditaelo tše nne

Dikeletšo tša didirišwa ka dihlopha tša go tsenya

Ge o šomiša ditšhišinyo tša didirišwa le dipopover ka dihlopha tša tsenyo tša Bootstrap, o tla swanelwa ke go beakanya containerkgetho ya (yeo e ngwadilwego ka mo tlase) go efoga ditlamorago tše di sa nyakegego.


Tšhomišo

Hlohleletša keletšo ya sedirišwa ka JavaScript:

  1. $ ( '#mohlala' ). tooltip ( dikgetho ) .

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-animation="".

Leina mohuta hlokomologa tlhalošo
ditshwantsho tse di phelang boolean ya go swana nnete diriša phetogo ya css fade go tooltip
html boolean ya go swana maaka Tsenya html ka gare ga keletšo ya sedirišwa. Ge e le maaka, mokgwa wa jquery texto tla šomišwa go tsenya diteng ka gare ga dom. Diriša sengwalwa ge e ba o tshwenyegile ka ditlhaselo tša XSS.
go bewa ga dilo thapo ya | mošomo 'godimo' kamoo ho ka beha tooltip - holimo | tlase | le letšehali | nepagetše
mokgethi wa go kgetha thapo maaka Ge e le gore mokgethi o filwe, dilo tša keletšo ya sedirišwa di tla abelwa diphetho tše di laeditšwego.
thaetlele thapo ya | mošomo '' . boleng bja thaetlele ya go se fetoge ge e le gore leswao la `thaetlele` ga le gona
šušumetša thapo 'hover tsepamiso ya maikutlo'. kamoo tooltip e hlohleletšwago ka gona - tobetsa | hover | go tsepamiša kgopolo | manyuale. Hlokomela o nyeoe feta qholotsa mutliple, sebaka seperated, qholotsa mefuta e.
diega nomoro ya | selo 0.

go diega go bontšha le go uta keletšo ya sedirišwa (ms) - ga e šome go mohuta wa go hlohleletša ka seatla

Ge e le gore nomoro e filwe, go diega go dirišwa go bobedi go uta/bontšha

Sebopego sa selo ke:delay: { show: 500, hide: 100 }

setshelo thapo ya | maaka maaka

E tlaleletša keletšo ya sedirišwa go elemente ye e itšegocontainer: 'body'

Dihlogo godimo! Dikgetho tša didirišwa tša motho ka o tee ka o tee di ka laetšwa ka tsela ye nngwe ka tšhomišo ya dika tša datha.

Go swaya

  1. <a href = "#" data-toggle = "keletšo ya sedirišwa" title = "keletšo ya mathomo ya sedirišwa" > bea godimo ga ka </a>

Mekgwa ya go šoma

$ (). tooltip (dikgetho) .

E kgomaretša sedirišwa sa go swara sedirišwa go kgoboketšo ya elemente.

.tooltip ('bontša') .

E utolla keletšo ya sedirišwa ya elemente.

  1. $ ( '# elemente' ). tooltip ( 'bontša' ) .

.tooltip ('pata') .

E uta keletšo ya sedirišwa ya elemente.

  1. $ ( '# elemente' ). tooltip ( 'pata' ) .

.sedirišwa ('toggle') .

E fetola keletšo ya sedirišwa ya elemente.

  1. $ ( '# elemente' ). keletšo ya sedirišwa ( 'toggle' ) .

.tooltip ('senya') .

E uta le go senya sedirišwa sa elemente.

  1. $ ( '# elemente' ). tooltip ( 'senya' ) .

Mehlala

Oketša dikhupetšo tše nnyane tša dikagare, go swana le tšeo di lego go iPad, go elemente efe goba efe ya go apa tshedimošo ya bobedi. Hover godimo ga konope go hlohleletša popover. E nyaka gore Tooltip e akaretšwe.

Popover e sa fetoheng

Dikgetho tše nne di a hwetšagala: di logagantšwe ka godimo, ka go le letona, ka tlase le ka go le letshadi.

Popover godimo ga

Sed posuere kgethehileng est ka lobortis. Aenean eu leo ​​quam. Pellentesque e kgabišwa ke lacinia quam venenatis vestibulum.

Popover e nepahetseng

Sed posuere kgethehileng est ka lobortis. Aenean eu leo ​​quam. Pellentesque e kgabišwa ke lacinia quam venenatis vestibulum.

Popover tlase

Sed posuere kgethehileng est ka lobortis. Aenean eu leo ​​quam. Pellentesque e kgabišwa ke lacinia quam venenatis vestibulum.

Popover o ile a tloga

Sed posuere kgethehileng est ka lobortis. Aenean eu leo ​​quam. Pellentesque e kgabišwa ke lacinia quam venenatis vestibulum.

Ga go na go swaya mo go bontšhitšwego bjalo ka di-popover tšeo di tšweleditšwego go tšwa go JavaScript le diteng ka gare ga dataseka.

Demo e phelang

Ditaelo tše nne


Tšhomišo

Kgontšha di-popover ka JavaScript:

  1. $ ( '#mohlala' ). popover ( dikgetho ) .

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-animation="".

Leina mohuta hlokomologa tlhalošo
ditshwantsho tse di phelang boolean ya go swana nnete diriša phetogo ya css fade go tooltip
html boolean ya go swana maaka Tsenya html ka gare ga popover. Ge e le maaka, mokgwa wa jquery texto tla šomišwa go tsenya diteng ka gare ga dom. Diriša sengwalwa ge e ba o tshwenyegile ka ditlhaselo tša XSS.
go bewa ga dilo thapo ya | mošomo 'nepagetše' kamoo ho ka beha popover - holimo | tlase | le letšehali | nepagetše
mokgethi wa go kgetha thapo maaka ge e le gore mokgethi o filwe, dilo tša keletšo ya sedirišwa di tla abelwa diphetho tše di laeditšwego
šušumetša thapo 'klika'. kamoo popover e hlohleletšwago ka gona - tobetsa | hover | go tsepamiša kgopolo | manyuale
thaetlele thapo ya | mošomo '' . boleng bja thaetlele ya go se fetoge ge e le gore seka sa `thaetlele` ga se gona
diteng thapo ya | mošomo '' . boleng bja diteng tša go se fetoge ge e le gore seka sa `data-content` ga se gona
diega nomoro ya | selo 0.

go diega go bontšha le go uta popover (ms) - ga e šome go mohuta wa go hlohleletša ka seatla

Ge e le gore nomoro e filwe, go diega go dirišwa go bobedi go uta/bontšha

Sebopego sa selo ke:delay: { show: 500, hide: 100 }

setshelo thapo ya | maaka maaka

E tlaleletša popover go elemente ye e itšegocontainer: 'body'

Dihlogo godimo! Dikgetho tša dipopovers ka botee di ka laetšwa ka tsela ye nngwe ka tšhomišo ya dika tša datha.

Go swaya

Ka mabaka a tshepedišo, Tooltip le Popover data-apis di kgetha go tsena Ge o rata go di šomiša e no laetša kgetho ya mokgethi.

Mekgwa ya go šoma

$ ().popover (dikgetho) .

E thoma di-popovers bakeng sa kgoboketšo ya elemente.

.popover('bontša') .

E senola e elements popover.

  1. $ ( '# elemente' ). popover ( 'bontša' ) .

.popover('pata') .

Pata e elements popover.

  1. $ ( '# elemente' ). popover ( 'pata' ) .

.popover ('fetola') .

Toggles e elements popover.

  1. $ ( '# elemente' ). popover ( 'go fetola' ) .

.popover('senya') .

Pata le go senya popover ya elemente.

  1. $ ( '# elemente' ). popover ( 'senya' ) .

Ditemošo tša mohlala

Oketša mošomo wa go raka go melaetša ka moka ya temošo ka plugin ye.

Guacamole e kgethwa! Best check yo self, ga o bonagale gabotse kudu.

Ao snap! O hweditše phošo!

Fetoša se le sela gomme o leke gape. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus e dula amet fermentum.

Tšea kgato ye Goba dira se


Tšhomišo

Kgontšha go rakwa ga temošo ka JavaScript:

  1. $ ( ".temošo" ). temošo () .

Go swaya

E no oketša data-dismiss="alert"go konope ya gago ya go tswalela go fa ka go iketla mošomo wa go tswalela temošo.

  1. <a sehlopha = "tswalela" data-dismiss = "temošo" href = "#" > & dinako; </a>

Mekgwa ya go šoma

$ (). temošo () .

E phuthela ditemošo ka moka ka tšhomišo ya kgauswi. Go dira gore ditemošo tša gago di phele ge di tswaletšwe, kgonthiša gore di na le .fadele .insehlopha seo se šetšego se dirišitšwe go tšona.

.alert ('tswalela') .

E tswalela temošo.

  1. $ ( ".temošo" ). temošo ( 'tswalela' ) .

Ditiragalo

Sehlopha sa temošo sa Bootstrap se pepentšha ditiragalo tše mmalwa bakeng sa go goketša mošomong wa temošo.

Tiragalo Tlhalošo
tswalela Tiragalo ye e thunya ka pela ge closemokgwa wa mohlala o bitšwa.
e tswaletšwe Tiragalo ye e thuntšhwa ge temošo e tswaletšwe (e tla emela gore diphetogo tša css di phethe).
  1. $ ( '#temošo ya ka' ). tlama ( 'koaloa' , mosebetsi () {
  2. // dira se sengwe...
  3. }) .

Ditirišo tša mohlala

Dira mo gontši ka dikonope. Taolo konope e bolela goba hlama dihlopha tša dikonope bakeng sa dikarolo tše dingwe go swana le dibara tša didirišwa.

Stateful

Oketša data-loading-text="Loading..."go šomiša boemo bja go laetša godimo ga konope.

  1. < mohuta wa konope = "konope" sehlopha = "btn btn-primary" data-loading-text = "E laetša ..." > Boemo bja go laetša </konope>

Toggle e le nngwe

Oketša data-toggle="button"go tsenya tirišong go fetola go konope e tee.

  1. < mofuta wa konopo = "konopo" sehlopha = "btn btn-primary" data-toggle = "konopo" > Fetola e le 'ngoe </konopo>

Lepokisi la go hlahloba

Oketša data-toggle="buttons-checkbox"bakeng sa go fetola setaele sa lepokisi la go hlahloba go btn-group.

  1. <div sehlopha = "btn-sehlopha" ya data-toggle = "dikonopo-lebokose la hlahloba" >
  2. < mofuta wa konopo = "konopo" sehlopha = "btn btn-primary" > Letsohong le letšehali </konopo>
  3. < mofuta wa konopo = "konopo" sehlopha = "btn btn-primary" > Bohareng </konopo>
  4. < mofuta wa konopo = "konopo" sehlopha = "btn btn-primary" > Tokelo ya </konopo>
  5. </div> e

Seyalemoya

Add data-toggle="buttons-radio"bakeng sa radio setaele toggling ka btn-sehlopha.

  1. <div sehlopha = "btn-sehlopha" ya data-toggle = "dikonopo-radio" >
  2. < mofuta wa konopo = "konopo" sehlopha = "btn btn-primary" > Letsohong le letšehali </konopo>
  3. < mofuta wa konopo = "konopo" sehlopha = "btn btn-primary" > Bohareng </konopo>
  4. < mofuta wa konopo = "konopo" sehlopha = "btn btn-primary" > Tokelo ya </konopo>
  5. </div> e

Tšhomišo

Kgontšha dikonope ka JavaScript:

  1. $ ( '.nav-dithepo' ). konopo () .

Go swaya

Dika tša data ke tša bohlokwa go plugin ya konope. Lekola khoutu ya mohlala ka mo tlase bakeng sa mehuta e fapa-fapanego ya go swaya.

Dikgetho

Ga go selo

Mekgwa ya go šoma

$ (). konopo ( 'toggle') .

Toggles kgorometsa boemo. E fa konope ponagalo ya gore e tsentšwe tirišong.

Dihlogo godimo! O ka kgontšha go fetoša ka go itiriša ga konope ka go šomiša data-toggleseka.
  1. < mofuta wa konopo = "konopo" sehlopha = "btn" data-toggle = "konopo" > ... </konopo>

$ (). konopo ( 'ho laela') .

E beakanya boemo bja konope go laetša - e šitiša konope le go fapantšha sengwalwa go laetša sengwalwa. Go laetša sengwalwa go swanetše go hlalošwa godimo ga elemente ya konope ka go šomiša seka sa datha data-loading-text.

  1. < mohuta wa konope = "konope" sehlopha = "btn" data-loading-text = "go laetša dilo ..." > ... </konope>
Dihlogo godimo! Firefox e phegelela boemo bjo bo golofetšego go ralala le merwalo ya matlakala . Tsela ya go rarolla se ke go diriša autocomplete="off".

$ (). konopo ( 'reset') .

E beakanya gape boemo bja konope - e fapantšha sengwalwa go sengwalwa sa mathomo.

$ (). konopo (khoele) .

E beakanya gape boemo bja konope - e fapantšha sengwalwa go seemo sefe goba sefe sa sengwalwa seo se hlalošitšwego sa datha.

  1. < mofuta wa konopo = "konopo" sehlopha = "btn" ya data-feletseng-sengwalwa = "qetile!" > ... </konope>
  2. <sengwalwa>
  3. $ ( '.bt n ' ) ) . konopo ( 'e feletseng' ) .
  4. </script>

Mabapi le

Hwetša mekgwa ya motheo le thekgo ye e fetofetogago ya dikarolo tše di phuhlamago go swana le di-accordion le go sepelasepela.

* E nyaka gore plugin ya Diphetogo e akaretšwe.

Mohlala wa accordion

Ka go diriša plugin ya go phuhlama, re ile ra aga sedirišwa se bonolo sa setaele sa accordion:

Anim pariatur cliche reprehenderit, enim eiusmod bophelo bo phahameng accusamus terry richardson papatso squid. 3 phiri ngwedi officia aute, bao e seng cupidat skateboard dolor brunch. Tereka ya dijo quinoa nesciunt laborum eiusmod. Brunch 3 phiri ngwedi tempor, sunt aliqua beha nonyana ka eona squid e le 'ngoe-tšimoloho kofi nulla assumenda shoreditch et. Nihil ani keffiyeh helvetica, mošomo wa diatla wa biri wa go šoma ka diatla wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur nama motlatsi lomo. Leggings occaecat craft biri polasi-ho-tafoleng, tala denim aesthetic synth nesciunt mohlomong ha ua utloa ka bona accusamus labore tšoarellang VHS.
Anim pariatur cliche reprehenderit, enim eiusmod bophelo bo phahameng accusamus terry richardson papatso squid. 3 phiri ngwedi officia aute, bao e seng cupidat skateboard dolor brunch. Tereka ya dijo quinoa nesciunt laborum eiusmod. Brunch 3 phiri ngwedi tempor, sunt aliqua beha nonyana ka eona squid e le 'ngoe-tšimoloho kofi nulla assumenda shoreditch et. Nihil ani keffiyeh helvetica, mošomo wa diatla wa biri wa go šoma ka diatla wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur nama motlatsi lomo. Leggings occaecat craft biri polasi-ho-tafoleng, tala denim aesthetic synth nesciunt mohlomong ha ua utloa ka bona accusamus labore tšoarellang VHS.
Anim pariatur cliche reprehenderit, enim eiusmod bophelo bo phahameng accusamus terry richardson papatso squid. 3 phiri ngwedi officia aute, bao e seng cupidat skateboard dolor brunch. Tereka ya dijo quinoa nesciunt laborum eiusmod. Brunch 3 phiri ngwedi tempor, sunt aliqua beha nonyana ka eona squid e le 'ngoe-tšimoloho kofi nulla assumenda shoreditch et. Nihil ani keffiyeh helvetica, mošomo wa diatla wa biri wa go šoma ka diatla wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur nama motlatsi lomo. Leggings occaecat craft biri polasi-ho-tafoleng, tala denim aesthetic synth nesciunt mohlomong ha ua utloa ka bona accusamus labore tšoarellang VHS.
  1. <div sehlopha = "accordion" id = "accordion2" >
  2. <div sehlopha = "accordion-sehlopha" >
  3. <div sehlopha = "hlogo ya accordion" >
  4. <a sehlopha = "accordion-toggle" data-toggle = "ho phuhlama" ya data-motswadi = "# accordion2" href = "# phuhlamaOne" >
  5. Ntlha ya Sehlopha yeo e ka phuhlamago #1
  6. </a>
  7. </div> e
  8. <div id = "collapseOne" class = "go phuhlama ga mmele wa accordion ka" >
  9. <div sehlopha = "accordion-ka hare" >
  10. Anim pariatur cliche ya go swana le yona...
  11. </div> e
  12. </div> e
  13. </div> e
  14. <div sehlopha = "accordion-sehlopha" >
  15. <div sehlopha = "hlogo ya accordion" >
  16. <a sehlopha = "accordion-toggle" data-toggle = "ho phuhlama" ya data-motswadi = "# accordion2" href = "# phuhlamaTwo" >
  17. Ntlha ya Sehlopha e Phuthelelang #2
  18. </a>
  19. </div> e
  20. <div id = "collapseTwo" sehlopha = "acordion-mmele phuhlama" >
  21. <div sehlopha = "accordion-ka hare" >
  22. Anim pariatur cliche ya go swana le yona...
  23. </div> e
  24. </div> e
  25. </div> e
  26. </div> e
  27. ...

O ka boela wa sebelisa plugin ntle le accordion markup. Dira gore konope e fetoše go katološa le go phuhlama ga elemente ye nngwe.

  1. < mofuta wa konopo = "konopo" sehlopha = "btn btn-kotsi" ya data-toggle = "ho phuhlama" ya data-sepheo = "# demo" >
  2. bonolo collapsible
  3. </konope>
  4.  
  5. <div id = "demo" sehlopha = "phuhlama ka" > ... </div>

Tšhomišo

Ka dika ya data

E no tlaleletša data-toggle="collapse"le data-targetgo elemente go abela ka go iketla taolo ya elemente ye e phuhlamago. Sebopego data-targetse amogela mokgethi wa css go diriša go phuhlama go yena. Kgonthiša gore o tlaleletša sehlopha collapsego elemente ye e phuhlamago. Ge e ba o rata gore e bulege ka go ikemela, oketša sehlopha sa tlaleletšo in.

Go oketša taolo ya sehlopha ya go swana le accordion go taolo ye e phuhlamago, oketša seka sa datha data-parent="#selector". Lebelela demo go bona se se šoma.

Ka JavaScript

Kgontšha ka seatla ka:

  1. $ ( ".e phuhlama" ). go phuhlama () .

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-parent="".

Leina mohuta hlokomologa tlhalošo
motswadi mokgethi wa go kgetha maaka Ge e le gore mokgethi gona dielemente ka moka tše di phuhlamago ka fase ga motswadi yo a laeditšwego di tla tswalelwa ge selo se se se phuhlamago se bontšhwa. (e swanago le boitshwaro bja setšo bja accordion) .
go fetola boolean ya go swana nnete Toggles elements collapsible ka pitso

Mekgwa ya go šoma

.collapse(dikgetho) .

E dira gore diteng tša gago di šome bjalo ka elemente ye e phuhlamago. E amogela dikgetho tša boikhethelo object.

  1. $ ( '# e ka phuhlamang ya ka' ). go phuhlama ({
  2. toggle : maaka
  3. }) .

.collapse ('fetola') .

E fetola elemente ye e phuhlamago go bontšhwa goba ye e utilwego.

.collapse ('bontša') .

E bontšha elemente yeo e ka phuhlamago.

.collapse('pata') .

Pata elemente e phuhlamang.

Ditiragalo

Sehlopha sa go phuhlama sa Bootstrap se pepentšha ditiragalo tše mmalwa tša go goketša ka mošomo wa go phuhlama.

Tiragalo Tlhalošo
bontšha Tiragalo ye e thunya ka pela ge showmokgwa wa mohlala o bitšwa.
e bontšhitšwe Tiragalo ye e thuntšhwa ge elemente ya go phuhlama e dirilwe gore e bonagale go modiriši (e tla emela gore diphetogo tša css di phethe).
fihla Tiragalo ye e thuntšhwa ka pela ge hidemokgwa o biditšwe.
fihlilwe Tiragalo ye e thuntšhwa ge elemente ya go phuhlama e utilwe go tšwa go modiriši (e tla emela gore diphetogo tša css di phethe).
  1. $ ( '# e ka phuhlamang ya ka' ). ka ( 'e patiloeng' , mosebetsi () {
  2. // dira se sengwe...
  3. }) .

Mohlala

Plugin ya motheo, yeo e katološitšwego gabonolo bakeng sa go hlama ka pela di-typeahead tša maemo ka tsenyo efe goba efe ya sengwalwa sa foromo.

  1. < mohuta wa tsenyo = "sengwalwa" data-fana = "typeahead" >

O tla nyaka go beakanya autocomplete="off"go thibela dimenu tša sephephediši tša maitirelo go tšwelela godimo ga go theoga ga Bootstrap typeahead.


Tšhomišo

Ka dika ya data

Oketša dika tša datha go ngwadiša elemente ka mošomo wa typeahead bjalo ka ge go bontšhitšwe mohlaleng wo o lego ka mo godimo.

Ka JavaScript

Bitša typeahead ka seatla ka:

  1. $ ( '.thaepa pele' ). typeahead () .

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-source="".

Leina mohuta hlokomologa tlhalošo
mothopo hlophisitsoeng, mosebetsi [ ] . Mothopo wa datha wo o swanetšego go botšiša kgahlanong le wona. E ka ba lenaneo la dithapo goba mošomo. Mošomo o fetišwa dingangišano tše pedi, queryboleng ka tšhemong ya go tsenya le processcallback. Mošomo o ka šomišwa ka go sepelelana ka go bušetša mothopo wa datha ka go lebanya goba ka go se processswane ka ngangišano e tee ya callback.
diaetheme nomoro 8. Palo ya godimo ya dilo tšeo di swanetšego go bontšhwa ka go theoga.
minBolelele nomoro 1. 1. Bonyane bja botelele bja sebopego bjo bo nyakegago pele o hlohleletša ditšhišinyo tša go tlatša ka go itiragalela
matcher mošomo go hloka kwelobohloko ya ditlhaka tše kgolo Mokgwa wo o šomišwago go bona ge eba potšišo e swana le selo. E amogela ngangišano e tee, itemyeo e swanetšego go leka potšišo kgahlanong le yona. Fihlelela potšišo ya bjale ka this.query. Bušetša boolean truege e le gore potšišo e le go swana.
mohlophisi mošomo go swana ka go nepagala,
go se na kwelobohloko ya ditlhaka tše kgolo le
ditlhaka tše kgolo
Mokgwa wo o šomišwago go hlopha dipoelo tša go tlatša ka go itiragalela. E amogela ngangišano e tee itemsgomme e na le sebaka sa mohlala wa typeahead. Tšhupetšo ya potšišo ya bjale ka this.query.
sempshafatši mošomo e bušetša ntho e kgethilwego Mokgwa wo o šomišwago go bušetša selo seo se kgethilwego. E amogela ngangišano e tee, ya itemle e na le sebaka sa mohlala wa typeahead.
se hlalositsoeng mošomo e gatelela dipapadi ka moka tša go se fetoge Mokgwa wo o šomišwago go tšweletša dipoelo tša go tlatša ka go itiragalela. E amogela ngangišano e tee itemgomme e na le sebaka sa mohlala wa typeahead. E swanetše go bušetša html.

Mekgwa ya go šoma

.typeahead(dikgetho) .

E thoma tsenyo ka typeahead.

Mohlala

The subnavigation ka le letšehali ke demo e phelang ya plugin ya affix.


Tšhomišo

Ka dika ya data

Go oketša gabonolo boitshwaro bja go kgomaretša go elemente efe goba efe, e no oketša data-spy="affix"go elemente yeo o nyakago go e hlola. Ke moka o šomiše di-offset go hlaloša gore o swanetše go fetoša neng go bulela le go tima go kgomaretša ga elemente.

  1. <div ya data-spy = "kgomaretsa" ya data-offset-top = "200" > ... </div>
Dihlogo godimo! O swanetše go laola maemo a elemente ye e kgomaretšwego le boitshwaro bja motswadi wa yona wa kgauswi. Boemo bo laolwa ke affix, affix-top, le affix-bottom. Gopola go lekola motswadi yo a ka phuhlamago ge affix e tsena ka ge e tloša diteng go tšwa go phallo ya tlwaelo ya letlakala.

Ka JavaScript

Bitsa plugin ya affix ka JavaScript:

  1. $ ( '# navbar' ). kgomaretša () .

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-offset-top="200".

Leina mohuta hlokomologa tlhalošo
offset nomoro ya | mosebetsi | selo 10. Dipiksele go offset go tšwa skrineng ge o bala boemo bja go phurolla. Ge e le gore nomoro e tee e filwe, offset e tla dirišwa ka bobedi ka mahlakoreng a godimo le a le letshadi. Go theeletša tlhahlo e tee, goba di-offset tše dintši tša moswananoši, e no nea selo offset: { x: 10 }. Šomiša mošomo ge o nyaka go fa ka maatla offset (yeo e nago le mohola go meralo ye mengwe ye e arabelago).