JavaScript
Thoir beò phàirtean Bootstrap le còrr air dusan plugins jQuery àbhaisteach. Cuir a-steach iad uile gu furasta, no aon ri aon.
Thoir beò phàirtean Bootstrap le còrr air dusan plugins jQuery àbhaisteach. Cuir a-steach iad uile gu furasta, no aon ri aon.
*.js
Faodar plugain a thoirt a-steach leotha fhèin (a’ cleachdadh faidhlichean fa leth Bootstrap ), no uile aig an aon àm (a’ cleachdadh bootstrap.js
no am mion-fhiosrachadh bootstrap.min.js
).
An dà chuid bootstrap.js
agus bootstrap.min.js
bidh na plugins uile ann an aon fhaidhle. Cuir a-steach ach aon.
Tha cuid de plugins agus co-phàirtean CSS an urra ri plugins eile. Ma bheir thu a-steach plugins leotha fhèin, dèan cinnteach gun dèan thu cinnteach airson na h-eisimeileachd sin anns na docaichean. Thoir an aire cuideachd gu bheil a h-uile plugan an urra ri jQuery (tha seo a’ ciallachadh gum feumar jQuery a thoirt a-steach ro na faidhlichean plugan). Bruidhinn ris an fheadhainn againnbower.json
gus faicinn dè na dreachan de jQuery a tha a’ faighinn taic.
Faodaidh tu na plugins Bootstrap gu lèir a chleachdadh dìreach tron API markup gun a bhith a’ sgrìobhadh aon loidhne de JavaScript. Is e seo an API den chiad ìre aig Bootstrap agus bu chòir dha a bhith mar a’ chiad bheachdachadh agad nuair a bhios tu a’ cleachdadh plugan.
Thuirt sin, ann an cuid de shuidheachaidhean dh'fhaodadh gum biodh e ion-mhiannaichte an gnìomh seo a thionndadh dheth. Mar sin, bidh sinn cuideachd a’ toirt seachad an comas am feart dàta API a dhì-cheangal le bhith a’ dì-cheangal a h-uile tachartas air an sgrìobhainn leis an ainm data-api
. Tha seo a’ coimhead mar seo:
Air neo, gus cuimseachadh air plugan sònraichte, dìreach cuir a-steach ainm a’ phlug mar àite-ainm còmhla ris an ainm-àite data-api mar seo:
Na cleachd buadhan dàta bho iomadh plugan air an aon eileamaid. Mar eisimpleir, chan urrainn putan inneal a bhith aig putan agus modal a thogail. Gus seo a dhèanamh, cleachd eileamaid còmhdaich.
Tha sinn cuideachd den bheachd gum bu chòir dhut a bhith comasach air a h-uile plugan Bootstrap a chleachdadh dìreach tro JavaScript API. Tha a h-uile API poblach nan dòighean singilte, slabhraidh, agus tillidh iad an cruinneachadh air an deach gabhail.
Bu chòir do gach dòigh gabhail ri nì roghainnean roghnach, sreang a tha ag amas air dòigh sònraichte, no gun dad (a thòisicheas plugan le giùlan bunaiteach):
Bidh gach plugan cuideachd a’ nochdadh an neach-togail amh aige air Constructor
togalach: $.fn.popover.Constructor
. Ma tha thu airson eisimpleir plugan sònraichte fhaighinn, thoir air ais e gu dìreach bho eileamaid: $('[rel="popover"]').data('popover')
.
'S urrainn dhut na roghainnean bunaiteach airson plugan atharrachadh le bhith ag atharrachadh Constructor.DEFAULTS
nì a' phlugain:
Aig amannan feumar plugins Bootstrap a chleachdadh le frèaman UI eile. Anns na suidheachaidhean sin, faodaidh tubaistean ainmean-àite tachairt bho àm gu àm. Ma thachras seo, faodaidh tu fios a chuir chun .noConflict
plugan a tha thu airson luach a thilleadh.
Bidh Bootstrap a’ toirt seachad tachartasan àbhaisteach airson gnìomhan sònraichte a’ mhòr-chuid de plugins. San fharsaingeachd, thig iad sin ann an cruth com-pàirt infinitive agus san àm a dh’ fhalbh - far a bheil an infinitive (ex. show
) air a phiobrachadh aig toiseach tachartais, agus an cruth com-pàirteachaidh san àm a dh’ fhalbh (ex. shown
) air a phiobrachadh nuair a thèid gnìomh a chrìochnachadh.
Bho 3.0.0, tha ainmean air a h-uile tachartas Bootstrap.
Bidh a h-uile tachartas infinitive a’ toirt seachad preventDefault
comas-gnìomh. Bheir seo an comas stad a chuir air gnìomh mus tòisich e.
Faodar faighinn chun dreach de gach plugan jQuery aig Bootstrap tro VERSION
sheilbh neach-togail a’ plugan. Mar eisimpleir, airson am plugan Tooltip:
Cha bhith plugins Bootstrap a’ tuiteam air ais gu sònraichte gràsmhor nuair a tha JavaScript à comas. Ma tha dragh ort mu eòlas an neach-cleachdaidh sa chùis seo, cleachd <noscript>
gus an suidheachadh a mhìneachadh (agus mar a nì thu ath-chomasachadh JavaScript) don luchd-cleachdaidh agad, agus / no cuir ris na fallbacks àbhaisteach agad fhèin.
Chan eil Bootstrap a’ toirt taic oifigeil do leabharlannan JavaScript treas-phàrtaidh leithid Prototype no jQuery UI. A dh'aindeoin .noConflict
agus ainmean thachartasan, dh'fhaodadh gum bi duilgheadasan co-chòrdalachd ann a dh'fheumas tu a rèiteachadh leat fhèin.
Airson buaidhean gluasaid sìmplidh, cuir a-steach transition.js
aon uair còmhla ris na faidhlichean JS eile. Ma tha thu a’ cleachdadh am faidhle cruinnichte (no mionaichte) bootstrap.js
, cha leig thu leas seo a ghabhail a-steach - tha e ann mu thràth.
Tha Transition.js na neach-cuideachaidh bunaiteach airson transitionEnd
tachartasan a bharrachd air emuladair gluasaid CSS. Tha e air a chleachdadh leis na plugins eile gus sgrùdadh a dhèanamh airson taic gluasaid CSS agus gus eadar-ghluasadan crochte a ghlacadh.
Faodar eadar-ghluasadan a chiorramachadh air feadh na cruinne a’ cleachdadh a’ chriomag JavaScript a leanas, a dh’ fheumas tighinn às deidh transition.js
(no bootstrap.js
, bootstrap.min.js
mar a bhios) a bhith air a luchdachadh:
Tha modalan air an sgioblachadh, ach sùbailte, brosnachaidhean còmhraidh leis a’ ghnìomhachd as lugha a tha a dhìth agus uireasbhaidhean snasail.
Dèan cinnteach nach fosgail thu modal fhad ‘s a tha fear eile fhathast ri fhaicinn. Tha feum air còd gnàthaichte a bhith a’ sealltainn barrachd air aon mhodal aig an aon àm.
Feuch an-còmhnaidh ri còd HTML modal a chuir ann an suidheachadh àrd-ìre anns an sgrìobhainn agad gus pàirtean eile a sheachnadh a bheir buaidh air coltas agus / no gnìomhachd a’ mhodail.
Tha cuid de rabhaidhean ann mu bhith a’ cleachdadh mhodalan air innealan gluasadach. Faic na docaichean taic brabhsair againn airson mion-fhiosrachadh.
Air sgàth mar a tha HTML5 a’ mìneachadh a semantics, autofocus
chan eil buaidh sam bith aig feart HTML ann am modalan Bootstrap. Gus an aon bhuaidh a choileanadh, cleachd cuid de JavaScript àbhaisteach:
Modal air a thoirt seachad le bann-cinn, bodhaig, agus seata ghnìomhan anns a’ bhun-coise.
Tog modal tro JavaScript le bhith a’ briogadh air a’ phutan gu h-ìosal. Bidh e a 'sleamhnachadh sìos agus a' seargadh a-steach bho mhullach na duilleige.
Dèan cinnteach gun cuir thu role="dialog"
agus aria-labelledby="..."
, a 'toirt iomradh air an tiotal modal, gu .modal
, agus role="document"
ris .modal-dialog
fhèin.
A bharrachd air an sin, faodaidh tu cunntas a thoirt air a’ chòmhradh modal agad le aria-describedby
on .modal
.
Le bhith a’ stèidheachadh bhideothan YouTube ann am modalan feumaidh JavaScript a bharrachd nach eil ann am Bootstrap gus stad a chuir air ath-chluich gu fèin-ghluasadach agus barrachd. Faic am post cuideachail Stack Overflow seo airson tuilleadh fiosrachaidh.
Tha dà mheud roghainneil aig modalan, rim faighinn tro chlasaichean mion-atharrachaidh airson an cur air faidhle .modal-dialog
.
Airson modalan a tha dìreach a’ nochdadh seach a bhith a’ seargadh a-steach ri fhaicinn, thoir air falbh an .fade
clas bhon chomharra modal agad.
Gus brath a ghabhail air an t-siostam clèithe Bootstrap taobh a-staigh modal, dìreach neadachadh .row
s taobh a-staigh an .modal-body
agus an uairsin cleachd na clasaichean siostam clèithe àbhaisteach.
A bheil dòrlach de phutanan agad a bhrosnaicheas an aon mhodal, dìreach le susbaint beagan eadar-dhealaichte? Cleachd event.relatedTarget
agus buadhan HTMLdata-*
('s dòcha tro jQuery ) gus susbaint a' mhodail atharrachadh a rèir dè am putan a chaidh a bhriogadh. Faic na docaichean Tachartasan Modal airson mion-fhiosrachadh air relatedTarget
,
Bidh am plugan modal a’ togail do shusbaint falaichte a rèir iarrtas, tro bhuadhan dàta no JavaScript. Bidh e cuideachd a’ cur .modal-open
ris a’ <body>
ghiùlan sgrolaidh àbhaisteach a chuir dheth agus a’ gineadh a .modal-backdrop
gus àite cliog a sholarachadh airson a bhith a’ cur às do mhodalan a tha air an sealltainn nuair a phutas tu taobh a-muigh a’ mhodail.
Cuir modal an gnìomh gun a bhith a’ sgrìobhadh JavaScript. Suidhich data-toggle="modal"
air eileamaid rianadair, mar phutan, còmhla ri a data-target="#foo"
no href="#foo"
gus amas air modal sònraichte airson gluasad.
Cuir fòn gu modal le id myModal
le aon loidhne de JavaScript:
Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-
, mar ann an data-backdrop=""
.
Ainm | seòrsa | bunaiteach | tuairisgeul |
---|---|---|---|
cùl-raon | boolean no an t-sreang'static' |
fìor | A’ toirt a-steach eileamaid cùl-raon modal. Air neo, sònraich static airson cùl-raon nach dùin am modal air cliogadh. |
meur-chlàr | boolean | fìor | Dùin am modal nuair a thèid an iuchair teiche a bhrùthadh |
seall | boolean | fìor | A’ sealltainn am modal nuair a thèid a thòiseachadh. |
iomallach | slighe | breugach | Chan eil an roghainn seo air a mholadh bho v3.3.0 agus chaidh a thoirt air falbh ann an v4. Tha sinn a’ moladh an àite sin a bhith a’ cleachdadh teamplaid taobh teachdaiche no frèam ceangail dàta, no a’ fònadh jQuery.load thu fhèin. Ma thèid URL iomallach a thoirt seachad, thèid susbaint a luchdachadh aon turas tro mhodh jQuery |
.modal(options)
Cuir do shusbaint an gnìomh mar mhodal. A 'gabhail ri roghainnean roghnach object
.
.modal('toggle')
Tog modal le làimh. Tilleadh chun neach-fios mus deach am modal a shealltainn no fhalach (ie mus tachair an tachartas shown.bs.modal
no an hidden.bs.modal
tachartas).
.modal('show')
Le làimh a 'fosgladh modal. Tilleadh chun neach-fios mus deach am modal a shealltainn (ie mus tachair an shown.bs.modal
tachartas).
.modal('hide')
Le làimh a 'falach modal. Tilleadh chun neach-fios mus deach am modal fhalach (ie mus tachair an hidden.bs.modal
tachartas).
.modal('handleUpdate')
Leugh suidheachadh a’ mhodail gus a dhol an aghaidh bàr-scrollaidh gun fhios nach nochd fear, a bheireadh air a’ mhodal leum air an taobh chlì.
Chan eil feum air ach nuair a dh'atharraicheas àirde a 'mhodail fhad' sa tha e fosgailte.
Bidh clas modal Bootstrap a’ nochdadh grunn thachartasan airson a dhol a-steach do ghnìomhachd modal.
Tha a h-uile tachartas modal air a losgadh aig a’ mhodal fhèin (ie aig an <div class="modal">
).
Seòrsa Tachartas | Tuairisgeul |
---|---|
seall.bs.modal | Bidh an tachartas seo a’ losgadh sa bhad nuair show a chanar ris an dòigh eisimpleir. Ma thèid adhbhrachadh le cliog, tha an eileamaid a chaidh a bhriogadh ri fhaighinn mar relatedTarget sheilbh an tachartais. |
air a thaisbeanadh.bs.modal | Thèid an tachartas seo a chuir às nuair a bhios am modal ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh). Ma thèid adhbhrachadh le cliog, tha an eileamaid a chaidh a bhriogadh ri fhaighinn mar relatedTarget sheilbh an tachartais. |
seiche.bs.modal | Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an hide dòigh eisimpleir a ghairm. |
falaichte.bs.modal | Thèid an tachartas seo a chuir às nuair a tha am modal deiseil a bhith falaichte bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh). |
luchdaichte.bs.modal | Thèid an tachartas seo a losgadh nuair a tha am modal air susbaint a luchdachadh leis an remote roghainn. |
Cuir clàran-bìdh sìos gu cha mhòr rud sam bith leis a ’phlug sìmplidh seo, a’ toirt a-steach am bàr seòlaidh, tabaichean agus pills.
Tro bhuadhan dàta no JavaScript, bidh am plugan a tha a’ tuiteam sìos a’ togail susbaint falaichte (clàran-taice sìos) le bhith a’ togail a’ .open
chlas air an liosta phàrant.
Air innealan gluasadach, bidh fosgladh tuiteam-sìos a’ cur ris .dropdown-backdrop
mar raon tap airson clàir tuiteam-sìos a dhùnadh nuair a tha thu a’ cnagadh air taobh a-muigh a’ chlàr, riatanas airson taic iOS ceart. Tha seo a’ ciallachadh gu bheil feum air tap a bharrachd air fòn-làimhe gus gluasad bho chlàr fosgailte a-nuas gu clàr tuiteam-sìos eile.
Nota: data-toggle="dropdown"
Thathas an urra ris a’ fheart airson clàran-bìdh a dhùnadh sìos aig ìre tagraidh, agus mar sin is e deagh bheachd a th’ ann a chleachdadh an-còmhnaidh.
Cuir data-toggle="dropdown"
ri ceangal no putan gus tuiteam sìos a thogail.
Gus URLan a chumail slàn le putanan ceangail, cleachd am data-target
feart an àite href="#"
.
Cuir fòn gu na dropdowns tro JavaScript:
data-toggle="dropdown"
fhathast a dhìthGe bith co-dhiù an cuir thu fios chun chlàr tuiteam-sìos agad tro JavaScript no an àite sin cleachd an data-api, data-toggle="dropdown"
feumaidh tu an-còmhnaidh a bhith an làthair air eileamaid brosnachaidh an tuiteam-sìos.
Chan eil gin
$().dropdown('toggle')
Tog an clàr-taice sìos de bhàr-seòlaidh ainmichte no seòladh tabaichte.
Tha a h-uile tachartas tuiteam sìos air a losgadh aig an .dropdown-menu
eileamaid phàrant.
Tha seilbh aig a h-uile tachartas relatedTarget
tuiteam-sìos, aig a bheil luach mar an eileamaid acair toglach.
Seòrsa Tachartas | Tuairisgeul |
---|---|
seall.bs. dropdown | Bidh an tachartas seo a’ losgadh sa bhad nuair a chanar ris an dòigh eisimpleir taisbeanaidh. |
air a nochdadh.bs.dropdown | Thèid an tachartas seo a losgadh nuair a bhios an tuiteam-sìos ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS, gus a chrìochnachadh). |
seiche.bs.dropdown | Thèid an tachartas seo a losgadh sa bhad nuair a thèid an dòigh seiche seiche a ghairm. |
falaichte.bs.dropdown | Thèid an tachartas seo a losgadh nuair a tha an tuiteam-sìos deiseil a bhith falaichte bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS, gus a chrìochnachadh). |
Tha am plugan ScrollSpy airson targaidean nav ùrachadh gu fèin-ghluasadach stèidhichte air suidheachadh scrollaidh. Sgrolaich an raon gu h-ìosal fon bhàr-seòlaidh agus cùm sùil air an atharrachadh clas gnìomhach. Thèid na fo-stuthan tuiteam-sìos a chomharrachadh cuideachd.
Ad leggings keytar, brunch id art party dolor laboure. Pitchfork yr enim lo-fi mus do reic iad a-mach qui. Còraichean baidhsagal tuathanas-gu-bòrd Tumblr ge bith dè. Anim keffiyeh carles cardigan. Bothan dhealbhan Velit seitan mcsweeney 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui is dòcha nach cuala tu iomradh orra et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, creideas ìoranas biodiesel keffiyeh artisan ullamco consequat.
Bòrd spèilidh mustache Veniam marfa, feusag pitchfork fugiat velit. Freegan feusag aliqua cupidatat mcsweeney's vero. Cupidata aig ceithir loko nisi, agus helvetica nulla carles. Truc bìdh geansaidh tatù-cogaidh, vinyl quis non freegan aig mcsweeney. Lo-fi wes anderson +1 sartorial. Carles eacarsaich neo-ethetach quis gentrify. Bidh Brooklyn a ’moladh lionn ciùird vice keytar deserunt.
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Còraichean baidhsagal Lomo a ’toirt taic do banh mi, velit ea sunt next level locavore cofaidh aon-tùs ann am Magna Veniam. Vinyl id beatha àrd, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi baga teachdaire minim DIY. Cred ex in, seasmhach 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.
Blog Keytar twee, baga teachdaire culpa marfa ge bith dè an truca bìdh delectus. Sapiente synth id assumenda. Locavore sed helvetica cliche ìoranas, cait tàirneanaich is dòcha nach cuala tu mun deidhinn mar thoradh air hoodie gun ghluten lo-fi fap aliquip. Labore elit placeat mus do reic iad a-mach, terry richardson proident brunch nesciunt quiscosty sweater pariatur keffiyeh ut helvetica artisan. Cardigan ciùird seitan lionn deiseil velit. VHS chambray laboris tempor veniam. Anim mollit minim comodo ullamco thundercats.
Feumaidh targaidean id fhuasgladh a bhith aig ceanglaichean Navbar. Mar eisimpleir, <a href="#home">home</a>
feumaidh rudeigin a bhith a rèir rudeigin san DOM mar <div id="home"></div>
.
:visible
-targaidCha tèid aire a thoirt do eileamaidean targaid nach eil a :visible
rèir jQuery agus cha tèid na nithean seòlaidh co-fhreagarrach aca a chomharrachadh gu bràth.
Ge bith dè an dòigh buileachaidh, feumaidh scrollspy position: relative;
an eileamaid air a bheil thu a’ brath a chleachdadh. Anns a 'mhòr-chuid de chùisean, is e seo am faidhle <body>
. Nuair a sgrìobhas tu air eileamaidean a bharrachd air an <body>
, dèan cinnteach gu bheil height
seata agad agus gun cuir thu an overflow-y: scroll;
sàs e.
Gus giùlan scrollaidh a chuir ris an t-seòladh bàr-mullaich agad gu furasta, cuir data-spy="scroll"
ris an eileamaid a tha thu airson brath a ghabhail air (mar as trice b’ e seo am faidhle <body>
). An uairsin cuir am data-target
feart leis an ID no clas na h-eileamaid phàrant de phàirt Bootstrap sam bith .nav
.
Às deidh position: relative;
dhut do CSS a chuir a-steach, cuir fios chun scrollspy tro JavaScript:
.scrollspy('refresh')
Nuair a bhios tu a’ cleachdadh scrollspy an co-bhonn ri cur ris no toirt air falbh eileamaidean bhon DOM, feumaidh tu an dòigh ùrachaidh a ghairm mar seo:
Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-
, mar ann an data-offset=""
.
Ainm | seòrsa | bunaiteach | tuairisgeul |
---|---|---|---|
dheth | àireamh | 10 | Pixels ri chothromachadh bhon mhullach nuair a thathar a’ tomhas suidheachadh an scrollaidh. |
Seòrsa Tachartas | Tuairisgeul |
---|---|
ghnìomhachadh.bs.scrollspy | Bidh an tachartas seo a’ losgadh nuair a thèid rud ùr a chuir an gnìomh leis an scrollspy. |
Cuir gnìomh taba sgiobalta, fiùghantach ris gus gluasad tro lòsan de shusbaint ionadail, eadhon tro chlàran tuiteam-sìos. Chan eil taic ri tabaichean neadachaidh.
Raw denim is dòcha nach cuala tu mun deidhinn jean shorts Austin. Nesciunt tofu stumptown aliqua, maighstir glanaidh retro synth. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit bùidsear retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip àite aig salvia cillum iphone. Seitan aliquip quis cardigan american apparel, bùidsear 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.
Bidh am plugan seo a’ leudachadh a’ phàirt seòlaidh tabbed gus raointean clàr a chuir ris.
Dèan comas air tabaichean tabable tro JavaScript (feumaidh gach taba a chuir an gnìomh leotha fhèin):
Faodaidh tu tabaichean fa leth a chuir an gnìomh ann an grunn dhòighean:
Faodaidh tu seòladh taba no pill a chuir an gnìomh gun JavaScript sam bith a sgrìobhadh le bhith dìreach a’ sònrachadh data-toggle="tab"
no data-toggle="pill"
air eileamaid. Ma chuireas tu na clasaichean nav
agus nav-tabs
ris an taba ul
cuiridh sin stoidhle tab Bootstrap an sàs , fhad ‘s a chuireas tu ris nav
agus nav-pills
cuiridh clasaichean stoidhle pill an sàs .
Gus toirt air tabaichean a dhol a-steach, cuir .fade
ris gach .tab-pane
. Feumaidh a’ chiad phana taba cuideachd .in
an susbaint tùsail a dhèanamh follaiseach.
$().tab
Cuir an gnìomh eileamaid tab agus inneal susbaint. Bu chòir gum biodh an dàrna cuid data-target
no href
nòta targaideach aig tab anns an DOM. Anns na h-eisimpleirean gu h-àrd, is e na tabaichean na <a>
s le data-toggle="tab"
buadhan.
.tab('show')
Tagh an taba a chaidh a thoirt seachad agus seallaidh e an t-susbaint co-cheangailte ris. Bidh taba sam bith eile a chaidh a thaghadh roimhe gun a bhith air a thaghadh agus tha an susbaint co-cheangailte ris falaichte. Tillidh e chun neach-fios mus deach am pana taba a shealltainn (ie mus tachair an shown.bs.tab
tachartas).
Nuair a sheallas tu taba ùr, bidh na tachartasan a’ losgadh san òrdugh a leanas:
hide.bs.tab
(air an taba gnìomhach làithreach)show.bs.tab
(air an taba a tha ri fhaicinn)hidden.bs.tab
(air an taba gnìomhach roimhe, an aon fhear ris an hide.bs.tab
tachartas)shown.bs.tab
(air an taba a tha dìreach air a thaisbeanadh gu gnìomhach, an aon fhear ris an show.bs.tab
tachartas)Mura robh taba gnìomhach mu thràth, cha tèid na tachartasan hide.bs.tab
agus na tachartasan a chuir às.hidden.bs.tab
Seòrsa Tachartas | Tuairisgeul |
---|---|
seall.bs.tab | Bidh an tachartas seo a’ losgadh air taisbeanadh tab, ach mus deach an taba ùr a shealltainn. Cleachd event.target agus event.relatedTarget gus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth. |
air a shealltainn.bs.tab | Bidh an tachartas seo a’ losgadh air taisbeanadh tabaichean às deidh taba a bhith air a shealltainn. Cleachd event.target agus event.relatedTarget gus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth. |
seiche.bs.tab | Bidh an tachartas seo a’ losgadh nuair a tha taba ùr gu bhith air a shealltainn (agus mar sin tha an taba gnìomhach roimhe gu bhith falaichte). Cleachd event.target agus event.relatedTarget gus cuimseachadh air an taba gnìomhach gnàthach agus an taba ùr a dh’ aithghearr gu bhith gnìomhach, fa leth. |
falaichte.bs.tab | Bidh an tachartas seo a’ losgadh às deidh taba ùr a nochdadh (agus mar sin tha an taba gnìomhach roimhe falaichte). Cleachd event.target agus event.relatedTarget gus cuimseachadh air an taba gnìomhach roimhe agus an taba gnìomhach ùr, fa leth. |
Air a bhrosnachadh leis a’ plugan sàr-mhath jQuery.tipsy sgrìobhte le Jason Frame; Is e dreach ùraichte a th’ ann an Tooltips, nach eil an urra ri ìomhaighean, a’ cleachdadh CSS3 airson beòthachaidhean, agus feartan dàta airson stòradh tiotal ionadail.
Chan eil molaidhean innealan le tiotalan fad neoni air an taisbeanadh gu bràth.
Gabh thairis air na ceanglaichean gu h-ìosal gus molaidhean innealan fhaicinn:
Pants teann an ath ìre keffiyeh is dòcha nach cuala tu iomradh orra. Bothan dhealbhan feusag amh denim letterpress baga teachdaire vegan stumptown. Tha seaman vinyl terry richardson aig seitan tuathanas-gu-bòrd, aodach seasmhach quinoa quinoa 8-bit Ameireaganach aig mcsweeney. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, ceithir loko mcsweeney's cleanse vegan chambray. Neach-ciùird fìor ìoranta ge bith dè an iuchair, sealladair farm-to-table banky Austin twitter a’ làimhseachadh freegan cred raw denim cofaidh viral aon-tùs.
Tha ceithir roghainnean rim faighinn: gu h-àrd, deas, gu h-ìosal agus air an taobh chlì.
Airson adhbharan dèanadais, tha an data-apis Tooltip agus Popover nan tarraing a-steach, a’ ciallachadh gum feum thu iad fhèin a thòiseachadh .
Is e aon dòigh air a h-uile comhairle inneal air duilleag a thòiseachadh a bhith gan taghadh a rèir am data-toggle
feart:
Bidh am plugan Tooltip a’ gineadh susbaint agus comharrachadh a rèir iarrtas, agus gu bunaiteach a’ cur molaidhean innealan às deidh an eileamaid brosnachaidh aca.
Cuir a-steach an inneal tro JavaScript:
Chan eil anns a’ chomharradh a tha a dhìth airson inneal-toisich ach data
feart agus title
air an eileamaid HTML tha thu airson tip inneal a bhith agad. Tha an comharrachadh gineadh de inneal gu math sìmplidh, ged a tha feum air suidheachadh (gu gnàthach, air a shuidheachadh top
leis a’ plugan).
Aig amannan bidh thu airson tip inneal a chuir ri hyperlink a bhios a ’cuairteachadh grunn loidhnichean. Is e giùlan bunaiteach am plugan Tooltip a mheadhanachadh gu còmhnard agus gu dìreach. Cuir white-space: nowrap;
ris na h-acair agad gus seo a sheachnadh.
Nuair a bhios tu a’ cleachdadh molaidhean innealan air eileamaidean taobh a-staigh a .btn-group
no an .input-group
, no air eileamaidean co-cheangailte ri clàr ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), feumaidh tu an roghainn a shònrachadh container: 'body'
(air a chlàradh gu h-ìosal) gus frith-bhuaidhean nach eileas ag iarraidh a sheachnadh (leithid an eileamaid a’ fàs nas fharsainge agus/ no a 'call a h-oiseanan cruinn nuair a thèid an inneal a phiobrachadh).
Do luchd-cleachdaidh a bhios a’ seòladh le meur-chlàr, agus gu sònraichte luchd-cleachdaidh theicneòlasan cuideachaidh, cha bu chòir dhut ach molaidhean innealan a chuir ri eileamaidean le fòcas meur-chlàr leithid ceanglaichean, smachdan foirm, no eileamaid neo-riaghailteach sam bith le tabindex="0"
feart.
Gus tip inneal a chur ri a disabled
no .disabled
eileamaid, cuir an eileamaid taobh a-staigh a <div>
agus cuir an t-inneal air an sin na <div>
àite.
Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-
, mar ann an data-animation=""
.
Ainm | Seòrsa | Deònach | Tuairisgeul |
---|---|---|---|
beothachadh | boolean | fìor | Cuir a-steach eadar-ghluasad sgàineadh CSS chun a’ phìos inneal |
soitheach | sreang | breugach | breugach | A’ ceangal an t-inneal ri eileamaid shònraichte. Eisimpleir: |
dàil | àireamh | nì | 0 | Dàil a’ sealltainn agus a’ falach an inneal (ms) - chan eil sin a’ buntainn ri seòrsa brosnachaidh làimhe Ma thèid àireamh a thoirt seachad, thèid dàil a chuir air an dà sheiche / taisbeanadh Tha structar an nì: |
html | boolean | breugach | Cuir a-steach HTML a-steach don ghoireas. Ma tha e ceàrr, text thèid modh jQuery a chleachdadh gus susbaint a chuir a-steach don DOM. Cleachd teacsa ma tha dragh ort mu ionnsaighean XSS. |
suidheachadh | sreang | gnìomh | 'mullach' | Mar a shuidhicheas tu an t-inneal - gu h-àrd | bun | clì | deas | fèin. Nuair a thèid gnìomh a chleachdadh gus an suidheachadh a dhearbhadh, canar ris an inneal inneal DOM mar a’ chiad argamaid aige agus an eileamaid brosnachaidh nód DOM mar an dàrna fear. Tha an co- |
roghnaiche | sreang | breugach | Ma thèid neach-taghaidh a thoirt seachad, thèid nithean tip inneal a thiomnadh gu na targaidean ainmichte. Ann an cleachdadh, tha seo air a chleachdadh gus leigeil le susbaint HTML fiùghantach molaidhean innealan a chuir ris. Faic seo agus eisimpleir fiosrachail . |
teamplaid | sreang | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Bunait HTML ri chleachdadh nuair a chruthaicheas tu an t-inneal. Thèid na molaidhean innealan
Bu chòir gum biodh an |
tiotal | sreang | gnìomh | '' | Luach an tiotail bunaiteach mura h Ma thèid gnìomh a thoirt seachad, thèid a ghairm leis an t- |
spreidh | sreang | 'fòcas hover' | Mar a tha tooltip air a phiobrachadh - cliog | seachain | fòcas | làimhe. Faodaidh tu a dhol seachad air ioma-tharraing; dealachadh riu le àite. manual chan urrainnear a chur còmhla ri inneal brosnachaidh sam bith eile. |
sealladh-seallaidh | sreang | nì | gnìomh | { roghnaichear: 'corp', pleadhag: 0 } | A’ cumail an t-inneal taobh a-staigh crìochan an eileamaid seo. Eisimpleir: Ma thèid gnìomh a thoirt seachad, canar ris an eileamaid brosnachaidh nód DOM mar an aon argamaid a th’ aige. Tha an co- |
Faodar roghainnean airson molaidhean innealan fa leth a shònrachadh tro bhith a’ cleachdadh buadhan dàta, mar a chaidh a mhìneachadh gu h-àrd.
$().tooltip(options)
A’ ceangal inneal-làimhseachaidh tip innealan ri cruinneachadh eileamaidean.
.tooltip('show')
A 'nochdadh comhairle inneal eileamaid. Tillidh e chun neach-fios mus deach an inneal a shealltainn (ie mus tachair an shown.bs.tooltip
tachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làmh-làimhe” den t-inneal. Chan eil molaidhean innealan le tiotalan fad neoni air an taisbeanadh gu bràth.
.tooltip('hide')
A 'falach comhairle inneal eileamaid.Tilleadh chun neach-fios mus deach an inneal fhalach (ie mus tachair an hidden.bs.tooltip
tachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làmh-làimhe” den t-inneal.
.tooltip('toggle')
Toglaidh comhairle inneal eileamaid. Tillidh e chun neach-fios mus deach an t-inneal-fiosrachaidh a shealltainn no fhalach (ie mus deach anshown.bs.tooltip
Tillidh e chun neach-fios mus deach an inneal a shealltainn nohidden.bs.tooltip
tachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làmh-làimhe” den t-inneal.
.tooltip('destroy')
A 'falach agus a' sgrios inneal inneal eileamaid. Molaidhean innealan a chleachdas tiomnadh (a tha air an cruthachadh le bhith a’ cleachdadh an selector
roghainn ) a sgrios leotha fhèin air eileamaidean brosnachaidh sliochd.
Seòrsa Tachartas | Tuairisgeul |
---|---|
taisbean.bs.toolt | Bidh an tachartas seo a 'losgadh sa bhad nuair a bhios anshow a chanar ris an dòigh eisimpleir. |
air a shealltainn.bs.tooltip | Thèid an tachartas seo a chuir às nuair a bhios an inneal ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh). |
seiche.bs.tooltip | Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an hide dòigh eisimpleir a ghairm. |
falaichte.bs.tooltip | Thèid an tachartas seo a losgadh nuair a tha an inneal deiseil air a bhith falaichte bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh). |
cuir a-steach.bs.tooltip | Thèid an tachartas seo a losgadh às deidh an show.bs.tooltip tachartais nuair a chaidh an teamplaid tooltip a chuir ris an DOM. |
Cuir ath-chòmhdach beaga de shusbaint, mar an fheadhainn air an iPad, ri eileamaid sam bith airson fiosrachadh àrd-sgoile a chumail.
Chan eil popovers aig a bheil an dà chuid tiotal agus susbaint fad neoni air an taisbeanadh gu bràth.
Feumaidh Popovers am plugan Tooltip a bhith air a thoirt a-steach don dreach agad de Bootstrap.
Airson adhbharan dèanadais, tha an data-apis Tooltip agus Popover nan tarraing a-steach, a’ ciallachadh gum feum thu iad fhèin a thòiseachadh .
Is e aon dòigh air a h-uile popovers air duilleag a thòiseachadh a bhith gan taghadh a rèir am data-toggle
feart:
Nuair a bhios tu a’ cleachdadh popovers air eileamaidean taobh a-staigh a .btn-group
no an .input-group
, no air eileamaidean co-cheangailte ri clàr ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), feumaidh tu an roghainn a shònrachadh container: 'body'
(air a chlàradh gu h-ìosal) gus frith-bhuaidhean nach eileas ag iarraidh a sheachnadh (leithid an eileamaid a’ fàs nas fharsainge agus/ no a 'call a h-oiseanan cruinn nuair a thèid am popover a bhrosnachadh).
Gus popover a chur ri a disabled
no .disabled
eileamaid, cuir an eileamaid am broinn a <div>
agus cuir am popover an <div>
àite sin.
Aig amannan bidh thu airson popover a chuir ri hyperlink a bhios a ’cuairteachadh grunn loidhnichean. Is e giùlan bunaiteach am plugan popover a mheadhanachadh gu còmhnard agus gu dìreach. Cuir white-space: nowrap;
ris na h-acair agad gus seo a sheachnadh.
Tha ceithir roghainnean rim faighinn: gu h-àrd, deas, gu h-ìosal agus air an taobh chlì.
Sed posuere consectetur est aig lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est aig lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est aig lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est aig lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Cleachd an focus
inneal brosnachaidh gus popovers a chuir às air an ath bhriogadh a nì an neach-cleachdaidh.
Airson giùlan ceart thar-bhrabhsair agus tar-àrd-ùrlar, feumaidh tu an <a>
taga a chleachdadh, chan e an <button>
taga, agus feumaidh tu cuideachd na feartan role="button"
agus na tabindex
feartan a thoirt a-steach.
Dèan comas air popovers tro JavaScript:
Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-
, mar ann an data-animation=""
.
Ainm | Seòrsa | Deònach | Tuairisgeul |
---|---|---|---|
beothachadh | boolean | fìor | Cuir a-steach eadar-ghluasad caol CSS chun popover |
soitheach | sreang | breugach | breugach | A’ ceangal an popover ri eileamaid shònraichte. Eisimpleir: |
susbaint | sreang | gnìomh | '' | Luach bunaiteach an t-susbaint mura h Ma thèid gnìomh a thoirt seachad, thèid a ghairm leis an t- |
dàil | àireamh | nì | 0 | Dàil a’ sealltainn agus a’ falach an popover (ms) - chan eil sin a’ buntainn ri seòrsa brosnachaidh làimhe Ma thèid àireamh a thoirt seachad, thèid dàil a chuir air an dà sheiche / taisbeanadh Tha structar an nì: |
html | boolean | breugach | Cuir a-steach HTML a-steach don popover. Ma tha e ceàrr, text thèid modh jQuery a chleachdadh gus susbaint a chuir a-steach don DOM. Cleachd teacsa ma tha dragh ort mu ionnsaighean XSS. |
suidheachadh | sreang | gnìomh | 'deas' | Mar a shuidhicheas tu am popover - gu h-àrd | bun | clì | deas | fèin. Nuair a thèid gnìomh a chleachdadh gus an suidheachadh a dhearbhadh, canar ris an nód popover DOM mar a’ chiad argamaid aige agus an eileamaid brosnachaidh nód DOM mar an dàrna fear. Tha an co- |
roghnaiche | sreang | breugach | Ma thèid neach-taghaidh a thoirt seachad, thèid nithean popover a thiomnadh gu na targaidean ainmichte. Ann an cleachdadh, tha seo air a chleachdadh gus leigeil le susbaint HTML fiùghantach popovers a chuir ris. Faic seo agus eisimpleir fiosrachail . |
teamplaid | sreang | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Bunait HTML ri chleachdadh nuair a chruthaicheas tu am popover. Thèid na popovers Thèid na popovers
Bu chòir gum biodh an |
tiotal | sreang | gnìomh | '' | Luach an tiotail bunaiteach mura h Ma thèid gnìomh a thoirt seachad, thèid a ghairm leis an t- |
spreidh | sreang | 'cliog' | Mar a thèid popover a bhrosnachadh - cliog | seachain | fòcas | làimhe. Faodaidh tu a dhol seachad air ioma-tharraing; dealachadh riu le àite. manual chan urrainnear a chur còmhla ri inneal brosnachaidh sam bith eile. |
sealladh-seallaidh | sreang | nì | gnìomh | { roghnaichear: 'corp', pleadhag: 0 } | A’ cumail an popover taobh a-staigh crìochan an eileamaid seo. Eisimpleir: Ma thèid gnìomh a thoirt seachad, canar ris an eileamaid brosnachaidh nód DOM mar an aon argamaid a th’ aige. Tha an co- |
Faodar roghainnean airson popovers fa leth a shònrachadh tro bhith a’ cleachdadh buadhan dàta, mar a chaidh a mhìneachadh gu h-àrd.
$().popover(options)
A’ tòiseachadh popovers airson cruinneachadh eileamaidean.
.popover('show')
A’ nochdadh popover eileamaid. Tilleadh chun neach-fios mus deach an popover a nochdadh (ie mus tachair an shown.bs.popover
tachartas). Thathas den bheachd gur e “leabhar-làimhe” a tha seo a’ brosnachadh an popover. Chan eil popovers aig a bheil an dà chuid tiotal agus susbaint fad neoni air an taisbeanadh gu bràth.
.popover('hide')
A 'falach popover eileamaid. Tillidh e chun neach-fios mus bi an popover falaichte (ie mus tachair an hidden.bs.popover
tachartas). Thathas den bheachd gur e “leabhar-làimhe” a tha seo a’ brosnachadh an popover.
.popover('toggle')
Toglaidh popover eileamaid. Tillidh e chun neach-fios mus deach an popover a shealltainn no fhalachshown.bs.popover
( ie mus tachair an hidden.bs.popover
tachartas). Thathas den bheachd gur e “leabhar-làimhe” a tha seo a’ brosnachadh an popover.
.popover('destroy')
A 'falach agus a' sgrios popover eileamaid. Chan urrainnear popovers a chleachdas tiomnadh (a tha air an cruthachadh leis an selector
roghainn ) a sgrios leotha fhèin air eileamaidean brosnachaidh sliochd.
Seòrsa Tachartas | Tuairisgeul |
---|---|
seall.bs.popover | Bidh an tachartas seo a’ losgadh sa bhad nuairshow a chanar ris an dòigh eisimpleir. |
air a shealltainn.bs.popover | Thèid an tachartas seo a losgadh nuair a bhios an popover ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh). |
seiche.bs.popover | Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an hide dòigh eisimpleir a ghairm. |
falaichte.bs.popover | Thèid an tachartas seo a losgadh nuair a tha an popover deiseil a bhith falaichte bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh). |
a-steach.bs.popover | Thèid an tachartas seo a losgadh às deidh an show.bs.popover tachartais nuair a chaidh an teamplaid popover a chuir ris an DOM. |
Cuir gnìomh cuir às do gach teachdaireachd rabhaidh leis a’ plugan seo.
Nuair a bhios tu a’ cleachdadh .close
putan, feumaidh gur e seo a’ chiad leanabh den t-sreath .alert-dismissible
agus chan fhaod susbaint teacsa sam bith a thighinn air thoiseach air sa chomharra.
Atharraich seo agus sin agus feuch ris a-rithist. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras matti consectetur purus sit amet fermentum.
Dìreach cuir ris data-dismiss="alert"
a’ phutan dùnaidh agad gus gnìomh dùnadh rabhaidh a thoirt seachad gu fèin-ghluasadach. Le bhith a’ dùnadh rabhadh bheir sin air falbh e bhon DOM.
Gus am bi na rabhaidhean agad a’ cleachdadh beòthalachd nuair a dhùineas tu, dèan cinnteach gu bheil an .fade
agus.in
na clasaichean air an cur a-steach mu thràth.
$().alert()
A’ toirt rabhadh ag èisteachd airson tachartasan cliog air eileamaidean sliochd aig a bheil am data-dismiss="alert"
feart. (Chan eil sin riatanach nuair a thathar a’ cleachdadh fèin-thòiseachadh data-api.)
$().alert('close')
A’ dùnadh rabhadh le bhith ga thoirt air falbh bhon DOM. Ma tha na clasaichean .fade
agus .in
an làthair air an eileamaid, falbhaidh an rabhadh mus tèid a thoirt air falbh.
Bidh plugan rabhaidh Bootstrap a’ nochdadh grunn thachartasan airson a dhol a-steach do ghnìomhachd rabhaidh.
Seòrsa Tachartas | Tuairisgeul |
---|---|
dùin.bs.alert | Bidh an tachartas seo a’ losgadh sa bhad nuairclose a chanar ris an dòigh eisimpleir. |
dùinte.bs.alert | Thèid an tachartas seo a losgadh nuair a tha an rabhadh dùinte (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh). |
Dèan barrachd le putanan. Stèidhich putan smachd no cruthaich buidhnean de phutanan airson barrachd phàirtean leithid bàraichean inneal.
Bidh Firefox a’ cumail a’ dol le stàitean smachd (ciorramachd agus seic) thar luchdan dhuilleagan . Is e fuasgladh airson seo a chleachdadh autocomplete="off"
. Faic bug Mozilla #654072 .
Cuir ris data-loading-text="Loading..."
gus staid luchdaidh a chleachdadh air putan.
Chan eil am feart seo air a mholadh bho v3.3.5 agus chaidh a thoirt air falbh ann an v4.
Air sgàth an taisbeanaidh seo, tha sinn a 'cleachdadh data-loading-text
agus $().button('loading')
, ach chan e sin an aon stàit as urrainn dhut a chleachdadh. Faic barrachd mu dheidhinn seo gu h-ìosal anns na $().button(string)
sgrìobhainnean .
Cuir ris data-toggle="button"
gus toggling a ghnìomhachadh air aon phutan.
.active
agusaria-pressed="true"
Airson putanan a chaidh a thogail ro-làimh, feumaidh tu an .active
clas agus am aria-pressed="true"
feart a chuir button
riut fhèin.
Cuir data-toggle="buttons"
ri .btn-group
bogsa-seic no cuir a-steach rèidio gus leigeil le toggling anns na stoidhlichean aca fhèin.
.active
Airson roghainnean ro-roghnaichte, feumaidh tu an .active
clas a chur ris an cuir a-steach label
thu fhèin.
Ma thèid staid sgrùdaichte putan bogsa-seic ùrachadh gun a bhith a’ losgadh click
tachartas air a’ phutan (me tro <input type="reset">
no tro bhith a’ suidheachadh checked
seilbh an cuir a-steach), feumaidh tu an .active
clas a thionndadh air do chuir a-steach label
thu fhèin.
$().button('toggle')
Toggle staid putadh. A’ toirt coltas air a’ phutan gun deach a ghnìomhachadh.
$().button('reset')
Ath-shuidheachadh staid putan - ag atharrachadh teacsa gu teacsa tùsail. Tha an dòigh seo asyncronach agus a 'tilleadh mus tèid an ath-shuidheachadh a chrìochnachadh.
$().button(string)
Ag atharrachadh teacsa gu staid teacsa sam bith a tha air a mhìneachadh le dàta.
Plug sùbailte a bhios a’ cleachdadh dòrlach de chlasaichean airson giùlan furasta a thogail.
Feumaidh Collapse am plugan gluasaid a bhith air a ghabhail a-steach don dreach agad de Bootstrap.
Cliog air na putanan gu h-ìosal gus eileamaid eile a shealltainn agus fhalach tro atharrachaidhean clas:
.collapse
a’ falach susbaint.collapsing
air a chur an sàs rè eadar-ghluasadan.collapse.in
a’ nochdadh susbaintFaodaidh tu ceangal a chleachdadh leis a’ href
bhuadh, no putan leis a’ data-target
bhuadh. Anns an dà chùis, tha data-toggle="collapse"
e riatanach.
Leudaich an giùlan tuiteamach bunaiteach gus bogsa a chruthachadh leis a 'phannal.
Tha e comasach cuideachd atharrachadh a-mach .panel-body
le .list-group
s.
Dèan cinnteach gun cuir thu ris aria-expanded
an eileamaid smachd. Tha am feart seo gu soilleir a’ mìneachadh suidheachadh làithreach na h-eileamaid tuiteamach do leughadairean sgrion agus teicneòlasan taice coltach ris. Ma tha an eileamaid a ghabhas tuiteam dùinte gu bunaiteach, bu chòir luach aria-expanded="false"
. Ma tha thu air an eileamaid tuiteamach a shuidheachadh gus a bhith fosgailte gu bunaiteach a’ cleachdadh a’ in
chlas, cuir aria-expanded="true"
air an smachd an àite sin. Togaidh am plugan am feart seo gu fèin-ghluasadach a rèir an deach an eileamaid a ghabhas tuiteam fhosgladh no a dhùnadh.
A bharrachd air an sin, ma tha an eileamaid smachd agad ag amas air aon eileamaid a ghabhas tuiteam - ie tha am data-target
feart a’ comharrachadh id
roghnaiche - faodaidh tu feart a bharrachd aria-controls
a chuir ris an eileamaid smachd, anns a bheil an id
eileamaid a ghabhas tuiteam. Bidh leughadairean sgrion ùr-nodha agus teicneòlasan taice coltach ris a’ cleachdadh a’ fheart seo gus geàrr-liostaichean a bharrachd a thoirt do luchd-cleachdaidh gus seòladh gu dìreach chun eileamaid tuiteamach fhèin.
Bidh am plugan tuiteam a’ cleachdadh beagan chlasaichean gus an togail trom a làimhseachadh:
.collapse
a’ falach an t-susbaint.collapse.in
a’ nochdadh an t-susbaint.collapsing
air a chur ris nuair a thòisicheas an gluasad, agus air a thoirt air falbh nuair a bhios e deiseilGheibhear na clasaichean seo ann an component-animations.less
.
Dìreach cuir ris data-toggle="collapse"
agus a data-target
ris an eileamaid gus smachd a shònrachadh gu fèin-ghluasadach air eileamaid a ghabhas tuiteam. Gabhaidh am data-target
feart ri roghnaichear CSS gus an tuiteam a chuir an sàs. Dèan cinnteach gun cuir thu an clas collapse
ris an eileamaid a ghabhas tuiteam. Ma tha thu airson gum fosgail e gu bunaiteach, cuir ris a’ chlas a bharrachdin
.
Gus riaghladh buidhne coltach ri bogsa a chuir ri smachd a ghabhas tuiteam, cuir am feart dàta data-parent="#selector"
. Thoir sùil air an demo gus seo fhaicinn ann an gnìomh.
Dèan comas le làimh le:
Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-
, mar ann an data-parent=""
.
Ainm | seòrsa | bunaiteach | tuairisgeul |
---|---|---|---|
pàrant | roghnaiche | breugach | Ma tha neach-taghaidh air a thoirt seachad, thèid a h-uile eileamaid tuiteamach fon phàrant ainmichte a dhùnadh nuair a thèid an rud tuiteamach seo a shealltainn. (coltach ri giùlan bogsa traidiseanta - tha seo an urra ris a ' panel chlas) |
tog | boolean | fìor | Toglaich an eileamaid a ghabhas tuiteam air ionnsaigh |
.collapse(options)
Cuir an susbaint agad an gnìomh mar eileamaid a ghabhas tuiteam. A 'gabhail ri roghainnean roghnach object
.
.collapse('toggle')
Togail eileamaid a ghabhas tuiteam ri fhaicinn no falaichte. Tillidh e chun neach-fios mus deach an eileamaid a ghabhas tuiteam a shealltainn no fhalachshown.bs.collapse
( ie mus tachair an hidden.bs.collapse
tachartas).
.collapse('show')
A’ sealltainn eileamaid a ghabhas tuiteam. Tillidh e chun neach-fios mus deach an eileamaid a ghabhas tuiteam a shealltainn (ie mus tachair an shown.bs.collapse
tachartas).
.collapse('hide')
A 'falach eileamaid collapsible. Tilleadh chun neach-fios mus deach an eileamaid a ghabhas tuiteam a chuir am falach (ie mus tachair an hidden.bs.collapse
tachartas).
Bidh clas tuiteam Bootstrap a’ nochdadh grunn thachartasan airson a dhol an sàs ann an gnìomhachd tuiteam.
Seòrsa Tachartas | Tuairisgeul |
---|---|
seall.bs.tuiteam | Bidh an tachartas seo a’ losgadh sa bhad nuairshow a chanar ris an dòigh eisimpleir. |
air a nochdadh.bs.collapse | Thèid an tachartas seo a losgadh nuair a tha eileamaid tuiteamach air a dhèanamh follaiseach don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh). |
seiche.bs.collapse | Tha an tachartas seo air a losgadh sa bhad nuair a chaidh am hide modh a ghairm. |
falaichte.bs.collapse | Thèid an tachartas seo a losgadh nuair a chaidh eileamaid tuiteamach fhalach bhon chleachdaiche (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh). |
Pàirt taisbeanadh-shleamhnagan airson rothaireachd tro eileamaidean, mar carousel. Chan eil taic ri carousels neadachaidh.
Mar as trice chan eil am pàirt carousel a’ gèilleadh ri inbhean ruigsinneachd. Ma dh’fheumas tu a bhith gèilleadh, feuch an smaoinich thu air roghainnean eile airson do shusbaint a thaisbeanadh.
Bidh Bootstrap a’ cleachdadh CSS3 a-mhàin airson na beòthachaidhean aige, ach chan eil Internet Explorer 8 & 9 a’ toirt taic do na feartan CSS riatanach. Mar sin, chan eil beòthachaidhean gluasaid sleamhnachaidh ann nuair a bhios tu a’ cleachdadh na brobhsairean sin. Tha sinn air co-dhùnadh a dh’aona ghnothach gun a bhith a’ toirt a-steach fallbacks stèidhichte air jQuery airson na h-eadar-ghluasadan.
Feumaidh an .active
clas a bhith air a chur ri aon de na sleamhnagan. Rud eile, cha bhith an carousel ri fhaicinn.
Chan eil feum air na clasaichean .glyphicon .glyphicon-chevron-left
agus na clasaichean airson na smachdan. .glyphicon .glyphicon-chevron-right
Bidh Bootstrap a’ toirt seachad .icon-prev
agus .icon-next
mar roghainnean sìmplidh Unicode.
Cuir fo-thiotalan ris na sleamhnagan agad gu furasta leis an .carousel-caption
eileamaid taobh a-staigh faidhle .item
. Cuir dìreach timcheall air HTML roghainneil sam bith a-staigh an sin agus bidh e air a cho-thaobhadh gu fèin-ghluasadach agus air a chruth.
Feumaidh carousels cleachdadh id
air a’ ghobhar as fhaide a-muigh (an .carousel
) airson smachdan carousel gus obrachadh gu ceart. Nuair a chuireas tu ioma carousels ris, no nuair a dh’ atharraicheas tu carousel id
, bi cinnteach gun ùraich thu na smachdan iomchaidh.
Cleachd buadhan dàta gus smachd a chumail air suidheachadh a’ charousel gu furasta. data-slide
a’ gabhail ris na prìomh fhaclan prev
no next
, a dh’ atharraicheas suidheachadh an t-sleamhnachaidh an coimeas ris an t-suidheachadh làithreach aige. Air an làimh eile, cleachd data-slide-to
gus clàr-amais sleamhnag amh a thoirt don charousel data-slide-to="2"
, a ghluaiseas suidheachadh an t-sleamhnag gu clàr-amais sònraichte a’ tòiseachadh le 0
.
Tha am data-ride="carousel"
feart air a chleachdadh gus carousel a chomharrachadh mar bheothachadh a’ tòiseachadh aig luchdachadh duilleag. Chan urrainnear a chleachdadh còmhla ri (gun fheum agus neo-riatanach) a’ tòiseachadh le JavaScript soilleir den aon charousel.
Cuir fòn gu carousel le làimh le:
Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-
, mar ann an data-interval=""
.
Ainm | seòrsa | bunaiteach | tuairisgeul |
---|---|---|---|
eadar-ama | àireamh | 5000 | An ùine airson dàil eadar rothaireachd gu fèin-ghluasadach air rud. Ma tha e ceàrr, cha bhith carousel a’ rothaireachd gu fèin-ghluasadach. |
stad | sreang | null | "hover" | Ma tha thu deiseil "hover" , stad air rothaireachd an carousel air mouseenter agus tòisich air rothaireachd an carousel air adhart mouseleave . Ma thèid a shuidheachadh gu null , cha stad thu gluasad thairis air a’ charousel. |
paisg | boolean | fìor | Am bu chòir don charousel rothaireachd leantainneach no stadan cruaidh a bhith aige. |
meur-chlàr | boolean | fìor | Am bu chòir don carousel freagairt a thoirt do thachartasan meur-chlàr. |
.carousel(options)
A 'tòiseachadh an carousel le roghainn roghnach object
agus a' tòiseachadh a 'rothaireachd tro nithean.
.carousel('cycle')
Rothaich tro na stuthan carousel bho chlì gu deas.
.carousel('pause')
A’ cur stad air an carousel bho bhith a’ rothaireachd tro nithean.
.carousel(number)
Rothaich an carousel gu frèam sònraichte (stèidhichte 0, coltach ri sreath).
.carousel('prev')
Cearcallan chun an rud roimhe.
.carousel('next')
Rothaich chun an ath rud.
Bidh clas carousel Bootstrap a’ nochdadh dà thachartas airson a bhith ceangailte ri gnìomhachd carousel.
Tha na feartan a bharrachd a leanas aig an dà thachartas:
direction
: An taobh anns a bheil an carousel a’ sleamhnachadh (an dàrna cuid "left"
no "right"
).relatedTarget
: An eileamaid DOM a thathas a’ sleamhnachadh na àite mar an nì gnìomhach.Tha a h-uile tachartas carousel air a losgadh aig a’ charousel fhèin (ie aig an <div class="carousel">
).
Seòrsa Tachartas | Tuairisgeul |
---|---|
sleamhnachadh.bs.carousel | Bidh an tachartas seo a’ losgadh sa bhad nuair a thèid an slide dòigh eisimpleir a chleachdadh. |
slid.bs.carousel | Tha an tachartas seo air a losgadh nuair a tha an carousel air crìoch a chuir air a ghluasad sleamhnag. |
Bidh am plugan affix a’ gluasad position: fixed;
air agus dheth, a’ dèanamh atharrais air a’ bhuaidh a chaidh a lorg le position: sticky;
. Tha an subnavigation air an làimh dheis na thaisbeanadh beò den plugan affix.
Cleachd am plugan affix tro bhuadhan dàta no le làimh leis an JavaScript agad fhèin. Anns an dà shuidheachadh, feumaidh tu CSS a thoirt seachad airson suidheachadh agus leud an t-susbaint ceangailte agad.
Nota: Na cleachd am plugan affix air eileamaid a tha ann an eileamaid a tha gu ìre mhath suidhichte, leithid colbh air a tharraing no air a phutadh, air sgàth buga tairgse Safari .
Bidh am plugan affix a’ gluasad eadar trì clasaichean, gach fear a’ riochdachadh stàite sònraichte: .affix
, .affix-top
, agus .affix-bottom
. Feumaidh tu na stoidhlichean a thoirt seachad, ach a-mhàin position: fixed;
air .affix
, airson na clasaichean sin thu fhèin (neo-eisimeileach bhon plugan seo) gus na fìor shuidheachadh a làimhseachadh.
Seo mar a tha am plugan affix ag obair:
.affix-top
gus sealltainn gu bheil an eileamaid aig an ìre as àirde. Aig an ìre seo chan eil feum air suidheachadh CSS..affix
àite .affix-top
agus a' suidheachadh position: fixed;
(air a sholarachadh le CSS aig Bootstrap)..affix
dhut .affix-bottom
. Leis gu bheil cuir dheth roghainneil, le bhith a’ suidheachadh fear feumaidh tu an CSS iomchaidh a shuidheachadh. Anns a 'chùis seo, cuir ris position: absolute;
nuair a bhios feum air. Bidh am plugan a’ cleachdadh feart dàta no roghainn JavaScript gus faighinn a-mach càite an cuir thu an eileamaid às an sin.Lean na ceumannan gu h-àrd gus do CSS a shuidheachadh airson gin de na roghainnean cleachdaidh gu h-ìosal.
Gus giùlan ceangail a chuir ri eileamaid sam bith gu furasta, dìreach cuir data-spy="affix"
ris an eileamaid a tha thu airson brath a ghabhail. Cleachd offsets gus mìneachadh cuin a thogas tu pinadh eileamaid.
Cuir fòn gu plugan affix tro JavaScript:
Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-
, mar ann an data-offset-top="200"
.
Ainm | seòrsa | bunaiteach | tuairisgeul |
---|---|---|---|
dheth | àireamh | gnìomh | nì | 10 | Pixels ri chothromachadh bhon sgrion nuair a thathar a’ tomhas suidheachadh an scrollaidh. Ma thèid aon àireamh a thoirt seachad, thèid an cothromachadh a chuir an sàs anns gach taobh gu h-àrd agus gu h-ìosal. Gus cothromachadh sònraichte, bun is mullach a thoirt seachad dìreach thoir seachad rud offset: { top: 10 } no offset: { top: 10, bottom: 5 } . Cleachd gnìomh nuair a dh’ fheumas tu obrachadh a-mach gu dinamach. |
targaid | roghnaiche | nead | eileamaid jQuery | an window nì |
Sònraich an eileamaid targaid den affix. |
.affix(options)
Cuir an gnìomh do shusbaint mar shusbaint ceangailte. A 'gabhail ri roghainnean roghnach object
.
.affix('checkPosition')
Ag ath-àireamhachadh staid an affix stèidhichte air tomhasan, suidheachadh, agus suidheachadh scrollaidh nan eileamaidean buntainneach. Tha na .affix
, .affix-top
, agus .affix-bottom
na clasaichean air an cur ris no air an toirt air falbh bhon t-susbaint a tha ceangailte ris a rèir na stàite ùr. Feumar an dòigh seo a ghairm nuair a thèid meud an t-susbaint a tha ceangailte no an eileamaid targaid atharrachadh, gus dèanamh cinnteach gu bheil an t-susbaint ceangailte gu ceart.
Bidh plugan affix Bootstrap a’ nochdadh grunn thachartasan airson a dhol a-steach do ghnìomhachd ceangail.
Seòrsa Tachartas | Tuairisgeul |
---|---|
affix.bs.affix | Bidh an tachartas seo a 'losgadh dìreach mus tèid an eileamaid a cheangal. |
gèidh.bs.affix | Thèid an tachartas seo a losgadh às deidh an eileamaid a bhith air a cheangal. |
affix-top.bs.affix | Bidh an tachartas seo a’ losgadh sa bhad mus tèid an eileamaid a ghleusadh-mullach. |
affixed-top.bs.affix | Thèid an tachartas seo a losgadh às deidh an eileamaid a bhith air a cheangal gu h-àrd. |
affix-bun.bs.affix | Bidh an tachartas seo a’ losgadh sa bhad mus tèid an eileamaid a ghleusadh-bun. |
affixed-bun.bs.affix | Thèid an tachartas seo a losgadh às deidh don eileamaid a bhith air a cheangal aig bonn. |