Aonair nó tiomsaithe

Is féidir forlíontáin a áireamh ina n-aonar (cé go bhfuil spleáchais de dhíth ar chuid acu), nó iad go léir ag an am céanna. Tá gach breiseán in aon chomhad amháin ag bootstrap.js agus bootstrap.min.js .

Tréithe sonraí

Is féidir leat gach breiseán Bootstrap a úsáid tríd an API marcála amháin gan aon líne amháin de JavaScript a scríobh. Is é seo an API den chéad scoth de chuid Bootstrap agus ba chóir go mbeadh sé mar an gcéad mhachnamh agat agus breiseán á úsáid agat.

É sin ráite, i gcásanna áirithe d’fhéadfadh sé a bheith inmhianaithe an fheidhmiúlacht seo a mhúchadh. Mar sin, cuirimid ar fáil freisin an cumas an API aitreabúid sonraí a dhíchumasú trí gach imeacht ar an gcorp a bhfuil spás air a bhfuil spásáil aige le `'data-api'` a dhícheangal. Breathnaíonn sé seo mar seo:

$ ( 'comhlacht' ). as ( '. data-api' )

Nó, chun díriú ar bhreiseán ar leith, níl le déanamh ach ainm an bhreiseáin a chur san áireamh mar ainmspás in éineacht leis an ainmspás data-api mar seo:

$ ( 'comhlacht' ). as ( '.alert.data-api' )

Clár API

Creidimid freisin gur cheart go mbeifeá in ann gach breiseán Bootstrap a úsáid tríd an API JavaScript amháin. Is modhanna aonair inslabhra iad gach API poiblí, agus seolann siad an bailiúchán ar gníomhaíodh ina leith.

$ ( ".btn.danger" ). cnaipe ( "scoránaigh" ). addClass ( "saille" )

Ba cheart do gach modh glacadh le réad roghanna roghnach, teaghrán a dhíríonn ar mhodh áirithe, nó rud ar bith (a thionscnaíonn breiseán a bhfuil iompraíocht réamhshocraithe aige):

$ ( "#myModal" ) . modal () // tosaithe le mainneachtainí                       
$ ( "#myModal" ) . modal ( { méarchlár : bréagach }) // tosaithe gan méarchlár ar bith     
$ ( "#myModal" ) . modal ( 'taispeáint' ) // a thosaíonn agus a agairt seó láithreach                

Nochtann gach breiseán a chruthaitheoir amh ar airí `Constructor`: $.fn.popover.Constructor. Más mian leat mar shampla breiseán ar leith a fháil, é a aisghabháil go díreach ó eilimint: $('[rel=popover]').data('popover').

Gan Coimhlint

Uaireanta is gá forlíontáin Bootstrap a úsáid le creataí Chomhéadain eile. Sna cúinsí seo, féadann imbhuailtí ainmspáis tarlú ó am go chéile. Má tharlaíonn sé seo, is féidir leat glaoch .noConflictar an mbreiseán is mian leat a luach a chur ar ais.

var bootstrapButton = $ . fn . cnaipe . noConflict () // cuir $.fn.button ar ais chuig an luach a sannadh roimhe seo 
$ . fn . bootstrapBtn = bootstrapButton             // tabhair $().bootstrapBtn an fheidhmiúlacht bootstrap

Imeachtaí

Soláthraíonn Bootstrap imeachtaí saincheaptha don chuid is mó de ghníomhaíochtaí uathúla an bhreiseáin. Go ginearálta, tagann siad seo i bhfoirm infinideach agus i bhfoirm rannpháirtí san am atá thart - áit a spreagtar an infinideach (ex. show) ag tús imeachta, agus ina spreagtar foirm an rannpháirtí san am atá caite (ex. shown) nuair a chríochnaítear gníomh.

Soláthraíonn gach teagmhas infinitive feidhmiúlacht preventDefault. Soláthraíonn sé seo an cumas chun stop a chur le gníomh a chur i gcrích sula dtosaíonn sé.

$ ( '#myModal' ). ar ( 'taispeáin' , feidhm ( e ) {   
    má sheolann ( ! sonraí ) ar ais e . preventDefault () // stopann modúl ó bheith á thaispeáint   
})

Maidir le haistrithe

Le haghaidh éifeachtaí aistrithe simplí, cuir bootstrap-transition.js san áireamh uair amháin in éineacht leis na comhaid JS eile. Má tá an bootstrap.js tiomsaithe (nó mionghearrtha) á úsáid agat , ní gá é seo a chur san áireamh—tá sé ann cheana féin.

Cásanna úsáide

Cúpla sampla den bhreiseán aistrithe:

• Sleamhnáin nó fading i módúil
• Cluaisíní fading amach
• Foláirimh fading amach
• Pannaí timpealláin sleamhnáin

Samplaí

Tá modhanna dialóige sruthlínithe, ach solúbtha, leideanna dialóige leis an fheidhmiúlacht íosta is gá agus mainneachtainí cliste.

Sampla statach

Módúil rindreáilte le ceanntásc, corp, agus tacar gníomhartha sa bhuntásc.

<div class = "modal hide céimnithe" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "fíor" > &amanna; </cnaipe>    
    <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"> Dún </a> _ _ _ _ _  
    <a href="#" class="btn btn-primary"> Sábháil athruithe </a> _ _ _  
  </div>
</div>

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.

<!-- Cnaipe chun modha a spreagadh -->
<a href="#myModal" role="button" class="btn" data-toggle="modal"> Seol modh taispeána </a> _ _ _ _ _ _ _    
 
<!-- Módúil -->
<div id = "myModal" class = "modal hide céimnithe" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "fíor" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "fíor" > × </button>    
    <h3 id = "myModalLabel" > Ceanntásc módúil </h3> 
  </div>
  <div class = "modal-corp" > 
    <p> Corp breá amháin… </p>
  </div>
  <div class = "modal-buntásc" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Dún </button>   
    <button class = "btn btn-primary" > Sábháil na hathruithe </button> 
  </div>
</div>

Úsáid

Trí tréithe sonraí

Modúl a ghníomhachtú gan JavaScript a scríobh. Socraigh data-toggle="modal"ar eilimint rialtóra, cosúil le cnaipe, mar aon le data-target="#foo"nó href="#foo"chun modh sonrach a dhíriú chun scoránaigh.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Seoladh módúil </button>   

Trí JavaScript

Cuir glaoch ar mhodúil le id myModalle líne amháin JavaScript:

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

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

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…
})

Samplaí

Cuir biachláir anuas le beagnach rud ar bith leis an mbreiseán simplí seo, lena n-áirítear an barra nascleanúna, na cluaisíní agus na piollaí.

Laistigh de navbar

Laistigh de chluaisíní

Úsáid

Trí tréithe sonraí

Cuir data-toggle="dropdown"le nasc nó cnaipe chun anuas a scoránaigh.

<div class = "dropdown" > 
  <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Truicear anuas </a> _ _ _ _ _ _   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

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

<div class = "dropdown" > 
  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle = "titim" data-target="#" href="/page.html"> _ _ _ _ _ _ _ _ _ _ _      
    Titim síos
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Trí JavaScript

Cuir glaoch ar na anuas trí JavaScript:

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

Roghanna

Dada

Modhanna

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

Api ríomhchláraithe chun biachláir a scoránú le haghaidh barra nascleanúna nó nascleanúint tabáilte.

Sampla i navbar

Is é an breiseán ScrollSpy ná spriocanna nascleanúna a nuashonrú go huathoibríoch bunaithe ar an suíomh scrollbharra. Scrollaigh an limistéar faoi bhun an bharra nascleanúna agus féach ar an athrú gníomhach ranga. Cuirfear béim ar na fo-mhíreanna anuas freisin.

Úsáid

Trí tréithe sonraí

Chun iompar scrollspy a chur le do nascleanúint barrbharra go héasca, níl le déanamh ach cuir data-spy="scroll"leis an eilimint a bhfuil tú ag iarraidh spiaireacht a dhéanamh air (is gnách gurb é seo an corp) agus data-target=".navbar"roghnaigh cén seoladh loingseoireachta is fearr leat. Beidh tú ag iarraidh scrollspy a úsáid le .navcomhpháirt.

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

Trí JavaScript

Cuir glaoch ar an scrollspy trí JavaScript:

$ ( '#navbar' ). scrollspy ()

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

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-offset="".

Imeachtaí

Cluaisíní samplacha

Cuir feidhmiúlacht cluaisíní tapa, dinimiciúil leis chun aistriú trí phána d’ábhar áitiúil, fiú trí roghchláir anuas.

Úsáid

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 JavaScript a scríobh trí eilimint a shonrú data-toggle="tab"nó data-toggle="pill"ar eilimint amháin. Má chuirtear na ranganna navagus na nav-tabsranganna leis an gcluaisín ul, cuirfear stíliú cluaisí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
})

Samplaí

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.

Ar chúiseanna feidhmíochta, is rogha an diúltaithe iad an leid uirlisí agus an popover data-apis, rud a chiallaíonn go gcaithfidh tú iad a thosú tú féin .

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

Ceithre threoir

Leideanna uirlisí i ngrúpaí ionchuir

Agus leideanna uirlisí agus popovers á n-úsáid agat leis na grúpaí ionchuir Bootstrap, beidh ort an containerrogha (doiciméadaithe thíos) a shocrú chun fo-iarsmaí nach dteastaíonn a sheachaint.

Úsáid

Spreag an leid uirlisí trí JavaScript:

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

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-animation="".

Marcáil

<a href="#" data-toggle="tooltip" title="an chéad leid uirlise"> ainligh orm </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' )

.tooltip('scrios')

Seithí agus scriosann leid uirlisí eiliminte.

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

Samplaí

Cuir forleagan beaga ábhair, cosúil leis na cinn ar an iPad, le haon eilimint le haghaidh faisnéise tánaisteacha tithíochta. Ainligh thar an gcnaipe chun an popover a spreagadh. Teastaíonn Tooltip a chur san áireamh.

Popover statach

Tá ceithre rogha ar fáil: ailíniú barr, dheis, bun agus clé.

Ní ghintear aon mharcáil a thaispeántar mar popovers ó JavaScript ná ábhar laistigh d' datatréith.

Taispeántas beo

Ceithre threoir

Úsáid

Cumasaigh popovers trí JavaScript:

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

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-animation="".

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

. popover ('scrios')

Seithí agus scriosann popover eilimint.

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

Foláirimh shamplacha

Cuir feidhmiúlacht díbhe le gach teachtaireacht foláirimh leis an mbreiseán seo.

Úsáid

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…
})

Samplaí úsáidí

Déan níos mó le cnaipí. Rialú stáit cnaipe nó cruthaigh grúpaí de cnaipí le haghaidh comhpháirteanna níos mó cosúil le barraí uirlisí.

Stáit

Cuir data-loading-text="Loading..."le húsáid stát luchtaithe ar chnaipe.

<button type = "button" class = "btn btn-primary" data-loading-text = "Ag luchtú..." > Staid luchtaithe </button>   

Scoránaigh aonair

Cuir data-toggle="button"leis chun scoránú a ghníomhachtú ar chnaipe amháin.

<button type = "button" class = "btn btn-primary" data-toggle = "cnaipe" > Scoránaigh Aonair </button>   

ticbhosca

Cuir data-toggle="buttons-checkbox"le haghaidh scoránú stíl an bhosca tic ar btn-group.

<div class = "btn-group" data-toggle = "buttons-ticbox" >  
  <button type = "button" class = "btn btn-primary" > Ar chlé </button>  
  <button type = "button" class = "btn btn-primary" > Meán </cnaipe>  
  <button type = "button" class = "btn btn-primary" > Ar dheis </button>  
</div>

Raidió

Cuir data-toggle="buttons-radio"le scoránú stíl raidió ar btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Ar chlé </button>  
  <button type = "button" class = "btn btn-primary" > Meán </cnaipe>  
  <button type = "button" class = "btn btn-primary" > Ar dheis </button>  
</div>

Úsáid

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.

Roghanna

Dada

Modhanna

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

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

<button type = "button" class = "btn" data-toggle = "cnaipe" > … </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 type = "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 type = " 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í:

<div class = "accordion" id = "accordion2" >  
  <div class = "cairdín-grúpa" > 
    <div class = "cairdín-heading" > 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> _ _ _ _ _ _ _ _ _    
        Mír an Ghrúpa #1 atá le titim amach
      </a>
    </div>
    <div id = "collapseOne" class = "cairdín-corp collapse in" >  
      <div class = "bocadóir-taobh istigh" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "cairdín-grúpa" > 
    <div class = "cairdín-heading" > 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> _ _ _ _ _ _ _ _ _    
        Mír an Ghrúpa #2 atá le titim amach
      </a>
    </div>
    <div id = "collapseTwo" class = "bosca ceoil-chorp" >  
      <div class = "bocadóir-taobh istigh" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Is féidir leat an breiseán a úsáid freisin gan marcáil an bhosca ceoil. Déan cnaipe scoránaigh ar leathnú agus titim eilimint eile.

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

Úsáid

Trí tréithe sonraí

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.

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.

Trí JavaScript

Cumasaigh de láimh le:

$ ( ".collapse" ). titim ()

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-parent="".

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…
})

Timpeallán sampla

Taispeánann an taispeántas sleamhnán thíos breiseán cineálach agus comhpháirt le haghaidh rothaíochta trí eilimintí cosúil le timpealláin.

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.

‹ ›

<div id = "myCarousel" class = "sleamhnán timpealláin" >  
  <ol class = "carousel- táscairí" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "gníomhach" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- 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>

Úsáid

Trí tréithe sonraí

Bain úsáid as tréithe sonraí chun suíomh an timpealláin a rialú go héasca. data-slideglacann sé leis na heochairfhocail prevnó next, a athraíonn an suíomh sleamhnáin i gcoibhneas lena shuíomh reatha. Mar mhalairt air sin, bain úsáid as data-slide-toinnéacs sleamhnán amh a chur ar aghaidh chuig an timpeallán data-slide-to="2", a léimeann suíomh an tsleamhnáin chuig innéacs ar leith ag tosú le 0.

Trí JavaScript

Glaoigh timpealláin de láimh le:

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

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScriptz. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-interval="".

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 seo')

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.

Sampla

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

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

Beidh tú ag iarraidh a shocrú autocomplete="off"chun cosc ​​a chur ar roghchláir réamhshocraithe brabhsálaí ó láithriú os cionn an anuas anuas cineál Bootstrap.

Úsáid

Trí tréithe sonraí

Cuir tréithe sonraí leis chun eilimint a chlárú le feidhmiúlacht cló-chun tosaigh mar a thaispeántar sa sampla thuas.

Trí JavaScript

Cuir glaoch ar an clóscríobh de láimh le:

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

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-source="".

Modhanna

.typehead(roghanna)

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

Sampla

Taispeántas beo den bhreiseán affix is ​​ea an subloingseoireachta ar chlé.

Úsáid

Trí tréithe sonraí

Chun iompar a ghreamú go héasca le haon eilimint, níl le déanamh ach cuir data-spy="affix"leis an eilimint a bhfuil tú ag iarraidh spy a chur uirthi. Ansin bain úsáid as fritháirimh chun a shainiú cathain is ceart feannadh eilimint a scoránaigh air agus as.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

Trí JavaScript

Cuir glaoch ar an mbreiseán affix trí JavaScript:

$ ( '#navbar' ). greamaigh ()

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-offset-top="200".