Javascript airson bootstrap saor an asgaidh

Thoir beò phàirtean Bootstrap - a-nis le 12 plugins jQuery àbhaisteach.

Modailean

Gabhaidh sgiobalta, ach sùbailte, am plugan modal traidiseanta javascript leis nach eil ach an comas-gnìomh as lugha a tha a dhìth agus easbhaidhean snasail.

Droch-dhìol

Cuir clàran-bìdh sìos gu cha mhòr rud sam bith ann am Bootstrap leis a’ plugan sìmplidh seo. Tha Bootstrap a’ nochdadh làn thaic clàr tuiteam-sìos anns a’ bhàr seòlaidh, tabaichean, agus pills.

Scrollspy

Cleachd scrollspy gus na ceanglaichean sa bhàr seòlaidh agad ùrachadh gu fèin-ghluasadach gus an ceangal gnìomhach gnàthach a thaisbeanadh stèidhichte air suidheachadh scrollaidh.

Tabaichean a ghabhas gluasad

Cleachd am plugan seo gus tabaichean is tablaidean a dhèanamh nas fheumaile le bhith a’ leigeil leotha gluasad tro lòsan tabbable de shusbaint ionadail.

Molaidhean innealan

Sùil ùr air plugan jQuery Tipsy, chan eil Tooltips an urra ri ìomhaighean - bidh iad a’ cleachdadh CSS3 airson beòthachaidhean agus feartan dàta airson stòradh tiotal ionadail.

Popovers *

Cuir ath-chòmhdach beaga de shusbaint, mar an fheadhainn air an iPad, ri eileamaid sam bith airson fiosrachadh àrd-sgoile a chumail.

* Feumaidh molaidhean innealan a bhith air an toirt a-steach

Teachdaireachdan rabhaidh

Is e clas beag a th’ anns a’ plugan rabhaidh airson gnìomhachd dlùth a chur ri rabhaidhean.

Putanan

Dèan barrachd le putanan. Stèidhich putan smachd no cruthaich buidhnean de phutanan airson barrachd phàirtean leithid bàraichean inneal.

Tuitidh

Faigh stoidhlichean bunaiteach agus taic sùbailte airson co-phàirtean a ghabhas tuiteam leithid bogsa-ciùil agus seòladh.

Carousel

Cruthaich geàrr-chunntas de shusbaint sam bith a tha thu airson taisbeanadh-shleamhnagan eadar-ghnìomhach de shusbaint a thoirt seachad.

Seòrsa air thoiseach

Plug bunaiteach, furasta a leudachadh airson cinn-seòrsa eireachdail a chruthachadh gu sgiobalta le cuir a-steach teacsa cruth sam bith.

Eadar-ghluasadan *

Airson buaidhean gluasaid sìmplidh, cuir a-steach bootstrap-transition.js aon uair gus sleamhnachadh ann am modalan no cuir às do rabhaidhean.

* Riatanach airson beòthachadh ann am plugins

Cinn suas! Feumaidh a h-uile plugan javascript an tionndadh as ùire de jQuery.

Mu dheidhinn modalan

Gabhaidh sgiobalta, ach sùbailte, am plugan modal traidiseanta javascript leis nach eil ach an comas-gnìomh as lugha a tha a dhìth agus easbhaidhean snasail.

Luchdaich sìos file

Eisimpleir statach

Gu h-ìosal tha modal air a thoirt seachad gu statach.

Demo beò

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.

Cuir air bhog modal demo

A 'cleachdadh bootstrap-modal

Cuir fòn gu modal tro javascript:

  1. $ ( '#myModal' ). modal ( roghainnean )

Roghainnean

Ainm seòrsa bunaiteach tuairisgeul
cùl-raon boolean fìor A’ toirt a-steach eileamaid cùl-raon modal. Air neo, sònraich staticairson 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.

Marcaich

Faodaidh tu modalan a chuir an gnìomh air do dhuilleag gu furasta gun a bhith agad ri aon loidhne de javascript a sgrìobhadh. Dìreach suidhich data-toggle="modal"air eileamaid rianadair le data-target="#foo"no href="#foo"a fhreagras ri modal eileamaid id, agus nuair a phutas tu air, cuiridh e air bhog am modal agad.

Cuideachd, gus roghainnean a chur ris an t-suidheachadh modal agad, dìreach cuir a-steach iad mar bhuadhan dàta a bharrachd air an eileamaid smachd no air a’ chomharra modal fhèin.

  1. <a class="btn" data-toggle="modal" href="#myModal"> Modal cur air bhog </a> _ _ _ _
  1. <div class = "modal seiche" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Ceann- cinn modal </h3>
  5. </div>
  6. <div class = "modal-corp" >
  7. <p> Aon chorp ghrinn… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href="#" class="btn" data-dismiss="modal"> Dùin </a> _ _ _ _ _ _ _
  11. <a href="#" class="btn btn-primary"> Sàbhail na h - atharraichean </a>
  12. </div>
  13. </div>
Cinn suas! Ma tha thu airson gum bi am modal agad a’ beothachadh a-steach is a-mach, dìreach cuir .fadeclas ris an .modaleileamaid (thoir sùil air an demo gus seo fhaicinn ann an gnìomh) agus cuir a-steach bootstrap-transition.js.

Dòighean-obrach

.modal (roghainnean)

Cuir do shusbaint an gnìomh mar mhodal. A 'gabhail ri roghainnean roghnach object.

  1. $ ( '#myModal' ). modal ({
  2. meur -chlàr : meallta
  3. })

.modal ('toggle')

Tog modal le làimh.

  1. $ ( '#myModal' ). modal ( 'toggle' )

.modal ('taisbeanadh')

Le làimh a 'fosgladh modal.

  1. $ ( '#myModal' ). modal ( 'show' )

.modal ('falach')

Le làimh a 'falach modal.

  1. $ ( '#myModal' ). modal ( 'falach' )

Tachartasan

Bidh clas modal Bootstrap a’ nochdadh grunn thachartasan airson a dhol a-steach do ghnìomhachd modal.

Tachartas Tuairisgeul
seall Bidh an tachartas seo a’ losgadh sa bhad nuair showa chanar ris an dòigh eisimpleir.
air a thaisbeanadh Thèid an tachartas seo a chuir às nuair a bhios am modal ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasad css a chrìochnachadh).
seiche Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an hidedòigh eisimpleir a ghairm.
falaichte Thèid an tachartas seo a losgadh nuair a tha am modal deiseil air fhalach bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan css a chrìochnachadh).
  1. $ ( '#myModal' ). air ( 'falaichte' , gnìomh () {
  2. // dèan rudeigin…
  3. })

Tha am plugan ScrollSpy airson targaidean nav ùrachadh gu fèin-ghluasadach stèidhichte air suidheachadh scrollaidh.

Luchdaich sìos file

Eisimpleir navbar le scrollspy

Scrollaich an raon gu h-ìosal agus cùm sùil air an ùrachadh seòlaidh. Thèid na fo-stuthan tuiteam-sìos a chomharrachadh cuideachd. Feuch e!

@saill

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.

@meadh

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.

aon

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.

dhà

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

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.


A 'cleachdadh bootstrap-scrollspy.js

Cuir fòn gu scrollspy tro javascript:

  1. $ ( '#navbar' ). scrollspy ()

Marcaich

Gus giùlan scrollaidh a chuir ris an t-seòladh bàr-mullaich agad gu furasta, dìreach cuir data-spy="scroll"ris an eileamaid air a bheil thu airson brath a ghabhail (mar as trice is e seo am bodhaig).

  1. <body data-spy = "scroll" > ... </body>
Cinn suas! Feumaidh targaidean id fhuasgladh a bhith aig ceanglaichean Navbar. Mar eisimpleir, <a href="#home">home</a>feumaidh rud a bhith co-fhreagairt ri rudeigin san dachaigh mar <div id="home"></div>.

Dòighean-obrach

.scrollspy ('ùrnaigh')

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:

  1. $ ( '[data-spy="scroll"]' ). gach ( gnìomh () {
  2. var $ spy = $ ( seo ). scrollspy ( 'ùrnaigh' )
  3. });

Roghainnean

Ainm seòrsa bunaiteach tuairisgeul
dheth àireamh 10 Pixels ri chothromachadh bhon mhullach nuair a thathar a’ tomhas suidheachadh an scrollaidh.

Tachartasan

Tachartas Tuairisgeul
cuir an gnìomh Bidh an tachartas seo a’ losgadh nuair a thèid rud ùr a chuir an gnìomh leis an scrollspy.

Bidh am plugan seo a’ cur ri comas taba is pill sgiobalta, fiùghantach airson gluasad tro shusbaint ionadail.

Luchdaich sìos file

Eisimpleirean tabaichean

Cliog air na tabaichean gu h-ìosal gus gluasad eadar lòsan falaichte, eadhon tro chlàran tuiteam-sìos.

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.


A’ cleachdadh bootstrap-tab.js

Dèan comas air tabaichean tabable tro javascript (feumar gach taba a chuir an gnìomh leotha fhèin):

  1. $ ( '#myTab a' ). cliog ( gnìomh ( e ) {
  2. e . preventDefault ();
  3. $ ( seo ). tab ( 'show' );
  4. })

Faodaidh tu tabaichean fa leth a chuir an gnìomh ann an grunn dhòighean:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'show' ); // Tagh tab a rèir ainm
  2. $ ( '#myTab a: an toiseach' ). tab ( 'show' ); // Tagh a 'chiad tab
  3. $ ( '#myTab a: last' ). tab ( 'show' ); // Tagh an taba mu dheireadh
  4. $ ( '# myTab li: eq(2) a' ). tab ( 'show' ); // Tagh an treas taba (0-clàr-amais)

Marcaich

Faodaidh tu seòladh taba no pill a chuir an gnìomh gun a bhith a’ sgrìobhadh javascript sam bith le bhith dìreach a’ sònrachadh data-toggle="tab"no data-toggle="pill"air eileamaid. Le bhith a’ cur na clasaichean navagus ris an taba cuiridh sin an stoidhle tab bootstrap an sàs.nav-tabsul

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "taba"> Dachaigh </a></li >
  3. <li><a href = "#profile" data-toggle = "taba"> Pròifil </a></li >
  4. <li><a href = "#messages" data-toggle = "taba"> Teachdaireachdan </a></li >
  5. <li><a href = "#settings" data-toggle = "taba"> Roghainnean </a></li >
  6. </ul>

Dòighean-obrach

$().tab

Cuir an gnìomh eileamaid tab agus inneal susbaint. Bu chòir gum biodh an dàrna cuid data-targetno hrefnòta targaideach aig tab anns an DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" > <a href = "#home"> Dachaigh </a></li>
  3. <li><a href = "#profile"> Pròifil </a> </li>
  4. <li><a href = "#messages"> Teachdaireachdan </a> </li>
  5. <li><a href = "#settings"> Roghainnean </a> </li>
  6. </ul>
  7.  
  8. <div class = "tab-susbaint" >
  9. <div class = "tab-pane active" id = "dachaigh" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( gnìomh () {
  17. $ ( '#myTab a: last' ). tab ( 'show' );
  18. })
  19. </script>

Tachartasan

Tachartas Tuairisgeul
seall Bidh an tachartas seo a’ losgadh air taisbeanadh tab, ach mus deach an taba ùr a shealltainn. Cleachd event.targetagus event.relatedTargetgus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth.
air a thaisbeanadh Bidh an tachartas seo a’ losgadh air taisbeanadh tabaichean às deidh taba a bhith air a shealltainn. Cleachd event.targetagus event.relatedTargetgus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth.
  1. $ ( 'a[data-toggle="tab"]' ). air ( 'air a shealltainn' , gnìomh ( e ) {
  2. e . targaid // tab gnìomhaichte
  3. e . co-cheangailteTarget // taba roimhe
  4. })

Mu Tooltips

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.

Luchdaich sìos file

Eisimpleirean de chleachdadh Tooltips

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.


A’ cleachdadh bootstrap-tooltip.js

Luchdaich a-nuas an t-inneal tro javascript:

  1. $ ( '# eisimpleir' ). comhairle ( roghainnean )

Roghainnean

Ainm seòrsa bunaiteach tuairisgeul
beothachadh boolean fìor cuir a-steach eadar-ghluasad css fade chun an t-inneal-taice
suidheachadh sreang | gnìomh 'mullach' mar a shuidhicheas tu an t-inneal - gu h-àrd | bun | clì | deas
roghnaiche sreang breugach Ma thèid neach-taghaidh a thoirt seachad, thèid nithean tip inneal a thiomnadh gu na targaidean ainmichte.
tiotal sreang | gnìomh '' luach tiotal bunaiteach mura h-eil taga `title` an làthair
spreidh sreang 'hover' mar a tha tooltip air a phiobrachadh - hover | fòcas | làimhe
dàil àireamh | nì 0

dàil a’ sealltainn agus a’ falach an inneal (ms) - chan eil e 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ì:delay: { show: 500, hide: 100 }

Cinn suas! Faodar roghainnean airson molaidhean innealan fa leth a shònrachadh tro bhith a’ cleachdadh buadhan dàta.

Marcaich

Airson adhbharan dèanadais, tha an data-apis Tooltip agus Popover air an taghadh a-steach. Ma tha thu airson an cleachdadh dìreach sònraich roghainn taghaidh.

  1. <a href = "#" rel = "tooltip" title = "first tooltip"> thoir thairis orm </a>

Dòighean-obrach

$().tooltip(roghainnean)

A’ ceangal inneal-làimhseachaidh tip innealan ri cruinneachadh eileamaidean.

.tooltip('show')

A 'nochdadh comhairle inneal eileamaid.

  1. $ ( '# eileamaid' ). clàr- taice ( 'taisbeanadh' )

.tooltip ('falach')

A 'falach comhairle inneal eileamaid.

  1. $ ( '# eileamaid' ). clàr- taice ( 'falach' )

.tooltip('toggle')

Toglaidh comhairle inneal eileamaid.

  1. $ ( '# eileamaid' ). clàr- taice ( 'toggle' )

Mu dheidhinn popovers

Cuir ath-chòmhdach beaga de shusbaint, mar an fheadhainn air an iPad, ri eileamaid sam bith airson fiosrachadh àrd-sgoile a chumail.

* Feumaidh Tooltip a bhith air a thoirt a-steach

Luchdaich sìos file

Eisimpleir hover popover

Gluais thairis air a’ phutan gus an popover a bhrosnachadh.


A 'cleachdadh bootstrap-popover.js

Dèan comas air popovers tro javascript:

  1. $ ( '# eisimpleir' ). popover ( roghainnean )

Roghainnean

Ainm seòrsa bunaiteach tuairisgeul
beothachadh boolean fìor cuir a-steach eadar-ghluasad css fade chun an t-inneal-taice
suidheachadh sreang | gnìomh 'deas' mar a shuidhicheas tu am popover - gu h-àrd | bun | clì | deas
roghnaiche sreang breugach ma thèid neach-taghaidh a thoirt seachad, thèid nithean tip inneal a thiomnadh gu na targaidean ainmichte
spreidh sreang 'hover' mar a tha tooltip air a phiobrachadh - hover | fòcas | làimhe
tiotal sreang | gnìomh '' luach tiotal bunaiteach mura h-eil feart `title` an làthair
susbaint sreang | gnìomh '' luach susbaint bunaiteach mura h-eil feart `data-content` an làthair
dàil àireamh | nì 0

dàil a’ sealltainn agus a’ falach an popover (ms) - chan eil e 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ì:delay: { show: 500, hide: 100 }

Cinn suas! Faodar roghainnean airson popovers fa leth a shònrachadh air an làimh eile tro bhith a’ cleachdadh buadhan dàta.

Marcaich

Airson adhbharan dèanadais, tha an data-apis Tooltip agus Popover air an taghadh a-steach. Ma tha thu airson an cleachdadh dìreach sònraich roghainn taghaidh.

Dòighean-obrach

$().popover(roghainnean)

A’ tòiseachadh popovers airson cruinneachadh eileamaidean.

.popover ('show')

A’ nochdadh popover eileamaidean.

  1. $ ( '# eileamaid' ). popover ( 'taisbeanadh' )

.popover ('falach')

A 'falach popover eileamaidean.

  1. $ ( '# eileamaid' ). popover ( 'falaich' )

.popover ('toggle')

Togail popover eileamaidean.

  1. $ ( '# eileamaid' ). popover ( 'toggle' )

Mu rabhaidhean

Is e clas beag a th’ anns a’ plugan rabhaidh airson gnìomhachd dlùth a chur ri rabhaidhean.

Luchdaich sìos

Eisimpleirean de rabhaidhean

Bidh am plugan rabhaidhean ag obair air teachdaireachdan rabhaidh cunbhalach, agus a’ bacadh teachdaireachdan.

Guacamole naomh! Is fheàrr sgrùdadh a dhèanamh ort fhèin, chan eil thu a’ coimhead ro mhath.

Ach snap! Fhuair thu mearachd!

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.

Gabh an gnìomh seo No dèan seo


A 'cleachdadh bootstrap-alert.js

Dèan comas air rabhadh a chuir às tro javascript:

  1. $ ( ".alert" ). rabhadh ()

Marcaich

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.

  1. <a class="close" data-dismiss="alert" href="#"> & times ; _ _ _ _ _ </a>

Dòighean-obrach

$().alert()

A ’cuairteachadh a h-uile rabhadh le comas-gnìomh dlùth. Gus am bi na rabhaidhean agad beò nuair a tha iad dùinte, dèan cinnteach gu bheil an clas .fadeagus an .inclas air an cur a-steach mu thràth.

.alert('dùin')

A’ dùnadh rabhadh.

  1. $ ( ".alert" ). rabhadh ( 'dlùth' )

Tachartasan

Bidh clas rabhaidh Bootstrap a’ nochdadh grunn thachartasan airson a dhol a-steach do ghnìomhachd rabhaidh.

Tachartas Tuairisgeul
dùin Bidh an tachartas seo a’ losgadh sa bhad nuair closea chanar ris an dòigh eisimpleir.
dùinte Thèid an tachartas seo a chuir às nuair a tha an rabhadh air a dhùnadh (feitheamh ri eadar-ghluasad css a chrìochnachadh).
  1. $ ( '# my-alert' ). ceangal ( 'dùinte' , gnìomh () {
  2. // dèan rudeigin…
  3. })

Mu dheidhinn

Dèan barrachd le putanan. Stèidhich putan smachd no cruthaich buidhnean de phutanan airson barrachd phàirtean leithid bàraichean inneal.

Luchdaich sìos file

Eisimpleirean de chleachdadh

Cleachd am plugan putanan airson stàitean agus toggles.

Stàiteil
Toggle singilte
Bogsa-seic
Rèidio

A’ cleachdadh bootstrap-button.js

Dèan comas air putanan tro javascript:

  1. $ ( '.nav-tabs' ). putan ()

Marcaich

Tha buadhan dàta riatanach don plugan putan. Thoir sùil air a’ chòd eisimpleir gu h-ìosal airson na diofar sheòrsaichean de chomharran.

  1. <!-- Cuir data-toggle="putan" ris gus togadh air aon phutan a ghnìomhachadh -->
  2. <button class = "btn" data-toggle = "putan" > Togbhail singilte </button>
  3.  
  4. <!-- Cuir data-toggle="buttons-checkbox" airson stoidhle bogsa-seic a’ togadh air btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Clì </button>
  7. <button class = "btn" > Meadhan </button>
  8. <button class = "btn" > Deas </button>
  9. </div>
  10.  
  11. <!-- Cuir data-toggle="buttons-radio" airson stoidhle rèidio a’ togadh air btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Clì </button>
  14. <button class = "btn" > Meadhan </button>
  15. <button class = "btn" > Deas </button>
  16. </div>

Dòighean-obrach

$().button('toggle')

Toggle staid putadh. A’ toirt coltas air a’ phutan gun deach a ghnìomhachadh.

Cinn suas! Is urrainn dhut putan fèin-ghluasadach a chomasachadh le bhith a’ cleachdadh am data-togglefeart.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('luchdachadh')

A’ suidheachadh suidheachadh a’ phutan gu bhith a’ luchdachadh - cuir à comas putan agus ag atharrachadh teacsa gu teacsa a’ luchdachadh. Bu chòir teacsa luchdachadh a bhith air a mhìneachadh air an eileamaid putan a’ cleachdadh am feart dàta data-loading-text.

  1. <button class = "btn" data-loading-text = "a' luchdadh stuth..." > ... </button>
Cinn suas! Leanaidh Firefox ris an t-suidheachadh ciorramach thar luchdan dhuilleagan . Is e fuasgladh airson seo a chleachdadh autocomplete="off".

$().button('ath-shuidheachadh')

Ath-shuidheachadh staid putan - ag atharrachadh teacsa gu teacsa tùsail.

$().putan(sreang)

Ath-shuidheachadh staid putan - ag atharrachadh teacsa gu staid teacsa sam bith a tha air a mhìneachadh le dàta.

  1. <button class = "btn" data-complete-text = "crìochnaichte!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). putan ( 'coileanta' )
  4. </script>

Mu dheidhinn

Faigh stoidhlichean bunaiteach agus taic sùbailte airson co-phàirtean a ghabhas tuiteam leithid bogsa-ciùil agus seòladh.

Luchdaich sìos file

* Feumaidh am plugan Transitions a bhith air a thoirt a-steach.

Eisimpleir bogsa-ciùil

A’ cleachdadh am plugan collapse, thog sinn widget stoidhle bogsa sìmplidh:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson agus squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Tha an làraidh bìdh a’ tighinn gu ìre nas lugha na labourum euusmod. Brunch 3 wolf moon tempor, sunt aliqua cuir eun air squid cofaidh aon-tùs nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur bùidsear iar lomo. Leggings occaecat craft beer farm-to-table, raw denim esthetic synth nesciunt is dòcha nach cuala tu iomradh orra accusamus laboure seasmhach VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson agus squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Tha an làraidh bìdh a’ tighinn gu ìre nas lugha na labourum euusmod. Brunch 3 wolf moon tempor, sunt aliqua cuir eun air squid cofaidh aon-tùs nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur bùidsear iar lomo. Leggings occaecat craft beer farm-to-table, raw denim esthetic synth nesciunt is dòcha nach cuala tu iomradh orra accusamus laboure seasmhach VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson agus squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Tha an làraidh bìdh a’ tighinn gu ìre nas lugha na labourum euusmod. Brunch 3 wolf moon tempor, sunt aliqua cuir eun air squid cofaidh aon-tùs nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur bùidsear iar lomo. Leggings occaecat craft beer farm-to-table, raw denim esthetic synth nesciunt is dòcha nach cuala tu iomradh orra accusamus laboure seasmhach VHS.

A’ cleachdadh bootstrap-collapse.js

Dèan comas tro javascript:

  1. $ ( ".collapse" ). tuiteam ()

Roghainnean

Ainm seòrsa bunaiteach tuairisgeul
pàrant roghnaiche breugach Ma roghnaicheas tu an uairsin 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)
tog boolean fìor Toglaich an eileamaid a ghabhas tuiteam air ionnsaigh

Marcaich

Dìreach cuir ris data-toggle="collapse"agus data-targeteileamaid gus smachd a shònrachadh gu fèin-ghluasadach air eileamaid a ghabhas tuiteam. Tha am data-targetfeart a’ gabhail ri roghnaichear css gus an tuiteam a chuir an sàs. Dèan cinnteach gun cuir thu an clas collapseris an eileamaid a ghabhas tuiteam. Ma tha thu airson gum fosgail e gu bunaiteach, cuir ris a’ chlas in.

  1. <button class = "btn btn-danger" data-toggle = "tuiteam" data-target = "#demo" >
  2. sìmplidh tuiteamach
  3. </putan>
  4.  
  5. <div id = "demo" class = "tuiteam a-steach" > ... </div>
Cinn suas! 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òighean-obrach

.tuiteam (roghainnean)

Cuir an susbaint agad an gnìomh mar eileamaid a ghabhas tuiteam. A 'gabhail ri roghainnean roghnach object.

  1. $ ( '#myCollapsible' ). tuiteam sìos ({
  2. tog : breugach
  3. })

.tuiteam ('toggle')

Togail eileamaid a ghabhas tuiteam ri fhaicinn no falaichte.

.tuiteam ('show')

A’ sealltainn eileamaid a ghabhas tuiteam.

.tuiteam ('falach')

A 'falach eileamaid collapsible.

Tachartasan

Bidh clas tuiteam Bootstrap a’ nochdadh grunn thachartasan airson a dhol an sàs ann an gnìomhachd tuiteam.

Tachartas Tuairisgeul
seall Bidh an tachartas seo a’ losgadh sa bhad nuair showa chanar ris an dòigh eisimpleir.
air a thaisbeanadh Thèid an tachartas seo a losgadh nuair a tha eileamaid tuiteamach air a dhèanamh follaiseach don neach-cleachdaidh (feitheamh ri eadar-ghluasad css a chrìochnachadh).
seiche Tha an tachartas seo air a losgadh sa bhad nuair a chaidh am hidemodh a ghairm.
falaichte Thèid an tachartas seo a chuir às nuair a chaidh eileamaid tuiteam am falach bhon neach-cleachdaidh (feitheamh ri eadar-ghluasad css a chrìochnachadh).
  1. $ ( '#myCollapsible' ). air ( 'falaichte' , gnìomh () {
  2. // dèan rudeigin…
  3. })

Mu dheidhinn

Plug bunaiteach, furasta a leudachadh airson cinn-seòrsa eireachdail a chruthachadh gu sgiobalta le cuir a-steach teacsa cruth sam bith.

Luchdaich sìos file

eisimpleir

Tòisich a’ taipeadh san raon gu h-ìosal gus na toraidhean seòrsa air thoiseach a shealltainn.


A 'cleachdadh bootstrap-typeahead.js

Cuir fòn gu typeahead tro javascript:

  1. $ ( '.typeahead' ). seòrsa air thoiseach ()

Roghainnean

Ainm seòrsa bunaiteach tuairisgeul
tùs eagar [ ] Stòr dàta airson ceasnachadh na aghaidh.
nithean àireamh 8 An àireamh as motha de nithean ri thaisbeanadh anns an tuiteam-sìos.
maidsear gnìomh cùis neo-mhothachail An dòigh a thathar a’ cleachdadh gus faighinn a-mach a bheil ceist a’ freagairt ri nì. A’ gabhail ri aon argamaid, an itemaghaidh a’ cheist a dhearbhadh. Faigh cothrom air a’ cheist làithreach le this.query. Thoir air ais boolean truemas e maids a th’ ann an ceist.
sorter gnìomh maids ceart,
cùis-mhothachail,
cùis neo-mhothachail
Dòigh air a chleachdadh airson toraidhean fèin-choileanta a sheòrsachadh. A’ gabhail ri aon argamaid itemsagus tha farsaingeachd an t-eisimpleir typeahead aige. Thoir iomradh air a’ cheist làithreach le this.query.
àrdaichear gnìomh a’ comharrachadh a h-uile maids àbhaisteach Dòigh air a chleachdadh gus toraidhean fèin-choileanta a shoilleireachadh. A’ gabhail ri aon argamaid itemagus tha farsaingeachd an t-eisimpleir typeahead aige. Bu chòir don html tilleadh.

Marcaich

Cuir buadhan dàta ris gus eileamaid a chlàradh le comas-gnìomh typeahead.

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

Dòighean-obrach

.typehead(roghainnean)

A’ tòiseachadh cuir a-steach le seòrsa air thoiseach.