JavaScript
Mu awọn paati Bootstrap wa si igbesi aye pẹlu awọn afikun aṣa jQuery ju mejila lọ. Ni irọrun ṣafikun gbogbo wọn, tabi ọkan nipasẹ ọkan.
Mu awọn paati Bootstrap wa si igbesi aye pẹlu awọn afikun aṣa jQuery ju mejila lọ. Ni irọrun ṣafikun gbogbo wọn, tabi ọkan nipasẹ ọkan.
Awọn afikun le wa ni ẹyọkan (lilo awọn *.js
faili kọọkan Bootstrap), tabi gbogbo wọn ni ẹẹkan (lilo bootstrap.js
tabi miniified bootstrap.min.js
).
Mejeeji bootstrap.js
ati bootstrap.min.js
ni gbogbo awọn afikun ninu faili kan. Fi ọkan nikan kun.
Diẹ ninu awọn afikun ati awọn paati CSS dale lori awọn afikun miiran. Ti o ba pẹlu awọn afikun ni ẹyọkan, rii daju lati ṣayẹwo fun awọn igbẹkẹle wọnyi ninu awọn docs. Tun ṣe akiyesi pe gbogbo awọn afikun da lori jQuery (eyi tumọ si jQuery gbọdọ wa pẹlu awọn faili itanna). Kan si wabower.json
lati rii iru awọn ẹya ti jQuery ni atilẹyin.
O le lo gbogbo awọn afikun Bootstrap nikan nipasẹ API isamisi laisi kikọ laini kan ti JavaScript. Eyi jẹ API kilasi akọkọ Bootstrap ati pe o yẹ ki o jẹ akiyesi akọkọ rẹ nigbati o nlo ohun itanna kan.
Iyẹn ti sọ, ni awọn ipo miiran o le jẹ iwunilori lati pa iṣẹ ṣiṣe yii. Nitoribẹẹ, a tun pese agbara lati mu awọn abuda data API kuro nipa ṣiṣiṣẹpọ gbogbo awọn iṣẹlẹ lori aaye ti o ni orukọ pẹlu data-api
. Eyi dabi eyi:
Ni omiiran, lati fojusi ohun itanna kan pato, kan ṣafikun orukọ ohun itanna bi aaye orukọ kan pẹlu aaye orukọ data-api bii eyi:
Maṣe lo awọn abuda data lati awọn afikun pupọ lori eroja kanna. Fun apẹẹrẹ, bọtini kan ko le mejeeji ni itọpa irinṣẹ ati yi modal kan pada. Lati ṣaṣeyọri eyi, lo nkan mimu.
A tun gbagbọ pe o yẹ ki o ni anfani lati lo gbogbo awọn afikun Bootstrap nikan nipasẹ JavaScript API. Gbogbo API ti gbogbo eniyan jẹ ẹyọkan, awọn ọna ẹwọn, ati da ikojọpọ ti a ṣiṣẹ lori pada.
Gbogbo awọn ọna yẹ ki o gba ohun aṣayan aṣayan, okun ti o fojusi ọna kan pato, tabi ohunkohun (eyiti o bẹrẹ ohun itanna kan pẹlu ihuwasi aiyipada):
Ohun itanna kọọkan tun ṣafihan olupilẹṣẹ aise lori ohun Constructor
-ini kan $.fn.popover.Constructor
:. Ti o ba fẹ lati gba apẹẹrẹ itanna kan pato, gba pada taara lati ẹya: $('[rel="popover"]').data('popover')
.
O le yi awọn eto aiyipada pada fun ohun itanna kan nipa yiyipada ohun itanna Constructor.DEFAULTS
naa:
Nigba miiran o jẹ dandan lati lo awọn afikun Bootstrap pẹlu awọn ilana UI miiran. Ni awọn ipo wọnyi, awọn ikọlu aaye orukọ le waye lẹẹkọọkan. Ti eyi ba ṣẹlẹ, o le pe .noConflict
ohun itanna ti o fẹ lati yi iye pada.
Bootstrap n pese awọn iṣẹlẹ aṣa fun ọpọlọpọ awọn iṣe alailẹgbẹ awọn afikun. Ni gbogbogbo, iwọnyi wa ni fọọmu ailopin ati ti o ti kọja - nibiti ailopin (fun apẹẹrẹ show
) ti jẹ okunfa ni ibẹrẹ iṣẹlẹ, ati fọọmu apakan apakan ti o kọja (fun apẹẹrẹ shown
) ti nfa lori ipari iṣẹ kan.
Bi ti 3.0.0, gbogbo awọn iṣẹlẹ Bootstrap jẹ orukọ.
Gbogbo awọn iṣẹlẹ ailopin pese preventDefault
iṣẹ ṣiṣe. Eyi n pese agbara lati da ipaniyan iṣe ṣaaju ki o to bẹrẹ.
Ẹya ti ọkọọkan awọn afikun jQuery Bootstrap ni a le wọle nipasẹ VERSION
ohun-ini ti olupilẹṣẹ ohun itanna naa. Fun apẹẹrẹ, fun ohun itanna ọpa:
Awọn afikun Bootstrap ko ṣubu sẹhin paapaa ni oore-ọfẹ nigbati JavaScript jẹ alaabo. Ti o ba bikita nipa iriri olumulo ninu ọran yii, lo <noscript>
lati ṣalaye ipo naa (ati bi o ṣe le tun JavaScript ṣiṣẹ) si awọn olumulo rẹ, ati/tabi ṣafikun awọn isubu aṣa tirẹ.
Bootstrap ko ṣe atilẹyin fun awọn ile-ikawe JavaScript ẹni-kẹta gẹgẹbi Afọwọṣe tabi jQuery UI. Laibikita .noConflict
ati awọn iṣẹlẹ ti a fun lorukọ, awọn iṣoro ibamu le wa ti o nilo lati ṣatunṣe funrararẹ.
Fun awọn ipa iyipada ti o rọrun, pẹlu transition.js
lẹẹkan lẹgbẹẹ awọn faili JS miiran. Ti o ba nlo akopọ (tabi miniified) bootstrap.js
, ko si iwulo lati ṣafikun eyi — o ti wa tẹlẹ.
Transition.js jẹ oluranlọwọ ipilẹ fun transitionEnd
awọn iṣẹlẹ bii emulator iyipada CSS kan. O jẹ lilo nipasẹ awọn afikun miiran lati ṣayẹwo fun atilẹyin iyipada CSS ati lati yẹ awọn iyipada ikele.
Awọn iyipada le jẹ alaabo agbaye ni lilo snippet JavaScript atẹle, eyiti o gbọdọ wa lẹhin transition.js
(tabi bootstrap.js
, bootstrap.min.js
bi ọran ti le jẹ) ti kojọpọ:
Modals ti wa ni ṣiṣan, ṣugbọn rọ, awọn itọsi ọrọ sisọ pẹlu iṣẹ ṣiṣe ti o kere julọ ti a beere ati awọn aṣiṣe ọlọgbọn.
Rii daju pe ki o ma ṣii modal nigba ti omiiran tun han. Fifihan modal ju ọkan lọ ni akoko kan nilo koodu aṣa.
Nigbagbogbo gbiyanju lati gbe koodu HTML modal kan si ipo oke-ipele ninu iwe rẹ lati yago fun awọn paati miiran ti o ni ipa lori irisi modal ati/tabi iṣẹ ṣiṣe.
Awọn ikilọ kan wa nipa lilo awọn modals lori awọn ẹrọ alagbeka. Wo awọn iwe atilẹyin ẹrọ aṣawakiri wa fun awọn alaye.
Nitori bi HTML5 ṣe n ṣalaye awọn itumọ-ọrọ rẹ, ẹda autofocus
HTML ko ni ipa ni awọn awoṣe Bootstrap. Lati ṣaṣeyọri ipa kanna, lo diẹ ninu JavaScript aṣa:
Modal ti a ṣe pẹlu akọsori, ara, ati ṣeto awọn iṣe ni ẹlẹsẹ.
Yi modal pada nipasẹ JavaScript nipa titẹ bọtini ni isalẹ. Yoo rọra si isalẹ ati ipare ni lati oke ti oju-iwe naa.
Rii daju lati ṣafikun role="dialog"
ati aria-labelledby="..."
, tọka akọle modal, si .modal
, ati role="document"
si .modal-dialog
funrararẹ.
Ni afikun, o le fun ni apejuwe ti ibaraẹnisọrọ modal rẹ pẹlu aria-describedby
lori .modal
.
Ifisinu awọn fidio YouTube ni awọn awoṣe nilo afikun JavaScript kii ṣe ni Bootstrap lati da ṣiṣiṣẹsẹhin duro laifọwọyi ati diẹ sii. Wo ifiweranṣẹ Stack Overflow ti o ṣe iranlọwọ fun alaye diẹ sii.
Modals ni awọn iwọn iyan meji, wa nipasẹ awọn kilasi modifier lati gbe sori faili .modal-dialog
.
Fun awọn awoṣe ti o han nirọrun kuku ju ipare sinu lati wo, yọ .fade
kilasi kuro lati isamisi modal rẹ.
Lati lo anfani ti eto akoj Bootstrap laarin modal kan, kan itẹ-ẹiyẹ .row
s laarin .modal-body
ati lẹhinna lo awọn kilasi eto akoj deede.
Ni opo kan ti awọn bọtini ti gbogbo awọn okunfa kanna modal, o kan pẹlu die-die o yatọ si awọn akoonu ti? Lo event.relatedTarget
ati awọn abuda HTMLdata-*
(o ṣee ṣe nipasẹ jQuery ) lati ṣe iyatọ awọn akoonu ti modal da lori bọtini wo ni o tẹ. Wo Awọn iwe aṣẹ Awọn iṣẹlẹ Modal fun awọn alaye lori relatedTarget
,
Ohun itanna modal yi akoonu ti o farapamọ pada lori ibeere, nipasẹ awọn abuda data tabi JavaScript. O tun ṣe afikun .modal-open
si <body>
lati bori ihuwasi yiyi lọ aiyipada ati ṣe ipilẹṣẹ kan .modal-backdrop
lati pese agbegbe tẹ kan fun yiyọ awọn awoṣe ti o han nigbati titẹ si ita modal.
Mu modal ṣiṣẹ laisi kikọ JavaScript. Ṣeto data-toggle="modal"
lori eroja oludari, bii bọtini kan, pẹlu kan data-target="#foo"
tabi href="#foo"
lati fojusi modal kan pato lati yi.
Pe modal pẹlu id myModal
pẹlu laini JavaScript kan:
Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-
, bi ninu data-backdrop=""
.
Oruko | iru | aiyipada | apejuwe |
---|---|---|---|
sile | boolian tabi okun'static' |
ooto | Pẹlu a modal-backdrop ano. Ni omiiran, pato static fun ẹhin ẹhin eyiti ko pa modal naa ni titẹ. |
keyboard | boolianu | ooto | Tilekun modal nigbati o ba tẹ bọtini ona abayo |
ifihan | boolianu | ooto | Ṣe afihan modal nigbati o bẹrẹ. |
latọna jijin | ona | eke | Aṣayan yii ti parẹ lati v3.3.0 ati pe o ti yọkuro ni v4. A ṣeduro dipo lilo iṣapẹẹrẹ ẹgbẹ-alabara tabi ilana abuda data, tabi pipe jQuery.load funrararẹ. Ti URL latọna jijin ba pese, akoonu yoo jẹ kojọpọ ni akoko kan nipasẹ ọna jQuery |
.modal(options)
Mu akoonu rẹ ṣiṣẹ bi modal. Gba awọn aṣayan iyan object
.
.modal('toggle')
Pẹlu ọwọ yipada modal kan. Pada si olupe ṣaaju ki modal ti han gangan tabi farapamọ (ie ṣaaju ki iṣẹlẹ shown.bs.modal
tabi hidden.bs.modal
iṣẹlẹ waye).
.modal('show')
Pẹlu ọwọ ṣii modal kan. Pada si olupe ṣaaju ki modal ti han gangan (ie ṣaaju ki shown.bs.modal
iṣẹlẹ naa to waye).
.modal('hide')
Pẹlu ọwọ hides a modal. Pada si olupe ṣaaju ki modal naa ti farapamọ gangan (ie ṣaaju ki hidden.bs.modal
iṣẹlẹ naa to waye).
.modal('handleUpdate')
Ṣe atunṣe ipo ipo modal lati koju ọpa lilọ kiri ni irú ọkan yẹ ki o han, eyiti yoo jẹ ki modal fo si apa osi.
Nikan nilo nigbati giga ti modal yipada lakoko ti o ṣii.
Kilasi modal Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe modal.
Gbogbo awọn iṣẹlẹ modal jẹ ina ni modal funrararẹ (ie ni <div class="modal">
).
Iṣẹlẹ Iru | Apejuwe |
---|---|
fihan.bs.modal | Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn show apẹẹrẹ ọna ti a npe ni. Ti o ba ṣẹlẹ nipasẹ titẹ kan, eroja ti o tẹ wa bi relatedTarget ohun-ini ti iṣẹlẹ naa. |
han.bs.modal | Iṣẹlẹ yii jẹ ina nigbati modal ti jẹ ki o han si olumulo (yoo duro fun awọn iyipada CSS lati pari). Ti o ba ṣẹlẹ nipasẹ titẹ kan, eroja ti o tẹ wa bi relatedTarget ohun-ini ti iṣẹlẹ naa. |
tọju.bs.modal | Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna hide apẹẹrẹ ti pe. |
farasin.bs.modal | Iṣẹlẹ yii jẹ ina nigbati modal naa ba ti pari fifipamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS lati pari). |
kojọpọ.bs.modal | Iṣẹlẹ yii jẹ ina nigbati modal ti kojọpọ akoonu nipa lilo remote aṣayan. |
Ṣafikun awọn akojọ aṣayan silẹ si ohunkohun pẹlu ohun itanna ti o rọrun yii, pẹlu navbar, awọn taabu, ati awọn oogun.
Nipasẹ awọn abuda data tabi JavaScript, ohun itanna sisọ silẹ yipada akoonu ti o farapamọ (awọn akojọ aṣayan silẹ) nipa yiyi .open
kilaasi lori ohun atokọ obi.
Lori awọn ẹrọ alagbeka, ṣiṣi silẹ silẹ kan ṣafikun .dropdown-backdrop
bii agbegbe tẹ ni kia kia fun pipade awọn akojọ aṣayan silẹ nigbati titẹ ni ita akojọ aṣayan, ibeere fun atilẹyin iOS to dara. Eyi tumọ si pe yi pada lati akojọ aṣayan silẹ ṣiṣi si akojọ aṣayan silẹ ti o yatọ nilo afikun tẹ ni kia kia lori alagbeka.
Akiyesi: Ẹya data-toggle="dropdown"
naa gbarale fun pipade awọn akojọ aṣayan silẹ ni ipele ohun elo, nitorinaa o jẹ imọran ti o dara lati lo nigbagbogbo.
Ṣafikun data-toggle="dropdown"
si ọna asopọ kan tabi bọtini lati yi jisilẹ silẹ.
Lati jẹ ki awọn URL wa titi pẹlu awọn bọtini ọna asopọ, lo data-target
abuda dipo href="#"
.
Pe awọn silẹ nipasẹ JavaScript:
data-toggle="dropdown"
si tun beereLaibikita boya o pe dropdown rẹ nipasẹ JavaScript tabi dipo lo data-api, data-toggle="dropdown"
nigbagbogbo nilo lati wa lori eroja okunfa dropdown.
Ko si
$().dropdown('toggle')
Yipada akojọ aṣayan-silẹ ti navbar ti a fun tabi lilọ kiri taabu.
Gbogbo dropdown iṣẹlẹ ti wa ni kuro lenu ise ni .dropdown-menu
's obi ano.
Gbogbo awọn iṣẹlẹ sisọ silẹ ni relatedTarget
ohun-ini kan, eyiti iye rẹ jẹ eroja oran toggling.
Iṣẹlẹ Iru | Apejuwe |
---|---|
fihan.bs.dropdown | Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn show apẹẹrẹ ọna ti a npe ni. |
han.bs.dropdown | Iṣẹlẹ yii jẹ ina nigbati sisọ silẹ ti jẹ ki o han si olumulo (yoo duro fun awọn iyipada CSS, lati pari). |
tọju.bs.dropdown | Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna apẹẹrẹ pamọ ti pe. |
farasin.bs.dropdown | Iṣẹlẹ yii jẹ ina nigbati sisọ silẹ ba ti pari fifipamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS, lati pari). |
Ohun itanna ScrollSpy jẹ fun mimu dojuiwọn awọn ibi-afẹde nav da lori ipo yi lọ. Yi lọ si agbegbe ni isalẹ navbar ki o wo iyipada kilasi ti nṣiṣe lọwọ. Awọn nkan isọ silẹ yoo jẹ afihan bi daradara.
Ad leggings keytar, brunch id art party dolor laala. Pitchfork yr enim lo-fi kí wọn tó ta qui. Tumblr oko-to-tabili awọn ẹtọ keke ohunkohun ti. Animu keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby siweta lomo Jean shorts, williamsburg hoodie minim qui o jasi ko ti gbọ ti wọn et cardigan Trust fund culpa biodiesel wes anderson aesthetic. Nihi tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork irungbọn. Freegan irungbọn aliqua cupidatat mcsweeney ká vero. Cupidatat mẹrin loko nisi, ea helvetica nulla carles. Tatuu cosby siweta ounje ikoledanu, mcsweeney ká quis ti kii freegan fainali. Lo-fi wes anderson +1 sartorial. Carles ti kii ṣe adaṣe darapupo quis gentrify. Brooklyn adipisicing ọnà ọti igbakeji keytar deserunt.
Occaecat commodo aliqua delectus. Fap iṣẹ ọti deserunt skateboard ea. Lomo keke awọn ẹtọ adipisicing banh mi, velit ea sunt next level locavore nikan-origin kofi in magna veniam. Giga aye id fainali, iwoyi o duro si ibikan consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim ojiṣẹ apo. cred ex in, alagbero delectus consectetur fanny pack ipad.
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 bulọọgi, culpa ojiṣẹ apo marfa ohunkohun ti delectus ounje ikoledanu. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats o jasi ko tii gbọ ti wọn consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat ṣaaju ki wọn to ta, Terry Richardson proident brunch nesciunt quis cosby siweta pariatur keffiyeh ut helvetica artisan. Cardigan iṣẹ ọti seitan readymade velit. VHS chambray laboris tempor veniam. Animu mollit minim commodo ullamco thundercats.
Awọn ọna asopọ Navbar gbọdọ ni awọn ibi-afẹde id ti o yanju. Fun apẹẹrẹ, <a href="#home">home</a>
gbọdọ ṣe deede si nkan kan ninu DOM bii <div id="home"></div>
.
:visible
kọjuAwọn eroja ibi-afẹde ti kii ṣe :visible
ni ibamu si jQuery ni yoo foju kọbikita ati pe awọn nkan nav ti o baamu wọn kii yoo ṣe afihan.
Laibikita ọna imuse, scrollspy nilo lilo position: relative;
lori eroja ti o ṣe amí lori. Ni ọpọlọpọ igba eyi ni <body>
. Nigbati o ba n lọ kiri lori awọn eroja miiran yatọ si <body>
, rii daju pe o height
ṣeto ati overflow-y: scroll;
lo.
Lati fi irọrun ṣafikun ihuwasi scrollspy si lilọ kiri oke rẹ, ṣafikun data-spy="scroll"
si ipin ti o fẹ ṣe amí lori (julọ julọ eyi yoo jẹ <body>
). Lẹhinna ṣafikun data-target
ẹda pẹlu ID tabi kilasi ti ẹya obi ti .nav
paati Bootstrap eyikeyi.
Lẹhin fifi kun position: relative;
ninu CSS rẹ, pe scrollspy nipasẹ JavaScript:
.scrollspy('refresh')
Nigbati o ba nlo scrollspy ni apapo pẹlu fifi kun tabi yiyọ awọn eroja kuro lati DOM, iwọ yoo nilo lati pe ọna isọdọtun bii bẹ:
Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-
, bi ninu data-offset=""
.
Oruko | iru | aiyipada | apejuwe |
---|---|---|---|
aiṣedeede | nọmba | 10 | Awọn piksẹli lati aiṣedeede lati oke nigbati o ṣe iṣiro ipo ti yi lọ. |
Iṣẹlẹ Iru | Apejuwe |
---|---|
mu ṣiṣẹ.bs.scrollspy | Iṣẹlẹ yii n ṣiṣẹ nigbakugba ti ohun kan ba muu ṣiṣẹ nipasẹ scrollspy. |
Ṣafikun iyara, iṣẹ ṣiṣe taabu ti o ni agbara si iyipada nipasẹ awọn pane ti akoonu agbegbe, paapaa nipasẹ awọn akojọ aṣayan silẹ. Awọn taabu itẹle ko ni atilẹyin.
Aise Denimu o jasi ko ti gbọ ti wọn Jean shorts Austin. Nesciunt tofu stumptown aliqua, Retiro synth titunto si wẹ. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum ipad. Seitan aliquip quis cardigan American aso, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
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.
Ohun itanna yii fa paati lilọ kiri tabbed lati ṣafikun awọn agbegbe tabbable.
Mu awọn taabu taabu ṣiṣẹ nipasẹ JavaScript (taabu kọọkan nilo lati muu ṣiṣẹ ni ẹyọkan):
O le mu awọn taabu kọọkan ṣiṣẹ ni awọn ọna pupọ:
O le mu taabu kan ṣiṣẹ tabi lilọ kiri egbogi laisi kikọ eyikeyi JavaScript nipa sisọ pato data-toggle="tab"
tabi data-toggle="pill"
lori nkan kan. Ṣafikun nav
ati nav-tabs
awọn kilasi si taabu yoo lo iselona taabuul
Bootstrap , lakoko ti o ṣafikun ati awọn kilasi yoo lo iselona pill .nav
nav-pills
Lati jẹ ki awọn taabu rẹ wọ inu, ṣafikun .fade
si ọkọọkan .tab-pane
. PAN taabu akọkọ gbọdọ tun ni .in
lati jẹ ki akoonu ibẹrẹ han.
$().tab
Mu eroja taabu ṣiṣẹ ati eiyan akoonu. Taabu yẹ ki o ni boya a data-target
tabi href
ifọkansi oju ipade apoti kan ninu DOM. Ninu awọn apẹẹrẹ ti o wa loke, awọn taabu jẹ awọn <a>
s pẹlu awọn abuda data-toggle="tab"
.
.tab('show')
Yan taabu ti a fun ati ṣafihan akoonu ti o somọ. Eyikeyi taabu miiran ti o ti yan tẹlẹ di aiyan ati akoonu ti o somọ ti wa ni pamọ. Pada si olupe ṣaaju ki iwe taabu ti han gangan (ie ṣaaju ki shown.bs.tab
iṣẹlẹ naa to waye).
Nigbati o ba nfihan taabu tuntun, awọn iṣẹlẹ ina ni ilana atẹle:
hide.bs.tab
(lori taabu lọwọ lọwọlọwọ)show.bs.tab
(lori taabu ti yoo han)hidden.bs.tab
(lori taabu ti nṣiṣe lọwọ iṣaaju, ọkan kanna fun hide.bs.tab
iṣẹlẹ naa)shown.bs.tab
(lori taabu ti o ṣẹṣẹ n ṣiṣẹ tuntun, ọkan kanna fun show.bs.tab
iṣẹlẹ naa)Ti ko ba si taabu ti ṣiṣẹ tẹlẹ, lẹhinna hide.bs.tab
ati awọn hidden.bs.tab
iṣẹlẹ kii yoo jẹ ina.
Iṣẹlẹ Iru | Apejuwe |
---|---|
fihan.bs.taabu | Iṣẹlẹ yii ina lori ifihan taabu, ṣugbọn ṣaaju ki o to han taabu tuntun. Lo event.target ati event.relatedTarget lati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) ni atele. |
han.bs.taabu | Iṣẹlẹ yi ina lori ifihan taabu lẹhin ti a ti fi taabu kan han. Lo event.target ati event.relatedTarget lati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) ni atele. |
tọju.bs.taabu | Iṣẹlẹ yii n ṣiṣẹ nigbati taabu tuntun yoo han (ati nitorinaa taabu ti nṣiṣe lọwọ tẹlẹ ni lati farapamọ). Lo event.target ati event.relatedTarget lati fojusi taabu ti nṣiṣe lọwọ lọwọlọwọ ati taabu tuntun lai-lati-ṣiṣẹ, ni atele. |
farasin.bs.taabu | Iṣẹlẹ yii n tan lẹhin ti taabu tuntun ti han (ati nitorinaa taabu ti nṣiṣe lọwọ iṣaaju ti farapamọ). Lo event.target ati event.relatedTarget lati fojusi taabu ti nṣiṣe lọwọ iṣaaju ati taabu ti nṣiṣe lọwọ tuntun, lẹsẹsẹ. |
Atilẹyin nipasẹ ohun itanna jQuery.tipsy ti o dara julọ ti a kọ nipasẹ Jason Frame; Awọn imọran irinṣẹ jẹ ẹya imudojuiwọn, eyiti ko gbẹkẹle awọn aworan, lo CSS3 fun awọn ohun idanilaraya, ati awọn abuda data fun ibi ipamọ akọle agbegbe.
Awọn imọran irinṣẹ pẹlu awọn akọle gigun-odo ko han rara.
Raba lori awọn ọna asopọ ni isalẹ lati wo awọn imọran irinṣẹ:
Awọn sokoto to nipọn keffiyeh o ṣee ṣe ko tii gbọ ti wọn. Photo agọ irungbọn aise Denimu letterpress ajewebe ojiṣẹ apo stumptown. Farm-to-tabili seitan, mcsweeney's fixie alagbero quinoa 8-bit American aṣọ ni Terry Richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, mẹrin loko mcsweeney ká cleanse vegan chambray. A gan ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw Denimu nikan-Oti kofi gbogun ti.
Awọn aṣayan mẹrin wa: oke, ọtun, isalẹ, ati ti osi.
Fun awọn idi iṣẹ ṣiṣe, Ohun elo irinṣẹ ati data-apis Agbejade ti wa ni ijade, afipamo pe o gbọdọ pilẹ wọn funrararẹ .
Ọna kan lati bẹrẹ gbogbo awọn imọran irinṣẹ lori oju-iwe kan yoo jẹ lati yan wọn nipasẹ data-toggle
abuda wọn:
Ohun itanna ohun elo n ṣe agbejade akoonu ati isamisi lori ibeere, ati nipasẹ awọn aaye aiyipada awọn itọnisọna irinṣẹ lẹhin ipin okunfa wọn.
Ṣe okunfa ohun elo irinṣẹ nipasẹ JavaScript:
Aami ti a beere fun itọsi irinṣẹ jẹ abuda kan data
ati title
lori ẹya HTML ti o fẹ lati ni itọpa irinṣẹ kan. Aami ti ipilẹṣẹ ti ọpa irinṣẹ jẹ kuku rọrun, botilẹjẹpe o nilo ipo kan (nipasẹ aiyipada, ṣeto si top
nipasẹ ohun itanna).
Nigba miiran o fẹ lati ṣafikun itọsi irinṣẹ si hyperlink ti o murasilẹ awọn laini pupọ. Ihuwasi aiyipada ti ohun itanna ọpa ni lati aarin rẹ ni ita ati ni inaro. Ṣafikun white-space: nowrap;
si awọn ìdákọró rẹ lati yago fun eyi.
Nigbati o ba nlo awọn itọsona irinṣẹ lori awọn eroja laarin a .btn-group
tabi ẹya .input-group
, tabi lori awọn eroja ti o ni ibatan tabili ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), iwọ yoo ni lati pato aṣayan container: 'body'
(ti o wa ni isalẹ) lati yago fun awọn ipa ẹgbẹ ti aifẹ (gẹgẹbi nkan ti o dagba sii ati/ tabi sisọnu awọn igun rẹ ti o yika nigbati ọpa irinṣẹ ba ti ṣiṣẹ).
Fun awọn olumulo ti n lọ kiri pẹlu bọtini itẹwe kan, ati ni pato awọn olumulo ti awọn imọ-ẹrọ iranlọwọ, o yẹ ki o ṣafikun awọn itọsona irinṣẹ nikan si awọn eroja aifọwọyi-bọtini gẹgẹbi awọn ọna asopọ, awọn idari fọọmu, tabi eyikeyi lainidii ano pẹlu abuda kan tabindex="0"
.
Lati ṣafikun itọsi irinṣẹ kan disabled
tabi .disabled
eroja, fi nkan naa sinu inu kan <div>
ki o lo itọsi irinṣẹ si iyẹn <div>
dipo.
Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-
, bi ninu data-animation=""
.
Oruko | Iru | Aiyipada | Apejuwe |
---|---|---|---|
iwara | boolianu | ooto | Waye iyipada ipare CSS kan si itọpa irinṣẹ |
eiyan | okun | eke | eke | Fi ohun elo irinṣẹ si eroja kan pato. Apeere |
idaduro | nọmba | nkan | 0 | Idaduro fififihan ati fifipamọ awọn itọpa irinṣẹ (ms) - ko kan si iru okunfa afọwọṣe Ti nọmba kan ba pese, idaduro jẹ lilo si tọju/fihan mejeeji Eto nkan jẹ: |
html | boolianu | eke | Fi HTML sinu itọnisọna irinṣẹ. Ti o ba jẹ eke, text ọna jQuery yoo ṣee lo lati fi akoonu sii sinu DOM. Lo ọrọ ti o ba ni aniyan nipa awọn ikọlu XSS. |
ipo | okun | iṣẹ | 'oke' | Bawo ni lati ipo awọn Tooltip - oke | isalẹ | osi | ọtun | auto. Nigbati a ba lo iṣẹ kan lati pinnu ipo, o pe pẹlu ọpa DOM node bi ariyanjiyan akọkọ rẹ ati node DOM ti o nfa bi keji rẹ. A |
yiyan | okun | eke | Ti o ba pese yiyan, awọn ohun elo irinṣẹ yoo jẹ aṣoju si awọn ibi-afẹde pàtó. Ni iṣe, eyi ni a lo lati jẹ ki akoonu HTML ti o ni agbara lati ni awọn itọsi irinṣẹ kun. Wo eyi ati apẹẹrẹ alaye . |
awoṣe | okun | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
HTML mimọ lati lo nigba ṣiṣẹda ọpa irinṣẹ. Awọn itọsi irinṣẹ
Awọn outermost wrapper ano yẹ ki o ni awọn |
akọle | okun | iṣẹ | '' | Iwọn akọle aiyipada ti Ti a ba fun iṣẹ kan, yoo pe pẹlu |
okunfa | okun | 'fojusi lori' | Bawo ni itọka irinṣẹ ti wa ni jeki - tẹ | rababa | idojukọ | Afowoyi. O le ṣe ọpọlọpọ awọn okunfa; ya wọn pẹlu aaye kan. manual ko le wa ni idapo pelu eyikeyi miiran okunfa. |
wiwo | okun | ohun | iṣẹ | {oluyan: 'ara', padding: 0} | Ntọju ọpa irinṣẹ laarin awọn aala ti nkan yii. Apeere: Ti a ba fun iṣẹ kan, o pe pẹlu node DOM ti o nfa bi ariyanjiyan rẹ nikan. A |
Awọn aṣayan fun awọn itọnisọna irinṣẹ kọọkan le jẹ iyasọtọ nipasẹ lilo awọn abuda data, bi a ti salaye loke.
$().tooltip(options)
So olutọpa ohun elo kan si ikojọpọ eroja.
.tooltip('show')
Ṣe afihan ohun elo irinṣẹ eroja kan. Pada si olupe ṣaaju ki ohun elo irinṣẹ ti han (ie ṣaaju ki shown.bs.tooltip
iṣẹlẹ naa to waye). Eyi ni a ka si “afọwọṣe” ti nfa ohun elo irinṣẹ. Awọn imọran irinṣẹ pẹlu awọn akọle gigun-odo ko han rara.
.tooltip('hide')
Ìbòmọlẹ ohun ano ká irinṣẹ. Pada si olupe ṣaaju ki ohun elo irinṣẹ ti wa ni ipamọ gangan (ie ṣaaju ki hidden.bs.tooltip
iṣẹlẹ naa to waye). Eyi ni a ka si “afọwọṣe” ti nfa ohun elo irinṣẹ.
.tooltip('toggle')
Yipada ohun elo itọsi irinṣẹ. Pada si olupe ṣaaju ki ohun elo irinṣẹ to ti han tabi farapamọ (ie ṣaaju ki iṣẹlẹ shown.bs.tooltip
tabi hidden.bs.tooltip
iṣẹlẹ to waye). Eyi ni a ka si “afọwọṣe” ti nfa ohun elo irinṣẹ.
.tooltip('destroy')
Hides ati ki o run ohun ano ká irinṣẹ. Awọn imọran irinṣẹ ti o lo aṣoju (eyiti a ṣẹda nipa lilo aṣayan ) selector
ko le ṣe iparun ni ẹyọkan lori awọn eroja ti o nfa ọmọ.
Iṣẹlẹ Iru | Apejuwe |
---|---|
show.bs.tooltip | Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn show apẹẹrẹ ọna ti a npe ni. |
han.bs.tooltip | Iṣẹlẹ yii jẹ ina nigba ti ohun elo irinṣẹ ti han si olumulo (yoo duro fun awọn iyipada CSS lati pari). |
tọju.bs.tooltip | Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna hide apẹẹrẹ ti pe. |
farasin.bs.tooltip | Iṣẹlẹ yii jẹ ina nigbati ohun elo irinṣẹ ba ti pari fifipamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS lati pari). |
ti a fi sii.bs.tooltip | Iṣẹlẹ yii jẹ ina lẹhin show.bs.tooltip iṣẹlẹ naa nigbati awoṣe ọpa irinṣẹ ti ṣafikun si DOM. |
Ṣafikun awọn agbekọja kekere ti akoonu, bii awọn ti o wa lori iPad, si eyikeyi ipin fun alaye Atẹle ile.
Awọn agbejade ti akọle ati akoonu mejeeji jẹ gigun odo ko han rara.
Popovers nilo ohun itanna irinṣẹ lati wa ninu ẹya Bootstrap rẹ.
Fun awọn idi iṣẹ ṣiṣe, Ohun elo irinṣẹ ati data-apis Agbejade jẹ ijade, itumope o gbọdọ pilẹ wọn funrararẹ .
Ọna kan lati bẹrẹ gbogbo awọn agbejade lori oju-iwe kan yoo jẹ lati yan wọn nipasẹ data-toggle
ẹda wọn:
Nigbati o ba nlo popovers lori awọn eroja laarin a .btn-group
tabi ẹya .input-group
, tabi lori awọn eroja ti o ni ibatan tabili ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), iwọ yoo ni lati pato aṣayan container: 'body'
(ti o wa ni isalẹ) lati yago fun awọn ipa ẹgbẹ ti aifẹ (gẹgẹbi nkan ti o dagba sii ati/ tabi padanu awọn igun rẹ ti o yika nigbati popover ti wa ni okunfa).
Lati ṣafikun agbejade kan si ipin kan, disabled
fi .disabled
nkan naa sinu inu kan <div>
ki o lo popover si iyẹn <div>
dipo.
Nigba miiran o fẹ lati ṣafikun agbejade kan si hyperlink ti o murasilẹ awọn laini pupọ. Iwa aiyipada ti ohun itanna agbejade ni lati aarin rẹ ni ita ati ni inaro. Ṣafikun white-space: nowrap;
si awọn ìdákọró rẹ lati yago fun eyi.
Awọn aṣayan mẹrin wa: oke, ọtun, isalẹ, ati ti osi.
Sed posuere consectetur est ni lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est ni lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est ni lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est ni lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Lo focus
okunfa lati yọ awọn popovers kuro ni titẹ atẹle ti olumulo ṣe.
Fun aṣawakiri agbelebu ti o tọ ati ihuwasi Syeed, o gbọdọ lo <a>
tag, kii ṣe tag <button>
, ati pe o tun gbọdọ pẹlu role="button"
ati awọn tabindex
abuda.
Mu awọn agbejade ṣiṣẹ nipasẹ JavaScript:
Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-
, bi ninu data-animation=""
.
Oruko | Iru | Aiyipada | Apejuwe |
---|---|---|---|
iwara | boolianu | ooto | Waye iyipada ipare CSS kan si agbejade |
eiyan | okun | eke | eke | Ṣafikun popover si nkan kan pato. Apeere |
akoonu | okun | iṣẹ | '' | Aiyipada akoonu iye ti o ba ti Ti iṣẹ kan ba fun, yoo pe pẹlu |
idaduro | nọmba | nkan | 0 | Idaduro iṣafihan ati fifipamo popover (ms) - ko kan si iru okunfa afọwọṣe Ti nọmba kan ba pese, idaduro jẹ lilo si tọju/fihan mejeeji Eto nkan jẹ: |
html | boolianu | eke | Fi HTML sinu agbejade. Ti o ba jẹ eke, text ọna jQuery yoo ṣee lo lati fi akoonu sii sinu DOM. Lo ọrọ ti o ba ni aniyan nipa awọn ikọlu XSS. |
ipo | okun | iṣẹ | 'ọtun' | Bawo ni lati ipo awọn popover - oke | isalẹ | osi | ọtun | auto. Nigbati a ba lo iṣẹ kan lati pinnu ipo, o pe pẹlu agbejade DOM agbejade bi ariyanjiyan akọkọ rẹ ati node DOM ti o nfa bi keji rẹ. A |
yiyan | okun | eke | Ti o ba ti pese yiyan, awọn ohun agbejade yoo jẹ aṣoju si awọn ibi-afẹde ti a sọ. Ni iṣe, eyi ni a lo lati mu akoonu HTML ti o ni agbara lati ni afikun awọn agbejade. Wo eyi ati apẹẹrẹ alaye . |
awoṣe | okun | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
HTML mimọ lati lo nigba ṣiṣẹda popover. Awọn popover's Awọn popover's
Awọn outermost wrapper ano yẹ ki o ni awọn |
akọle | okun | iṣẹ | '' | Iwọn akọle aiyipada ti Ti iṣẹ kan ba fun, yoo pe pẹlu |
okunfa | okun | 'tẹ' | Bawo ni popover ti wa ni jeki - tẹ | rababa | idojukọ | Afowoyi. O le ṣe ọpọlọpọ awọn okunfa; ya wọn pẹlu aaye kan. manual ko le wa ni idapo pelu eyikeyi miiran okunfa. |
wiwo | okun | ohun | iṣẹ | {oluyan: 'ara', padding: 0} | Ntọju popover laarin awọn aala ti yi ano. Apeere: Ti a ba fun iṣẹ kan, o pe pẹlu node DOM ti o nfa bi ariyanjiyan rẹ nikan. A |
Awọn aṣayan fun awọn agbejade kọọkan le jẹ iyasọtọ nipasẹ lilo awọn abuda data, bi a ti salaye loke.
$().popover(options)
Initializes popovers fun ohun akojọpọ eroja.
.popover('show')
Ṣe afihan agbejade ano kan. Pada si olupe ṣaaju ki agbejade ti han gangan (ie ṣaaju ki shown.bs.popover
iṣẹlẹ naa to waye). Eyi ni a ka si “afọwọṣe” ti nfa popover. Awọn agbejade ti akọle ati akoonu mejeeji jẹ gigun odo ko han rara.
.popover('hide')
Ìbòmọlẹ ohun ano ká popover. Pada si olupe ṣaaju ki agbejade ti farapamọ gangan (ie ṣaaju ki hidden.bs.popover
iṣẹlẹ naa to waye). Eyi ni a ka si “afọwọṣe” ti nfa popover.
.popover('toggle')
Yipada ohun ano ká popover. Pada si olupe ṣaaju ki agbejade ti han gangan tabi farapamọ (ie ṣaaju ki iṣẹlẹ shown.bs.popover
tabi hidden.bs.popover
iṣẹlẹ to waye). Eyi ni a ka si “afọwọṣe” ti nfa popover.
.popover('destroy')
Hides ati ki o run ohun ano ká popover. Popovers ti o lo aṣoju (eyi ti a ṣẹda nipa lilo aṣayan ) selector
ko le ṣe iparun ni ẹyọkan lori awọn eroja ti o nfa ọmọ.
Iṣẹlẹ Iru | Apejuwe |
---|---|
fihan.bs.popover | Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn show apẹẹrẹ ọna ti a npe ni. |
han.bs.popover | Iṣẹlẹ yii jẹ ina nigbati popover ti jẹ ki o han si olumulo (yoo duro fun awọn iyipada CSS lati pari). |
tọju.bs.popover | Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna hide apẹẹrẹ ti pe. |
farasin.bs.popover | Iṣẹlẹ yii jẹ ina nigbati agbejade ba ti pari fifipamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS lati pari). |
ti a fi sii.bs.popover | Iṣẹlẹ yii jẹ ina lẹhin show.bs.popover iṣẹlẹ naa nigbati a ti ṣafikun awoṣe popover si DOM. |
Ṣafikun iṣẹ idasile si gbogbo awọn ifiranṣẹ itaniji pẹlu ohun itanna yii.
Nigbati o ba nlo .close
bọtini kan, o gbọdọ jẹ ọmọ akọkọ ti .alert-dismissible
ko si si akoonu ọrọ ti o le wa niwaju rẹ ni isamisi.
Yi eyi ati iyẹn pada ki o tun gbiyanju lẹẹkansi. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Kan ṣafikun data-dismiss="alert"
si bọtini isunmọ rẹ lati funni ni iṣẹ ṣiṣe isunmọ titaniji laifọwọyi. Pipade titaniji yoo yọ kuro lati DOM.
Lati jẹ ki awọn titaniji rẹ lo iwara nigba pipade, rii daju pe wọn ni .fade
ati .in
awọn kilasi ti a ti lo tẹlẹ si wọn.
$().alert()
Mu ki o gbọ titaniji fun awọn iṣẹlẹ tẹ lori awọn eroja ti o ni data-dismiss="alert"
ẹda. (Ko ṣe pataki nigba lilo ipilẹṣẹ-afọwọṣe data-api.)
$().alert('close')
Tititaniji pa nipa yiyọ kuro lati DOM. Ti awọn kilasi .fade
ati .in
awọn kilasi ba wa lori eroja, itaniji yoo parẹ ṣaaju ki o to yọkuro.
Ohun itanna gbigbọn Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe titaniji.
Iṣẹlẹ Iru | Apejuwe |
---|---|
sunmo.bs.titaniji | Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn close apẹẹrẹ ọna ti a npe ni. |
pipade.bs.titaniji | Iṣẹlẹ yii jẹ ina nigbati itaniji ti wa ni pipade (yoo duro fun awọn iyipada CSS lati pari). |
Ṣe diẹ sii pẹlu awọn bọtini. Awọn ipinlẹ bọtini iṣakoso tabi ṣẹda awọn ẹgbẹ ti awọn bọtini fun awọn paati diẹ sii bi awọn ọpa irinṣẹ.
Firefox n tẹsiwaju awọn ipinlẹ iṣakoso fọọmu (alaabo ati ṣayẹwo) kọja awọn ẹru oju-iwe . Ilana fun eyi ni lati lo autocomplete="off"
. Wo kokoro Mozilla #654072 .
Fikun -un data-loading-text="Loading..."
lati lo ipo ikojọpọ lori bọtini kan.
Ẹya ara ẹrọ yii ti wa ni idinku lati v3.3.5 ati pe o ti yọkuro ni v4.
Fun nitori iṣafihan yii, a nlo data-loading-text
ati $().button('loading')
, ṣugbọn iyẹn kii ṣe ipinlẹ nikan ti o le lo. Wo diẹ sii lori eyi ni isalẹ ninu iwe- $().button(string)
ipamọ .
Fikun -un data-toggle="button"
lati mu yiyi ṣiṣẹ lori bọtini ẹyọkan.
.active
atiaria-pressed="true"
Fun awọn bọtini ti a ti yipada tẹlẹ, o gbọdọ ṣafikun .active
kilasi ati aria-pressed="true"
ẹda si button
ararẹ.
Ṣafikun data-toggle="buttons"
si .btn-group
apoti ayẹwo tabi awọn igbewọle redio lati jẹ ki yiyi pada ni awọn aṣa ara wọn.
.active
Fun awọn aṣayan ti a ti yan tẹlẹ, o gbọdọ ṣafikun .active
kilasi naa si ti kikọ sii label
funrararẹ.
Ti ipo ti a ṣayẹwo ti bọtini apoti ti ni imudojuiwọn laisi fifi click
iṣẹlẹ kan han lori bọtini (fun apẹẹrẹ nipasẹ <input type="reset">
tabi nipasẹ eto checked
ohun-ini ti titẹ sii), iwọ yoo nilo lati .active
yi kilasi naa pada lori titẹ sii label
funrararẹ.
$().button('toggle')
Toggles titari ipinle. Yoo fun bọtini naa hihan ti o ti muu ṣiṣẹ.
$().button('reset')
Tun ipo bọtini atunto - yi ọrọ pada si ọrọ atilẹba. Ọna yii jẹ asynchronous ati awọn ipadabọ ṣaaju ki atunto ti pari nitootọ.
$().button(string)
Yi ọrọ pada si eyikeyi data asọye ipo ọrọ.
Ohun itanna to rọ ti o lo iwonba awọn kilasi fun ihuwasi yilọ irọrun.
Collapse nbeere itanna awọn iyipada lati wa ninu ẹya Bootstrap rẹ.
Tẹ awọn bọtini ni isalẹ lati ṣafihan ati tọju nkan miiran nipasẹ awọn ayipada kilasi:
.collapse
hides akoonu.collapsing
ti lo lakoko awọn iyipada.collapse.in
fihan akoonuO le lo ọna asopọ kan pẹlu href
abuda, tabi bọtini kan pẹlu data-target
abuda. Ni awọn ọran mejeeji, o data-toggle="collapse"
nilo.
Faagun ihuwasi isubu aiyipada lati ṣẹda accordion pẹlu paati nronu.
O tun ṣee ṣe lati paarọ .panel-body
s pẹlu .list-group
s.
Rii daju lati ṣafikun aria-expanded
si ipin iṣakoso. Ẹya-ara yii ṣe alaye ni gbangba ipo lọwọlọwọ ti eroja ti o le ṣagbe si awọn oluka iboju ati awọn imọ-ẹrọ iranlọwọ ti o jọra. Ti nkan ti o le kojọpọ ba wa ni pipade nipasẹ aiyipada, o yẹ ki o ni iye kan ti aria-expanded="false"
. Ti o ba ti ṣeto eroja ikojọpọ lati ṣii nipasẹ aiyipada nipa lilo in
kilasi, ṣetoaria-expanded="true"
lori iṣakoso dipo. Ohun itanna naa yoo yi abuda yii pada laifọwọyi da lori boya tabi ko ti ṣii ohun elo ikojọpọ tabi tiipa.
Ni afikun, ti abala iṣakoso rẹ ba n fojusi ohun elo ikojọpọ kan ṣoṣo - ie data-target
abuda naa n tọka si id
oluyan - o le ṣafikun ẹya afikun aria-controls
si ipin iṣakoso, ti o ni nkan id
ti o le kọlu. Awọn oluka iboju ode oni ati awọn imọ-ẹrọ iranlọwọ ti o jọra ṣe lilo abuda yii lati pese awọn olumulo pẹlu awọn ọna abuja ni afikun lati lilö kiri taara si nkan ti o le kọlu funrararẹ.
Ohun itanna idapọmọra nlo awọn kilasi diẹ lati mu gbigbe gbigbe ti o wuwo naa:
.collapse
hides awọn akoonu.collapse.in
fihan akoonu.collapsing
ti wa ni afikun nigbati awọn orilede bẹrẹ, ati kuro nigbati o ba pariAwọn kilasi wọnyi le wa ni component-animations.less
.
Kan ṣafikun data-toggle="collapse"
ati kan data-target
si eroja lati fi iṣakoso laifọwọyi ti nkan kan ti o le bajẹ. Ẹya naa data-target
gba oluyan CSS kan lati lo iṣubu si. Rii daju lati ṣafikun kilasi collapse
naa si nkan ti o le ṣubu. Ti o ba fẹ ki o ṣii aiyipada, ṣafikun afikun kilasi in
.
Lati ṣafikun iṣakoso ẹgbẹ bi accordion si iṣakoso ikojọpọ, ṣafikun abuda data naa data-parent="#selector"
. Tọkasi demo lati wo eyi ni iṣe.
Mu ṣiṣẹ pẹlu ọwọ pẹlu:
Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-
, bi ninu data-parent=""
.
Oruko | iru | aiyipada | apejuwe |
---|---|---|---|
obi | yiyan | eke | Ti o ba ti pese yiyan, lẹhinna gbogbo awọn eroja ti o le kojọpọ labẹ obi ti a ti sọ ni yoo wa ni pipade nigbati ohun kan ti o le kọlu ba han. (iru si iwa accordion ti aṣa - eyi da lori panel kilasi) |
yipada | boolianu | ooto | Yipada eroja ti o le kolu lori ẹbẹ |
.collapse(options)
Mu akoonu rẹ ṣiṣẹ bi eroja ti o le kolu. Gba awọn aṣayan iyan object
.
.collapse('toggle')
Yipada eroja ti o le kolu lati ṣafihan tabi pamọ. Pada si olupe ṣaaju ki nkan ti o le kọlu ti han tabi farapamọ gangan (ie ṣaaju ki iṣẹlẹ shown.bs.collapse
tabi hidden.bs.collapse
iṣẹlẹ to waye).
.collapse('show')
Ṣe afihan eroja ti o le ṣubu. Pada si olupe ṣaaju ki nkan ti o le kọlu ti han ni otitọ (ie ṣaaju ki shown.bs.collapse
iṣẹlẹ naa to waye).
.collapse('hide')
Ìbòmọlẹ ohun kan collapsible. Pada si olupe ṣaaju ki nkan ti o le kolu ti farapamọ nitootọ (ie ṣaaju ki hidden.bs.collapse
iṣẹlẹ naa to waye).
Kilasi Collapse Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe iṣubu.
Iṣẹlẹ Iru | Apejuwe |
---|---|
fihan.bs.kolapse | Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn show apẹẹrẹ ọna ti a npe ni. |
ti a fihan.bs.kolapse | Iṣẹlẹ yii jẹ ina nigba ti a ti jẹ ki nkan idaruku kan han si olumulo (yoo duro fun awọn iyipada CSS lati pari). |
tọju.bs.collapse | Yi iṣẹlẹ ti wa ni kuro lenu ise lẹsẹkẹsẹ nigbati awọn hide ọna ti a ti a npe ni. |
farasin.bs.colapse | Iṣẹlẹ yii jẹ ina nigba ti ohun elo iṣubu kan ti farapamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS lati pari). |
Apakan agbelera fun gigun kẹkẹ nipasẹ awọn eroja, bii carousel kan. Awọn carousels itẹle ko ni atilẹyin.
Ẹya paati carousel ni gbogbogbo ko ni ibamu pẹlu awọn iṣedede iraye si. Ti o ba nilo lati ni ifaramọ, jọwọ ronu awọn aṣayan miiran fun fifihan akoonu rẹ.
Bootstrap nikan lo CSS3 fun awọn ohun idanilaraya rẹ, ṣugbọn Internet Explorer 8 & 9 ko ṣe atilẹyin awọn ohun-ini CSS pataki. Nitorinaa, ko si awọn ohun idanilaraya iyipada ifaworanhan nigba lilo awọn aṣawakiri wọnyi. A ti pinnu lati mọọmọ ko ni pẹlu awọn idapada orisun jQuery fun awọn iyipada.
Kilasi .active
nilo lati fi kun si ọkan ninu awọn kikọja naa. Bibẹẹkọ, carousel kii yoo han.
Awọn .glyphicon .glyphicon-chevron-left
ati .glyphicon .glyphicon-chevron-right
awọn kilasi ko nilo dandan fun awọn iṣakoso. Bootstrap n pese .icon-prev
ati .icon-next
bi awọn yiyan unicode itele.
Ṣafikun awọn akọle si awọn ifaworanhan rẹ ni irọrun pẹlu .carousel-caption
eroja laarin eyikeyi .item
. Gbe o kan nipa eyikeyi HTML iyan laarin nibẹ ati pe yoo wa ni ibamu laifọwọyi ati ṣe akoonu.
Carousels nilo lilo ohun id
lori apo eiyan ti ita (awọn .carousel
) fun awọn iṣakoso carousel lati ṣiṣẹ daradara. Nigbati o ba nfi ọpọlọpọ awọn carousels kun, tabi nigba iyipada carousel's kan id
, rii daju lati ṣe imudojuiwọn awọn idari ti o yẹ.
Lo awọn abuda data lati ṣakoso ni irọrun ipo ti carousel. data-slide
gba awọn koko-ọrọ prev
tabi next
, eyiti o paarọ ipo ifaworanhan ni ibatan si ipo lọwọlọwọ rẹ. Ni omiiran, lo data-slide-to
lati kọja atọka ifaworanhan aise si carousel data-slide-to="2"
, eyiti o yi ipo ifaworanhan si atọka kan pato ti o bẹrẹ pẹlu 0
.
Ẹya data-ride="carousel"
naa ni a lo lati samisi carousel kan bi ere idaraya ti o bẹrẹ ni fifuye oju-iwe. Ko ṣee lo ni apapo pẹlu (laiṣe ati kobojumu) ipilẹṣẹ JavaScript ti o fojuhan ti carousel kanna.
Pe carousel pẹlu ọwọ pẹlu:
Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-
, bi ninu data-interval=""
.
Oruko | iru | aiyipada | apejuwe |
---|---|---|---|
aarin | nọmba | 5000 | Iye akoko lati ṣe idaduro laarin gigun kẹkẹ ohun kan laifọwọyi. Ti o ba jẹ eke, carousel kii yoo yipo laifọwọyi. |
da duro | okun | asan | "rababa" | Ti o ba ṣeto si "hover" , da duro gigun kẹkẹ ti carousel lori mouseenter ati tun bẹrẹ gigun kẹkẹ ti carousel lori mouseleave . Ti a ba ṣeto si null , gbigbe lori carousel kii yoo da duro. |
murasilẹ | boolianu | ooto | Boya carousel yẹ ki o yipo nigbagbogbo tabi ni awọn iduro lile. |
keyboard | boolianu | ooto | Boya carousel yẹ ki o fesi si awọn iṣẹlẹ keyboard. |
.carousel(options)
Ti bẹrẹ carousel pẹlu awọn aṣayan iyan object
ati bẹrẹ gigun kẹkẹ nipasẹ awọn ohun kan.
.carousel('cycle')
Yiyipo nipasẹ awọn ohun carousel lati osi si otun.
.carousel('pause')
Da carousel duro lati gigun kẹkẹ nipasẹ awọn ohun kan.
.carousel(number)
Yi kẹkẹ carousel lọ si fireemu kan pato (orisun 0, iru si orun).
.carousel('prev')
Awọn iyipo si nkan ti tẹlẹ.
.carousel('next')
Awọn iyipo si nkan atẹle.
Kilasi carousel Bootstrap ṣafihan awọn iṣẹlẹ meji fun sisọ sinu iṣẹ ṣiṣe carousel.
Awọn iṣẹlẹ mejeeji ni awọn ohun-ini afikun wọnyi:
direction
: Awọn itọsọna ninu eyi ti awọn carousel ti wa ni sisun (boya "left"
tabi "right"
).relatedTarget
: Eroja DOM ti o wa ni slid sinu aaye bi ohun ti nṣiṣe lọwọ.Gbogbo awọn iṣẹlẹ carousel jẹ ina si carousel funrararẹ (ie ni <div class="carousel">
).
Iṣẹlẹ Iru | Apejuwe |
---|---|
slide.bs.carousel | Iṣẹlẹ yii ina lẹsẹkẹsẹ nigbati ọna slide apẹẹrẹ ba pe. |
slid.bs.carousel | Iṣẹlẹ yii jẹ ina nigbati carousel ti pari iyipada ifaworanhan rẹ. |
Ohun itanna affix naa yipada position: fixed;
si tan ati pipa, ti o ṣe apẹẹrẹ ipa ti a rii pẹlu position: sticky;
. Subnavigation ni apa ọtun jẹ demo ifiwe ti ohun itanna affix.
Lo ohun itanna affix nipasẹ awọn abuda data tabi pẹlu ọwọ pẹlu JavaScript tirẹ.Ni awọn ipo mejeeji, o gbọdọ pese CSS fun ipo ati iwọn akoonu ti a fi si.
Akiyesi: Maṣe lo ohun itanna affix lori eroja ti o wa ninu ipo ipo ti o jo, gẹgẹbi ti o fa tabi ti ọwọn, nitori aṣiṣe ti n ṣe Safari .
Ohun itanna affix yi yipada laarin awọn kilasi mẹta, ọkọọkan ti o nsoju ipo kan: .affix
, .affix-top
, ati .affix-bottom
. O gbọdọ pese awọn aza, pẹlu awọn sile ti position: fixed;
lori .affix
, fun awọn wọnyi kilasi ara rẹ (ominira ti yi ohun itanna) lati mu awọn gangan awọn ipo.
Eyi ni bii ohun itanna affix ṣe n ṣiṣẹ:
.affix-top
lati tọka pe eroja wa ni ipo oke-julọ julọ. Ni aaye yii ko si ipo CSS ko nilo..affix
rọpo .affix-top
ati ṣeto position: fixed;
(ti a pese nipasẹ Bootstrap's CSS)..affix
pẹlu .affix-bottom
. Niwọn bi awọn aiṣedeede jẹ iyan, eto ọkan nilo ki o ṣeto CSS ti o yẹ. Ni idi eyi, fi sii position: absolute;
nigbati o jẹ dandan. Ohun itanna naa nlo abuda data tabi aṣayan JavaScript lati pinnu ibiti o le gbe nkan naa si lati ibẹ.Tẹle awọn igbesẹ ti o wa loke lati ṣeto CSS rẹ fun boya awọn aṣayan lilo ni isalẹ.
Lati fi irọrun ṣafikun ihuwasi affix si eyikeyi eroja, kan ṣafikun data-spy="affix"
si ipin ti o fẹ ṣe amí lori. Lo awọn aiṣedeede lati ṣalaye igba lati yi pinni ti nkan kan pada.
Pe ohun itanna affix nipasẹ JavaScript:
Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-
, bi ninu data-offset-top="200"
.
Oruko | iru | aiyipada | apejuwe |
---|---|---|---|
aiṣedeede | nọmba | iṣẹ | nkan | 10 | Awọn piksẹli lati aiṣedeede lati iboju nigbati o ṣe iṣiro ipo ti yi lọ. Ti nọmba kan ba pese, aiṣedeede yoo lo ni awọn itọnisọna oke ati isalẹ. Lati pese alailẹgbẹ, isale ati aiṣedeede oke kan pese ohun kan offset: { top: 10 } tabi offset: { top: 10, bottom: 5 } . Lo iṣẹ kan nigbati o nilo lati ṣe iṣiro aiṣedeede kan ni agbara. |
afojusun | yiyan | ipade | jQuery eroja | nkan window na |
Ntọka ipin ibi-afẹde ti affix. |
.affix(options)
Mu akoonu rẹ ṣiṣẹ bi akoonu ti a somọ. Gba awọn aṣayan iyan object
.
.affix('checkPosition')
Ṣe atunto ipo affix ti o da lori awọn iwọn, ipo, ati ipo yi lọ ti awọn eroja ti o yẹ. Awọn .affix
, .affix-top
, ati .affix-bottom
awọn kilasi ti wa ni afikun si tabi yọkuro lati akoonu ti a fi si ni ibamu si ipinle titun. Ọna yii nilo lati pe ni igbakugba ti awọn iwọn ti akoonu ti a fi si tabi eroja ibi-afẹde ti yipada, lati rii daju ipo ti o tọ ti akoonu ti a somọ.
Ohun itanna affix Bootstrap ṣe afihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ affix.
Iṣẹlẹ Iru | Apejuwe |
---|---|
ìfisí.bs.àfikún | Iṣẹlẹ yii n tan lẹsẹkẹsẹ ṣaaju ki nkan naa ti fi sii. |
affixed.bs.afikun | Yi iṣẹlẹ ti wa ni kuro lenu ise lẹhin ti awọn ano ti a ti somọ. |
affix-oke.bs.afisi | Iṣẹlẹ yii n tan lẹsẹkẹsẹ ṣaaju ki a ti fi nkan naa si oke. |
affixed-oke.bs.afisi | Yi iṣẹlẹ ti wa ni lenu ise lẹhin ti awọn ano ti a affixed-oke. |
affix-bottom.bs.afisi | Iṣẹlẹ yii n tan lẹsẹkẹsẹ ṣaaju ki a ti fi nkan naa si isalẹ. |
affixed-bottom.bs.affix | Iṣẹlẹ yii jẹ ina lẹhin ti a ti fi nkan naa si isalẹ. |