JavaScript
Dewch â chydrannau Bootstrap yn fyw gyda dros ddwsin o ategion jQuery personol. Cynhwyswch nhw i gyd yn hawdd, neu fesul un.
Dewch â chydrannau Bootstrap yn fyw gyda dros ddwsin o ategion jQuery personol. Cynhwyswch nhw i gyd yn hawdd, neu fesul un.
Gellir cynnwys ategion yn unigol (gan ddefnyddio *.js
ffeiliau unigol Bootstrap), neu i gyd ar unwaith (gan ddefnyddio bootstrap.js
neu'r miniified bootstrap.min.js
).
Mae'r ddau bootstrap.js
ac bootstrap.min.js
yn cynnwys yr holl ategion mewn un ffeil. Cynhwyswch un yn unig.
Mae rhai ategion a chydrannau CSS yn dibynnu ar ategion eraill. Os ydych chi'n cynnwys ategion yn unigol, gwnewch yn siŵr eich bod chi'n gwirio am y dibyniaethau hyn yn y dogfennau. Sylwch hefyd fod pob ategyn yn dibynnu ar jQuery (mae hyn yn golygu bod yn rhaid cynnwys jQuery cyn y ffeiliau ategyn). Ymgynghorwch â'nbower.json
i weld pa fersiynau o jQuery sy'n cael eu cefnogi.
Gallwch ddefnyddio holl ategion Bootstrap trwy'r API marcio yn unig heb ysgrifennu un llinell o JavaScript. Dyma API o'r radd flaenaf 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 ddogfen sydd â gofod data-api
. Mae hyn yn edrych fel hyn:
Fel arall, i dargedu ategyn penodol, dylech gynnwys enw'r ategyn fel gofod enw ynghyd â gofod enw data-api fel hyn:
Peidiwch â defnyddio priodoleddau data o ategion lluosog ar yr un elfen. Er enghraifft, ni all botwm gael cyngor a newid moddol. I gyflawni hyn, defnyddiwch elfen lapio.
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.
Dylai pob dull dderbyn gwrthrych opsiynau dewisol, llinyn sy'n targedu dull penodol, neu ddim byd (sy'n cychwyn ategyn ag ymddygiad diofyn):
Mae pob ategyn hefyd yn datgelu ei adeiladwr amrwd ar Constructor
briodwedd: $.fn.popover.Constructor
. Os hoffech gael enghraifft ategyn penodol, adalw ef yn uniongyrchol o elfen: $('[rel="popover"]').data('popover')
.
Gallwch newid y gosodiadau diofyn ar gyfer ategyn trwy addasu Constructor.DEFAULTS
gwrthrych yr ategyn:
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 .noConflict
ar yr ategyn yr ydych am ddychwelyd ei werth.
Mae Bootstrap yn darparu digwyddiadau wedi'u teilwra ar gyfer gweithredoedd unigryw'r mwyafrif o ategion. 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 cael ei sbarduno wrth gwblhau gweithred.
O 3.0.0 ymlaen, mae gofod enwau ar bob digwyddiad Bootstrap.
Mae pob digwyddiad berfenw yn darparu preventDefault
ymarferoldeb. Mae hyn yn rhoi'r gallu i atal cyflawni gweithred cyn iddo ddechrau.
Gellir cyrchu fersiwn pob un o ategion jQuery Bootstrap trwy VERSION
eiddo adeiladwr yr ategyn. Er enghraifft, ar gyfer yr ategyn cyngor offer:
Nid yw ategion Bootstrap yn disgyn yn ôl yn arbennig o osgeiddig pan fydd JavaScript wedi'i analluogi. Os ydych chi'n poeni am brofiad y defnyddiwr yn yr achos hwn, defnyddiwch <noscript>
i egluro'r sefyllfa (a sut i ail-alluogi JavaScript) i'ch defnyddwyr, a / neu ychwanegu eich wrth gefn personol eich hun.
Nid yw Bootstrap yn cefnogi llyfrgelloedd JavaScript trydydd parti yn swyddogol fel Prototeip neu jQuery UI. Er gwaethaf .noConflict
digwyddiadau a bylchau enwau, efallai y bydd problemau cydnawsedd y bydd angen i chi eu trwsio ar eich pen eich hun.
Ar gyfer effeithiau pontio syml, cynhwyswch transition.js
unwaith ochr yn ochr â'r ffeiliau JS eraill. Os ydych chi'n defnyddio'r ysgrifbinedig (neu finified) bootstrap.js
, nid oes angen cynnwys hyn - mae yno eisoes.
Mae Transition.js yn gynorthwyydd sylfaenol ar gyfer transitionEnd
digwyddiadau yn ogystal ag efelychydd pontio CSS. Fe'i defnyddir gan yr ategion eraill i wirio am gefnogaeth trawsnewid CSS ac i ddal trawsnewidiadau crog.
Gellir analluogi trawsnewidiadau yn fyd-eang gan ddefnyddio'r pyt JavaScript canlynol, y mae'n rhaid iddo ddod ar ôl transition.js
(neu bootstrap.js
, bootstrap.min.js
yn ôl y digwydd) lwytho:
Mae moddau yn symlach, ond yn hyblyg, yn awgrymiadau deialog gyda'r ymarferoldeb gofynnol a'r rhagosodiadau smart.
Gwnewch yn siŵr nad ydych chi'n agor modd tra bod un arall yn dal i'w weld. Mae dangos mwy nag un moddol ar y tro yn gofyn am god personol.
Ceisiwch osod cod HTML moddol bob amser mewn safle lefel uchaf yn eich dogfen er mwyn osgoi cydrannau eraill sy'n effeithio ar ymddangosiad a/neu ymarferoldeb y moddol.
Mae rhai cafeatau ynghylch defnyddio moddau ar ddyfeisiau symudol. Gweler ein dogfennau cymorth porwr am fanylion.
Oherwydd sut mae HTML5 yn diffinio ei semanteg, nid yw'r autofocus
priodoledd HTML yn cael unrhyw effaith mewn moddau Bootstrap. I gyflawni'r un effaith, defnyddiwch JavaScript arferol:
Moddol wedi'i rendro gyda phennawd, corff, a set o gamau gweithredu yn y troedyn.
Toglo moddol trwy JavaScript trwy glicio ar y botwm isod. Bydd yn llithro i lawr ac yn pylu i mewn o frig y dudalen.
Byddwch yn siwr i ychwanegu role="dialog"
a aria-labelledby="..."
, gan gyfeirio at y teitl moddol, i .modal
, ac role="document"
i'r .modal-dialog
ei hun.
Yn ogystal, gallwch roi disgrifiad o'ch deialog moddol gydag aria-describedby
on .modal
.
Mae gwreiddio fideos YouTube mewn moddau yn gofyn am JavaScript ychwanegol nid yn Bootstrap i atal chwarae a mwy yn awtomatig. Gweler y post defnyddiol Stack Overflow hwn am ragor o wybodaeth.
Mae gan foddau ddau faint dewisol, sydd ar gael trwy ddosbarthiadau addasu i'w gosod ar .modal-dialog
.
Ar gyfer modiwlau sy'n ymddangos yn syml yn hytrach na diflannu i'r golwg, tynnwch y .fade
dosbarth o'ch marc moddol.
I fanteisio ar y system grid Bootstrap o fewn moddol, dim ond nyth .row
s o fewn y .modal-body
ac yna defnyddio'r dosbarthiadau system grid arferol.
Oes gennych chi griw o fotymau sydd i gyd yn sbarduno'r un modd, gyda chynnwys ychydig yn wahanol? Defnyddio event.relatedTarget
a phriodoleddau HTMLdata-*
( trwy jQuery o bosibl ) i amrywio cynnwys y moddol yn dibynnu ar ba fotwm y cliciwyd arno. Gweler y dogfennau Digwyddiadau Modal am fanylion ar relatedTarget
,
Mae'r ategyn moddol yn toglo'ch cynnwys cudd yn ôl y galw, trwy briodoleddau data neu JavaScript. Mae hefyd yn ychwanegu .modal-open
at yr <body>
ymddygiad sgrolio rhagosodedig i ddiystyru ac yn cynhyrchu a .modal-backdrop
i ddarparu ardal glicio ar gyfer diystyru moddau a ddangosir wrth glicio y tu allan i'r moddol.
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.
Ffoniwch foddol gydag id myModal
gydag un llinell o JavaScript:
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 | boolean neu'r llinyn'static' |
gwir | Yn cynnwys elfen foddol-cefndir. Fel arall, nodwch static ar 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 | Mae'r opsiwn hwn wedi'i anghymeradwyo ers v3.3.0 ac mae wedi'i ddileu yn v4. Yn lle hynny, rydym yn argymell defnyddio templedi ochr y cleient neu fframwaith rhwymo data, neu ffonio jQuery.load eich hun. Os darperir URL o bell, bydd cynnwys yn cael ei lwytho un tro trwy |
.modal(options)
Yn actifadu'ch cynnwys fel moddol. Yn derbyn opsiwn dewisol object
.
.modal('toggle')
Toglo moddol â llaw. Yn dychwelyd i'r galwr cyn i'r moddol gael ei ddangos neu ei guddioshown.bs.modal
( hy cyn i'r hidden.bs.modal
digwyddiad ddigwydd).
.modal('show')
Yn agor moddol â llaw. Yn dychwelyd i'r galwr cyn i'r moddol gael ei ddangos (hy cyn i'r shown.bs.modal
digwyddiad ddigwydd).
.modal('hide')
Yn cuddio moddol â llaw. Yn dychwelyd i'r galwr cyn i'r moddol gael ei guddio (hy cyn i'r hidden.bs.modal
digwyddiad ddigwydd).
.modal('handleUpdate')
Yn ail-addasu lleoliad y modd i wrthweithio bar sgrolio rhag ofn y dylai un ymddangos, a fyddai'n gwneud y naid moddol i'r chwith.
Dim ond ei angen pan fydd uchder y modd newid tra ei fod ar agor.
Mae dosbarth moddol Bootstrap yn datgelu rhai digwyddiadau ar gyfer cysylltu â swyddogaethau moddol.
Mae pob digwyddiad moddol yn cael ei danio at y moddol ei hun (hy yn y <div class="modal">
).
Math o Ddigwyddiad | Disgrifiad |
---|---|
moddol.bs | Mae'r digwyddiad hwn yn tanio ar unwaith pan show elwir y dull enghraifft. Os caiff ei achosi gan glic, mae'r elfen a gliciwyd ar gael fel relatedTarget eiddo'r digwyddiad. |
dangos.bs.modal | 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). Os caiff ei achosi gan glic, mae'r elfen a gliciwyd ar gael fel relatedTarget eiddo'r digwyddiad. |
cuddio.bs.modal | Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hide dull enghraifft wedi'i alw. |
cudd.bs.modal | 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). |
llwythog.bs.modal | Mae'r digwyddiad hwn yn cael ei danio pan fydd y moddol wedi llwytho cynnwys gan ddefnyddio'r remote opsiwn. |
Ychwanegwch gwymplenni at bron unrhyw beth gyda'r ategyn syml hwn, gan gynnwys y bar llywio, y tabiau a'r tabledi.
Trwy briodoleddau data neu JavaScript, mae'r ategyn cwymplen yn toglo cynnwys cudd (cwymplenni) trwy doglo'r .open
dosbarth ar yr eitem rhestr rhieni.
Ar ddyfeisiau symudol, mae agor cwymplen yn ychwanegu .dropdown-backdrop
ardal tap ar gyfer cau dewislenni wrth dapio y tu allan i'r ddewislen, gofyniad am gefnogaeth iOS iawn. Mae hyn yn golygu bod angen tap ychwanegol ar ffôn symudol i newid o gwymplen agored i gwymplen wahanol.
Nodyn: Dibynnir ar y data-toggle="dropdown"
priodoledd ar gyfer cau dewislenni ar lefel cais, felly mae'n syniad da ei ddefnyddio bob amser.
Ychwanegu data-toggle="dropdown"
at ddolen neu fotwm i doglo cwymplen.
I gadw URLs yn gyfan gyda botymau cyswllt, defnyddiwch y data-target
priodoledd yn lle href="#"
.
Ffoniwch y cwymplenni trwy JavaScript:
data-toggle="dropdown"
dal yn ofynnolNi waeth a ydych chi'n ffonio'ch cwymplen trwy JavaScript neu yn lle hynny'n defnyddio'r data-api, data-toggle="dropdown"
mae'n ofynnol bob amser i fod yn bresennol ar elfen sbardun y gwymplen.
Dim
$().dropdown('toggle')
Toglo'r gwymplen o far llywio penodol neu dabl llywio.
Mae pob digwyddiad cwymplen yn cael ei danio at yr .dropdown-menu
elfen rhiant.
Mae gan bob digwyddiad cwymplen relatedTarget
eiddo, y mae ei werth yn elfen angor toggling.
Math o Ddigwyddiad | Disgrifiad |
---|---|
cwymplen.bs | Mae'r digwyddiad hwn yn tanio ar unwaith pan elwir y dull enghraifft sioe. |
dangosir.bs.cwymp | Mae'r digwyddiad hwn yn cael ei danio pan fydd y cwymplen wedi'i gwneud yn weladwy i'r defnyddiwr (bydd yn aros am drawsnewidiadau CSS, i'w cwblhau). |
cuddio.bs.dropdown | Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y dull cuddfan wedi'i alw. |
cudd.bs.dropdown | Mae'r digwyddiad hwn yn cael ei danio pan fydd y gwymplen wedi gorffen cael ei chuddio rhag y defnyddiwr (bydd yn aros am drawsnewidiadau CSS, i'w cwblhau). |
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.
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.
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.
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.
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.
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.
Rhaid i ddolenni Navbar gael targedau adnabod y gellir eu datrys. Er enghraifft, <a href="#home">home</a>
rhaid cyfateb i rywbeth yn y DOM fel <div id="home"></div>
.
:visible
Anwybyddir elfennau nad ydynt yn dargedBydd elfennau targed nad ydynt yn :visible
unol â jQuery yn cael eu hanwybyddu ac ni fydd eu heitemau llywio cyfatebol byth yn cael eu hamlygu.
Ni waeth y dull gweithredu, scrollspy yn gofyn am y defnydd o position: relative;
ar yr elfen rydych yn ysbïo ar. Yn y rhan fwyaf o achosion dyma'r <body>
. Wrth sgrolio ar elfennau heblaw'r <body>
, sicrhewch fod gennych height
set a'i overflow-y: scroll;
gymhwyso.
Er mwyn ychwanegu ymddygiad ysbïo sgrolio at eich llywio bar uchaf yn hawdd, ychwanegwch data-spy="scroll"
at yr elfen rydych chi am sbïo arno (yn fwyaf nodweddiadol dyma fyddai'r <body>
). Yna ychwanegwch y data-target
priodoledd gyda'r ID neu ddosbarth y rhiant elfen o unrhyw .nav
gydran Bootstrap.
Ar ôl ychwanegu position: relative;
eich CSS i mewn, ffoniwch y scrollspy trwy JavaScript:
.scrollspy('refresh')
Wrth ddefnyddio scrollspy ar y cyd ag ychwanegu neu dynnu elfennau o'r DOM, bydd angen i chi ffonio'r dull adnewyddu fel hyn:
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. |
Math o Ddigwyddiad | Disgrifiad |
---|---|
activate.bs.scrollspy | Mae'r digwyddiad hwn yn tanio pryd bynnag y bydd eitem newydd yn cael ei actifadu gan y sgroliwr. |
Ychwanegu ymarferoldeb tab cyflym a deinamig i drosglwyddo trwy baneli o gynnwys lleol, hyd yn oed trwy gwymplenni. Ni chefnogir tabiau nythu.
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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Mae'r ategyn hwn yn ymestyn y gydran llywio â thabiau i ychwanegu ardaloedd tabladwy.
Galluogi tabiau tabadwy trwy JavaScript (mae angen actifadu pob tab yn unigol):
Gallwch chi actifadu tabiau unigol mewn sawl ffordd:
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 nav
a nav-tabs
dosbarthiadau i'r tab ul
yn cymhwyso arddull tab Bootstrap , tra'n ychwanegu'r nav
a nav-pills
bydd dosbarthiadau yn defnyddio steilio bilsen .
I wneud i dabiau bylu i mewn, ychwanegwch .fade
at bob .tab-pane
. Rhaid i'r cwarel tab cyntaf hefyd .in
wneud y cynnwys cychwynnol yn weladwy.
$().tab
Yn actifadu elfen tab a chynhwysydd cynnwys. Dylai fod gan dab naill ai nod cynhwysydd data-target
neu href
nod targedu yn y DOM. Yn yr enghreifftiau uchod, y tabiau yw'r <a>
s gyda data-toggle="tab"
phriodoleddau.
.tab('show')
Yn dewis y tab a roddir ac yn dangos ei gynnwys cysylltiedig. Mae unrhyw dab arall a ddewiswyd yn flaenorol yn mynd heb ei ddewis ac mae ei gynnwys cysylltiedig wedi'i guddio. Yn dychwelyd i'r galwr cyn i'r cwarel tab gael ei ddangos (hy cyn i'r shown.bs.tab
digwyddiad ddigwydd).
Wrth ddangos tab newydd, mae'r digwyddiadau'n tanio yn y drefn ganlynol:
hide.bs.tab
(ar y tab gweithredol cyfredol)show.bs.tab
(ar y tab i'w ddangos)hidden.bs.tab
(ar y tab gweithredol blaenorol, yr un un ag ar gyfer y hide.bs.tab
digwyddiad)shown.bs.tab
(ar y tab newydd-weithredol sydd newydd ei ddangos, yr un un ag ar gyfer y show.bs.tab
digwyddiad)Os nad oedd unrhyw dab eisoes yn weithredol, yna ni fydd y hide.bs.tab
a hidden.bs.tab
digwyddiadau yn cael eu tanio.
Math o Ddigwyddiad | Disgrifiad |
---|---|
dangos.bs.tab | Mae'r digwyddiad hwn yn tanio ar sioe tab, ond cyn i'r tab newydd gael ei ddangos. Defnyddiwch event.target ac event.relatedTarget i dargedu'r tab gweithredol a'r tab gweithredol blaenorol (os yw ar gael) yn y drefn honno. |
dangos.bs.tab | Mae'r digwyddiad hwn yn tanio ar sioe dabiau ar ôl i dab gael ei ddangos. Defnyddiwch event.target ac event.relatedTarget i dargedu'r tab gweithredol a'r tab gweithredol blaenorol (os yw ar gael) yn y drefn honno. |
cuddio.bs.tab | Mae'r digwyddiad hwn yn tanio pan fydd tab newydd yn cael ei ddangos (ac felly mae'r tab gweithredol blaenorol i'w guddio). Defnyddiwch event.target ac event.relatedTarget i dargedu'r tab gweithredol cyfredol a'r tab newydd cyn bo hir, yn y drefn honno. |
cudd.bs.tab | Mae'r digwyddiad hwn yn tanio ar ôl i dab newydd gael ei ddangos (ac felly mae'r tab gweithredol blaenorol wedi'i guddio). Defnyddiwch event.target ac event.relatedTarget i dargedu'r tab gweithredol blaenorol a'r tab gweithredol newydd, yn y drefn honno. |
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.
Nid yw awgrymiadau offer gyda theitlau hyd sero byth yn cael eu harddangos.
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.
Mae pedwar opsiwn ar gael: aliniad uchaf, dde, gwaelod a chwith.
Am resymau perfformiad, mae'r api data Tooltip a Popover yn optio i mewn, sy'n golygu bod yn rhaid i chi eu cychwyn eich hun .
Un ffordd o gychwyn pob cyngor offer ar dudalen fyddai eu dewis yn ôl eu data-toggle
priodoledd:
Mae'r ategyn tooltip yn cynhyrchu cynnwys a marcio yn ôl y galw, ac yn ddiofyn yn gosod awgrymiadau offer ar ôl eu helfen sbarduno.
Sbardunwch y cyngor trwy JavaScript:
Priodoledd yn unig yw'r marcio gofynnol ar gyfer cyngor offer data
ac title
ar yr elfen HTML rydych chi'n dymuno cael cyngor. Mae'r marcio a gynhyrchir o gyngor offer braidd yn syml, er bod angen safle (yn ddiofyn, wedi'i osod top
gan yr ategyn).
Weithiau rydych chi eisiau ychwanegu cyngor cymorth i hyperddolen sy'n lapio llinellau lluosog. Ymddygiad rhagosodedig yr ategyn cyngor offer yw ei ganoli'n llorweddol ac yn fertigol. Ychwanegwch white-space: nowrap;
at eich angorau i osgoi hyn.
Wrth ddefnyddio cynghorion offer ar elfennau o fewn a .btn-group
neu .input-group
, neu ar elfennau sy'n gysylltiedig â thabl ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, <tfoot>
), bydd yn rhaid i chi nodi'r opsiwn container: 'body'
(a ddogfennir isod) er mwyn osgoi sgîl-effeithiau diangen (fel yr elfen yn tyfu'n ehangach a/ neu golli ei gorneli crwn pan fydd y cyngor yn cael ei sbarduno).
Ar gyfer defnyddwyr sy'n llywio gyda bysellfwrdd, ac yn enwedig defnyddwyr technolegau cynorthwyol, dim ond at elfennau sy'n canolbwyntio ar y bysellfwrdd fel dolenni, rheolyddion ffurf, neu unrhyw elfen fympwyol â phriodoledd y dylech ychwanegu awgrymiadau tabindex="0"
.
I ychwanegu cyngor offer at a disabled
neu .disabled
elfen, rhowch yr elfen y tu mewn i a <div>
a chymhwyso'r cyngor i hwnnw <div>
yn lle.
Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-
, fel yn data-animation=""
.
Enw | Math | Diofyn | Disgrifiad |
---|---|---|---|
animeiddiad | boolaidd | gwir | Cymhwyso trawsnewidiad pylu CSS i'r cyngor |
cynhwysydd | llinyn | ffug | ffug | Yn atodi'r cyngor i elfen benodol. Enghraifft: |
oedi | rhif | gwrthrych | 0 | Oedi wrth ddangos a chuddio'r cyngor (ms) - nid yw'n berthnasol i'r math o sbardun â llaw Os bydd rhif yn cael ei gyflenwi, bydd oedi yn cael ei gymhwyso i'r ddwy guddfan/sioe Strwythur gwrthrych yw: |
html | boolaidd | ffug | Mewnosod HTML yn y cyngor. Os yw'n ffug, text bydd dull jQuery yn cael 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 | dde | auto. Pan ddefnyddir swyddogaeth i benderfynu ar y lleoliad, fe'i gelwir gyda'r nod DOM cyngor offer fel ei ddadl gyntaf a'r elfen sbarduno nod DOM fel ei ail. Mae'r |
detholwr | llinyn | ffug | Os darperir dewisydd, bydd gwrthrychau cyngor offer yn cael eu dirprwyo i'r targedau penodedig. Yn ymarferol, defnyddir hwn i alluogi cynnwys HTML deinamig i gael awgrymiadau offer wedi'u hychwanegu. Gweler hyn ac enghraifft llawn gwybodaeth . |
templed | llinyn | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Sylfaen HTML i'w ddefnyddio wrth greu'r cyngor. Bydd y cynghorion offer yn
Dylai'r elfen lapio allanol fod â'r |
teitl | llinyn | swyddogaeth | '' | Gwerth teitl diofyn os Os rhoddir ffwythiant, fe'i gelwir gyda'i |
sbardun | llinyn | 'ffocws hofran' | Sut mae cyngor yn cael ei sbarduno - cliciwch | hofran | ffocws | llaw. Efallai y byddwch yn pasio sbardunau lluosog; eu gwahanu â gofod. manual ni ellir ei gyfuno ag unrhyw sbardun arall. |
gwylfa | llinyn | gwrthrych | swyddogaeth | { detholwr: 'corff', padin: 0 } | Yn cadw'r cyngor o fewn ffiniau'r elfen hon. Enghraifft: Os rhoddir ffwythiant, fe'i gelwir gyda'r elfen sbarduno nod DOM fel ei unig ddadl. Mae'r |
Fel arall, gellir nodi opsiynau ar gyfer cynghorion offer unigol trwy ddefnyddio priodoleddau data, fel yr eglurir uchod.
$().tooltip(options)
Yn cysylltu triniwr cyngor offer wrth gasgliad elfennau.
.tooltip('show')
Yn datgelu cyngor offer elfen. Yn dychwelyd at y galwr cyn i'r cyngor gael ei ddangos (hy cyn i'r shown.bs.tooltip
digwyddiad ddigwydd). Ystyrir hyn yn sbardun "â llaw" o'r cyngor. Nid yw awgrymiadau offer gyda theitlau hyd sero byth yn cael eu harddangos.
.tooltip('hide')
Yn cuddio cyngor offer elfen. Yn dychwelyd at y galwr cyn i'r cyngor gael ei guddio (hy cyn i'r hidden.bs.tooltip
digwyddiad ddigwydd). Ystyrir hyn yn sbardun "â llaw" o'r cyngor.
.tooltip('toggle')
Toglo cyngor offer elfen. Yn dychwelyd i'r galwr cyn i'r cyngor gael ei ddangos neu ei guddioshown.bs.tooltip
( hy cyn i'r hidden.bs.tooltip
digwyddiad ddigwydd). Ystyrir hyn yn sbardun "â llaw" o'r cyngor.
.tooltip('destroy')
Yn cuddio ac yn dinistrio cyngor offer elfen. Ni all awgrymiadau offer sy'n defnyddio dirprwyo (sy'n cael eu creu gan ddefnyddio'r opsiwnselector
) gael eu dinistrio'n unigol ar elfennau sbardun disgynnydd .
Math o Ddigwyddiad | Disgrifiad |
---|---|
cyngor.bs | Mae'r digwyddiad hwn yn tanio ar unwaith pan show elwir y dull enghraifft. |
cyngor.bs | Mae'r digwyddiad hwn yn cael ei danio pan fydd y cyngor wedi'i wneud yn weladwy i'r defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau). |
cyngor.cuddio.bs | Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hide dull enghraifft wedi'i alw. |
cyngor.bs.cudd | Mae'r digwyddiad hwn yn cael ei danio pan fydd y cyngor wedi gorffen cael ei guddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau). |
mewnosod.bs.tooltip | Mae'r digwyddiad hwn yn cael ei danio ar ôl y show.bs.tooltip digwyddiad pan fydd y templed cyngor wedi'i ychwanegu at y DOM. |
Ychwanegu troshaenau bach o gynnwys, fel y rhai ar yr iPad, at unrhyw elfen ar gyfer lletya gwybodaeth eilaidd.
Nid yw popovers y mae eu teitl a'u cynnwys o hyd sero byth yn cael eu harddangos.
Mae Popovers yn ei gwneud yn ofynnol i'r ategyn cyngor gael ei gynnwys yn eich fersiwn chi o Bootstrap.
Am resymau perfformiad, mae'r api data Tooltip a Popover yn optio i mewn, sy'n golygu bod yn rhaid i chi eu cychwyn eich hun .
Un ffordd o gychwyn pob popover ar dudalen fyddai eu dewis yn ôl eu data-toggle
priodoledd:
Wrth ddefnyddio popovers ar elfennau o fewn a .btn-group
neu .input-group
, neu ar elfennau sy'n gysylltiedig â thabl ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, <tfoot>
), bydd yn rhaid i chi nodi'r opsiwn container: 'body'
(wedi'i ddogfennu isod) i osgoi sgîl-effeithiau diangen (fel yr elfen yn tyfu'n ehangach a/ neu golli ei gorneli crwn pan fydd y popover yn cael ei sbarduno).
I ychwanegu popover at a disabled
neu .disabled
elfen, rhowch yr elfen y tu mewn i a <div>
a chymhwyso'r popover i hwnnw <div>
yn lle.
Weithiau rydych chi eisiau ychwanegu popover at hyperddolen sy'n lapio llinellau lluosog. Ymddygiad rhagosodedig yr ategyn popover yw ei ganoli'n llorweddol ac yn fertigol. Ychwanegwch white-space: nowrap;
at eich angorau i osgoi hyn.
Mae pedwar opsiwn ar gael: aliniad uchaf, dde, gwaelod a chwith.
Sed posuere consectetur est yn lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est yn lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est yn lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est yn lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Defnyddiwch y focus
sbardun i ddiystyru popovers ar y clic nesaf y mae'r defnyddiwr yn ei wneud.
Ar gyfer ymddygiad traws-borwr a thraws-lwyfan priodol, rhaid i chi ddefnyddio'r <a>
tag, nid y <button>
tag, a rhaid i chi hefyd gynnwys y role="button"
a'r tabindex
priodoleddau.
Galluogi popovers trwy JavaScript:
Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-
, fel yn data-animation=""
.
Enw | Math | Diofyn | Disgrifiad |
---|---|---|---|
animeiddiad | boolaidd | gwir | Cymhwyso trawsnewidiad pylu CSS i'r popover |
cynhwysydd | llinyn | ffug | ffug | Yn atodi'r popover i elfen benodol. Enghraifft: |
cynnwys | llinyn | swyddogaeth | '' | Gwerth cynnwys diofyn os Os rhoddir ffwythiant, fe'i gelwir gyda'i |
oedi | rhif | gwrthrych | 0 | Oedi wrth ddangos a chuddio'r popover (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: |
html | boolaidd | ffug | Mewnosod HTML yn y popover. Os yw'n ffug, text bydd dull jQuery yn cael 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 | dde | auto. Pan ddefnyddir swyddogaeth i benderfynu ar y lleoliad, fe'i gelwir gyda'r nod DOM popover fel ei ddadl gyntaf a'r elfen sbarduno nod DOM fel ei ail. Mae'r |
detholwr | llinyn | ffug | Os darperir dewisydd, bydd gwrthrychau popover yn cael eu dirprwyo i'r targedau penodedig. Yn ymarferol, defnyddir hwn i alluogi cynnwys HTML deinamig i ychwanegu popovers. Gweler hyn ac enghraifft llawn gwybodaeth . |
templed | llinyn | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Sylfaen HTML i'w ddefnyddio wrth greu'r popover. Bydd y popover's Bydd y popover's
Dylai'r elfen lapio allanol fod â'r |
teitl | llinyn | swyddogaeth | '' | Gwerth teitl diofyn os Os rhoddir ffwythiant, fe'i gelwir gyda'i |
sbardun | llinyn | 'cliciwch' | Sut mae popover yn cael ei sbarduno - cliciwch | hofran | ffocws | llaw. Efallai y byddwch yn pasio sbardunau lluosog; eu gwahanu â gofod. manual ni ellir ei gyfuno ag unrhyw sbardun arall. |
gwylfa | llinyn | gwrthrych | swyddogaeth | { detholwr: 'corff', padin: 0 } | Yn cadw'r popover o fewn ffiniau'r elfen hon. Enghraifft: Os rhoddir ffwythiant, fe'i gelwir gyda'r elfen sbarduno nod DOM fel ei unig ddadl. Mae'r |
Fel arall, gellir pennu opsiynau ar gyfer popovers unigol trwy ddefnyddio priodoleddau data, fel yr eglurir uchod.
$().popover(options)
Yn cychwyn popovers ar gyfer casgliad elfennau.
.popover('show')
Yn datgelu popover elfen. Yn dychwelyd i'r galwr cyn i'r popover gael ei ddangos (hy cyn i'r shown.bs.popover
digwyddiad ddigwydd). Mae hyn yn cael ei ystyried yn sbardun "â llaw" o'r popover. Nid yw popovers y mae eu teitl a'u cynnwys o hyd sero byth yn cael eu harddangos.
.popover('hide')
Yn cuddio popover elfen. Yn dychwelyd i'r galwr cyn i'r popover gael ei guddio (hy cyn i'r hidden.bs.popover
digwyddiad ddigwydd). Mae hyn yn cael ei ystyried yn sbardun "â llaw" o'r popover.
.popover('toggle')
Toglo popover elfen. Yn dychwelyd i'r galwr cyn i'r popover gael ei ddangos neu ei guddio (hy cyn i'r digwyddiad shown.bs.popover
neu'r hidden.bs.popover
digwyddiad ddigwydd). Mae hyn yn cael ei ystyried yn sbardun "â llaw" o'r popover.
.popover('destroy')
Yn cuddio ac yn dinistrio popover elfen. Ni all popovers sy'n defnyddio dirprwyo (sy'n cael eu creu gan ddefnyddio'r opsiwnselector
) gael eu dinistrio'n unigol ar elfennau sbardun disgynyddion .
Math o Ddigwyddiad | Disgrifiad |
---|---|
sioe.bs.popover | Mae'r digwyddiad hwn yn tanio ar unwaith pan show elwir y dull enghraifft. |
dangos.bs.popover | Mae'r digwyddiad hwn yn cael ei danio pan fydd y popover wedi'i wneud yn weladwy i'r defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau). |
cuddio.bs.popover | Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hide dull enghraifft wedi'i alw. |
cudd.bs.popover | Mae'r digwyddiad hwn yn cael ei danio pan fydd y popover wedi gorffen cael ei guddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau). |
mewnosod.bs.popover | Mae'r digwyddiad hwn yn cael ei danio ar ôl y show.bs.popover digwyddiad pan fydd y templed popover wedi'i ychwanegu at y DOM. |
Ychwanegu swyddogaeth diswyddo i bob neges rhybudd gyda'r ategyn hwn.
Wrth ddefnyddio .close
botwm, rhaid iddo fod yn blentyn cyntaf y .alert-dismissible
ac ni all unrhyw gynnwys testun ddod o'i flaen yn y marcio.
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.
Ychwanegwch data-dismiss="alert"
at eich botwm cau i roi swyddogaeth cau rhybudd yn awtomatig. Mae cau rhybudd yn ei dynnu o'r DOM.
Er mwyn i'ch rhybuddion ddefnyddio animeiddiad wrth gau, gwnewch yn siŵr bod y dosbarthiadau .fade
a'r .in
dosbarthiadau eisoes wedi'u cymhwyso iddynt.
$().alert()
Yn gwneud rhybudd yn gwrando am ddigwyddiadau clicio ar elfennau disgynnol sydd â'r data-dismiss="alert"
priodoledd. (Ddim yn angenrheidiol wrth ddefnyddio awto-gychwyn y data-api.)
$().alert('close')
Yn cau rhybudd trwy ei dynnu o'r DOM. Os yw'r .fade
a .in
dosbarthiadau yn bresennol ar yr elfen, bydd y rhybudd yn diflannu cyn iddo gael ei dynnu.
Mae ategyn rhybuddio Bootstrap yn datgelu rhai digwyddiadau i'w cysylltu â swyddogaethau rhybuddio.
Math o Ddigwyddiad | Disgrifiad |
---|---|
agos.bs.rhybudd | Mae'r digwyddiad hwn yn tanio ar unwaith pan close elwir y dull enghraifft. |
cau.bs.rhybudd | 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). |
Gwnewch fwy gyda botymau. Rheoli cyflwr botymau neu greu grwpiau o fotymau ar gyfer mwy o gydrannau fel bariau offer.
Mae Firefox yn parhau ar ffurf cyflyrau rheoli (anabledd a gwiriad) ar draws llwythi tudalennau . Ateb ar gyfer hyn yw ei ddefnyddio autocomplete="off"
. Gweler byg Mozilla #654072 .
Ychwanegu data-loading-text="Loading..."
i ddefnyddio cyflwr llwytho ar fotwm.
Mae'r nodwedd hon yn anghymeradwy ers v3.3.5 ac mae wedi'i dileu yn v4.
Er mwyn yr arddangosiad hwn, rydym yn defnyddio data-loading-text
a $().button('loading')
, ond nid dyna'r unig gyflwr y gallwch ei ddefnyddio. Gweler mwy am hyn isod yn y $().button(string)
ddogfennaeth .
Ychwanegu data-toggle="button"
at actifadu toggling ar un botwm.
.active
aaria-pressed="true"
Ar gyfer botymau sydd wedi'u toglo ymlaen llaw, rhaid i chi ychwanegu'r .active
dosbarth a'r aria-pressed="true"
priodoledd i button
chi'ch hun.
Ychwanegu data-toggle="buttons"
at .btn-group
flwch ticio sy'n cynnwys mewnbynnau radio i alluogi toggling yn eu harddulliau priodol.
.active
Ar gyfer opsiynau a ddewiswyd ymlaen llaw, rhaid i chi ychwanegu'r .active
dosbarth at y mewnbwn label
eich hun.
Os yw cyflwr gwirio botwm blwch ticio yn cael ei ddiweddaru heb danio click
digwyddiad ar y botwm (ee trwy <input type="reset">
neu drwy osod checked
priodwedd y mewnbwn), bydd angen i chi doglo'r .active
dosbarth ar y mewnbwn label
eich hun.
$().button('toggle')
Toglo cyflwr gwthio. Yn rhoi'r ymddangosiad i'r botwm ei fod wedi'i actifadu.
$().button('reset')
Yn ailosod cyflwr botwm - yn cyfnewid testun i destun gwreiddiol. Mae'r dull hwn yn asyncronig ac yn dychwelyd cyn i'r ailosod gael ei gwblhau mewn gwirionedd.
$().button(string)
Yn cyfnewid testun i unrhyw gyflwr testun a ddiffinnir gan ddata.
Ategyn hyblyg sy'n defnyddio llond llaw o ddosbarthiadau ar gyfer ymddygiad toglo hawdd.
Mae Collapse yn ei gwneud yn ofynnol i'r ategyn trawsnewid gael ei gynnwys yn eich fersiwn chi o Bootstrap.
Cliciwch y botymau isod i ddangos a chuddio elfen arall trwy newidiadau dosbarth:
.collapse
yn cuddio cynnwys.collapsing
yn cael ei gymhwyso yn ystod trawsnewidiadau.collapse.in
yn dangos cynnwysGallwch ddefnyddio dolen gyda'r href
priodoledd, neu botwm gyda'r data-target
priodoledd. Yn y ddau achos, data-toggle="collapse"
mae'n ofynnol.
Ymestyn yr ymddygiad cwympo rhagosodedig i greu acordion gyda chydran y panel.
Mae hefyd yn bosibl cyfnewid .panel-body
s ag .list-group
s.
Byddwch yn siwr i ychwanegu aria-expanded
at yr elfen reoli. Mae'r nodwedd hon yn diffinio'n benodol gyflwr presennol yr elfen sy'n cwympo i ddarllenwyr sgrin a thechnolegau cynorthwyol tebyg. Os yw'r elfen cwympadwy yn cael ei chau yn ddiofyn, dylai fod â gwerth o aria-expanded="false"
. Os ydych chi wedi gosod yr elfen cwympadwy i fod yn agored yn ddiofyn gan ddefnyddio'r in
dosbarth, gosodwch aria-expanded="true"
y rheolydd yn lle hynny. Bydd yr ategyn yn toglo'r nodwedd hon yn awtomatig yn seiliedig ar p'un a yw'r elfen cwympadwy wedi'i hagor neu ei chau ai peidio.
Yn ogystal, os yw'ch elfen reoli yn targedu un elfen gwympadwy - hy mae'r data-target
briodwedd yn pwyntio at id
ddetholwr - gallwch ychwanegu aria-controls
priodoledd ychwanegol at yr elfen reoli, sy'n cynnwys yr elfen sy'n id
cwympo. Mae darllenwyr sgrin modern a thechnolegau cynorthwyol tebyg yn defnyddio'r nodwedd hon i ddarparu llwybrau byr ychwanegol i ddefnyddwyr lywio'n uniongyrchol i'r elfen gwympadwy ei hun.
Mae'r ategyn cwympo yn defnyddio ychydig o ddosbarthiadau i drin y codi trwm:
.collapse
yn cuddio'r cynnwys.collapse.in
yn dangos y cynnwys.collapsing
yn cael ei ychwanegu pan fydd y trawsnewid yn dechrau, a'i ddileu pan fydd yn gorffenGellir dod o hyd i'r dosbarthiadau hyn yn component-animations.less
.
Ychwanegu data-toggle="collapse"
ac a data-target
at yr elfen i neilltuo rheolaeth yn awtomatig ar elfen cwympadwy. Mae'r data-target
priodoledd yn derbyn dewisydd CSS i gymhwyso'r cwymp iddo. Gwnewch yn siŵr eich bod chi'n ychwanegu'r dosbarth collapse
at 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.
Galluogi â llaw gyda:
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 darperir dewisydd, yna bydd yr holl elfennau cwympadwy o dan y rhiant penodedig yn cael eu cau pan ddangosir yr eitem hon y gellir ei dymchwel. (yn debyg i ymddygiad acordion traddodiadol - mae hyn yn dibynnu ar y panel dosbarth) |
togl | boolaidd | gwir | Toglo'r elfen cwympadwy ar alw |
.collapse(options)
Yn actifadu'ch cynnwys fel elfen y gellir ei dymchwel. Yn derbyn opsiwn dewisol object
.
.collapse('toggle')
Toglo elfen sy'n cwympo i'w dangos neu ei chuddio. Yn dychwelyd i'r galwr cyn i'r elfen gwympo gael ei dangos neu ei chuddio (hy cyn i'r digwyddiad shown.bs.collapse
neu'r hidden.bs.collapse
digwyddiad ddigwydd).
.collapse('show')
Yn dangos elfen sy'n cwympo. Yn dychwelyd i'r galwr cyn i'r elfen gwympo gael ei dangos (hy cyn i'r shown.bs.collapse
digwyddiad ddigwydd).
.collapse('hide')
Yn cuddio elfen sy'n cwympo. Yn dychwelyd i'r galwr cyn i'r elfen gwympo gael ei chuddio (hy cyn i'r hidden.bs.collapse
digwyddiad ddigwydd).
Mae dosbarth cwymp Bootstrap yn datgelu ychydig o ddigwyddiadau ar gyfer cysylltu â swyddogaeth cwympo.
Math o Ddigwyddiad | Disgrifiad |
---|---|
llewyg.bs | Mae'r digwyddiad hwn yn tanio ar unwaith pan show elwir y dull enghraifft. |
dangos.bs.cwymp | 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 gael eu cwblhau). |
cuddio.bs.cwymp | Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hide dull wedi'i alw. |
cudd.bs.cwymp | 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 gael eu cwblhau). |
Elfen sioe sleidiau ar gyfer beicio trwy elfennau, fel carwsél. Ni chefnogir carwsél nythu.
Yn gyffredinol, nid yw'r elfen carwsél yn cydymffurfio â safonau hygyrchedd. Os oes angen i chi gydymffurfio, ystyriwch opsiynau eraill ar gyfer cyflwyno'ch cynnwys.
Mae Bootstrap yn defnyddio CSS3 ar gyfer ei animeiddiadau yn unig, ond nid yw Internet Explorer 8 a 9 yn cefnogi'r priodweddau CSS angenrheidiol. Felly, nid oes unrhyw animeiddiadau trawsnewid sleidiau wrth ddefnyddio'r porwyr hyn. Rydym wedi penderfynu'n fwriadol i beidio â chynnwys wrthgefnau jQuery ar gyfer y trawsnewidiadau.
Mae .active
angen ychwanegu'r dosbarth at un o'r sleidiau. Fel arall, ni fydd y carwsél yn weladwy.
Nid oes angen y dosbarthiadau o reidrwydd ar gyfer y rheolaethau .glyphicon .glyphicon-chevron-left
. .glyphicon .glyphicon-chevron-right
Mae Bootstrap yn darparu .icon-prev
ac .icon-next
fel dewisiadau unicode plaen.
Ychwanegwch gapsiynau i'ch sleidiau yn hawdd gyda'r .carousel-caption
elfen o fewn unrhyw .item
. Gosodwch bron unrhyw HTML opsiynol yno a bydd yn cael ei alinio a'i fformatio'n awtomatig.
Mae angen defnyddio carwsél id
ar y cynhwysydd mwyaf allanol (y .carousel
) er mwyn i reolyddion carwsél weithio'n iawn. Wrth ychwanegu carwsél lluosog, neu wrth newid carwsél, gofalwch id
eich bod yn diweddaru'r rheolaethau perthnasol.
Defnyddio priodoleddau data i reoli lleoliad y carwsél yn hawdd. data-slide
yn derbyn yr allweddeiriau prev
neu next
, sy'n newid safle'r sleidiau o'i gymharu â'i safle presennol. Fel arall, defnyddiwch data-slide-to
i basio mynegai sleidiau crai i'r carwsél data-slide-to="2"
, sy'n symud lleoliad y sleidiau i fynegai penodol gan ddechrau gyda 0
.
Defnyddir y data-ride="carousel"
briodwedd i nodi carwsél fel animeiddiad sy'n dechrau ar lwyth tudalen. Ni ellir ei ddefnyddio ar y cyd â chychwyniad JavaScript penodol (diangen a diangen) o'r un carwsél.
Ffoniwch y carwsél â llaw gyda:
Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-
, fel yn data-interval=""
.
Enw | math | rhagosodedig | disgrifiad |
---|---|---|---|
cyfwng | rhif | 5000 | Faint o amser i oedi rhwng beicio eitem yn awtomatig. Os yw'n ffug, ni fydd carwsél yn beicio'n awtomatig. |
saib | llinyn | null | "hofran" | Os caiff ei osod "hover" , mae'n oedi seiclo'r carwsél ymlaen mouseenter ac yn ailddechrau seiclo'r carwsél ymlaen mouseleave . Os caiff ei osod i null , ni fydd hofran dros y carwsél yn ei oedi. |
lapio | boolaidd | gwir | A ddylai'r carwsél feicio'n barhaus neu gael stopiau caled. |
bysellfwrdd | boolaidd | gwir | A ddylai'r carwsél ymateb i ddigwyddiadau bysellfwrdd. |
.carousel(options)
Yn cychwyn y carwsél gydag opsiynau dewisol object
ac yn dechrau beicio trwy eitemau.
.carousel('cycle')
Beicio drwy'r eitemau carwsél o'r chwith i'r dde.
.carousel('pause')
Yn atal y carwsél rhag beicio trwy eitemau.
.carousel(number)
Yn beicio'r carwsél i ffrâm benodol (0 seiliedig, tebyg i arae).
.carousel('prev')
Cylchoedd i'r eitem flaenorol.
.carousel('next')
Beiciau i'r eitem nesaf.
Mae dosbarth carwsél Bootstrap yn datgelu dau ddigwyddiad ar gyfer cysylltu â swyddogaethau carwsél.
Mae gan y ddau ddigwyddiad yr eiddo ychwanegol a ganlyn:
direction
: Y cyfeiriad y mae'r carwsél yn llithro iddo (naill ai "left"
neu "right"
).relatedTarget
: Yr elfen DOM sy'n cael ei llithro i'w lle fel yr eitem weithredol.Mae pob digwyddiad carwsél yn cael ei danio at y carwsél ei hun (hy yn y <div class="carousel">
).
Math o Ddigwyddiad | Disgrifiad |
---|---|
sleid.bs.carwsél | Mae'r digwyddiad hwn yn tanio ar unwaith pan fydd y slide dull enghraifft yn cael ei ddefnyddio. |
sleid.bs.carousel | Mae'r digwyddiad hwn yn cael ei danio pan fydd y carwsél wedi cwblhau ei drawsnewidiad sleidiau. |
Mae'r ategyn affix yn toglo position: fixed;
ymlaen ac i ffwrdd, gan efelychu'r effaith a ddarganfuwyd gyda position: sticky;
. Mae'r is-llywio ar y dde yn arddangosiad byw o'r ategyn affix.
Defnyddiwch yr ategyn affix trwy briodoleddau data neu â llaw gyda'ch JavaScript eich hun. Yn y ddwy sefyllfa, rhaid i chi ddarparu CSS ar gyfer lleoliad a lled eich cynnwys gosodedig.
Nodyn: Peidiwch â defnyddio'r ategyn affix ar elfen sydd wedi'i chynnwys mewn elfen sydd wedi'i lleoli'n gymharol, fel colofn wedi'i thynnu neu ei gwthio, oherwydd byg rendro Safari .
Mae'r ategyn affix yn toglo rhwng tri dosbarth, pob un yn cynrychioli cyflwr penodol: .affix
, .affix-top
, a .affix-bottom
. Rhaid i chi ddarparu'r arddulliau, ac eithrio position: fixed;
ar .affix
, ar gyfer y dosbarthiadau hyn eich hun (yn annibynnol ar yr ategyn hwn) i drin y safleoedd gwirioneddol.
Dyma sut mae'r ategyn affix yn gweithio:
.affix-top
i ddangos bod yr elfen yn ei safle uchaf. Ar hyn o bryd nid oes angen lleoli CSS..affix
ailosod .affix-top
a gosod position: fixed;
(a ddarperir gan CSS Bootstrap)..affix
â .affix-bottom
. Gan fod gwrthbwyso yn ddewisol, mae gosod un yn gofyn ichi osod y CSS priodol. Yn yr achos hwn, ychwanegwch position: absolute;
pan fo angen. Mae'r ategyn yn defnyddio'r nodwedd data neu'r opsiwn JavaScript i benderfynu ble i leoli'r elfen oddi yno.Dilynwch y camau uchod i osod eich CSS ar gyfer y naill neu'r llall o'r opsiynau defnydd isod.
Er mwyn ychwanegu ymddygiad affix i unrhyw elfen yn hawdd, ychwanegwch data-spy="affix"
at yr elfen rydych chi am sbïo arni. Defnyddiwch wrthbwyso i ddiffinio pryd i newid pinio elfen.
Ffoniwch yr ategyn affix trwy JavaScript:
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 yn cael ei gymhwyso i'r cyfarwyddiadau uchaf a gwaelod. Er mwyn darparu gwrthbwyso unigryw, gwaelod a brig, rhowch wrthrych offset: { top: 10 } neu offset: { top: 10, bottom: 5 } . Defnyddiwch ffwythiant pan fydd angen i chi gyfrifo gwrthbwyso yn ddeinamig. |
targed | dewiswr | nôd | jQuery elfen | y window gwrthrych |
Yn pennu elfen darged yr affix. |
.affix(options)
Yn actifadu'ch cynnwys fel cynnwys wedi'i osod. Yn derbyn opsiwn dewisol object
.
.affix('checkPosition')
Yn ailgyfrifo cyflwr yr affix yn seiliedig ar ddimensiynau, safle a safle sgrolio'r elfennau perthnasol. Mae'r .affix
, .affix-top
, a .affix-bottom
dosbarthiadau yn cael eu hychwanegu at y cynnwys gosodedig neu ei dynnu ohono yn ôl y cyflwr newydd. Mae angen galw'r dull hwn pryd bynnag y bydd dimensiynau'r cynnwys wedi'i osod neu'r elfen darged yn cael ei newid, er mwyn sicrhau lleoliad cywir y cynnwys sydd wedi'i osod.
Mae ategyn gosod Bootstrap yn datgelu ychydig o ddigwyddiadau ar gyfer cysylltu â swyddogaeth affix.
Math o Ddigwyddiad | Disgrifiad |
---|---|
affix.bs.affix | Mae'r digwyddiad hwn yn tanio yn union cyn i'r elfen gael ei gosod. |
affix.bs | Mae'r digwyddiad hwn yn cael ei danio ar ôl i'r elfen gael ei gosod. |
affix-top.bs.affix | Mae'r digwyddiad hwn yn tanio yn union cyn i'r elfen gael ei gosod ar ben. |
affixed-top.bs | Mae'r digwyddiad hwn yn cael ei danio ar ôl i'r elfen gael ei gosod ar ben. |
affix-gwaelod.bs.affix | Mae'r digwyddiad hwn yn tanio yn union cyn i'r elfen gael ei gosod ar y gwaelod. |
affixed-gwaelod.bs | Mae'r digwyddiad hwn yn cael ei danio ar ôl i'r elfen gael ei gosod ar y gwaelod. |