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.

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.

Ag baint úsáide as bootstrap-modal

Cuir glaoch ar an modúl trí javascript:

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

Roghanna

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"nó 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.

<a class="btn" data-toggle="modal" href="#myModal"> Seoladh Módúil </a> _ _ _ _ _ _    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Ceanntásc módúil </h3>
  </div>
  <div class = "modal-corp" > 
    <p> Corp breá amháin… </p>
  </div>
  <div class = "modal-buntásc" > 
    <a href="#" class="btn" data-dismiss="modal"> Dún </a> _ _ _ _ _ _ _   
    <a href="#" class="btn btn-primary"> Sábháil athruithe </a> _ _ _  
  </div>
</div>

Modhanna

.modal(roghanna)

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

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

.modal ('scoránaigh')

Scoránaigh modúl de láimh.

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

.modal ('taispeáin')

Osclaíonn modúl de láimh.

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

.modal ('folaigh')

Folaigh modúl de láimh.

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

Imeachtaí

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

$ ( '#myModal' ). ar ( 'i bhfolach' , feidhm () {   
  // Déan rud éigin…
})

Maidir le dropdowns

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í.

Samplaí

Cliceáil ar na naisc nascleanúna anuas sa bharra nascleanúna agus na piollaí thíos chun anuas a thástáil.

• Nasc rialta
• Titim síos
  • Action
  • Another action
  • Something else here
  • Separated link
• Anuas 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Anuas 3
  • Action
  • Another action
  • Something else here
  • Separated link

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

Cuir glaoch ar na dropdowns trí javascript:

$ ( '. dropdown-scorránaigh' ). anuas ()

Marcáil

Chun feidhmiúlacht anuas a chur go tapa le haon eilimint, ní gá ach cuir leis data-toggle="dropdown"agus cuirfear aon anuas bootstrap bailí i ngníomh go huathoibríoch.

<ul class = "nav nav-pills" > 
  <li class = "active" < a href = "#" > Nasc rialta </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class="dropdown-toggle" data-toggle="titim anuas" href="#menu1"> _ _ _ _ _ _   
      Titim síos
      <b class = "caret" ></b> 
    </a>
    <ul class = "roghchlár anuas" > 
      <li><a href="#"> Gníomh </a> < /li > 
      <li><a href="#"> Gníomh eile </a> < /li> 
      <li><a href="#"> Rud éigin eile anseo </a></li> 
      <li class = "divider" ></li> 
      <li><a href="#"> Nasc scartha </a> < /li> 
    </ul>
  </li>
  ...
</ul>

Chun URLanna a choinneáil slán, úsáid an data-targetaitreabúid in ionad href="#".

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class="dropdown-toggle" data-toggle = "titim anuas" data-target="#" href="conair/go/page.html"> _ _ _ _ _ _    
      Titim síos
      <b class = "caret" ></b> 
    </a>
    <ul class = "roghchlár anuas" > 
      ...
    </ul>
  </li>
</ul>

Modhanna

$().titim anuas()

Api ríomhchláraithe chun biachláir a ghníomhachtú do bharra nascleanúna nó nascleanúint tabáilte.

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

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!

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

Cuir glaoch ar an scrollspy trí javascript:

$ ( '#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).

<body data-spy = "scrollaigh" > ... </body>  

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:

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

Roghanna

Imeachtaí

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

Cluaisíní samplacha

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

• Baile
• Próifíl
• Titim síos
  • @fat
  • @mdo

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):

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

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

$ ( '#myTab a[href="#profile"]' ). cluaisín ( 'taispeáin' ); // Roghnaigh cluaisín de réir ainm 
$ ( '#myTab a:ar dtús' ). cluaisín ( 'taispeáin' ); // Roghnaigh an chéad chluaisín 
$ ( '#myTab a:last' ). cluaisín ( 'taispeáin' ); // Roghnaigh cluaisín deireanach 
$ ( '#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"nó 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.

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

Modhanna

$().cluaisín

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

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = " #home " > Baile </a></li>  
  <li><a href = "#profile"> Próifíl </a> < /li> 
  <li><a href="#messages">Teachtaireachtaí </a> < / li > 
  <li><a href = "#settings"> Socruithe </a> < /li> 
</ul>
 
<div class = "cluaisín-ábhar" > 
  <div class = "tab-pane active" id = "baile" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( feidhm ( ) {  
    $ ( '#myTab a:last' ). cluaisín ( 'taispeáin' );
  })
</script>

Imeachtaí

$ ( 'a[data-toggle="cluaisín" ]' ). ar ( 'léirithe' , feidhm ( e ) {   
  e . sprioc // cluaisín gníomhachtaithe
  e . relatedTarget // cluaisín roimhe seo
})

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.

Sampla d'úsáid Leideanna Uirlisí

Aló thar na naisc thíos chun leideanna uirlisí a fheiceáil:

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

Spreag an leid uirlisí trí javascript:

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

Roghanna

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ú.

<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.

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

.tooltip ('folaigh')

Folaigh leid uirlisí eiliminte.

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

.tooltip ('scoránaigh')

Scoránaigh an leid uirlisí eilimint.

$ ( '# 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

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:

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

Roghanna

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í.

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

. popover ('folaigh')

Seithí popover eilimintí.

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

. popover ('scoránaigh')

Scoránaigh an popover eilimintí.

$ ( '# 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.

Foláirimh shamplacha

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

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

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

$ ( ".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.

<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.

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

Imeachtaí

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

$ ( '#mo-airdeall' ). ceangal ( 'dúnta' , feidhm () {   
  // Déan rud éigin…
})

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í.

Samplaí úsáidí

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

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

Cumasaigh cnaipí trí javascript:

$ ( '.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.

<!-- Cuir data-toggle="button" leis chun scoránú a ghníomhachtú ar chnaipe amháin -->
<button class = "btn" data-toggle = "cnaipe" > Scoránaigh Aonair </button>  
 
<!-- Cuir data-toggle="buttons-checkbox" leis le haghaidh scoránú stíl an bhosca tic ar btn-group -->
<div class = "btn-group" data-toggle = "buttons-ticbox" >  
  <button class = "btn" > Ar chlé </button> 
  <button class = "btn" > Meán </button> 
  <button class = "btn" > Ar dheis </button> 
</div>
 
<!-- Cuir data-toggle="buttons-radio" leis chun stíl raidió a scoránú ar btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Ar chlé </button> 
  <button class = "btn" > Meán </button> 
  <button class = "btn" > Ar dheis </button> 
</div>

Modhanna

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

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

<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.

<button class = "btn" data-loading-text = "stuif á luchtú..." > ... </button>   

$().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.

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

Faoi

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

* É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í:

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

Cumasaigh trí javascript:

$ ( ".collapse" ). titim ()

Roghanna

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.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  simplí collapsible
</cnaipe>
 
<div id = "demo" class = "titim isteach" > … </div>  

Modhanna

.collapse(roghanna)

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

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

.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.

$ ( '#myCollapsible' ). ar ( 'i bhfolach' , feidhm () {   
  // Déan rud éigin…
})

Faoi

Breiseán cineálach le haghaidh rothaíochta trí eilimintí. A Shona-go-bhabhta.

Timpeallán sampla

Féach ar an taispeántas sleamhnán thíos.

Lipéad Chéad Mionsamhail

Cras justo odio, dapibus agus facilisis in, egestas eget quam. Donec id elit non mi porta gravida agus eget metus. Nullam id dolor id ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

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

Glaoigh trí javascript:

$ ( '.carousel' ). timpeallán ()

Roghanna

Marcáil

Úsáidtear tréithe sonraí do na rialuithe roimhe seo agus don chéad cheann eile. Amharc ar an marcáil shamplach thíos.

<div id = "myCarousel" class = "sleamhnán timpealláin" >  
  <!-- Míreanna timpealláin -->
  <div class = "carousel-inner" > 
    <div class = "mír ghníomhach" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Timpealláin nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="roimhe"> & lsaquo ; _ _ _ _ </a>   
  <a class="carousel-control right" href="#myCarousel" data-slide="ar aghaidh"> & rsaquo ; _ _ _ </a>   
</div>

Modhanna

.carousel(roghanna)

Tosaíonn an timpeallán le rogha roghnach objectagus tosaíonn sé ag rothaíocht trí mhíreanna.

$ ( '.carousel' ). timpealláin ({
  eatramh : 2000 
})

.carousel ('timthriall')

Rothaíochta tríd na míreanna timpealláin ó chlé go deas.

.carousel ('sos')

Stopann an timpeallán ó rothaíocht trí earraí.

.carousel(uimhir)

Rothlaíonn sé an timpeallán chuig fráma ar leith (0 bunaithe, cosúil le sraith).

.carousel ('roimhe')

Timthriallta go dtí an mhír roimhe seo.

.carousel('seo chugainn')

Timthriallta go dtí an chéad mhír eile.

Imeachtaí

Nochtann rang timpealláin Bootstrap dhá imeacht chun dul i ngleic le feidhmiúlacht timpealláin.

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.

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:

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

Roghanna

Marcáil

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

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

Modhanna

.typehead(roghanna)

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