JavaScript

Dewch â chydrannau Bootstrap yn fyw - nawr gyda 13 o ategion jQuery wedi'u teilwra.

Unigol neu wedi'i lunio

Gellir cynnwys ategion yn unigol (er bod rhai wedi gofyn am ddibyniaethau), neu i gyd ar unwaith. Mae bootstrap.js a bootstrap.min.js yn cynnwys yr holl ategion mewn un ffeil.

Priodoleddau data

Gallwch ddefnyddio holl ategion Bootstrap trwy'r API marcio yn unig heb ysgrifennu un llinell o JavaScript. Dyma API dosbarth cyntaf Bootstrap a dylai fod eich ystyriaeth gyntaf wrth ddefnyddio ategyn.

Wedi dweud hynny, mewn rhai sefyllfaoedd gall fod yn ddymunol i ddiffodd y swyddogaeth hon. Felly, rydym hefyd yn darparu'r gallu i analluogi'r API priodoledd data trwy ddadrwymo'r holl ddigwyddiadau ar y corff sydd wedi'i ofod â `'data-api'`. Mae hyn yn edrych fel hyn:

  1. $ ( 'corff' ). i ffwrdd ( ' .data-api ' )

Fel arall, i dargedu ategyn penodol, dylech gynnwys enw'r ategyn fel gofod enw ynghyd â gofod enw data-api fel hyn:

  1. $ ( 'corff' ). i ffwrdd ( '.alert.data-api' )

API rhaglennol

Rydyn ni hefyd yn credu y dylech chi allu defnyddio'r holl ategion Bootstrap trwy'r API JavaScript yn unig. Mae pob API cyhoeddus yn ddulliau sengl, cadwynadwy, ac yn dychwelyd y casgliad y gweithredwyd arno.

  1. $ ( ".btn.danger" ). botwm ( "toglo" ). addClass ( "braster" )

Dylai pob dull dderbyn gwrthrych opsiynau dewisol, llinyn sy'n targedu dull penodol, neu ddim byd (sy'n cychwyn ategyn ag ymddygiad diofyn):

  1. $ ( "#myModal" ). modal () // ymgychwyn gyda rhagosodiadau
  2. $ ( "#myModal" ). modal ( { keyboard : false } ) // wedi'i gychwyn heb unrhyw fysellfwrdd
  3. $ ( "#myModal" ). modal ( 'dangos' ) // yn ymgychwyn ac yn galw sioe yn syth

Mae pob ategyn hefyd yn datgelu ei adeiladwr crai ar eiddo `Constructor`: $.fn.popover.Constructor. Os hoffech gael enghraifft ategyn penodol, adalw ef yn uniongyrchol o elfen: $('[rel=popover]').data('popover').

Dim Gwrthdaro

Weithiau mae angen defnyddio ategion Bootstrap gyda fframweithiau UI eraill. O dan yr amgylchiadau hyn, gall gwrthdrawiadau gofod enwau ddigwydd o bryd i'w gilydd. Os bydd hyn yn digwydd, gallwch chi alw .noConflictar yr ategyn yr ydych am ddychwelyd ei werth.

  1. var bootstrapButton = $ . fn . botwm . noConflict () // dychwelyd $.fn.button i werth a neilltuwyd yn flaenorol
  2. $ . fn . bootstrapBtn = bootstrapButton // rhowch y swyddogaeth bootstrap $().bootstrapBtn

Digwyddiadau

Mae Bootstrap yn darparu digwyddiadau wedi'u teilwra ar gyfer y rhan fwyaf o weithredoedd unigryw'r ategyn. Yn gyffredinol, daw’r rhain ar ffurf berfenw a chyfranogiad y gorffennol – lle mae’r berfenw (ex. show) yn cael ei sbarduno ar ddechrau digwyddiad, a’i ffurf cyfranogwr yn y gorffennol (ex. shown) yn sbardun ar ôl cwblhau gweithred.

Mae pob digwyddiad berfenw yn darparu ymarferoldeb preventDefault. Mae hyn yn rhoi'r gallu i atal cyflawni gweithred cyn iddo ddechrau.

  1. $ ( '#myModal' ). ar ( 'dangos' , ffwythiant ( e ) {
  2. os ( ! data ) dychwelyd e . preventDefault () // yn atal moddol rhag cael ei ddangos
  3. })

Ynglŷn â thrawsnewidiadau

Ar gyfer effeithiau pontio syml, cynhwyswch bootstrap-transition.js unwaith ochr yn ochr â'r ffeiliau JS eraill. Os ydych chi'n defnyddio'r bootstrap.js sydd wedi'i lunio (neu wedi'i finimeiddio) , nid oes angen cynnwys hwn - mae yno'n barod.

Defnyddio achosion

Ychydig o enghreifftiau o'r ategyn trawsnewid:

  • Llithro neu bylu mewn moddau
  • tabiau pylu
  • Rhybuddion pylu
  • Cwareli carwsél llithro

Enghreifftiau

Mae moddau yn symlach, ond yn hyblyg, yn awgrymiadau deialog gyda'r ymarferoldeb gofynnol a'r rhagosodiadau smart.

Enghraifft statig

Moddol wedi'i rendro gyda phennawd, corff, a set o gamau gweithredu yn y troedyn.

  1. <div class = "modd cuddio pylu" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "gwir" > × </button>
  4. <h3> Pennawd moddol </h3>
  5. </div>
  6. <div class = "modal-corff" >
  7. <p> Un corff main… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href="#" class="btn"> Cau </a> _ _ _ _ _
  11. <a href = " # " class = " btn btn-primary " > Cadw newidiadau </a>
  12. </div>
  13. </div>

Demo byw

Toglo moddol trwy JavaScript trwy glicio ar y botwm isod. Bydd yn llithro i lawr ac yn pylu i mewn o frig y dudalen.

  1. <!-- Botwm i sbarduno moddol -->
  2. <a href="#myModal" role="button" class="btn" data-toggle="modal"> Lansio moddol demo </a> _ _ _ _ _ _ _
  3.  
  4. <!-- moddol -->
  5. < div id = " myModal " class = " pylu cuddfan modd " tabindex = " -1 " role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "gwir" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "gwir" > × </button>
  8. <h3 id = "myModalLabel" > Pennawd moddol </h3>
  9. </div>
  10. <div class = "modal-corff" >
  11. <p> Un corff main… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. < button class = " btn " data-dismiss = " modal " aria-hidden = " gwir " > Cau </button>
  15. <button class = "btn btn-primary" > Cadw newidiadau </button>
  16. </div>
  17. </div>

Defnydd

Trwy briodoleddau data

Ysgogi moddol heb ysgrifennu JavaScript. Gosod data-toggle="modal"ar elfen rheolydd, fel botwm, ynghyd â data-target="#foo"neu href="#foo"i dargedu moddol penodol i toglo.

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

Trwy JavaScript

Ffoniwch foddol gydag id myModalgydag un llinell o JavaScript:

  1. $ ( '#myModal' ). moddol ( opsiynau )

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-backdrop="".

Enw math rhagosodedig disgrifiad
cefndir boolaidd gwir Yn cynnwys elfen foddol-cefndir. Fel arall, nodwch staticar gyfer cefndir nad yw'n cau'r modd wrth glicio.
bysellfwrdd boolaidd gwir Yn cau'r modd pan fydd allwedd dianc yn cael ei wasgu
dangos boolaidd gwir Yn dangos y moddol wrth gychwyn.
anghysbell llwybr ffug

Os darperir url o bell, bydd cynnwys yn cael ei lwytho trwy loadddull jQuery a'i chwistrellu i mewn i'r .modal-body. Os ydych chi'n defnyddio'r ap data, gallwch chi ddefnyddio'r hreftag fel arall i nodi'r ffynhonnell bell. Dangosir enghraifft o hyn isod:

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

Dulliau

.modal(opsiynau)

Yn actifadu'ch cynnwys fel moddol. Yn derbyn opsiwn dewisol object.

  1. $ ( '#myModal' ). moddol ({
  2. bysellfwrdd : ffug
  3. })

.modal ('toglo')

Toglo moddol â llaw.

  1. $ ( '#myModal' ). moddol ( ' toglo ' )

.modal ('dangos')

Yn agor moddol â llaw.

  1. $ ( '#myModal' ). moddol ( 'dangos' )

.modal ('cuddio')

Yn cuddio moddol â llaw.

  1. $ ( '#myModal' ). moddol ( 'cuddio' )

Digwyddiadau

Mae dosbarth moddol Bootstrap yn datgelu rhai digwyddiadau ar gyfer cysylltu â swyddogaethau moddol.

Digwyddiad Disgrifiad
dangos Mae'r digwyddiad hwn yn tanio ar unwaith pan showelwir y dull enghraifft.
dangosir Mae'r digwyddiad hwn yn cael ei danio pan fydd y moddol wedi'i wneud yn weladwy i'r defnyddiwr (bydd yn aros i'r trawsnewidiadau css gael eu cwblhau).
cuddio Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hidedull enghraifft wedi'i alw.
cudd Mae'r digwyddiad hwn yn cael ei danio pan fydd y moddol wedi gorffen cael ei guddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau css gael eu cwblhau).
  1. $ ( '#myModal' ). ar ( 'cudd' , swyddogaeth () {
  2. // gwneud rhywbeth…
  3. })

Enghraifft yn navbar

Mae'r ategyn ScrollSpy ar gyfer diweddaru targedau llywio yn awtomatig yn seiliedig ar safle sgrolio. Sgroliwch yr ardal o dan y bar llywio a gwyliwch y newid dosbarth gweithredol. Bydd yr is-eitemau cwymplen yn cael eu hamlygu hefyd.

@braster

Ad leggings keytar, brunch id art parti dolor laboure. Pitchfork yr enim lo-fi cyn iddynt werthu allan qui. Hawliau beic fferm-i-bwrdd Tumblr beth bynnag. Anim keffiyeh carles cardigan. Bwth lluniau Velit seitan mcsweeney 3 wolf moon irure. Siwmper Cosby lomo jean siorts, hwdi williamsburg minim qui mae'n debyg nad ydych chi wedi clywed amdanyn nhw et cardigan trust fund culpa biodiesel wes anderson esthetig. Nihil tattooed accusamus, cred eironi biodiesel keffiyeh artisan ullamco consequat.

@mdo

Sgrialu mwstash Veniam marfa, adipisicing fugiat velit pitchfork barf. Freegan barf aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tryc bwyd siwmper Tattooed cosby, finyl quis non freegan mcsweeney. Lo-fi wes anderson +1 sartorial. Carles anesthetig ymarfer corff quis gentrify. Brooklyn adipisicing cwrw crefft vice keytar deserunt.

un

Occaecat comodo aliqua delectus. Map cwrw crefft deserunt sgrialu ea. Hawliau beic Lomo adipisicing banh mi, velit ea sunt lefel nesaf locavore un-darddiad coffi yn magna veniam. Uchel bywyd id finyl, adlais parc consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, cynaliadwy delectus consectetur fanny pack iphone.

dwy

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, bag neges culpa marfa beth bynnag delectus lori bwyd. Sapiente synth id assumenda. Locavore sed helvetica cliche eironi, cath daranau mae'n debyg nad ydych chi wedi clywed amdanyn nhw consequat hwdi di-glwten lo-fi fap aliquip. Labore elit placeat cyn iddynt werthu allan, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan crefft cwrw seitan velit readymade. VHS chambray laboris tempor veniam. Anim mollit minim comodo ullamco taranau.


Defnydd

Trwy briodoleddau data

Er mwyn ychwanegu ymddygiad ysbïwr sgrolio at eich llywio ar y bar uchaf yn hawdd, ychwanegwch data-spy="scroll"at yr elfen rydych chi am sbïo arno (y corff hwn fyddai'n fwyaf nodweddiadol) a data-target=".navbar"dewis pa lywlyn i'w ddefnyddio. Byddwch chi eisiau defnyddio scrollspy gyda .navchydran.

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

Trwy JavaScript

Ffoniwch y scrollspy trwy JavaScript:

  1. $ ( '# navbar' ). sgrôlspy ()
Pennau i fyny! Rhaid i ddolenni Navbar gael targedau adnabod y gellir eu datrys. Er enghraifft, <a href="#home">home</a>rhaid cyfateb i rywbeth yn y cartref fel <div id="home"></div>.

Dulliau

.scrollspy('adnewyddu')

Wrth ddefnyddio scrollspy ar y cyd ag ychwanegu neu dynnu elfennau o'r DOM, bydd angen i chi ffonio'r dull adnewyddu fel hyn:

  1. $ ( ' [ data-spy = "scroll" ] ' ). pob ( swyddogaeth ( ) {
  2. Var $spy = $ ( hwn ). sgrôlspy ( 'adnewyddu' )
  3. });

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-offset="".

Enw math rhagosodedig disgrifiad
gwrthbwyso rhif 10 Picseli i'w gwrthbwyso o'r brig wrth gyfrifo safle'r sgrôl.

Digwyddiadau

Digwyddiad Disgrifiad
actifadu Mae'r digwyddiad hwn yn tanio pryd bynnag y bydd eitem newydd yn cael ei actifadu gan y sgroliwr.

Tabiau enghreifftiol

Ychwanegu ymarferoldeb tab cyflym a deinamig i drosglwyddo trwy baneli o gynnwys lleol, hyd yn oed trwy gwymplenni.

Denim amrwd mae'n debyg nad ydych wedi clywed amdanynt jean siorts Austin. Nesciunt tofu stumptown aliqua, retro synth meistr glanhau. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit cigydd retro keffiyeh synth dreamcatcher. Siwmper Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, cigydd 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.


Defnydd

Galluogi tabiau tabadwy trwy JavaScript (mae angen actifadu pob tab yn unigol):

  1. $ ( ' # myTab a ' ). cliciwch ( swyddogaeth ( e ) {
  2. e . atalDefault ();
  3. $ ( hwn ). tab ( 'dangos' );
  4. })

Gallwch chi actifadu tabiau unigol mewn sawl ffordd:

  1. $ ( '#myTab a[href="#profile"] ' ). tab ( 'dangos' ); // Dewiswch tab yn ôl enw
  2. $ ( '#myTab a:cyntaf' ). tab ( 'dangos' ); // Dewiswch tab cyntaf
  3. $ ( '#myTab a:last' ). tab ( 'dangos' ); // Dewiswch y tab olaf
  4. $ ( '# myTab li:eq(2) a' ). tab ( 'dangos' ); // Dewiswch trydydd tab (0-mynegai)

Marcio

Gallwch chi actifadu llywio tab neu bilsen heb ysgrifennu unrhyw JavaScript trwy nodi data-toggle="tab"neu data-toggle="pill"ar elfen yn unig. Bydd ychwanegu'r nava nav-tabsdosbarthiadau i'r tab ulyn cymhwyso arddull tab Bootstrap.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = " tab " > Cartref </a></li>
  3. <li><a href = "#profile" data-toggle = "tab"> Proffil </a></li >
  4. <li><a href = " #messages " data-toggle = " tab " > Negeseuon </a></li>
  5. <li><a href = "#settings" data-toggle = " tab " > Gosodiadau </a></li>
  6. </ul>

Dulliau

$().tab

Yn actifadu elfen tab a chynhwysydd cynnwys. Dylai fod gan dab naill ai nod cynhwysydd data-targetneu hrefnod targedu yn y DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" <a href = " #home" > Cartref </a></li>
  3. <li><a href = "#profile"> Proffil </a> </li>
  4. <li><a href = "#messages"> Negeseuon </a> </li>
  5. <li><a href="#settings"> Gosodiadau </a> < / li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "gosodiadau" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( swyddogaeth ( ) {
  17. $ ( '#myTab a:last' ). tab ( 'dangos' );
  18. })
  19. </script>

Digwyddiadau

Digwyddiad Disgrifiad
dangos Mae'r digwyddiad hwn yn tanio ar sioe tab, ond cyn i'r tab newydd gael ei ddangos. Defnyddiwch event.targetac event.relatedTargeti dargedu'r tab gweithredol a'r tab gweithredol blaenorol (os yw ar gael) yn y drefn honno.
dangosir Mae'r digwyddiad hwn yn tanio ar sioe dabiau ar ôl i dab gael ei ddangos. Defnyddiwch event.targetac event.relatedTargeti dargedu'r tab gweithredol a'r tab gweithredol blaenorol (os yw ar gael) yn y drefn honno.
  1. $ ( ' a[data-toggle = "tab" ] ' ). ar ( 'dangos' , ffwythiant ( e ) {
  2. e . targed // tab actifadu
  3. e . relatedTarget // tab blaenorol
  4. })

Enghreifftiau

Wedi'i ysbrydoli gan yr ategyn jQuery.tipsy rhagorol a ysgrifennwyd gan Jason Frame; Mae Tooltips yn fersiwn wedi'i diweddaru, nad yw'n dibynnu ar ddelweddau, yn defnyddio CSS3 ar gyfer animeiddiadau, a phriodoleddau data ar gyfer storio teitlau lleol.

Am resymau perfformiad, mae'r cyngor offer a data-apis popover yn optio i mewn, sy'n golygu bod yn rhaid i chi eu cychwyn eich hun .

Hofran dros y dolenni isod i weld awgrymiadau offer:

Pants dynn lefel nesaf keffiyeh mae'n debyg nad ydych wedi clywed amdanynt. Photo bwth barf llythrenwasg denim amrwd bag negeseuwr fegan stumptown. Mae gan seitan fferm-i-bwrdd, dillad quinoa cynaliadwy mcsweeney quinoa 8-bit Americanaidd siambr finyl terry richardson. Barf stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, pedwar loko mcsweeney's cleanse vegan chambray. Mae crefftwr eironig iawn beth bynnag keytar , scenester fferm-i-bwrdd Banky Austin twitter trin freegan cred amrwd denim un-tarddiad feirol coffi.

Pedwar cyfeiriad

Cynghorion offer mewn grwpiau mewnbwn

Wrth ddefnyddio cynghorion offer a popovers gyda'r grwpiau mewnbwn Bootstrap, bydd yn rhaid i chi osod yr containeropsiwn (a ddogfennir isod) i osgoi sgîl-effeithiau diangen.


Defnydd

Sbardunwch y cyngor trwy JavaScript:

  1. $ ( '#enghraifft' ). cyngor offer ( opsiynau )

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-animation="".

Enw math rhagosodedig disgrifiad
animeiddiad boolaidd gwir cymhwyso trawsnewidiad pylu css i'r cyngor
html boolaidd ffug Mewnosod html yn y cyngor. Os yw'n ffug, bydd dull jquery yn textcael ei ddefnyddio i fewnosod cynnwys yn y dom. Defnyddiwch destun os ydych chi'n poeni am ymosodiadau XSS.
lleoliad llinyn | swyddogaeth 'top' sut i leoli'r cyngor - top | gwaelod | chwith | iawn
detholwr llinyn ffug Os darperir dewisydd, bydd gwrthrychau cyngor offer yn cael eu dirprwyo i'r targedau penodedig.
teitl llinyn | swyddogaeth '' gwerth teitl rhagosodedig os nad yw'r tag `title` yn bresennol
sbardun llinyn 'ffocws hofran' sut mae tooltip yn cael ei sbarduno - cliciwch | hofran | ffocws | llaw. Nodwch eich achos pas sbardun lluosog, gofod gwahanu, mathau sbardun.
oedi rhif | gwrthrych 0

oedi wrth ddangos a chuddio'r cyngor (ms) - nid yw'n berthnasol i'r math sbardun â llaw

Os bydd rhif yn cael ei gyflenwi, bydd oedi yn cael ei gymhwyso i'r ddwy guddfan/sioe

Strwythur gwrthrych yw:delay: { show: 500, hide: 100 }

cynhwysydd llinyn | ffug ffug

Yn atodi'r cyngor i elfen benodolcontainer: 'body'

Pennau i fyny! Fel arall, gellir pennu opsiynau ar gyfer cynghorion offer unigol trwy ddefnyddio priodoleddau data.

Marcio

  1. <a href = " # " data-toggle = " tooltip " title = " cyngor cymorth cyntaf " > hofran drosof </a>

Dulliau

$().tooltip(opsiynau)

Yn cysylltu triniwr cyngor offer wrth gasgliad elfennau.

.tooltip ('dangos')

Yn datgelu cyngor offer elfen.

  1. $ ( '# elfen' ). cyngor offer ( 'dangos' )

.tooltip ('cuddio')

Yn cuddio cyngor offer elfen.

  1. $ ( '# elfen' ). cyngor ( 'cuddio' )

.tooltip ('toglo')

Toglo cyngor offer elfen.

  1. $ ( '# elfen' ). cyngor ( ' togl ' )

.tooltip ('dinistrio')

Yn cuddio ac yn dinistrio cyngor offer elfen.

  1. $ ( '# elfen' ). cyngor ( 'dinistrio' )

Enghreifftiau

Ychwanegu troshaenau bach o gynnwys, fel y rhai ar yr iPad, at unrhyw elfen ar gyfer lletya gwybodaeth eilaidd. Hofran dros y botwm i sbarduno'r popover. Angen cynnwys Tooltip .

Popover statig

Mae pedwar opsiwn ar gael: aliniad uchaf, dde, gwaelod a chwith.

Popover top

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

Popover iawn

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

Popover gwaelod

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

Gadawodd Popover

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

Ni chynhyrchir unrhyw farcio a ddangosir fel popovers o JavaScript a chynnwys o fewn datapriodoledd.

Demo byw

Pedwar cyfeiriad


Defnydd

Galluogi popovers trwy JavaScript:

  1. $ ( '#enghraifft' ). popover ( opsiynau )

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-animation="".

Enw math rhagosodedig disgrifiad
animeiddiad boolaidd gwir cymhwyso trawsnewidiad pylu css i'r cyngor
html boolaidd ffug Mewnosod html yn y popover. Os yw'n ffug, bydd dull jquery yn textcael ei ddefnyddio i fewnosod cynnwys yn y dom. Defnyddiwch destun os ydych chi'n poeni am ymosodiadau XSS.
lleoliad llinyn | swyddogaeth 'iawn' sut i leoli'r popover - top | gwaelod | chwith | iawn
detholwr llinyn ffug os darperir dewisydd, bydd gwrthrychau cyngor offer yn cael eu dirprwyo i'r targedau penodedig
sbardun llinyn 'cliciwch' sut mae popover yn cael ei sbarduno - cliciwch | hofran | ffocws | llaw
teitl llinyn | swyddogaeth '' gwerth teitl rhagosodedig os nad yw priodoledd `title` yn bresennol
cynnwys llinyn | swyddogaeth '' gwerth cynnwys rhagosodedig os nad yw priodoledd `data-content` yn bresennol
oedi rhif | gwrthrych 0

oedi wrth ddangos a chuddio'r popover (ms) - nid yw'n berthnasol i fath sbardun â llaw

Os bydd rhif yn cael ei gyflenwi, bydd oedi yn cael ei gymhwyso i'r ddwy guddfan/sioe

Strwythur gwrthrych yw:delay: { show: 500, hide: 100 }

cynhwysydd llinyn | ffug ffug

Yn atodi'r popover i elfen benodolcontainer: 'body'

Pennau i fyny! Fel arall, gellir pennu opsiynau ar gyfer popovers unigol trwy ddefnyddio priodoleddau data.

Marcio

Am resymau perfformiad, mae'r Tooltip a'r Popover data-apis yn optio i mewn. Os hoffech eu defnyddio nodwch opsiwn dewisydd.

Dulliau

$().popover(opsiynau)

Yn cychwyn popovers ar gyfer casgliad elfennau.

.popover ('dangos')

Yn datgelu popover elfennau.

  1. $ ( '# elfen' ). popover ( 'dangos' )

.popover ('cuddio')

Yn cuddio popover elfennau.

  1. $ ( '# elfen' ). popover ( 'cuddio' )

.popover ('toglo')

Toglo popover elfennau.

  1. $ ( '# elfen' ). popover ( 'toglo' )

.popover ('dinistrio')

Yn cuddio ac yn dinistrio popover elfen.

  1. $ ( '# elfen' ). popover ( 'dinistrio' )

Rhybuddion enghreifftiol

Ychwanegu swyddogaeth diswyddo i bob neges rhybudd gyda'r ategyn hwn.

Sanctaidd guacamole! Mae'n well gwirio chi'ch hun, nid ydych chi'n edrych yn rhy dda.

O snap! Cawsoch gamgymeriad!

Newidiwch hwn a'r llall a cheisiwch eto. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras matis consectetur purus sit amet fermentum.

Cymerwch y cam hwn Neu gwnewch hyn


Defnydd

Galluogi diswyddo rhybudd trwy JavaScript:

  1. $ ( " .alert " ). rhybudd ()

Marcio

Ychwanegwch data-dismiss="alert"at eich botwm cau i roi swyddogaeth cau rhybudd yn awtomatig.

  1. <a class="close" data-dismiss="alert" href="#"> & times ; _ _ _ _ _ </a>

Dulliau

$().rhybudd()

Yn lapio pob rhybudd ag ymarferoldeb agos. Er mwyn i'ch rhybuddion gael eu hanimeiddio pan fyddant ar gau, gwnewch yn siŵr bod y dosbarth .fadea'r .indosbarth eisoes wedi'i gymhwyso iddynt.

. rhybudd ('cau')

Yn cau rhybudd.

  1. $ ( " .alert " ). rhybudd ( 'agos' )

Digwyddiadau

Mae dosbarth rhybuddio Bootstrap yn datgelu ychydig o ddigwyddiadau ar gyfer cysylltu â swyddogaethau rhybuddio.

Digwyddiad Disgrifiad
cau Mae'r digwyddiad hwn yn tanio ar unwaith pan closeelwir y dull enghraifft.
gau Mae'r digwyddiad hwn yn cael ei danio pan fydd y rhybudd wedi'i gau (bydd yn aros i'r trawsnewidiadau css gael eu cwblhau).
  1. $ ( '#fy-rybudd' ). rhwymo ( ' ar gau ' , swyddogaeth ( ) {
  2. // gwneud rhywbeth…
  3. })

Defnyddiau enghreifftiol

Gwnewch fwy gyda botymau. Rheoli cyflwr botymau neu greu grwpiau o fotymau ar gyfer mwy o gydrannau fel bariau offer.

Datganol

Ychwanegu data-loading-text="Loading..."i ddefnyddio cyflwr llwytho ar fotwm.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Yn llwytho..." > Cyflwr llwytho </button>

Togl sengl

Ychwanegu data-toggle="button"at actifadu toggling ar un botwm.

  1. <button type = "button" class = "btn btn-primary" data-toggle = "botwm" > Toglo Sengl </button>

Blwch ticio

Ychwanegu data-toggle="buttons-checkbox"ar gyfer toggling arddull blwch ticio ar btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Chwith </button>
  3. <button type = "button" class = "btn btn-primary" > Canol </button>
  4. <button type = "button" class = "btn btn-primary" > De </button>
  5. </div>

Radio

Ychwanegu data-toggle="buttons-radio"ar gyfer toggling arddull radio ar btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Chwith </button>
  3. <button type = "button" class = "btn btn-primary" > Canol </button>
  4. <button type = "button" class = "btn btn-primary" > De </button>
  5. </div>

Defnydd

Galluogi botymau trwy JavaScript:

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

Marcio

Mae priodoleddau data yn rhan annatod o'r ategyn botwm. Edrychwch ar y cod enghreifftiol isod am y gwahanol fathau o farcio.

Opsiynau

Dim

Dulliau

$().button('toglo')

Toglo cyflwr gwthio. Yn rhoi'r ymddangosiad i'r botwm ei fod wedi'i actifadu.

Pennau i fyny! Gallwch alluogi toglo botwm yn awtomatig trwy ddefnyddio'r data-togglepriodoledd.
  1. <button type = "button" class = "btn" data-toggle = "botwm" > </button>

$().botwm ('llwytho')

Yn gosod cyflwr botwm i lwytho - yn analluogi botwm ac yn cyfnewid testun i lwytho testun. Dylid diffinio llwytho testun ar yr elfen botwm gan ddefnyddio'r priodoledd data data-loading-text.

  1. < button type = " button " class = " btn " data-loading-text = " llwytho stwff..." > ... </button>
Pennau i fyny! Mae Firefox yn parhau â'r cyflwr analluog ar draws llwythi tudalennau . Ateb ar gyfer hyn yw ei ddefnyddio autocomplete="off".

$().botwm ('ailosod')

Yn ailosod cyflwr botwm - yn cyfnewid testun i destun gwreiddiol.

$().botwm(llinyn)

Yn ailosod cyflwr botwm - yn cyfnewid testun i unrhyw gyflwr testun diffiniedig.

  1. <button type = "button" class = "btn" data-complete-text = "gorffen!" > ... </button>
  2. <script>
  3. $ ( ' .btn ' ). botwm ( 'cyflawn' )
  4. </script>

Ynghylch

Sicrhewch arddulliau sylfaenol a chefnogaeth hyblyg ar gyfer cydrannau cwympadwy fel acordionau a llywio.

* Yn gofyn am gynnwys yr ategyn Transitions.

Acordion enghreifftiol

Gan ddefnyddio'r ategyn cwympo, fe wnaethom adeiladu teclyn arddull acordion syml:

Anim pariatur cliche reprehenderit, enim eiusmod bywyd uchel accusamus terry richardson a sgwid. 3 blaidd lleuad officia aute, non cupidatat sgrialu dolor brunch. Tryc bwyd quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua rhoi aderyn arno squid un-tarddiad coffi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, cwrw crefft laboure wes anderson cred nesciunt sapiente ea proident. Ad vegan butcher cigydd vice lomo. Legins occaecat cwrw crefft fferm-i-bwrdd, synth esthetig denim amrwd nesciunt mae'n debyg nad ydych wedi clywed amdanynt accusamus laboure VHS cynaliadwy.
Anim pariatur cliche reprehenderit, enim eiusmod bywyd uchel accusamus terry richardson a sgwid. 3 blaidd lleuad officia aute, non cupidatat sgrialu dolor brunch. Tryc bwyd quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua rhoi aderyn arno squid un-tarddiad coffi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, cwrw crefft laboure wes anderson cred nesciunt sapiente ea proident. Ad vegan butcher cigydd vice lomo. Legins occaecat cwrw crefft fferm-i-bwrdd, synth esthetig denim amrwd nesciunt mae'n debyg nad ydych wedi clywed amdanynt accusamus laboure VHS cynaliadwy.
Anim pariatur cliche reprehenderit, enim eiusmod bywyd uchel accusamus terry richardson a sgwid. 3 blaidd lleuad officia aute, non cupidatat sgrialu dolor brunch. Tryc bwyd quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua rhoi aderyn arno squid un-tarddiad coffi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, cwrw crefft laboure wes anderson cred nesciunt sapiente ea proident. Ad vegan butcher cigydd vice lomo. Legins occaecat cwrw crefft fferm-i-bwrdd, synth esthetig denim amrwd nesciunt mae'n debyg nad ydych wedi clywed amdanynt accusamus laboure VHS cynaliadwy.
  1. <div class = "acordion" id = "acordion2" >
  2. <div class = "acordion-group" >
  3. <div class = "acordion-heading" >
  4. <a class="acordion-toggle" data-toggle="llewygu" data-parent="#acordion2" href="#collapseOne"> _ _ _ _ _ _ _ _ _
  5. Eitem Grŵp #1 y gellir ei Chwympo
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "acordion-corff yn cwympo i mewn" >
  9. <div class = "acordion-mewnol" >
  10. Anim pariatur ystrydeb...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "acordion-group" >
  15. <div class = "acordion-heading" >
  16. <a class="acordion-toggle" data-toggle = "cwymp" data-parent = "#acordion2" href = "#collapseTwo"> _ _ _
  17. Eitem Grŵp #2 y gellir ei Chwympo
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "cwymp acordion-corff" >
  21. <div class = "acordion-mewnol" >
  22. Anim pariatur ystrydeb...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Gallwch hefyd ddefnyddio'r ategyn heb y marc acordion. Gwnewch fotwm togl ehangu a dymchwel elfen arall.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "llewygu " data-target = "#demo" >
  2. syml collapsible
  3. </button>
  4.  
  5. <div id = "demo" class = "llewygu" > </div>

Defnydd

Trwy briodoleddau data

Ychwanegu data-toggle="collapse"ac data-targetelfen i neilltuo rheolaeth yn awtomatig ar elfen sy'n cwympo. Mae'r data-targetpriodoledd yn derbyn dewisydd css i gymhwyso'r cwymp iddo. Gwnewch yn siŵr eich bod chi'n ychwanegu'r dosbarth collapseat yr elfen gwympadwy. Os hoffech iddo agor diofyn, ychwanegwch y dosbarth ychwanegol in.

I ychwanegu rheolaeth grŵp tebyg i acordion at reolydd cwympadwy, ychwanegwch y priodoledd data data-parent="#selector". Cyfeiriwch at y demo i weld hyn ar waith.

Trwy JavaScript

Galluogi â llaw gyda:

  1. $ ( " .collapse " ). dymchwel ()

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-parent="".

Enw math rhagosodedig disgrifiad
rhiant detholwr ffug Os yw'n ddewiswr yna bydd yr holl elfennau cwympadwy o dan y rhiant penodedig yn cael eu cau pan ddangosir yr eitem cwympadwy hon. (yn debyg i ymddygiad acordion traddodiadol)
togl boolaidd gwir Toglo'r elfen cwympadwy ar alw

Dulliau

.cwymp(opsiynau)

Yn actifadu'ch cynnwys fel elfen y gellir ei dymchwel. Yn derbyn opsiwn dewisol object.

  1. $ ( '#myCollapsible' ). dymchwel ({
  2. togl : ffug
  3. })

.cwymp ('toglo')

Toglo elfen sy'n cwympo i'w dangos neu ei chuddio.

. cwymp ('dangos')

Yn dangos elfen sy'n cwympo.

.cwymp ('cuddio')

Yn cuddio elfen sy'n cwympo.

Digwyddiadau

Mae dosbarth cwymp Bootstrap yn datgelu ychydig o ddigwyddiadau ar gyfer cysylltu â swyddogaeth cwympo.

Digwyddiad Disgrifiad
dangos Mae'r digwyddiad hwn yn tanio ar unwaith pan showelwir y dull enghraifft.
dangosir Mae'r digwyddiad hwn yn cael ei danio pan fydd elfen cwympo wedi'i gwneud yn weladwy i'r defnyddiwr (bydd yn aros i'r trawsnewidiadau css gwblhau).
cuddio Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hidedull wedi'i alw.
cudd Mae'r digwyddiad hwn yn cael ei danio pan fydd elfen cwymp wedi'i chuddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau css gwblhau).
  1. $ ( '#myCollapsible' ). ar ( 'cudd' , swyddogaeth () {
  2. // gwneud rhywbeth…
  3. })

Enghraifft

Ategyn sylfaenol, hawdd ei ymestyn ar gyfer creu blaen-deip cain yn gyflym gydag unrhyw fewnbwn testun ffurf.

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

Byddwch chi eisiau gosod autocomplete="off"i atal dewislenni porwr diofyn rhag ymddangos dros y cwymplen teipio Bootstrap.


Defnydd

Trwy briodoleddau data

Ychwanegu priodoleddau data i gofrestru elfen gyda swyddogaeth teipio ymlaen llaw fel y dangosir yn yr enghraifft uchod.

Trwy JavaScript

Ffoniwch y teipiadur â llaw gyda:

  1. $ ( '.typehead' ). teip blaen ()

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-source="".

Enw math rhagosodedig disgrifiad
ffynhonnell arae, swyddogaeth [ ] Y ffynhonnell ddata i ymholi yn ei herbyn. Gall fod yn amrywiaeth o linynnau neu ffwythiant. Mae'r swyddogaeth yn cael ei basio dwy ddadl, y querygwerth yn y maes mewnbwn a'r processalwad yn ôl. Gellir defnyddio'r swyddogaeth yn gydamserol trwy ddychwelyd y ffynhonnell ddata yn uniongyrchol neu'n anghydamserol trwy processddadl sengl yr alwad yn ôl.
eitemau rhif 8 Uchafswm nifer yr eitemau i'w harddangos yn y gwymplen.
min Hyd rhif 1 Yr hyd nod lleiaf sydd ei angen cyn sbarduno awgrymiadau awtolenwi
matsiwr swyddogaeth achos ansensitif Y dull a ddefnyddir i benderfynu a yw ymholiad yn cyfateb i eitem. Yn derbyn un ddadl, y gellir itemprofi'r ymholiad yn ei herbyn. Cyrchwch yr ymholiad cyfredol gyda this.query. Dychwelwch boolean trueos yw'r ymholiad yn cyfateb.
didolwr swyddogaeth cyfateb union,
achos sensitif,
achos ansensitif
Dull a ddefnyddir i ddidoli canlyniadau awtolenwi. Yn derbyn un ddadl itemsac mae ganddo gwmpas yr enghraifft deipio ymlaen. Cyfeiriwch yr ymholiad cyfredol gyda this.query.
diweddarwr swyddogaeth yn dychwelyd yr eitem a ddewiswyd Y dull a ddefnyddir i ddychwelyd yr eitem a ddewiswyd. Yn derbyn un ddadl, itemac mae ganddo gwmpas yr enghraifft deipio ymlaen.
goleuwr swyddogaeth yn amlygu pob cyfatebiaeth ddiofyn Dull a ddefnyddir i amlygu canlyniadau awtolenwi. Yn derbyn un ddadl itemac mae ganddo gwmpas yr enghraifft deipio ymlaen. Dylid dychwelyd html.

Dulliau

.typehead(opsiynau)

Yn cychwyn mewnbwn gyda blaendeip.

Enghraifft

Mae'r is-llywio ar y chwith yn arddangosiad byw o'r ategyn affix.


Defnydd

Trwy briodoleddau data

Er mwyn ychwanegu ymddygiad affix i unrhyw elfen yn hawdd, ychwanegwch data-spy="affix"at yr elfen rydych chi am sbïo arni. Yna defnyddiwch wrthbwyso i ddiffinio pryd i newid pinio elfen ymlaen ac i ffwrdd.

  1. <div data-spy = "affix" data-offset-top = " 200 " > ... </div>
Pennau i fyny! Rhaid i chi reoli safle elfen wedi'i phinnio ac ymddygiad ei rhiant uniongyrchol. Rheolir y sefyllfa gan affix, affix-top, a affix-bottom. Cofiwch wirio am riant a allai fod wedi llewygu pan fydd yr affix yn cychwyn gan ei fod yn tynnu cynnwys o lif arferol y dudalen.

Trwy JavaScript

Ffoniwch yr ategyn affix trwy JavaScript:

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

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-offset-top="200".

Enw math rhagosodedig disgrifiad
gwrthbwyso rhif | swyddogaeth | gwrthrych 10 Picseli i'w gwrthbwyso o'r sgrin wrth gyfrifo lleoliad y sgrôl. Os darperir un rhif, bydd y gwrthbwyso'n cael ei gymhwyso i'r cyfeiriad uchaf a'r cyfeiriad chwith. I wrando am un cyfeiriad, neu wrthbwyso unigryw lluosog, rhowch wrthrych offset: { x: 10 }. Defnyddiwch swyddogaeth pan fydd angen i chi ddarparu gwrthbwyso yn ddeinamig (defnyddiol ar gyfer rhai dyluniadau ymatebol).