JavaScript
Tabhair beatha do chomhpháirteanna Bootstrap le breis agus dosaen breiseán saincheaptha jQuery. Cuir iad go léir san áireamh go héasca, nó ceann ar cheann.
Tabhair beatha do chomhpháirteanna Bootstrap le breis agus dosaen breiseán saincheaptha jQuery. Cuir iad go léir san áireamh go héasca, nó ceann ar cheann.
*.js
Is féidir forlíontáin a áireamh ina n-aonar (ag baint úsáide as comhaid aonair Bootstrap ), nó iad go léir ag an am céanna (ag baint úsáide as bootstrap.js
nó as an mionghearrtha bootstrap.min.js
).
An dá bootstrap.js
agus bootstrap.min.js
go bhfuil gach breiseán i gcomhad amháin. Cuir san áireamh ach ceann amháin.
Braitheann roinnt breiseán agus comhpháirteanna CSS ar fhorlíontáin eile. Má chuireann tú forlíontáin san áireamh ina n-aonar, déan cinnte seiceáil le haghaidh na spleáchais seo sna doiciméid. Tabhair faoi deara freisin go mbraitheann gach breiseán ar jQuery (ciallaíonn sé seo nach mór jQuery a chur san áireamh roimh na comhaid breiseán). Téigh i gcomhairle lenár n-bower.json
aghaidh le fáil amach cé na leaganacha de jQuery a fhaigheann tacaíocht.
Is féidir leat gach breiseán Bootstrap a úsáid tríd an API marcála amháin gan aon líne amháin de JavaScript a scríobh. Is é seo an API den chéad scoth de chuid Bootstrap agus ba chóir go mbeadh sé mar an gcéad bhreithniú agat agus breiseán á úsáid agat.
É sin ráite, i gcásanna áirithe d’fhéadfadh sé a bheith inmhianaithe an fheidhmiúlacht seo a mhúchadh. Dá bhrí sin, cuirimid ar fáil freisin an cumas an API aitreabúide sonraí a dhíchumasú trí gach imeacht ar an doiciméad a bhfuil spás air a bhfuil spás air a dhícheangal data-api
. Breathnaíonn sé seo mar seo:
Nó, chun díriú ar bhreiseán ar leith, níl le déanamh ach ainm an bhreiseáin a chur san áireamh mar ainmspás in éineacht leis an ainmspás data-api mar seo:
Ná húsáid tréithe sonraí ó fhorlíontáin iolracha ar an eilimint chéanna. Mar shampla, ní féidir leid uirlisí a bheith ag cnaipe agus modh a scoránaigh. Chun é seo a bhaint amach, bain úsáid as eilimint timfhilleadh.
Creidimid freisin gur cheart go mbeifeá in ann gach breiseán Bootstrap a úsáid tríd an API JavaScript amháin. Is modhanna aonair inslabhra iad gach API poiblí, agus seolann siad an bailiúchán ar gníomhaíodh ina leith.
Ba cheart do gach modh glacadh le réad roghanna roghnach, teaghrán a dhíríonn ar mhodh áirithe, nó rud ar bith (a thionscnaíonn breiseán a bhfuil iompraíocht réamhshocraithe aige):
Nochtann gach breiseán a chruthaitheoir amh ar Constructor
airí freisin: $.fn.popover.Constructor
. Más mian leat mar shampla breiseán ar leith a fháil, é a aisghabháil go díreach ó eilimint: $('[rel="popover"]').data('popover')
.
Is féidir leat na socruithe réamhshocraithe le haghaidh breiseán a athrú trí Constructor.DEFAULTS
réad an bhreiseáin a mhodhnú:
Uaireanta is gá forlíontáin Bootstrap a úsáid le creataí Chomhéadain eile. Sna cúinsí seo, féadann imbhuailtí ainmspáis tarlú ó am go chéile. Má tharlaíonn sé seo, is féidir leat glaoch .noConflict
ar an mbreiseán is mian leat a luach a chur ar ais.
Soláthraíonn Bootstrap imeachtaí saincheaptha le haghaidh gníomhartha uathúla fhormhór na mbreiseán. Go ginearálta, tagann siad seo i bhfoirm infinideach agus i bhfoirm rannpháirtí san am a chuaigh thart - áit a spreagtar an infinideach (ex. show
) ag tús imeachta, agus ina shown
spreagtar foirm an rannpháirtí san am atá thart (ex. ) ar chríochnú gníomhaíochta.
Ó 3.0.0, tá spásanna ainmneacha ar gach imeacht Bootstrap.
Soláthraíonn gach imeacht infinitive preventDefault
feidhmiúlacht. Soláthraíonn sé seo an cumas chun stop a chur le gníomh a chur i gcrích sula dtosaíonn sé.
Is féidir teacht ar an leagan de gach breiseán jQuery de chuid Bootstrap trí VERSION
mhaoin chruthaitheoir an bhreiseáin. Mar shampla, don bhreiseán leid uirlisí:
Ní thiteann forlíontáin Bootstrap siar go háirithe go galánta nuair a bhíonn JavaScript díchumasaithe. Más spéis leat eispéireas an úsáideora sa chás seo, bain úsáid as <noscript>
chun an cás a mhíniú (agus conas JavaScript a athchumasú) do d’úsáideoirí, agus/nó cuir do chuid fallbacks saincheaptha féin leis.
Ní thacaíonn Bootstrap go hoifigiúil le leabharlanna tríú páirtí JavaScript ar nós Fréamhshamhail nó Chomhéadain jQuery. In ainneoin .noConflict
imeachtaí agus ainmspás orthu, d’fhéadfadh fadhbanna comhoiriúnachta a bheith ann nach mór duit a réiteach i d’aonar.
Le haghaidh éifeachtaí aistrithe simplí, cuir san áireamh transition.js
uair amháin in éineacht leis na comhaid JS eile. Má tá tú ag baint úsáide as an tiomsaithe (nó mionghearrtha) bootstrap.js
, ní gá é seo a chur san áireamh - tá sé ann cheana féin.
Is cúntóir bunúsach é Transition.js le haghaidh transitionEnd
imeachtaí chomh maith le aithriseoir trasdula CSS. Úsáideann na forlíontáin eile é chun tacaíocht trasdula CSS a sheiceáil agus chun trasdulta crochta a ghabháil.
Is féidir aistrithe a dhíchumasú ar fud an domhain ag baint úsáide as an mblúire JavaScript seo a leanas, a chaithfidh teacht tar éis transition.js
( bootstrap.js
nó bootstrap.min.js
, de réir mar a bheidh) a lódáil:
Tá modhanna dialóige sruthlínithe, ach solúbtha, leideanna dialóige leis an fheidhmiúlacht íosta is gá agus mainneachtainí cliste.
Bí cinnte nach n-osclóidh tú modúl agus ceann eile fós le feiceáil. Teastaíonn cód saincheaptha chun níos mó ná modha amháin a thaispeáint ag an am.
Déan iarracht i gcónaí cód HTML módúil a chur in áit ardleibhéil i do dhoiciméad chun comhpháirteanna eile a sheachaint a chuireann isteach ar chuma agus/nó ar fheidhmiúlacht an mhódúil.
Tá roinnt caveat ann maidir le módúil a úsáid ar ghléasanna soghluaiste. Féach ar ár ndoiciméid tacaíochta brabhsálaí le haghaidh sonraí.
Mar gheall ar an gcaoi a sainmhíníonn HTML5 a shéimeantaic, autofocus
níl aon éifeacht ag an tréith HTML i módúil Bootstrap. Chun an éifeacht chéanna a bhaint amach, bain úsáid as roinnt JavaScript saincheaptha:
Módúil rindreáilte le ceanntásc, corp, agus tacar gníomhartha sa bhuntásc.
Scoránaigh modúl trí JavaScript trí chliceáil ar an gcnaipe thíos. Sleamhnóidh sé síos agus céimnithe isteach ó bharr an leathanaigh.
Bí cinnte suimiú role="dialog"
agus aria-labelledby="..."
, ag tagairt don teideal módúil, le .modal
, agus role="document"
leis an teideal .modal-dialog
féin.
Ina theannta sin, is féidir leat cur síos a dhéanamh ar do dialóg mhodhúil agus aria-describedby
ar .modal
.
Chun físeáin YouTube a leabú i módúil tá gá le JavaScript breise nach bhfuil i Bootstrap chun athsheinm agus níos mó a stopadh go huathoibríoch. Féach ar an bpostáil cabhrach Stack Overflow seo le haghaidh tuilleadh eolais.
Tá dhá mhéid roghnacha ag na modúil, ar fáil trí ranganna mionathraithe le cur ar .modal-dialog
.
Le haghaidh módúil atá le feiceáil go simplí seachas céimnithe isteach chun amharc, bain an .fade
rang de do mharcáil módúil.
Chun leas a bhaint as córas eangaí Bootstrap laistigh de mhodh, ní gá ach nead .row
s laistigh den .modal-body
chóras greille a úsáid agus ansin bain úsáid as na gnáth-aicmí córais eangaí.
An bhfuil braon cnaipí agat a spreagann an modh céanna, agus a bhfuil beagán difriúil acu? Úsáid event.relatedTarget
agus tréithe HTML ( data-*
trí jQuery b'fhéidir ) chun inneachar an mhódúil a athrú ag brath ar an gcnaipe ar a ndearnadh cliceáil. Féach na doiciméid Imeachtaí Módúla le haghaidh sonraí ar relatedTarget
,
Scoránaigh an breiseán modha d’inneachar folaithe ar éileamh, trí tréithe sonraí nó JavaScript. Cuireann sé freisin .modal-open
leis an <body>
iompar scrollaithe réamhshocraithe a shárú agus gineann sé .modal-backdrop
a chun limistéar cliceáil a sholáthar chun módúil a thaispeántar a dhíbhe nuair a chliceálann tú lasmuigh den mhodh.
Modúl a ghníomhachtú gan JavaScript a scríobh. Socraigh data-toggle="modal"
ar eilimint rialtóra, cosúil le cnaipe, mar aon le data-target="#foo"
nó href="#foo"
chun díriú ar mhodh sonrach chun scoránaigh.
Glaoigh ar mhódúil le id myModal
le líne amháin JavaScript:
Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-
, mar atá i data-backdrop=""
.
Ainm | cineál | réamhshocraithe | tuairisc |
---|---|---|---|
chúlra | Boole nó an téad'static' |
fíor | Áirítear eilimint mhodúil chúlra. Mar mhalairt air sin, sonraigh static le haghaidh cúlra nach ndúnann an modúl ar chliceáil. |
méarchlár | Boole | fíor | Dúnann sé an modúl nuair a bhrúitear eochair éalaithe |
seó | Boole | fíor | Taispeánann sé an modúl nuair a thosaigh sé. |
iargúlta | cosán | bréagach | Tá an rogha seo imithe i léig ó v3.3.0 agus baineadh é in v4. Molaimid ina ionad sin úsáid a bhaint as templáil ar thaobh an chliaint nó as creat ceangailteach sonraí, nó ag glaoch ar jQuery.load tú féin. Má chuirtear cian-UR ar fáil, déanfar ábhar a luchtú uair amháin trí mhodh jQuery |
.modal(options)
Gníomhachtaíonn d'ábhar mar mhodh modúl. Glacann rogha roghnach object
.
.modal('toggle')
Scoránaigh modúl de láimh. Filleann sé ar an nglaoiteoir sula dtaispeántar nó sula gcuirtear i bhfolach an modúl (.i. sula dtarlaíonn an shown.bs.modal
nó an teagmhas).hidden.bs.modal
.modal('show')
Osclaíonn modúl de láimh. Filleann sé ar an nglaoiteoir sula dtaispeántar an modúl iarbhír (.i. sula shown.bs.modal
dtarlaíonn an teagmhas).
.modal('hide')
Folaigh modúl de láimh. Filleann sé ar an nglaoiteoir sula gcuirtear an modh i bhfolach (ie sula hidden.bs.modal
dtarlaíonn an teagmhas).
.modal('handleUpdate')
Athdhearbhaíonn suíomh an mhódúil chun dul i ngleic le scrollbharra ar eagla go mbeadh ceann le feiceáil, rud a chuirfeadh an léim mhódúil ar chlé.
Ní gá ach amháin nuair a athraíonn airde an mhódúil agus é oscailte.
Nochtann rang modha Bootstrap roinnt imeachtaí chun dul i ngleic le feidhmiúlacht mhódúil.
Cuirtear na himeachtaí módúla go léir chun cinn ag an modúl féin (.i. ag an <div class="modal">
).
Cineál Imeachta | Cur síos |
---|---|
taispeáin.bs.módúil | Téann an teagmhas seo chun solais láithreach nuair show a ghlaoitear an modh ásc. Más cliceáil is cúis leis, tá an eilimint chliceáilte ar fáil mar relatedTarget airí an imeachta. |
léirithe.bs.módúil | Cuirtear an teagmhas seo ar ceal nuair a bheidh an modúl infheicthe don úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích). Más cliceáil is cúis leis, tá an eilimint chliceáilte ar fáil mar relatedTarget airí an imeachta. |
folaigh.bs.módúil | Cuirtear an teagmhas seo ar ceal láithreach nuair hide a ghlaoitear an modh ásc. |
i bhfolach.bs.modal | Tá an teagmhas seo bréan nuair a bhíonn an módúil curtha i bhfolach ón úsáideoir (fanfaidh sé go mbeidh aistrithe CSS le cur i gcrích). |
lódáilte.bs.modal | Cuirtear an teagmhas seo ar ceal nuair a bhíonn ábhar luchtaithe ag an modúl ag baint úsáide as an remote rogha. |
Cuir biachláir anuas le beagnach rud ar bith leis an mbreiseán simplí seo, lena n-áirítear an barra nascleanúna, na cluaisíní agus na piollaí.
Trí shaintréithe sonraí nó JavaScript, scorálann an breiseán anuas ábhar i bhfolach (roghchláir anuas) tríd an .open
rang a scoránaigh ar mhír liosta na dtuismitheoirí.
Ar ghléasanna soghluaiste, cuireann oscailt anuas limistéar .dropdown-backdrop
mar sconna chun biachláir anuas a dhúnadh nuair a bhíonn tú ag cnagadh lasmuigh den roghchlár, ceanglas le haghaidh tacaíocht chuí iOS. Ciallaíonn sé seo go dteastaíonn sconna breise ar fhóin phóca chun athrú ó roghchlár anuas oscailte go roghchlár anuas eile.
Nóta: data-toggle="dropdown"
Bítear ag brath ar an tréith chun roghchláir anuas a dhúnadh ag leibhéal feidhmchláir, mar sin is smaoineamh maith é a úsáid i gcónaí.
Cuir data-toggle="dropdown"
le nasc nó cnaipe chun anuas a scoránaigh.
Chun URLanna a choinneáil slán le cnaipí naisc, úsáid an data-target
aitreabúid in ionad href="#"
.
Cuir glaoch ar na anuas trí JavaScript:
data-toggle="dropdown"
fós ag teastáilIs cuma cé acu a ghlaonn tú ar do anuas trí JavaScript nó ina ionad sin go n-úsáideann tú an data-api, ní mór duit data-toggle="dropdown"
a bheith i láthair i gcónaí ar eilimint truicir an anuas.
Dada
$().dropdown('toggle')
Scoránaigh an roghchlár anuas de bharra nascleanúna nó nascleanúna cluaisíní tugtha.
Cuirtear tús le gach imeacht anuas ag an .dropdown-menu
eilimint tuismitheora.
Tá maoin ag gach imeacht anuas relatedTarget
, arb é a luach an eilimint ancaire scoránaithe.
Cineál Imeachta | Cur síos |
---|---|
taispeáin.bs.anuas | Teann an teagmhas seo láithreach nuair a ghlaoitear an modh ásc taispeána. |
anuas.bs | Tá an teagmhas seo bréan nuair a bheidh an anuas infheicthe ag an úsáideoir (fanacht le haghaidh aistrithe CSS, le cur i gcrích). |
folaigh.bs.anuas | Cuirtear an teagmhas seo ar ceal láithreach nuair a ghlaoitear an modh um shampla seithí. |
bhfolach.bs.anuas | Tá an teagmhas seo bréan nuair a bheidh an anuas críochnaithe a bheith i bhfolach ar an úsáideoir (fanacht le haghaidh aistrithe CSS, a chur i gcrích). |
Is é an breiseán ScrollSpy ná spriocanna nascleanúna a nuashonrú go huathoibríoch bunaithe ar an suíomh scrollbharra. Scrollaigh an limistéar faoi bhun an bharra nascleanúna agus féach ar an athrú gníomhach ranga. Cuirfear béim ar na fo-mhíreanna anuas freisin.
Ad leggings keytar, brunch id art party dolor laboure. Pitchfork yr enim lo-fi sular dhíol siad amach qui. Cearta rothar feirme-go-tábla Tumblr is cuma cad é. Anim keffiyeh carles cardigan. Velit seitan mcsweeney both grianghraf 3 mac tíre moon irure. Geansaí Cosby lomo jean shorts, williamsburg hoodie minim qui is dócha nár chuala tú trácht orthu et cardigan trust fund culpa bithdhíosal wes anderson aeistéitiúil. Nihil tattooed accusamus, creid íoróin bithdhíosal keffiyeh artisan ullamco consequat.
Clár scátála mustache Veniam marfa, féasóg adipisicing fugiat velit pitchfork. Freegan féasóg aliqua cupidatat mcsweeney's vero. Cupid ceithre cinn de na ceithre cinn, agus helvetica nulla carles. Trucail bia geansaí tatú-choscáin, vinil quis non freegan mcsweeney. Lo-fi wes anderson +1 sartorial. Carles aclaíocht neamh aeistéitiúil quis gentrify. Beoir ceardaíochta adipiscing Brooklyn leas-eochair deserunt.
Occaecat commodo aliqua delectus. Fap ceardaíochta beoir scátála deserunt ea. Cearta rothar Lomo adipisicing banh mi, velit ea sunt next level locavore caife aon bhunadh i Magna veniam. Ard-shaol aitheantais vinil, macalla pháirc dá bhrí sin aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim Messenger bag. Creid ex in, inbhuanaithe 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, culpa messenger bag marfa cibé trucail bia delectus. Sapiente synth id assumenda. Locavore sed helvetica cliche íoróin, cait toirneach is dócha nár chuala tú trácht orthu as hoodie lo-fi fap aliquip saor ó ghlútan. Labore elit placeat sular dhíol siad amach, terry richardson proident brunch nesciunt quis costy sweater pariatur keffiyeh ut helvetica artisan. Cardigan ceardaíochta beoir seitan readymade velit. VHS chambray laboris am veniam. Anim mollit minim comodo ullamco thundercats.
Caithfidh spriocanna aitheantais inréite a bheith ag naisc Navbar. Mar shampla, <a href="#home">home</a>
ní mór a fhreagraíonn do rud éigin sa DOM cosúil le <div id="home"></div>
.
:visible
déanta ar eilimintí neamhspriceNí thabharfar aird ar sprioc-eilimintí nach bhfuil :visible
de réir jQuery agus ní thaispeánfar a n-ítimí nascleanúna comhfhreagracha choíche.
Is cuma an modh cur chun feidhme, éilíonn scrollspy úsáid a bhaint as position: relative;
ar an eilimint a bhfuil tú ag spying air. I bhformhór na gcásanna is é seo an <body>
. Nuair a scrollspying ar eilimintí eile seachas an <body>
, a bheith cinnte go bhfuil height
sraith agus overflow-y: scroll;
curtha i bhfeidhm.
Chun iompar scrollspy a chur le do nascleanúint barrbharra go héasca, cuir data-spy="scroll"
leis an eilimint a bhfuil tú ag iarraidh spiaireacht a dhéanamh air (go hiondúil is é seo an <body>
). Ansin cuir an data-target
tréith leis an ID nó le haicme na máthaireiliminte d'aon .nav
chomhpháirt Bootstrap.
Tar éis position: relative;
duit do CSS a chur isteach, cuir glaoch ar an scrollspy trí JavaScript:
.scrollspy('refresh')
Agus scrollspy in úsáid in éineacht le heilimintí a chur leis nó a bhaint den DOM, beidh ort an modh athnuachana a ghlaoch mar seo:
Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-
, mar atá i data-offset=""
.
Ainm | cineál | réamhshocraithe | tuairisc |
---|---|---|---|
fhritháireamh | uimhir | 10 | Picteilíní le fritháireamh ón mbarr agus suíomh an scrolla á ríomh. |
Cineál Imeachta | Cur síos |
---|---|
ghníomhachtú.bs.scrollspy | Cuirtear an teagmhas seo chun cinn nuair a ghníomhaíonn an scrollspy mír nua. |
Cuir feidhmiúlacht cluaisíní tapa, dinimiciúil leis chun aistriú trí phána d’ábhar áitiúil, fiú trí roghchláir anuas. Ní thacaítear le cluaisíní neadaithe.
Denim amh is dócha nár chuala tú trácht orthu jeans shorts Austin. Nesciunt tofu stumptown aliqua, retro synth máistir cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit búistéir retro keffiyeh dreamcatcher synth. Geansaí Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan apparel Meiriceánach, búistéir 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.
Síneann an breiseán seo an chomhpháirt nascleanúna cluaisíní chun limistéir cluaisíní a chur leis.
Cumasaigh cluaisíní inchurtha trí JavaScript (ní mór gach cluaisín a ghníomhachtú ina n-aonar):
Is féidir leat cluaisíní aonair a ghníomhachtú ar go leor bealaí:
Is féidir leat nascleanúint cluaisín nó pillín a ghníomhachtú gan JavaScript a scríobh ach trí eilimint a shonrú data-toggle="tab"
nó data-toggle="pill"
ar eilimint. Má chuirtear na ranganna nav
agus na nav-tabs
ranganna leis an gcluaisín cuirfear stíliú cluaisínul
Bootstrap i bhfeidhm , agus cuirfear an stíliú piolla i bhfeidhm ag na ranganna .nav
nav-pills
Chun cluaisíní a dhéanamh céimnithe isteach, cuir .fade
le gach .tab-pane
. Ní mór go mbeadh ar an gcéad phána cluaisín freisin .in
an t-ábhar tosaigh a dhéanamh le feiceáil.
$().tab
Gníomhachtaíonn eilimint tab agus coimeádán ábhar. Ba cheart go mbeadh nód coimeádán data-target
nó href
nód dírithe ar an gcluaisín sa DOM. Sna samplaí thuas, is iad na cluaisíní na <a>
s le data-toggle="tab"
tréithe.
.tab('show')
Roghnaíonn sé an cluaisín tugtha agus taispeánann sé an t-ábhar a bhaineann leis. Éiríonn aon chluaisín eile a roghnaíodh roimhe seo díroghnaithe agus tá an t-ábhar a bhaineann leis i bhfolach. Filleann sé ar an nglaoiteoir sula dtaispeántar an phána cluaisín (ie sula shown.bs.tab
dtarlaíonn an teagmhas).
Agus cluaisín nua á thaispeáint, cuirtear na himeachtaí ar lasadh san ord seo a leanas:
hide.bs.tab
(ar an gcluaisín gníomhach reatha)show.bs.tab
(ar an gcluaisín le taispeáint)hidden.bs.tab
(ar an gcluaisín gníomhach roimhe seo, an ceann céanna leis an hide.bs.tab
imeacht)shown.bs.tab
(ar an gcluaisín nua-ghníomhach díreach taispeánta, mar an gcéanna leis an show.bs.tab
imeacht)Mura raibh aon chluaisín gníomhach cheana féin, ní dhéanfar an hide.bs.tab
agus na hidden.bs.tab
himeachtaí a bhácáil.
Cineál Imeachta | Cur síos |
---|---|
taispeáin.bs.cluaisín | Teann an teagmhas seo ar thaispeántas cluaisíní, ach sula dtaispeántar an cluaisín nua. Úsáid event.target agus event.relatedTarget chun an cluaisín gníomhach agus an cluaisín gníomhach roimhe seo (má tá sé ar fáil) faoi seach a dhíriú. |
taispeántar.bs.cluaisín | Teann an teagmhas seo ar thaispeántas cluaisíní tar éis cluaisín a thaispeáint. Úsáid event.target agus event.relatedTarget chun an cluaisín gníomhach agus an cluaisín gníomhach roimhe seo (má tá sé ar fáil) faoi seach a dhíriú. |
folaigh.bs.cluaisín | Tineann an teagmhas seo nuair atá cluaisín nua le taispeáint (agus mar sin tá an cluaisín gníomhach roimhe seo le cur i bhfolach). Bain úsáid as event.target agus event.relatedTarget chun an cluaisín gníomhach reatha agus an cluaisín nua go luath le bheith gníomhach a dhíriú, faoi seach. |
i bhfolach.bs.cluaisín | Lasann an teagmhas seo tar éis cluaisín nua a thaispeáint (agus mar sin tá an cluaisín gníomhach roimhe seo i bhfolach). Úsáid event.target agus event.relatedTarget chun an cluaisín gníomhach roimhe seo agus an cluaisín gníomhach nua a dhíriú, faoi seach. |
Spreagtha ag an mbreiseán jQuery.tipsy den scoth scríofa ag Jason Frame; Is leagan nuashonraithe é Leideanna Uirlisí, nach bhfuil ag brath ar íomhánna, a úsáideann CSS3 le haghaidh beochana, agus tréithe sonraí le haghaidh stórála teidil áitiúil.
Ní thaispeántar leideanna uirlisí le teidil fad nialasacha riamh.
Aló thar na naisc thíos chun leideanna uirlisí a fheiceáil:
Pants daingean an chéad leibhéal eile keffiyeh is dócha nár chuala tú trácht orthu. Photo mboth féasóg amh denim letterpress mála teachtaire vegan stumptown. Tá seaman vinil terry richardson ag an seitan feirme go tábla, éadaí Meiriceánach quinoa inbhuanaithe quinoa 8-giotán mcsweeney . Beard stumptown, cardigans banh mi lomo thundercats. Tofu bithdhíosal williamsburg marfa, ceithre seomra vegan cleanse loko mcsweeney. Ceardaí fíor- íorónach is cuma cad is eochair , scenester farm-go-table banksy Austin twitter láimhseáil freegan cred raw denim caife aon-bhunús víreasach.
Tá ceithre rogha ar fáil: ailíniú barr, dheis, bun agus clé.
Ar chúiseanna feidhmíochta, is rogha an diúltaithe iad na data-apis Tooltip agus Popover, rud a chiallaíonn go gcaithfidh tú iad a thosú tú féin .
Bealach amháin chun na leideanna uirlisí go léir ar leathanach a thosú ná iad a roghnú de réir a n- data-toggle
tréith:
Gineann an breiseán leid uirlisí inneachar agus marcáil ar éileamh, agus de réir réamhshocraithe cuireann sé leideanna uirlisí i ndiaidh a n-eiliminte truicear.
Spreag an leid uirlisí trí JavaScript:
Níl sa mharcáil riachtanach do leid uirlisí ach data
tréith agus title
ar an eilimint HTML is mian leat leid uirlisí a bheith agat. Tá an marcáil ginte ar leid uirlisí sách simplí, cé go dteastaíonn suíomh uaidh (de réir réamhshocraithe, socraithe top
ag an mbreiseán).
Uaireanta is mian leat leid uirlisí a chur le hipearnasc a chumhdaíonn línte iolracha. Is é iompar réamhshocraithe an bhreiseáin leid uirlisí ná é a lárú go cothrománach agus go hingearach. Cuir white-space: nowrap;
le do chuid ancairí chun é seo a sheachaint.
Agus leideanna uirlisí á n-úsáid agat maidir le heilimintí laistigh de , .btn-group
nó .input-group
ar ghnéithe a bhaineann le tábla ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, <tfoot>
), beidh ort an rogha a shonrú container: 'body'
(atá doiciméadaithe thíos) chun fo-iarmhairtí nach dteastaíonn a sheachaint (amhail an eilimint ag fás níos leithne agus/ nó a coirnéil chothromú a chailleadh nuair a tharraingítear an leid uirlisí).
I gcás úsáideoirí a dhéanann nascleanúint le méarchlár, agus go háirithe úsáideoirí teicneolaíochtaí cúnta, níor cheart duit ach leideanna uirlisí a chur le heilimintí atá dírithe ar mhéarchlár amhail naisc, rialtáin foirmeacha, nó aon eilimint threallach a bhfuil tabindex="0"
tréith aici.
Chun leid uirlisí a chur le a disabled
nó .disabled
dúil, cuir an eilimint taobh istigh de a <div>
agus cuir an leid uirlisí air sin <div>
ina ionad.
Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-
, mar atá i data-animation=""
.
Ainm | Cineál | Réamhshocrú | Cur síos |
---|---|---|---|
beochan | Boole | fíor | Cuir trasdul céimnithe CSS i bhfeidhm ar an leid uirlisí |
coimeádán | teaghrán | bréagach | bréagach | Cuireann sé an leid uirlisí le heilimint ar leith. Sampla: |
moill | uimhir | réad | 0 | Moill ag taispeáint agus ag cur i bhfolach an leid uirlisí (ms) - ní bhaineann sé le cineál truicear láimhe Má chuirtear uimhir ar fáil, cuirtear moill i bhfeidhm ar an dá cheilt/seó Is é struchtúr an ábhair: |
html | Boole | bréagach | Cuir HTML isteach sa leid uirlisí. Más bréagach é, text úsáidfear modh jQuery chun ábhar a chur isteach sa DOM. Úsáid téacs má tá imní ort faoi ionsaithe XSS. |
socrúchán | teaghrán | feidhm | 'barr' | Conas an leid uirlisí a shuíomh - barr | bun | chlé | ceart | gluaisteán. Nuair a úsáidtear feidhm chun an socrúchán a chinneadh, tugtar an nód DOM leid uirlisí mar a chéad argóint agus nód DOM na heiliminte spreagúla mar an dara háit. Tá an |
roghnóir | teaghrán | bréagach | Má chuirtear roghnóir ar fáil, déanfar cuspóirí na leideanna uirlisí a tharmligean chuig na spriocanna sonraithe. Go praiticiúil, úsáidtear é seo chun leideanna uirlisí a chur leis le hábhar HTML dinimiciúil. Féach é seo agus sampla faisnéiseach . |
teimpléad | teaghrán | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Bunús HTML le húsáid agus an leid uirlisí á chruthú. Déanfar na leideanna uirlisí
Ba chóir go mbeadh an eilimint fillte is forimeallaí ag an |
teideal | teaghrán | feidhm | '' | Luach teidil réamhshocraithe mura Má thugtar feidhm, glaofar í lena |
truicear | teaghrán | 'fócas hover' | Conas a spreagtar leid uirlisí - cliceáil | ainlíon | fócas | lámhleabhar. Is féidir leat pas a fháil truicear iolrach; iad a scaradh le spás. manual ní féidir é a chomhcheangal le haon truicear eile. |
amharclann | teaghrán | réad | feidhm | { roghnóir: 'corp', stuáil: 0 } | Coinníonn sé an leid uirlisí laistigh de theorainneacha an eilimint seo. Sampla: Má thugtar feidhm, tugtar nód DOM na heiliminte spreagúla mar an t-aon argóint atá aici. Tá an |
De rogha air sin is féidir roghanna le haghaidh leideanna aonair a shonrú trí úsáid a bhaint as tréithe sonraí, mar a mhínítear thuas.
$().tooltip(options)
Nascann láimhseálaí leid uirlisí le bailiúchán eilimint.
.tooltip('show')
Nochtann leid uirlisí eilimint. Filleann sé ar an nglaoiteoir sula dtaispeántar an leid uirlisí (ie sula shown.bs.tooltip
dtarlaíonn an teagmhas). Meastar gur "lámhleabhar" a spreag an leid uirlisí é seo. Ní thaispeántar leideanna uirlisí le teidil fad nialasacha riamh.
.tooltip('hide')
Folaigh leid uirlisí eiliminte. Filleann sé ar an nglaoiteoir sula mbeidh an leid uirlisí curtha i bhfolach (ie sula hidden.bs.tooltip
dtarlaíonn an t-imeacht). Meastar gur "lámhleabhar" a spreag an leid uirlisí é seo.
.tooltip('toggle')
Scoránaigh an leid uirlisí eilimint. Filleann sé ar an nglaoiteoir sula dtaispeántar nó sula gcuirtear i bhfolach an leid uirlisí (.i. sula dtarlaíonn shown.bs.tooltip
nó sula hidden.bs.tooltip
dtarlaíonn an teagmhas). Meastar gur "lámhleabhar" a spreag an leid uirlisí é seo.
.tooltip('destroy')
Seithí agus scriosann leid uirlisí eiliminte. Ní féidir leideanna uirlisí a úsáideann tarmligean (a chruthaítear leis an selector
rogha ) a scrios ina n-aonar ar eilimintí truicear sliocht.
Cineál Imeachta | Cur síos |
---|---|
taispeáin.bs.leid | Téann an teagmhas seo chun solais láithreach nuair show a ghlaoitear an modh ásc. |
leid.uirlis.bs | Cuirtear an teagmhas seo ar ceal nuair a bheidh an leid uirlisí infheicthe don úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích). |
leid.uirlis.bs | Cuirtear an teagmhas seo ar ceal láithreach nuair hide a ghlaoitear an modh ásc. |
i bhfolach.bs.leid | Tá an teagmhas seo bréan nuair a bhíonn an leid uirlisí curtha i bhfolach ón úsáideoir (fanacht go dtí go gcríochnófar na haistrithe CSS). |
cuireadh.bs.toolt | Cuirtear an teagmhas seo ar ceal tar éis na show.bs.tooltip hócáide nuair a cuireadh an teimpléad leid uirlisí leis an DOM. |
Cuir forleagan beaga ábhair, cosúil leis na cinn ar an iPad, le haon eilimint le haghaidh faisnéise tánaisteacha tithíochta.
Ní thaispeánfar popovers a bhfuil a theideal agus a n-ábhar ar fad nialasach.
Éilíonn Popovers go gcuirfear an breiseán tooltip san áireamh i do leagan de Bootstrap.
Ar chúiseanna feidhmíochta, is rogha an diúltaithe iad na data-apis Tooltip agus Popover, rud a chiallaíonn go gcaithfidh tú iad a thosú tú féin .
Bealach amháin chun na míreanna aníos ar leathanach a thúsú ná iad a roghnú de réir a n- data-toggle
tréith:
Nuair a bheidh popovers á n-úsáid ar eilimintí laistigh de , .btn-group
nó .input-group
ar eilimintí a bhaineann le tábla ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, <tfoot>
), beidh ort an rogha a shonrú container: 'body'
(atá doiciméadaithe thíos) chun fo-iarmhairtí nach dteastaíonn a sheachaint (amhail an eilimint ag fás níos leithne agus/ nó a coirnéil chothromú a chailleadh nuair a spreagtar an popover).
Chun popover a chur le disabled
nó .disabled
dúil, cuir an eilimint taobh istigh de a <div>
agus cuir an popover leis sin <div>
ina ionad.
Uaireanta is mian leat a popover a chur le hipearnasc a fillteann línte iolracha. Is é iompar réamhshocraithe an bhreiseáin popover ná é a lárú go cothrománach agus go hingearach. Cuir white-space: nowrap;
le do chuid ancairí chun é seo a sheachaint.
Tá ceithre rogha ar fáil: ailíniú barr, dheis, bun agus clé.
Sed posuere consectetur est agus lobortis. Aeinean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est agus lobortis. Aeinean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est agus lobortis. Aeinean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est agus lobortis. Aeinean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Bain úsáid as an focus
truicear chun popovers a dhíbhe ar an gcéad chliceáil eile a dhéanann an t-úsáideoir.
Le haghaidh iompar ceart trasbhrabhsálaí agus tras-ardáin, ní mór duit an chlib a úsáid <a>
, ní an <button>
chlib, agus ní mór duit na tréithe role="button"
agus na tabindex
tréithe a chur san áireamh freisin.
Cumasaigh popovers trí JavaScript:
Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-
, mar atá i data-animation=""
.
Ainm | Cineál | Réamhshocrú | Cur síos |
---|---|---|---|
beochan | Boole | fíor | Cuir trasdul céimnithe CSS i bhfeidhm ar an bpíosa aníos |
coimeádán | teaghrán | bréagach | bréagach | Cuireann sé an popover le gné ar leith. Sampla: |
ábhar | teaghrán | feidhm | '' | Luach réamhshocraithe an ábhair mura Má thugtar feidhm, glaofar í lena |
moill | uimhir | réad | 0 | Moill ag taispeáint agus i bhfolach an popover (ms) - ní bhaineann sé le cineál truicear láimhe Má chuirtear uimhir ar fáil, cuirtear moill i bhfeidhm ar an dá cheilt/seó Is é struchtúr an ábhair: |
html | Boole | bréagach | Cuir HTML isteach sa popover. Más bréagach é, text úsáidfear modh jQuery chun ábhar a chur isteach sa DOM. Úsáid téacs má tá imní ort faoi ionsaithe XSS. |
socrúchán | teaghrán | feidhm | 'ceart' | Conas an popover a shuíomh - barr | bun | chlé | ceart | gluaisteán. Nuair a úsáidtear feidhm chun an socrúchán a chinneadh, tugtar an nód DOM popover mar a chéad argóint agus nód DOM na heiliminte spreagúla mar an dara háit. Tá an |
roghnóir | teaghrán | bréagach | Má chuirtear roghnóir ar fáil, déanfar réada aníos a tharmligean chuig na spriocanna sonraithe. Go praiticiúil, baintear úsáid as seo le gur féidir popovers a chur leis an ábhar HTML dinimiciúil. Féach é seo agus sampla faisnéiseach . |
teimpléad | teaghrán | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Bunús HTML le húsáid agus an popover á chruthú. Déanfar na popover's Déanfar na popover's
Ba chóir go mbeadh an eilimint fillte is forimeallaí ag an |
teideal | teaghrán | feidhm | '' | Luach teidil réamhshocraithe mura Má thugtar feidhm, glaofar í lena |
truicear | teaghrán | 'cliceáil' | Conas a spreagtar aníos - cliceáil | ainlíon | fócas | lámhleabhar. Is féidir leat pas a fháil truicear iolrach; iad a scaradh le spás. manual ní féidir é a chomhcheangal le haon truicear eile. |
amharclann | teaghrán | réad | feidhm | { roghnóir: 'corp', stuáil: 0 } | Coinníonn sé an popover laistigh de theorainneacha an eilimint seo. Sampla: Má thugtar feidhm, tugtar nód DOM na heiliminte spreagúla mar an t-aon argóint atá aici. Tá an |
De rogha air sin, is féidir roghanna le haghaidh popovers aonair a shonrú trí úsáid a bhaint as tréithe sonraí, mar a mhínítear thuas.
$().popover(options)
Tosaíonn popovers le haghaidh bailiúchán eilimint.
.popover('show')
Nochtann popover eilimint. Filleann sé ar an nglaoiteoir sula dtaispeántar an t-athrú aníos (ie sula shown.bs.popover
dtarlaíonn an teagmhas). Meastar gurb é seo "lámhleabhar" a chuireann faoi deara an popover. Ní thaispeánfar popovers a bhfuil a theideal agus a n-ábhar ar fad nialasach.
.popover('hide')
Folaíonn popover eilimint. Filleann sé ar an nglaoiteoir sular cuireadh an t-amóg aníos i bhfolach (ie sula hidden.bs.popover
dtarlaíonn an teagmhas). Meastar gurb é seo "lámhleabhar" a chuireann faoi deara an popover.
.popover('toggle')
Scoránaigh eilimint a popover. Filleann sé ar an nglaoiteoir sula dtaispeántar nó sula gcuirtear i bhfolach an t-amóg aníos (.i. sula dtarlaíonn an t-imeacht) shown.bs.popover
. hidden.bs.popover
Meastar gurb é seo "lámhleabhar" a chuireann faoi deara an popover.
.popover('destroy')
Seithí agus scriosann popover eilimint. Ní féidir popovers a úsáideann tarmligean (a chruthaítear ag baint úsáide as an selector
rogha ) a scrios ina n-aonar ar eilimintí truicear sliocht.
Cineál Imeachta | Cur síos |
---|---|
taispeáin.bs.píosa | Téann an teagmhas seo chun solais láithreach nuair show a ghlaoitear an modh ásc. |
taispeánta.bs.popover | Tá an teagmhas seo bréan nuair a bhíonn an aníos infheicthe ag an úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích). |
folaigh.bs.popover | Cuirtear an teagmhas seo ar ceal láithreach nuair hide a ghlaoitear an modh ásc. |
i bhfolach.bs.popover | Tá an teagmhas seo bréan nuair a bhíonn an aníos aníos curtha i bhfolach ón úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích). |
isteach.bs.popover | Cuirtear an teagmhas seo ar ceal tar éis na show.bs.popover hócáide nuair a chuirtear an teimpléad aníos leis an DOM. |
Cuir feidhmiúlacht díbhe le gach teachtaireacht foláirimh leis an mbreiseán seo.
Nuair a bhíonn .close
cnaipe á úsáid, caithfidh sé a bheith ar an gcéad leanbh den .alert-dismissible
mharcáil agus ní fhéadfaidh aon ábhar téacs a bheith os a chomhair sa mharcáil.
Athraigh seo agus sin agus bain triail eile as. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras matis consectetur purus sit amet fermentum.
Níl le déanamh ach a chur data-dismiss="alert"
le do chnaipe dúnta chun feidhmiúlacht dhúnadh foláirimh a thabhairt go huathoibríoch. Má dhúnann tú foláireamh, bainfear den DOM é.
Chun do chuid foláirimh a úsáid beochan agus iad ag dúnadh, déan cinnte go bhfuil an .fade
agus.in
na ranganna curtha i bhfeidhm orthu cheana féin.
$().alert()
Éisteann foláireamh le haghaidh imeachtaí cliceáil ar ghnéithe sliocht a bhfuil an data-dismiss="alert"
tréith acu. (Ní gá nuair a bhíonn uath-thionscnamh an data-api in úsáid.)
$().alert('close')
Dúnann foláireamh trína bhaint den DOM. Má tá an .fade
agus .in
ranganna i láthair ar an eilimint, beidh an foláireamh céimnithe amach sula mbainfear é.
Nochtann breiseán foláirimh Bootstrap roinnt imeachtaí chun dul i ngleic le feidhmiúlacht foláirimh.
Cineál Imeachta | Cur síos |
---|---|
dún.bs.aire | Téann an teagmhas seo chun solais láithreach nuair close a ghlaoitear an modh ásc. |
dúnta.bs.aire | Bristear an teagmhas seo nuair a dhúntar an foláireamh (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích). |
Déan níos mó le cnaipí. Rialú stáit cnaipe nó cruthaigh grúpaí cnaipí le haghaidh tuilleadh comhpháirteanna mar bharraí uirlisí.
Leanann Firefox de stáit rialaithe (míchumas agus seiceáltacht) trasna ualaí leathanach . Réiteach chun é seo a úsáid is ea autocomplete="off"
. Féach ar fhabht Mozilla #654072 .
Cuir data-loading-text="Loading..."
le húsáid stát luchtaithe ar chnaipe.
Tá an ghné seo imithe i léig ó v3.3.5 agus baineadh é in v4.
Ar mhaithe leis an léiriú seo, táimid ag úsáid data-loading-text
agus $().button('loading')
, ach ní hé sin an t-aon stát is féidir leat a úsáid. Féach níos mó faoi seo thíos sna $().button(string)
doiciméid .
Cuir data-toggle="button"
leis chun scoránú a ghníomhachtú ar chnaipe amháin.
.active
agusaria-pressed="true"
Le haghaidh cnaipí réamhscornaithe, ní mór duit an .active
rang agus an aria-pressed="true"
tréith a chur leis an duine button
féin.
Cuir data-toggle="buttons"
le .btn-group
ticbhosca nó ionchuir raidió chun scoránú a chumasú ina stíleanna faoi seach.
.active
Le haghaidh roghanna réamhroghnaithe, ní mór duit an .active
rang a chur leis an ionchur label
féin.
Má dhéantar staid ticbhosca an chnaipe ticbhosca a nuashonrú gan click
imeacht a chur ar an gcnaipe (m.sh. trí <input type="reset">
nó trí checked
airí an ionchuir a shocrú), beidh ort an .active
rang a scoránaigh ar do chuid féin an ionchuir label
.
$().button('toggle')
Scoránaigh an staid bhrú. Tugann sé an chuma ar an gcnaipe go bhfuil sé curtha i ngníomh.
$().button('reset')
Athshocraigh staid na gcnaipe - malartaíonn sé téacs go buntéacs. Tá an modh seo asincrónach agus filleann sé sula mbeidh an t-athshocrú críochnaithe i ndáiríre.
$().button(string)
Malartaíonn téacs chuig aon stát sonraí sainithe téacs.
Breiseán solúbtha a úsáideann dornán ranganna le haghaidh iompar éasca scoránaigh.
Éilíonn Collapse go gcuirfear an breiseán aistrithe san áireamh i do leagan de Bootstrap.
Cliceáil ar na cnaipí thíos chun eilimint eile a thaispeáint agus a cheilt trí athruithe ranga:
.collapse
seithí ábhar.collapsing
a chuirtear i bhfeidhm le linn aistrithe.collapse.in
léiríonn ábharIs féidir leat nasc a úsáid leis an href
tréith, nó cnaipe leis an data-target
tréith. Sa dá chás, data-toggle="collapse"
tá an gá.
Leathnaigh an t-iompar caolaithe réamhshocraithe chun cairdín a chruthú le comhpháirt an phainéil.
Is féidir freisin s a mhalartú .panel-body
le .list-group
s.
Bí cinnte a chur aria-expanded
leis an eilimint rialaithe. Sainmhíníonn an tréith seo go sainráite staid reatha na heiliminte collapsible do léitheoirí scáileáin agus teicneolaíochtaí cúnta dá samhail. Má dhúntar an eilimint infhillte de réir réamhshocraithe, ba cheart go mbeadh luach aria-expanded="false"
. Má tá an eilimint infhillte socraithe agat le bheith oscailte de réir réamhshocraithe ag baint úsáide as an in
rang, socraigh aria-expanded="true"
an rialtán ina ionad sin. Scoránóidh an breiseán an aitreabúid seo go huathoibríoch bunaithe ar cibé ar osclaíodh nó nár dúnadh an eilimint infhillte.
Ina theannta sin, má tá d’eilimint rialaithe ag díriú ar eilimint infhillte amháin – .i. tá an data-target
aitreabúid dírithe ar id
roghnóir – is féidir leat tréith bhreise a chur aria-controls
leis an eilimint rialaithe, ina bhfuil an id
eilimint infhillte. Baineann léitheoirí scáileáin nua-aimseartha agus teicneolaíochtaí cúnta comhchosúla úsáid as an tréith seo chun aicearraí breise a sholáthar d’úsáideoirí chun nascleanúint a dhéanamh go díreach chuig an eilimint infhillte féin.
Úsáideann an breiseán collapse roinnt ranganna chun an t-ardú trom a láimhseáil:
.collapse
seithí an t-ábhar.collapse.in
léiríonn an t-ábhar.collapsing
cuirtear leis nuair a thosaíonn an t-aistriú, agus baintear é nuair a chríochnaíonn séIs féidir na ranganna seo a fháil i component-animations.less
.
Ní gá ach cuir data-toggle="collapse"
leis data-target
an eilimint chun rialú a shannadh go huathoibríoch ar eilimint infhillte. Glacann an data-target
tréith le roghnóir CSS chun an cliseadh a chur i bhfeidhm air. Bí cinnte an rang collapse
a chur leis an eilimint infhillte. Más mian leat é a oscailt roimh ré, cuir an rang breise in
.
Chun bainistíocht grúpa cosúil le bosca ceoil a chur le rialú infhillte, cuir an tréith sonraí data-parent="#selector"
. Déan tagairt don taispeántas chun é seo a fheiceáil i ngníomh.
Cumasaigh de láimh le:
Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-
, mar atá i data-parent=""
.
Ainm | cineál | réamhshocraithe | tuairisc |
---|---|---|---|
tuismitheoir | roghnóir | bréagach | Má chuirtear roghnóir ar fáil, dúnfar gach eilimint in-chomhlaite faoin tuismitheoir sonraithe nuair a thaispeánfar an mhír in-chomhlaite seo. (cosúil le hiompar traidisiúnta bosca ceoil - braitheann sé seo ar an panel rang) |
scoránaigh | Boole | fíor | Scoránaigh an eilimint infhillte ar agairt |
.collapse(options)
Gníomhachtaíonn sé d'ábhar mar eilimint infhillte. Glacann rogha roghnach object
.
.collapse('toggle')
Scoránaigh eilimint infhillte a thaispeántar nó folaithe. Filleann sé ar an nglaoiteoir sula dtaispeántar nó sula gcuirtear i bhfolach an eilimint in-láite (.i. sula dtarlaíonn an t-imeacht) shown.bs.collapse
.hidden.bs.collapse
.collapse('show')
Léiríonn eilimint infhillte. Filleann sé ar an nglaoiteoir sula dtaispeántar an eilimint infhillte (ie sula shown.bs.collapse
dtarlaíonn an teagmhas).
.collapse('hide')
Seithí eilimint infhillte. Filleann sé ar an nglaoiteoir sula mbeidh an eilimint in-chomhlaite curtha i bhfolach (ie sula hidden.bs.collapse
dtarlaíonn an teagmhas).
Nochtann rang titim Bootstrap roinnt imeachtaí chun dul i ngleic leis an bhfeidhmiúlacht leite.
Cineál Imeachta | Cur síos |
---|---|
taispeáin.bs.leac | Téann an teagmhas seo chun solais láithreach nuair show a ghlaoitear an modh ásc. |
léirithe.bs | Cuirtear an teagmhas seo ar ceal nuair a bhíonn eilimint chlaonta curtha infheicthe don úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích). |
folaigh.bs.leac | Cuirtear an teagmhas seo ar ceal láithreach nuair hide a glaodh ar an modh. |
i bhfolach.bs.leag | Cuirtear an teagmhas seo ar ceal nuair a cuireadh eilimint chlaonta i bhfolach ón úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích). |
Comhpháirt taispeántas sleamhnán chun rothaíocht trí eilimintí, cosúil le timpeallán. Ní thacaítear le timpealláin neadaithe.
Go ginearálta ní chloíonn an chomhpháirt timpealláin leis na caighdeáin inrochtaineachta. Más gá duit a bheith comhlíontach, smaoinigh le do thoil ar roghanna eile chun d’inneachar a chur i láthair.
Úsáideann Bootstrap CSS3 dá bheochan amháin, ach ní thacaíonn Internet Explorer 8 & 9 leis na hairíonna riachtanacha CSS. Mar sin, níl aon bheochan aistrithe sleamhnáin ann agus na brabhsálaithe seo á n-úsáid. Tá cinneadh déanta againn d'aon ghnó gan fallbacks jQuery-bhunaithe a chur san áireamh do na haistrithe.
Is gá an .active
rang a chur le ceann de na sleamhnáin. Seachas sin, ní bheidh an timpeallán le feiceáil.
Ní gá go mbeadh na ranganna .glyphicon .glyphicon-chevron-left
agus .glyphicon .glyphicon-chevron-right
na ranganna ag teastáil le haghaidh na rialuithe. Soláthraíonn Bootstrap .icon-prev
agus .icon-next
mar roghanna gnáth-unicode.
Cuir fotheidil le do shleamhnáin go héasca leis an .carousel-caption
eilimint laistigh d'aon cheann .item
. Cuir beagnach aon HTML roghnach ann agus déanfar é a ailíniú agus a fhormáidiú go huathoibríoch.
Éilíonn timpealláin go n-úsáidfear id
ar an gcoimeádán is forimeallaí (an .carousel
) le haghaidh rialuithe timpealláin chun feidhmiú i gceart. Nuair a chuirtear timpealláin iolracha leis, nó nuair a athraítear timpealláin id
, déan cinnte na rialuithe ábhartha a nuashonrú.
Bain úsáid as tréithe sonraí chun suíomh an timpealláin a rialú go héasca. data-slide
glacann sé leis na heochairfhocail prev
nó next
, a athraíonn an suíomh sleamhnáin i gcoibhneas lena shuíomh reatha. Mar mhalairt air sin, bain úsáid as data-slide-to
innéacs amh sleamhnáin a chur ar aghaidh chuig an timpeallán data-slide-to="2"
, a aistríonn suíomh an tsleamhnáin go hinnéacs ar leith ag tosú le 0
.
Úsáidtear an data-ride="carousel"
tréith chun timpeallán a mharcáil mar bheochan ag tosú ag ualach an leathanaigh. Ní féidir é a úsáid in éineacht le (iomarcach agus neamhriachtanach) inisealacha JavaScript a chur in aithne don timpeallán céanna.
Cuir glaoch ar timpealláin de láimh le:
Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-
, mar atá i data-interval=""
.
Ainm | cineál | réamhshocraithe | tuairisc |
---|---|---|---|
eatramh | uimhir | 5000 | An méid ama le moill idir rothaíocht go huathoibríoch earra. Má tá sé bréagach, ní rothóidh timpealláin go huathoibríoch. |
sos | teaghrán | null | "hover" | Má shocraítear é "hover" , stopann rothaíocht an timpealláin ar aghaidh mouseenter agus athuair rothaíocht an timpealláin air mouseleave . Má tá sé socraithe go null , ní chuirfear sos ar hovering thar an timpeallán. |
wrap | Boole | fíor | Cibé ar cheart don timpeallán rothaíocht go leanúnach nó stadanna crua a bheith aige. |
méarchlár | Boole | fíor | Cibé ar cheart don timpeallán freagairt d'imeachtaí méarchláir. |
.carousel(options)
Tosaíonn an timpeallán le rogha roghnach object
agus tosaíonn sé ag rothaíocht trí mhíreanna.
.carousel('cycle')
Rothaíochta tríd na míreanna timpealláin ó chlé go deas.
.carousel('pause')
Stopann an timpeallán ó rothaíocht trí earraí.
.carousel(number)
Rothlaíonn sé an timpeallán chuig fráma ar leith (0 bunaithe, cosúil le sraith).
.carousel('prev')
Timthriallta go dtí an mhír roimhe seo.
.carousel('next')
Timthriallta go dtí an chéad mhír eile.
Nochtann rang timpealláin Bootstrap dhá imeacht chun dul i ngleic le feidhmiúlacht timpealláin.
Tá na hairíonna breise seo a leanas ag an dá imeacht:
direction
: An treo ina bhfuil an timpeallán ag sleamhnú ( "left"
nó "right"
).relatedTarget
: An eilimint DOM atá á sliseadh isteach mar an mhír ghníomhach.Déantar gach imeacht timpealláin a chur ar an timpeallán féin (.i. ag an <div class="carousel">
).
Cineál Imeachta | Cur síos |
---|---|
sleamhnán.bs.carousel | Téann an teagmhas seo chun cinn láithreach nuair a úsáidtear an slide modh ásc. |
slid.bs.carousel | Tá an teagmhas seo bréan nuair a bhíonn an t-aistriú sleamhnáin críochnaithe ag an timpeallán. |
Scoránaigh an breiseán greamaithe position: fixed;
air agus as, ag déanamh aithrise ar an éifeacht a aimsítear le position: sticky;
. Taispeántas beo den bhreiseán affix is ea an tseolloingseoireachta ar dheis.
Bain úsáid as an breiseán affix trí tréithe sonraí nó de láimh le do JavaScript féin. Sa dá chás, ní mór duit CSS a sholáthar maidir le suíomh agus leithead d'ábhar greamaithe.
Tabhair faoi deara: Ná húsáid an breiseán affix ar eilimint atá in eilimint sách suite, mar cholún tarraingthe nó bhrúite, mar gheall ar fhabht rindreála Safari .
Scoránaigh an breiseán affix idir trí rang, gach ceann acu ag léiriú stát ar leith: .affix
, .affix-top
, agus .affix-bottom
. Ní mór duit na stíleanna, seachas position: fixed;
ar .affix
, a sholáthar do na ranganna seo tú féin (neamhspleách ar an mbreiseán seo) chun na suíomhanna iarbhír a láimhseáil.
Seo mar a oibríonn an breiseán affix:
.affix-top
le fios go bhfuil an eilimint sa suíomh is fearr. Ag an bpointe seo níl aon suíomh CSS ag teastáil..affix
athshocraítear .affix-top
agus a shocraíonn position: fixed;
(arna sholáthar ag CSS Bootstrap)..affix
gcuirfí .affix-bottom
. Ós rud é go bhfuil fritháirimh roghnach, caithfidh tú an CSS cuí a shocrú chun ceann a shocrú. Sa chás seo, cuir position: absolute;
nuair is gá. Úsáideann an breiseán an aitreabúid sonraí nó rogha JavaScript chun a chinneadh cén áit ar cheart an eilimint a shuíomh as sin.Lean na céimeanna thuas chun do CSS a shocrú do cheachtar de na roghanna úsáide thíos.
Chun iompar a ghreamú go héasca le haon eilimint, níl le déanamh ach cuir data-spy="affix"
leis an eilimint a bhfuil tú ag iarraidh spy a chur uirthi. Úsáid fritháirimh chun a shainiú cathain is ceart feannadh eilimint a scoránú.
Cuir glaoch ar an mbreiseán affix trí JavaScript:
Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-
, mar atá i data-offset-top="200"
.
Ainm | cineál | réamhshocraithe | tuairisc |
---|---|---|---|
fhritháireamh | uimhir | feidhm | réad | 10 | Picteilíní le fritháireamh ón scáileán agus suíomh an scrolla á ríomh. Má chuirtear uimhir amháin ar fáil, cuirfear an fritháireamh i bhfeidhm sa dá threo barr agus bun. Chun fritháireamh uathúil, bun agus barr a sholáthar ní gá ach réad offset: { top: 10 } nó offset: { top: 10, bottom: 5 } . Bain úsáid as feidhm nuair is gá duit fritháireamh a ríomh go dinimiciúil. |
sprioc | roghnóir | nód | eilimint jQuery | an window réad |
Sonraíonn an ghné sprice den ghreamú. |
.affix(options)
Gníomhachtaíonn sé d'inneachar mar ábhar greamaithe. Glacann rogha roghnach object
.
.affix('checkPosition')
Athríomh staid an ghreamaithe bunaithe ar thoisí, suíomh agus suíomh scrollaithe na n-eilimintí ábhartha. Cuirtear an .affix
, .affix-top
, agus .affix-bottom
na ranganna leis an ábhar greamaithe nó baintear as iad de réir an stáit nua. Is gá an modh seo a ghlaoch gach uair a athraítear toisí an ábhair ghreamaithe nó an ghné sprice, chun suíomh ceart an ábhair ghreamaithe a chinntiú.
Nochtann breiseán greamaithe Bootstrap roinnt imeachtaí chun dul i ngleic le feidhmiúlacht an ghreamaithe.
Cineál Imeachta | Cur síos |
---|---|
affix.bs | Tinte an teagmhas seo díreach roimh an eilimint a ghreamú. |
ghreamaithe.bs | Tá an teagmhas seo fired tar éis an eilimint a ghreamú. |
affix-top.bs.affix | Titeann an teagmhas seo as go díreach sula ndéantar an eilimint a ghreamú den bharr. |
affixed-barr.bs.affix | Cuirtear an teagmhas seo ar ceal tar éis don eilimint a bheith greamaithe den bharr. |
affix-bun.bs.affix | Titeann an teagmhas seo díreach roimh an eilimint a ghreamú ón mbun. |
affixed-bun.bs.affix | Bristear an teagmhas seo tar éis don eilimint a bheith greamaithe ag an mbun. |