Javascript ar gyfer Bootstrap

Dewch â chydrannau Bootstrap yn fyw - nawr gyda 12 ategyn jQuery wedi'u teilwra .

moddau

Cymeriad symlach, ond hyblyg, yr ategyn moddol javascript traddodiadol gyda dim ond yr ymarferoldeb gofynnol a'r rhagosodiadau craff.

Cwympiadau

Ychwanegu dewislenni i bron unrhyw beth yn Bootstrap gyda'r ategyn syml hwn. Mae Bootstrap yn cynnwys cefnogaeth ddewislen gwympo lawn yn y bar llywio, y tabiau a'r tabledi.

Sgrolspy

Defnyddiwch scrollspy i ddiweddaru'r dolenni yn eich bar llywio yn awtomatig i ddangos y ddolen weithredol gyfredol yn seiliedig ar safle sgrolio.

Tabiau y gellir eu newid

Defnyddiwch yr ategyn hwn i wneud tabiau a pils yn fwy defnyddiol trwy ganiatáu iddynt doglo trwy baneli tabladwy o gynnwys lleol.

Cynghorion offer

Golwg newydd ar yr ategyn jQuery Tipsy, nid yw Tooltips yn dibynnu ar ddelweddau - maen nhw'n defnyddio CSS3 ar gyfer animeiddiadau a phriodoleddau data ar gyfer storio teitlau lleol.

Popovers *

Ychwanegu troshaenau bach o gynnwys, fel y rhai ar yr iPad, at unrhyw elfen ar gyfer lletya gwybodaeth eilaidd.

* Mae angen cynnwys Awgrymiadau Offer

Negeseuon rhybudd

Mae'r ategyn rhybuddio yn ddosbarth bach iawn ar gyfer ychwanegu ymarferoldeb agos at rybuddion.

Botymau

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

Cwymp

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

Carwsél

Crëwch go-rownd llawen o unrhyw gynnwys yr hoffech ddarparu sioe sleidiau ryngweithiol o gynnwys.

Teipiwch ymlaen

Ategyn sylfaenol, hawdd ei ymestyn ar gyfer creu blaenau teip cain yn gyflym gydag unrhyw fewnbwn testun ffurf.

Trawsnewid *

Ar gyfer effeithiau trawsnewid syml, cynhwyswch bootstrap-transition.js unwaith i lithro mewn moddau neu ddileu rhybuddion.

* Yn ofynnol ar gyfer animeiddio mewn ategion

Pennau i fyny! Mae angen y fersiwn diweddaraf o jQuery ar bob ategyn javascript.

Ynglŷn â moddau

Cymeriad symlach, ond hyblyg, yr ategyn moddol javascript traddodiadol gyda dim ond yr ymarferoldeb gofynnol a'r rhagosodiadau craff.

Lawrlwytho ffeil

Enghraifft statig

Isod mae moddol wedi'i rendro'n statig.

Demo byw

Toggle a modal trwy javascript trwy glicio ar y botwm isod. Bydd yn llithro i lawr ac yn pylu i mewn o frig y dudalen.

Lansio modd demo

Defnyddio modd bootstrap

Ffoniwch y moddol trwy javascript:

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

Opsiynau

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.

Marcio

Gallwch chi actifadu moddau ar eich tudalen yn hawdd heb orfod ysgrifennu un llinell o javascript. Gosodwch data-toggle="modal"ar elfen rheolydd gyda data-target="#foo"neu href="#foo"sy'n cyfateb i elfen foddol id, a phan gaiff ei glicio, bydd yn lansio'ch modd.

Hefyd, i ychwanegu opsiynau at eich enghraifft moddol, dylech eu cynnwys fel priodoleddau data ychwanegol naill ai ar yr elfen reoli neu'r marcio moddol ei hun.

  1. <a class="btn" data-toggle="modal" href="#myModal"> Moddol Lansio </a> _ _ _ _ _ _
  1. <div class = "cuddio moddal" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </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 " data-dismiss = " modal " > Cau </a>
  11. <a href = " # " class = " btn btn-primary " > Cadw newidiadau </a>
  12. </div>
  13. </div>
Pennau i fyny! Os ydych chi am i'ch modd animeiddio i mewn ac allan, ychwanegwch .fadeddosbarth i'r .modalelfen (cyfeiriwch at y demo i weld hwn ar waith) a chynnwys bootstrap-transition.js.

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

Mae'r ategyn ScrollSpy ar gyfer diweddaru targedau llywio yn awtomatig yn seiliedig ar safle sgrolio.

Lawrlwytho ffeil

Bar llywio enghreifftiol gyda scrollspy

Sgroliwch yr ardal isod a gwyliwch y diweddariad llywio. Bydd yr is-eitemau cwymplen yn cael eu hamlygu hefyd. Rhowch gynnig arni!

@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 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.


Gan ddefnyddio bootstrap-scrollspy.js

Ffoniwch y scrollspy trwy javascript:

  1. $ ( '# navbar' ). sgrôlspy ()

Marcio

Er mwyn ychwanegu ymddygiad ysbïo sgrolio yn hawdd at eich llywio bar uchaf, ychwanegwch data-spy="scroll"at yr elfen rydych chi am sbïo arno (y corff fyddai hwn fel arfer).

  1. <body data-spy = "scroll" > ... </body>
Pennau i fyny! Rhaid bod gan ddolenni Navbar dargedau 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

Enw math rhagosodedig disgrifiad
gwrthbwyso rhif 10 Picseli i'w gwrthbwyso o'r brig wrth gyfrifo lleoliad y 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.

Mae'r ategyn hwn yn ychwanegu ymarferoldeb tab a pilsen cyflym a deinamig ar gyfer trosglwyddo trwy gynnwys lleol.

Lawrlwytho ffeil

Tabiau enghreifftiol

Cliciwch y tabiau isod i doglo rhwng cwareli cudd, 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.


Gan ddefnyddio bootstrap-tab.js

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

Am Awgrymiadau Offer

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.

Lawrlwytho ffeil

Enghraifft o ddefnydd o Tooltips

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.


Defnyddio bootstrap-tooltip.js

Sbardunwch y cyngor trwy javascript:

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

Opsiynau

Enw math rhagosodedig disgrifiad
animeiddiad boolaidd gwir cymhwyso trawsnewidiad pylu css i'r cyngor
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 'hofran' sut mae tooltip yn cael ei sbarduno - hofran | ffocws | llaw
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 }

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

Marcio

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

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

Am popovers

Ychwanegu troshaenau bach o gynnwys, fel y rhai ar yr iPad, at unrhyw elfen ar gyfer lletya gwybodaeth eilaidd.

* Mae angen cynnwys Tooltip

Lawrlwytho ffeil

Enghraifft hofran popover

Hofran dros y botwm i sbarduno'r popover.


Gan ddefnyddio bootstrap-popover.js

Galluogi popovers trwy javascript:

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

Opsiynau

Enw math rhagosodedig disgrifiad
animeiddiad boolaidd gwir cymhwyso trawsnewidiad pylu css i'r cyngor
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 'hofran' sut mae tooltip yn cael ei sbarduno - 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 }

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

Ynglŷn â rhybuddion

Mae'r ategyn rhybuddio yn ddosbarth bach iawn ar gyfer ychwanegu ymarferoldeb agos at rybuddion.

Lawrlwythwch

Rhybuddion enghreifftiol

Mae'r ategyn rhybuddion yn gweithio ar negeseuon rhybuddio rheolaidd, a negeseuon bloc.

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


Defnyddio bootstrap-alert.js

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'u cymhwyso 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. })

Ynghylch

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

Lawrlwytho ffeil

Defnyddiau enghreifftiol

Defnyddiwch yr ategyn botymau ar gyfer cyflyrau a toglau.

Datganol
Togl sengl
Blwch ticio
Radio

Gan ddefnyddio bootstrap-button.js

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.

  1. <!-- Ychwanegu data-toggle="botwm" i actifadu toglo ar un botwm -->
  2. <button class = "btn" data-toggle = "button" > Toglo Sengl </button>
  3.  
  4. <!-- Ychwanegu data-toggle="buttons-checkbox" ar gyfer toggling arddull blwch ticio ar btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Chwith </button>
  7. <button class = "btn" > Canol </button>
  8. <button class = "btn" > Dde </button>
  9. </div>
  10.  
  11. <!-- Ychwanegu data-toggle="buttons-radio" ar gyfer toglo arddull radio ar btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Chwith </button>
  14. <button class = "btn" > Canol </button>
  15. <button class = "btn" > Dde </button>
  16. </div>

Dulliau

$().button('toglo')

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

Pennau i fyny! Gallwch chi alluogi toglo botwm yn awtomatig trwy ddefnyddio'r data-togglepriodoledd.
  1. <button class = "btn" data-toggle = "button" > </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 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')

Ailosod cyflwr botwm - cyfnewid testun i destun gwreiddiol.

$().botwm(llinyn)

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

  1. <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.

Lawrlwytho ffeil

* 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.

Defnyddio bootstrap-collapse.js

Galluogi trwy javascript:

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

Opsiynau

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

Marcio

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.

  1. <button class = "btn btn-danger" data-toggle = "cwymp" data-target = "#demo" >
  2. syml collapsible
  3. </button>
  4.  
  5. <div id = "demo" class = "llewygu" > </div>
Pennau i fyny! 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.

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 cwympo wedi'i chuddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau css gwblhau).
  1. $ ( '#myCollapsible' ). ar ( 'cudd' , swyddogaeth () {
  2. // gwneud rhywbeth…
  3. })

Ynghylch

Ategyn sylfaenol, hawdd ei ymestyn ar gyfer creu blaenau teip cain yn gyflym gydag unrhyw fewnbwn testun ffurf.

Lawrlwytho ffeil

Enghraifft

Dechreuwch deipio yn y maes isod i ddangos y canlyniadau teipio ymlaen llaw.


Defnyddio bootstrap-typeahead.js

Ffoniwch y teip ymlaen trwy javascript:

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

Opsiynau

Enw math rhagosodedig disgrifiad
ffynhonnell arae [ ] Y ffynhonnell ddata i ymholi yn ei herbyn.
eitemau rhif 8 Uchafswm nifer yr eitemau i'w harddangos yn y gwymplen.
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
Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.
highlighter function highlights all default matches Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.

Markup

Add data attributes to register an element with typeahead functionality.

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

Methods

.typeahead(options)

Initializes an input with a typeahead.