Javascript le haghaidh bootstrap íoslódáil

Tabhair beatha do chomhpháirteanna Bootstrap - anois le 12 breiseán jQuery saincheaptha.

Modhanna

Glacadh leis an mbreiseán modha traidisiúnta javascript a shruthlíniú, ach atá solúbtha, gan ach an fheidhmiúlacht íosta riachtanach agus mainneachtainí cliste.

Droim anuas

Cuir biachláir anuas le beagnach rud ar bith in Bootstrap leis an mbreiseán simplí seo. Tá tacaíocht iomlán roghchláir anuas ar Bootstrap sa bharra nascleanúna, cluaisíní agus piollaí.

Scrollspy

Bain úsáid as scrollspy chun na naisc i do bharra nascleanúna a nuashonrú go huathoibríoch chun an nasc gníomhach reatha a thaispeáint bunaithe ar shuíomh an scrolla.

Cluaisíní so-ghlactha

Bain úsáid as an mbreiseán seo chun cluaisíní agus piollaí a dhéanamh níos úsáidí trí ligean dóibh scoránaigh trí phána táblach d’ábhar áitiúil.

Leideanna uirlisí

Smaoineamh nua ar an mbreiseán jQuery Tipsy, ní bhíonn Leideanna Uirlisí ag brath ar íomhánna - úsáideann siad CSS3 le haghaidh beochan agus tréithe sonraí le haghaidh stóráil teideal áitiúil.

Popovers *

Cuir forleagan beaga ábhair, cosúil leis na cinn ar an iPad, le haon eilimint le haghaidh faisnéise tánaisteacha tithíochta.

* Éilíonn Leideanna Uirlisí a bheith san áireamh

Teachtaireachtaí foláirimh

Is rang beag bídeach é an breiseán foláirimh chun feidhmiúlacht dhlúth a chur le foláirimh.

Cnaipí

Déan níos mó le cnaipí. Rialú stáit cnaipe nó cruthaigh grúpaí cnaipí le haghaidh tuilleadh comhpháirteanna mar bharraí uirlisí.

Laghdaigh

Faigh bunstíleanna agus tacaíocht sholúbtha do chomhpháirteanna in-chomhlaite amhail bosca ceoil agus loingseoireacht.

Timpealláin

Cruthaigh sracfhéachaint ar aon ábhar ar mhaith leat taispeántas sleamhnán idirghníomhach inneachair a sholáthar.

Clóscríobh ar aghaidh

Breiseán bunúsach, éasca le síneadh, chun cinn chlóite galánta a chruthú go tapa le hionchur téacs foirme ar bith.

Aistrithe *

Le haghaidh éifeachtaí aistrithe simplí, cuir san áireamh bootstrap-transition.js uair amháin chun sleamhnú isteach i módúil nó chun foláirimh a mhaolú.

* Riachtanach le haghaidh beochan i breiseán

Cinnirí suas! Teastaíonn an leagan is déanaí de jQuery ó gach breiseán javascript.

Maidir le modúil

Glacadh leis an mbreiseán modha traidisiúnta javascript a shruthlíniú, ach atá solúbtha, gan ach an fheidhmiúlacht íosta riachtanach agus mainneachtainí cliste.

Íoslódáil an comhad

Sampla statach

Anseo thíos tá módúil arna rindreáil go statach.

Taispeántas beo

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.

Seoladh modúl taispeána

Ag baint úsáide as bootstrap-modal

Cuir glaoch ar an modúl trí javascript:

  1. $ ( '#myModal' ). modha ( roghanna )

Roghanna

Ainm cineál réamhshocraithe tuairisc
chúlra Boole fíor Áirítear eilimint mhodúil chúlra. Mar mhalairt air sin, sonraigh staticle 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é.

Marcáil

Is féidir leat módúil a ghníomhachtú ar do leathanach go héasca gan aon líne amháin javascript a scríobh. Just a shocrú data-toggle="modal"ar eilimint rialaitheora le data-target="#foo"href="#foo"a fhreagraíonn d'aitheantas eilimint mhódúil, agus nuair a chliceáiltear é, seolfaidh sé do mhodúil.

Chomh maith leis sin, chun roghanna a chur le do chás módúil, ní gá ach iad a áireamh mar shaintréithe sonraí breise ar an eilimint rialaithe nó ar an marcáil módúil féin.

  1. <a class="btn" data-toggle="modal" href="#myModal"> Seoladh Módúil </a> _ _ _ _ _ _
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Ceanntásc módúil </h3>
  5. </div>
  6. <div class = "modal-corp" >
  7. <p> Corp breá amháin… </p>
  8. </div>
  9. <div class = "modal-buntásc" >
  10. <a href="#" class="btn" data-dismiss="modal"> Dún </a> _ _ _ _ _ _ _
  11. <a href="#" class="btn btn-primary"> Sábháil athruithe </a> _ _ _
  12. </div>
  13. </div>
Cinnirí suas! Más mian leat do mhodúil a bheochan isteach agus amach, níl le déanamh ach .faderang a chur leis an .modaleilimint (féach an taispeántas chun é seo a fheiceáil i ngníomh) agus cuir bootstrap-transition.js san áireamh.

Modhanna

.modal(roghanna)

Gníomhachtaíonn d'ábhar mar mhodh modúl. Glacann rogha roghnach object.

  1. $ ( '#myModal' ). módúil ({
  2. méarchlár : bréagach
  3. })

.modal ('scoránaigh')

Scoránaigh modúl de láimh.

  1. $ ( '#myModal' ). modha ( 'scoránaigh' )

.modal ('taispeáin')

Osclaíonn modúl de láimh.

  1. $ ( '#myModal' ). modha ( 'taispeáin' )

.modal ('folaigh')

Folaigh modúl de láimh.

  1. $ ( '#myModal' ). modha ( 'folaigh' )

Imeachtaí

Nochtann rang modha Bootstrap roinnt imeachtaí chun dul i ngleic le feidhmiúlacht mhódúil.

Imeacht Cur síos
seó Téann an teagmhas seo chun solais láithreach nuair showa ghlaoitear an modh ásc.
léirithe Cuirtear an teagmhas seo ar ceal nuair a bheidh an modúl infheicthe ag an úsáideoir (fanfaidh sé go mbeidh na haistrithe css críochnaithe).
ceilt Cuirtear an teagmhas seo ar ceal láithreach nuair a bhíonn an hidemodh ásc glaoite.
i bhfolach Tá an teagmhas seo bréan nuair a bhíonn an modúl críochnaithe a bheith folaithe ón úsáideoir (fanfaidh sé ag fanacht le haistrithe CSS a chur i gcrích).
  1. $ ( '#myModal' ). ar ( 'i bhfolach' , feidhm () {
  2. // Déan rud éigin…
  3. })

Is é an breiseán ScrollSpy ná spriocanna nascleanúna a nuashonrú go huathoibríoch bunaithe ar an suíomh scrollbharra.

Íoslódáil an comhad

Barra nascleanúna mar shampla le scrollspy

Scrollaigh an limistéar thíos agus féach ar an nuashonrú nascleanúna. Cuirfear béim ar na fo-mhíreanna anuas freisin. Bain triail as!

@saille

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.

@mdo

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.

aon

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, páirc macalla as a dtagann aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim Messenger bag. Creid ex in, inbhuanaithe 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.

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.


Ag baint úsáide as bootstrap-scrollspy.js

Cuir glaoch ar an scrollspy trí javascript:

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

Marcáil

Chun iompar scrollspy a chur le do nascleanúint barrbharra go héasca, ní gá ach a chur data-spy="scroll"leis an eilimint a bhfuil tú ag iarraidh spy a chur air (is gnách gurb é seo an corp).

  1. <body data-spy = "scrollaigh" > ... </body>
Cinnirí suas! 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 bhaile mhaith <div id="home"></div>.

Modhanna

.scrollspy('athnuaigh')

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:

  1. $ ( '[ data-spy="scroll" ] ' ). gach ( feidhm ( ) {
  2. var $spy = $ ( seo ). scrollspy ( ' athnuachan ' )
  3. });

Roghanna

Ainm cineál réamhshocraithe tuairisc
fhritháireamh uimhir 10 Picteilíní le fritháireamh ón mbarr agus suíomh an scrolla á ríomh.

Imeachtaí

Imeacht Cur síos
ghníomhacht Cuirtear an teagmhas seo chun cinn nuair a ghníomhaíonn an scrollspy mír nua.

Cuireann an breiseán seo feidhmiúlacht tapa, dinimiciúil cluaisín agus pill leis chun aistriú trí ábhar áitiúil.

Íoslódáil an comhad

Cluaisíní samplacha

Cliceáil ar na cluaisíní thíos chun scoránaigh idir phána folaithe, fiú trí roghchláir anuas.

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.


Ag baint úsáide as bootstrap-tab.js

Cumasaigh cluaisíní inchurtha trí javascript (ní mór gach cluaisín a ghníomhachtú ina n-aonar):

  1. $ ( '#myTab a' ). cliceáil ( feidhm ( e ) {
  2. e . preventDefault ();
  3. $ ( seo ). cluaisín ( 'taispeáin' );
  4. })

Is féidir leat cluaisíní aonair a ghníomhachtú ar go leor bealaí:

  1. $ ( '#myTab a[href="#profile"]' ). cluaisín ( 'taispeáin' ); // Roghnaigh cluaisín de réir ainm
  2. $ ( '#myTab a:ar dtús' ). cluaisín ( 'taispeáin' ); // Roghnaigh an chéad chluaisín
  3. $ ( '#myTab a:last' ). cluaisín ( 'taispeáin' ); // Roghnaigh cluaisín deireanach
  4. $ ( '#myTab li:eq(2) a' ). cluaisín ( 'taispeáin' ); // Roghnaigh an tríú cluaisín (0-innéacsaithe)

Marcáil

Is féidir leat nascleanúint cluaisín nó pillín a ghníomhachtú gan aon javascript a scríobh ach rud a shonrú data-toggle="tab"data-toggle="pill"ar eilimint. Má chuirtear na ranganna navagus na nav-tabsranganna leis an gcluaisín ul, cuirfear stíliú na gcluaisíní bootstrap i bhfeidhm.

  1. <ul class = "nav nav-cluaisíní" >
  2. <li> <a href="#home" data-toggle="cluaisín"> Baile </a> < / li >
  3. <li><a href = "#profile" data-toggle = "cluaisín"> Próifíl </a> < /li>
  4. <li><a href = "#messages" data-toggle = "cluaisín"> Teachtaireachtaí </a> < /li>
  5. <li><a href = "#settings" data-toggle = "cluaisín"> Socruithe </a> < /li>
  6. </ul>

Modhanna

$().cluaisín

Gníomhachtaíonn eilimint tab agus coimeádán ábhar. Ba cheart go mbeadh nód coimeádán data-targethrefnód dírithe ar an gcluaisín sa DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = " #home " > Baile </a></li>
  3. <li><a href = "#profile"> Próifíl </a> < /li>
  4. <li><a href="#messages">Teachtaireachtaí </a> < / li >
  5. <li><a href = "#settings"> Socruithe </a> < /li>
  6. </ul>
  7.  
  8. <div class = "cluaisín-ábhar" >
  9. <div class = "tab-pane active" id = "baile" > ... </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. $ ( feidhm ( ) {
  17. $ ( '#myTab a:last' ). cluaisín ( 'taispeáin' );
  18. })
  19. </script>

Imeachtaí

Imeacht Cur síos
seó Teann an teagmhas seo ar thaispeántas cluaisíní, ach sula dtaispeántar an cluaisín nua. Úsáid event.targetagus event.relatedTargetchun an cluaisín gníomhach agus an cluaisín gníomhach roimhe seo (má tá sé ar fáil) faoi seach a dhíriú.
léirithe Teann an teagmhas seo ar thaispeántas cluaisíní tar éis cluaisín a thaispeáint. Úsáid event.targetagus event.relatedTargetchun an cluaisín gníomhach agus an cluaisín gníomhach roimhe seo (má tá sé ar fáil) faoi seach a dhíriú.
  1. $ ( 'a[data-toggle="cluaisín" ]' ). ar ( 'léirithe' , feidhm ( e ) {
  2. e . sprioc // cluaisín gníomhachtaithe
  3. e . relatedTarget // cluaisín roimhe seo
  4. })

Maidir le Leideanna Uirlisí

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.

Íoslódáil an comhad

Sampla d'úsáid Leideanna Uirlisí

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.


Ag baint úsáide as bootstrap-tooltip.js

Spreag an leid uirlisí trí javascript:

  1. $ ( '# sampla' ). leid uirlisí ( roghanna )

Roghanna

Ainm cineál réamhshocraithe tuairisc
beochan Boole fíor cuir trasdul céimnithe css i bhfeidhm ar an leid uirlisí
socrúchán teaghrán | feidhm 'barr' conas an leid uirlisí a shuíomh - barr | bun | chlé | ceart
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.
teideal teaghrán | feidhm '' luach réamhshocraithe teidil mura bhfuil an chlib `teideal` i láthair
truicear teaghrán 'hover' conas a spreagtar leid uirlisí - hover | fócas | lámhleabhar
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:delay: { show: 500, hide: 100 }

Cinnirí suas! De rogha air sin is féidir roghanna le haghaidh leideanna aonair a shonrú trí úsáid a bhaint as tréithe sonraí.

Marcáil

Ar chúiseanna feidhmíochta, tá rogha an diúltaithe sna data-apis Tooltip agus Popover. Más mian leat iad a úsáid, ní gá ach rogha roghnóireachta a shonrú.

  1. <a href = " #" rel = "tooltip" title = "an chéad leid uirlise" > aló os mo chionn </a>

Modhanna

$().tooltip(roghanna)

Nascann láimhseálaí leid uirlisí le bailiúchán eilimint.

.tooltip ('taispeáin')

Nochtann leid uirlisí eilimint.

  1. $ ( '# eilimint' ). leid uirlisí ( 'show' )

.tooltip ('folaigh')

Folaigh leid uirlisí eiliminte.

  1. $ ( '# eilimint' ). leid uirlisí ( 'folaigh' )

.tooltip ('scoránaigh')

Scoránaigh an leid uirlisí eilimint.

  1. $ ( '# eilimint' ). leid uirlisí ( 'scoránaigh' )

Maidir le popovers

Cuir forleagan beaga ábhair, cosúil leis na cinn ar an iPad, le haon eilimint le haghaidh faisnéise tánaisteacha tithíochta.

* Éilíonn Tooltip a chur san áireamh

Íoslódáil an comhad

Popover ainlíon mar shampla

Ainligh thar an gcnaipe chun an popover a spreagadh.


Ag baint úsáide as bootstrap-popover.js

Cumasaigh popovers trí javascript:

  1. $ ( '# sampla' ). aníos ( roghanna )

Roghanna

Ainm cineál réamhshocraithe tuairisc
beochan Boole fíor cuir trasdul céimnithe css i bhfeidhm ar an leid uirlisí
socrúchán teaghrán | feidhm 'ceart' conas an popover a shuíomh - barr | bun | chlé | ceart
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
truicear teaghrán 'hover' conas a spreagtar leid uirlisí - hover | fócas | lámhleabhar
teideal teaghrán | feidhm '' luach réamhshocraithe teidil mura bhfuil aitreabúid `title` i láthair
ábhar teaghrán | feidhm '' luach réamhshocraithe an ábhair mura bhfuil aitreabúid `data-content` i láthair
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:delay: { show: 500, hide: 100 }

Cinnirí suas! De rogha air sin is féidir roghanna le haghaidh popovers aonair a shonrú trí úsáid a bhaint as tréithe sonraí.

Marcáil

Ar chúiseanna feidhmíochta, tá rogha an diúltaithe sna data-apis Tooltip agus Popover. Más mian leat iad a úsáid, ní gá ach rogha roghnóireachta a shonrú.

Modhanna

$().popover(roghanna)

Tosaíonn popovers le haghaidh bailiúchán eilimint.

. popover ('taispeáin')

Nochtann popover eilimintí.

  1. $ ( '# eilimint' ). popover ( 'taispeáin' )

. popover ('folaigh')

Seithí popover eilimintí.

  1. $ ( '# eilimint' ). popover ( 'folaigh' )

. popover ('scoránaigh')

Scoránaigh an popover eilimintí.

  1. $ ( '# eilimint' ). popover ( 'scoránaigh' )

Maidir le foláirimh

Is rang beag bídeach é an breiseán foláirimh chun feidhmiúlacht dhlúth a chur le foláirimh.

Íosluchtaigh

Foláirimh shamplacha

Oibríonn an breiseán foláirimh ar theachtaireachtaí foláirimh rialta, agus bloctheachtaireachtaí.

Guacamole naofa! Is fearr a sheiceáil leat féin, níl tú ag breathnú ró-mhaith.

Ó Léim! Fuair ​​​​tú earráid!

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.

Déan an gníomh seo Nó é seo a dhéanamh


Ag baint úsáide as bootstrap-alert.js

Cumasaigh dífhostú foláirimh trí javascript:

  1. $ ( ".alert" ). foláireamh ()

Marcáil

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.

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

Modhanna

$(). foláireamh()

Wraps gach foláireamh le feidhmiúlacht dlúth. Le go mbeidh do chuid foláirimh le beocht agus iad dúnta, cinntigh go bhfuil an rang .fadeagus an .inrang i bhfeidhm orthu cheana féin.

. foláireamh('dún')

Dúnann foláireamh.

  1. $ ( ".alert" ). foláireamh ( 'gar' )

Imeachtaí

Nochtann rang foláirimh Bootstrap roinnt imeachtaí chun dul i ngleic le feidhmiúlacht foláirimh.

Imeacht Cur síos
dhúnadh Téann an teagmhas seo chun solais láithreach nuair closea ghlaoitear an modh ásc.
dúnta Cuirtear an teagmhas seo ar ceal nuair a dhúntar an foláireamh (fanfaidh sé go mbeidh na haistrithe CSS críochnaithe).
  1. $ ( '#mo-airdeall' ). ceangal ( 'dúnta' , feidhm () {
  2. // Déan rud éigin…
  3. })

Faoi

Déan níos mó le cnaipí. Rialú stáit cnaipe nó cruthaigh grúpaí cnaipí le haghaidh tuilleadh comhpháirteanna mar bharraí uirlisí.

Íoslódáil an comhad

Samplaí úsáidí

Úsáid an breiseán cnaipí le haghaidh stáit agus scoránaigh.

Stáit
Scoránaigh aonair
ticbhosca
Raidió

Ag baint úsáide as bootstrap-button.js

Cumasaigh cnaipí trí javascript:

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

Marcáil

Tá tréithe sonraí lárnach don bhreiseán cnaipe. Seiceáil an cód samplach thíos le haghaidh na gcineálacha éagsúla marcála.

  1. <!-- Cuir data-toggle="button" leis chun scoránú a ghníomhachtú ar chnaipe amháin -->
  2. <button class = "btn" data-toggle = "cnaipe" > Scoránaigh Aonair </button>
  3.  
  4. <!-- Cuir data-toggle="buttons-checkbox" leis le haghaidh scoránú stíl an bhosca tic ar btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-ticbox" >
  6. <button class = "btn" > Ar chlé </button>
  7. <button class = "btn" > Meán </button>
  8. <button class = "btn" > Ar dheis </button>
  9. </div>
  10.  
  11. <!-- Cuir data-toggle="buttons-radio" leis chun stíl raidió a scoránú ar btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Ar chlé </button>
  14. <button class = "btn" > Meán </button>
  15. <button class = "btn" > Ar dheis </button>
  16. </div>

Modhanna

$().button('scoránaigh')

Scoránaigh an staid bhrú. Tugann sé an chuma ar an gcnaipe go bhfuil sé curtha i ngníomh.

Cinnirí suas! Is féidir leat scoránú uathoibríoch de chnaipe a chumasú tríd an data-toggletréith a úsáid.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('luchtú')

Socraítear staid an chnaipe go dtí an luchtú - díchumasaítear an cnaipe agus malartaíonn sé téacs go téacs luchtaithe. Ba chóir an téacs a lódáil a shainiú ar an eilimint chnaipe ag baint úsáide as an aitreabúid sonraí data-loading-text.

  1. <button class = "btn" data-loading-text = "stuif á luchtú..." > ... </button>
Cinnirí suas! Fanann Firefox sa riocht díchumasaithe thar ualaí leathanach . Réiteach chun é seo a úsáid is ea autocomplete="off".

$().button('athshocrú')

Athshocraigh staid na gcnaipe - malartaíonn sé téacs go buntéacs.

$().cnaipe(teaghrán)

Athshocraigh staid an chnaipe - malartaíonn sé téacs go stát téacs sainithe ar bith.

  1. < button class = " btn " data-complete-text = "críochnaithe!" > ... </cnaipe>
  2. <script>
  3. $ ( '.btn' ). cnaipe ( 'complete' )
  4. </script>

Faoi

Faigh bunstíleanna agus tacaíocht sholúbtha do chomhpháirteanna in-chomhlaite amhail bosca ceoil agus loingseoireacht.

Íoslódáil an comhad

* Éilíonn an breiseán Transitions a chur san áireamh.

Bosca samplach

Ag baint úsáide as an breiseán collapse, rinneamar giuirléid stíl bhosca ceoil simplí:

Anim pariatur cliche reprehenderit, enim eiusmod saol ard accusamus terry richardson agus squid. 3 mac tíre gealach officia aute, neamh cupidatat scátála dolor brunch. Trucail bia quinoa nesciunt laborum eiusmod. Brunch 3 mac tíre gealach tempor, sunt aliqua chuir éan air squid caife aon bhunadh nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur búistéir leas lomo. Leggings occaecat craft beoir farm-go-table, amh denim synth aeistéitiúil nesciunt is dócha nár chuala tú trácht orthu accusamus labore VHS inbhuanaithe.
Anim pariatur cliche reprehenderit, enim eiusmod saol ard accusamus terry richardson agus squid. 3 mac tíre gealach officia aute, neamh cupidatat scátála dolor brunch. Trucail bia quinoa nesciunt laborum eiusmod. Brunch 3 mac tíre gealach tempor, sunt aliqua chuir éan air squid caife aon bhunadh nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur búistéir leas lomo. Leggings occaecat craft beoir farm-go-table, amh denim synth aeistéitiúil nesciunt is dócha nár chuala tú trácht orthu accusamus labore VHS inbhuanaithe.
Anim pariatur cliche reprehenderit, enim eiusmod saol ard accusamus terry richardson agus squid. 3 mac tíre gealach officia aute, neamh cupidatat scátála dolor brunch. Trucail bia quinoa nesciunt laborum eiusmod. Brunch 3 mac tíre gealach tempor, sunt aliqua chuir éan air squid caife aon bhunadh nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur búistéir leas lomo. Leggings occaecat craft beoir farm-go-table, amh denim synth aeistéitiúil nesciunt is dócha nár chuala tú trácht orthu accusamus labore VHS inbhuanaithe.

Ag baint úsáide as bootstrap-collapse.js

Cumasaigh trí javascript:

  1. $ ( ".collapse" ). titim ()

Roghanna

Ainm cineál réamhshocraithe tuairisc
tuismitheoir roghnóir bréagach Más roghnóir é, dúnfar gach eilimint infhillte faoin tuismitheoir sonraithe nuair a thaispeánfar an mhír infhillte seo. (cosúil le hiompar traidisiúnta bosca ceoil)
scoránaigh Boole fíor Scoránaigh an eilimint infhillte ar agairt

Marcáil

Just a chur leis data-toggle="collapse"agus data-targeteilimint a shannadh go huathoibríoch rialú ar eilimint collapsible. Glacann an data-targettréith le roghnóir css chun an caolú a chur i bhfeidhm air. Bí cinnte an rang collapsea chur leis an eilimint infhillte. Más mian leat é a oscailt roimh ré, cuir an rang breise in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. simplí collapsible
  3. </cnaipe>
  4.  
  5. <div id = "demo" class = "titim isteach" > </div>
Cinnirí suas! 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.

Modhanna

.collapse(roghanna)

Gníomhachtaíonn sé d'ábhar mar eilimint infhillte. Glacann rogha roghnach object.

  1. $ ( '#myCollapsible' ). titim ({
  2. scoránaigh : bréagach
  3. })

.collapse('scoránaigh')

Scoránaigh eilimint infhillte a thaispeántar nó folaithe.

.collapse('taispeáin')

Léiríonn eilimint infhillte.

.collapse ('folaigh')

Seithí eilimint infhillte.

Imeachtaí

Nochtann rang titim Bootstrap roinnt imeachtaí chun dul i ngleic leis an bhfeidhmiúlacht leite.

Imeacht Cur síos
seó Téann an teagmhas seo chun solais láithreach nuair showa ghlaoitear an modh ásc.
léirithe Tá an teagmhas seo bréan nuair a bhíonn eilimint tite infheicthe don úsáideoir (fanfaidh sé go mbeidh na haistrithe css críochnaithe).
ceilt Cuirtear an teagmhas seo ar ceal láithreach nuair hidea glaodh ar an modh.
i bhfolach Tá an teagmhas seo bréan nuair a bhíonn eilimint tite i bhfolach ón úsáideoir (fanfaidh sé go mbeidh na haistrithe css críochnaithe).
  1. $ ( '#myCollapsible' ). ar ( 'i bhfolach' , feidhm () {
  2. // Déan rud éigin…
  3. })

Faoi

Breiseán bunúsach, éasca le síneadh, chun cinn chlóite galánta a chruthú go tapa le hionchur téacs foirme ar bith.

Íoslódáil an comhad

Sampla

Tosaigh ag clóscríobh sa réimse thíos chun na torthaí clóscríobh a thaispeáint.


Ag baint úsáide as bootstrap-typeahead.js

Cuir glaoch ar an gceann clóscríobh trí javascript:

  1. $ ( '.typehead' ). clóscríobh ()

Roghanna

Ainm cineál réamhshocraithe tuairisc
foinse eagar [ ] An fhoinse sonraí le fiosrú ina coinne.
míreanna uimhir 8 An líon uasta míreanna le taispeáint sa anuas.
meaitseoir feidhm cás neamhíogair An modh a úsáidtear chun a chinneadh an dtagann ceist le mír. Glacann sé le hargóint amháin, itemchun an cheist a thástáil ina choinne. Faigh rochtain ar an gceist reatha le this.query. Tabhair boolean ar ais truemás rud é gur meaits é an cheist.
sórtálaí feidhm meaitseáil chruinn,
cásíogair,
cás-íogair
Modh a úsáidtear chun torthaí uathchríochnaithe a shórtáil. Glacann sé le hargóint amháin itemsagus tá scóip an ásc clóbhuailte aige. Déan tagairt don cheist reatha le this.query.
aibhsithe feidhm leagann sé béim ar gach meaitseáil réamhshocraithe Modh a úsáidtear chun torthaí uathchríochnaithe a aibhsiú. Glacann sé le hargóint amháin itemagus tá scóip an ásc clóbhuailte aige. Ba cheart html a thabhairt ar ais.

Marcáil

Cuir tréithe sonraí leis chun eilimint a chlárú le feidhmiúlacht cló-chun tosaigh.

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

Modhanna

.typehead(roghanna)

Cuireann sé tús le hionchur le réamhchló.