Aonair no air a chur ri chèile

Faodar plugain a thoirt a-steach leotha fhèin (ged a bha feum aig cuid dhiubh air eisimeileachd), no uile aig an aon àm. Tha an dà plugan bootstrap.js agus bootstrap.min.js ann an aon fhaidhle.

Feartan dàta

Faodaidh tu na plugins Bootstrap gu lèir a chleachdadh dìreach tron ​​​​API markup gun a bhith a’ sgrìobhadh aon loidhne de JavaScript. Is e seo a’ chiad ìre API aig Bootstrap agus bu chòir dha a bhith mar a’ chiad bheachdachadh agad nuair a bhios tu a’ cleachdadh plugan.

Thuirt sin, ann an cuid de shuidheachaidhean dh'fhaodadh gum biodh e ion-mhiannaichte an gnìomh seo a thionndadh dheth. Mar sin, bidh sinn cuideachd a’ toirt seachad an comas am feart dàta API a dhì-cheangal le bhith a’ dì-cheangail a h-uile tachartas air a’ bhodhaig le beàrn le `'data-api'`. Tha seo a’ coimhead mar seo:

$ ( 'corp' ). dheth ( '.data-api' )

Air neo, gus cuimseachadh air plugan sònraichte, dìreach cuir a-steach ainm a’ phlug mar àite-ainm còmhla ris an ainm-àite data-api mar seo:

$ ( 'corp' ). dheth ( '.alert.data-api' )

Prògramachadh API

Tha sinn cuideachd den bheachd gum bu chòir dhut a bhith comasach air a h-uile plugan Bootstrap a chleachdadh dìreach tro JavaScript API. Tha a h-uile API poblach nan dòighean singilte, slabhraidh, agus tillidh iad an cruinneachadh air an deach gabhail.

$ ( ".btn.cunnart" ). putan ( "Toggle" ). addClass ( "saill" )

Bu chòir do gach dòigh gabhail ri nì roghainnean roghnach, sreang a tha ag amas air dòigh sònraichte, no gun dad (a thòisicheas plugan le giùlan bunaiteach):

$ ( "#myModal" ). modal () // air a thòiseachadh le roghainnean bunaiteach                       
$ ( "#myModal" ). modal ({ meur -chlàr : false }) // air a thòiseachadh gun mheur-chlàr     
$ ( "#myModal" ). modal ( ‘show’ ) // a’ tòiseachadh agus a’ gairm taisbeanadh sa bhad                

Bidh gach plugan cuideachd a’ nochdadh an neach-togail amh aige air togalach `Constructor`: $.fn.popover.Constructor. Ma tha thu airson eisimpleir plugan sònraichte fhaighinn, thoir air ais e gu dìreach bho eileamaid: $('[rel=popover]').data('popover').

Gun Chòmhstri

Aig amannan feumar plugins Bootstrap a chleachdadh le frèaman UI eile. Anns na suidheachaidhean sin, faodaidh tubaistean ainmean-àite tachairt bho àm gu àm. Ma thachras seo, faodaidh tu fios a chuir chun .noConflictplugan a tha thu airson luach a thilleadh.

var bootstrapButton = $ . fn . putan . noConflict () // till $.fn.button gu luach a chaidh a shònrachadh roimhe 
$ . fn . bootstrapBtn = bootstrapButton             // thoir $().bootstrapBtn an gnìomh bootstrap

Tachartasan

Bidh Bootstrap a’ toirt seachad tachartasan àbhaisteach airson a’ mhòr-chuid de ghnìomhan sònraichte nam plugan. San fharsaingeachd, thig iad sin ann an cruth com-pàirt infinitive agus san àm a dh’ fhalbh - far a bheil an infinitive (ex. show) air a phiobrachadh aig toiseach tachartais, agus an cruth com-pàirteachaidh san àm a dh’ fhalbh (ex. shown) air a bhrosnachadh nuair a thèid gnìomh a chrìochnachadh.

Bidh a h-uile tachartas infinitive a’ toirt seachad gnìomh dìon Default. Bheir seo an comas stad a chuir air gnìomh mus tòisich e.

$ ( '#myModal' ). air ( 'show' , gnìomh ( e ) {   
    ma thilleas ( ! dàta ) e . preventDefault () // a’ stad modal bho bhith air a shealltainn   
})

Mu dheidhinn eadar-ghluasadan

Airson buaidhean gluasaid sìmplidh, cuir a-steach bootstrap-transition.js aon uair còmhla ris na faidhlichean JS eile. Ma tha thu a’ cleachdadh an bootstrap.js cruinnichte (no mionaichte) , cha leig thu leas seo a ghabhail a-steach - tha e ann mu thràth.

Cleachd cùisean

Beagan eisimpleirean den plugan gluasaid:

• Sleamhnachadh no seargadh ann am modalan
• A 'sgoltadh tabaichean
• A 'cur às do rabhaidhean
• Pannalan carousel sleamhnachaidh

Eisimpleirean

Tha modalan air an sgioblachadh, ach sùbailte, brosnachaidhean còmhraidh leis a’ ghnìomhachd as lugha a tha a dhìth agus uireasbhaidhean snasail.

Eisimpleir statach

Modal air a thoirt seachad le bann-cinn, bodhaig, agus seata ghnìomhan anns a’ bhun-coise.

<div class = "seiche modal" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "fìor" > &amannan; </putan>    
    <h3> Ceann- cinn modal </h3>
  </div>
  <div class = "modal-corp" > 
    <p> Aon chorp ghrinn… </p>
  </div>
  <div class = "modal-footer" > 
    <a href="#" class="btn"> Dùin </a> _ _ _ _ _  
    <a href="#" class="btn btn-primary"> Sàbhail na h - atharraichean </a>  
  </div>
</div>

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.

<!-- Putan gus modal a bhrosnachadh -->
<a href="#myModal" role="button" class="btn" data-toggle="modal"> Cuir air bhog modal demo </a> _ _ _ _ _    
 
<!-- Modal -->
<div id = "myModal" class = "seiche modal" tabindex = "-1" role = "còmhradh" 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" > Bann- cinn modal </h3> 
  </div>
  <div class = "modal-corp" > 
    <p> Aon chorp ghrinn… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Dùin </button>   
    <button class = "btn btn-primary" > Sàbhail na h-atharraichean </button> 
  </div>
</div>

Cleachdadh

Tro fheartan dàta

Cuir modal an gnìomh gun a bhith a’ sgrìobhadh JavaScript. Suidhich data-toggle="modal"air eileamaid rianadair, mar phutan, còmhla ri a data-target="#foo"no href="#foo"gus amas air modal sònraichte airson gluasad.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Cuir air bhog modal </button>   

Air sgàth javascript

Cuir fòn gu modal le id myModalle aon loidhne de JavaScript:

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

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-backdrop="".

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

Dòighean-obrach

.modal (roghainnean)

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

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

.modal ('toggle')

Tog modal le làimh.

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

.modal ('taisbeanadh')

Le làimh a 'fosgladh modal.

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

.modal ('falach')

Le làimh a 'falach modal.

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

Tachartasan

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

$ ( '#myModal' ). air ( 'falaichte' , gnìomh () {   
  // dèan rudeigin…
})

Eisimpleirean

Cuir clàran-bìdh sìos gu cha mhòr rud sam bith leis a ’phlug sìmplidh seo, a’ toirt a-steach am bàr seòlaidh, tabaichean agus pills.

Taobh a-staigh navbar

Taobh a-staigh tabaichean

Cleachdadh

Tro fheartan dàta

Cuir data-toggle="dropdown"ri ceangal no putan gus tuiteam sìos a thogail.

<div class = "dropdown" > 
  <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Spreadhadh tuiteam - sìos </a> _ _ _ _   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Gus URLan a chumail slàn, cleachd am data-targetfeart an àite href="#".

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

Air sgàth javascript

Cuir fòn gu na dropdowns tro JavaScript:

$ ( '. dropdown-toggle' ). tuiteam -sìos ()

Roghainnean

Chan eil gin

Dòighean-obrach

$().dropdown('toggle')

Api prògramaichte airson clàran-bìdh a thogail airson bàr seòlaidh no seòladh tabaichte.

Eisimpleir ann an navbar

Tha am plugan ScrollSpy airson targaidean nav ùrachadh gu fèin-ghluasadach stèidhichte air suidheachadh scrollaidh. Sgrolaich an raon gu h-ìosal fon bhàr-seòlaidh agus cùm sùil air an atharrachadh clas gnìomhach. Thèid na fo-stuthan tuiteam-sìos a chomharrachadh cuideachd.

Cleachdadh

Tro fheartan dàta

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 a tha thu airson brath a ghabhail air (mar as trice is e seo am bodhaig) agus data-target=".navbar"tagh dè an seòladh a chleachdas tu. Bidh tu airson scrollspy a chleachdadh le co- .navphàirt.

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

Air sgàth javascript

Cuir fòn gu scrollspy tro JavaScript:

$ ( '#navbar' ). scrollspy ()

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:

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

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-offset="".

Tachartasan

Eisimpleirean tabaichean

Cuir gnìomh taba sgiobalta, fiùghantach ris gus gluasad tro lòsan de shusbaint ionadail, eadhon tro chlàran tuiteam-sìos.

Cleachdadh

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

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

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

$ ( '#myTab a[href="#profile"]' ). tab ( 'show' ); // Tagh tab a rèir ainm 
$ ( '#myTab a: an toiseach' ). tab ( 'show' ); // Tagh a 'chiad tab 
$ ( '#myTab a: last' ). tab ( 'show' ); // Tagh an taba mu dheireadh 
$ ( '# 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 JavaScript sam bith a sgrìobhadh 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 stoidhle tab Bootstrap an sàs.nav-tabsul

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "taba"> Dachaigh </a></li >  
  <li><a href = "#profile" data-toggle = "taba"> Pròifil </a></li >  
  <li><a href = "#messages" data-toggle = "taba"> Teachdaireachdan </a></li >  
  <li><a href = "#settings" data-toggle = "taba"> Roghainnean </a></li >  
</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.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" > <a href = "#home"> Dachaigh </a></li>  
  <li><a href = "#profile"> Pròifil </a> </li> 
  <li><a href = "#messages"> Teachdaireachdan </a> </li> 
  <li><a href = "#settings"> Roghainnean </a> </li> 
</ul>
 
<div class = "tab-susbaint" > 
  <div class = "tab-pane active" id = "dachaigh" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( gnìomh () {  
    $ ( '#myTab a: last' ). tab ( 'show' );
  })
</script>

Tachartasan

$ ( 'a[data-toggle="tab"]' ). air ( 'air a shealltainn' , gnìomh ( e ) {   
  e . targaid // tab gnìomhaichte
  e . co-cheangailteTarget // taba roimhe
})

Eisimpleirean

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.

Airson adhbharan dèanadais, tha an tooltip agus popover data-apis a’ roghnachadh a-steach, a’ ciallachadh gum feum thu iad fhèin a thòiseachadh .

Gabh thairis air na ceanglaichean gu h-ìosal gus molaidhean innealan fhaicinn:

Ceithir stiùiridhean

Molaidhean innealan ann am buidhnean cuir a-steach

Nuair a bhios tu a’ cleachdadh molaidhean innealan agus popovers leis na buidhnean cuir a-steach Bootstrap, feumaidh tu an containerroghainn (air a chlàradh gu h-ìosal) a shuidheachadh gus frith-bhuaidhean nach eileas ag iarraidh a sheachnadh.

Cleachdadh

Cuir a-steach an inneal tro JavaScript:

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

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-animation="".

Marcaich

<a href = "#" data-toggle = "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.

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

.tooltip ('falach')

A 'falach comhairle inneal eileamaid.

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

.tooltip('toggle')

Toglaidh comhairle inneal eileamaid.

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

.tooltip ('sgrios')

A 'falach agus a' sgrios inneal inneal eileamaid.

$ ( '# eileamaid' ). inneal ( 'sgrios' )

Eisimpleirean

Cuir ath-chòmhdach beaga de shusbaint, mar an fheadhainn air an iPad, ri eileamaid sam bith airson fiosrachadh àrd-sgoile a chumail. Gluais thairis air a’ phutan gus an popover a bhrosnachadh. Feumaidh Tooltip a bhith air a thoirt a-steach.

Popover statach

Tha ceithir roghainnean rim faighinn: gu h-àrd, deas, gu h-ìosal agus air an taobh chlì.

Chan eil comharradh sam bith air a shealltainn mar popovers air a chruthachadh bho JavaScript agus susbaint taobh a-staigh datafeart.

Demo beò

Ceithir stiùiridhean

Cleachdadh

Dèan comas air popovers tro JavaScript:

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

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-animation="".

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.

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

.popover ('falach')

A 'falach popover eileamaidean.

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

.popover ('toggle')

Togail popover eileamaidean.

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

.popover ('sgrios')

A 'falach agus a' sgrios popover eileamaid.

$ ( '# eileamaid' ). popover ( 'sgrios' )

Eisimpleirean de rabhaidhean

Cuir gnìomh cuir às do gach teachdaireachd rabhaidh leis a’ plugan seo.

Cleachdadh

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

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

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

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

Tachartasan

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

$ ( '# my-alert' ). ceangal ( 'dùinte' , gnìomh () {   
  // dèan rudeigin…
})

Eisimpleirean de chleachdadh

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

Stàiteil

Cuir ris data-loading-text="Loading..."gus staid luchdaidh a chleachdadh air putan.

<button type = "button" class = "btn btn-primary" data-loading-text = "A' luchdadh..." > Staid a' luchdadh </button>   

Toggle singilte

Cuir ris data-toggle="button"gus toggling a ghnìomhachadh air aon phutan.

<button type = "button" class = "btn btn-primary" data-toggle = "putan" > Togbhail Singilte </button>   

Bogsa-seic

Cuir ris data-toggle="buttons-checkbox"airson stoidhle bogsa-seic toggling air btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-bun-sgoile" > Clì </button>  
  <button type = "button" class = "btn btn-primary" > Meadhan </putan>  
  <button type = "button" class = "btn btn-primary" > Deas </putan>  
</div>

Rèidio

Cuir ris data-toggle="buttons-radio"airson stoidhle rèidio toggling air btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-bun-sgoile" > Clì </button>  
  <button type = "button" class = "btn btn-primary" > Meadhan </putan>  
  <button type = "button" class = "btn btn-primary" > Deas </putan>  
</div>

Cleachdadh

Dèan comas air putanan tro JavaScript:

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

Roghainnean

Chan eil gin

Dòighean-obrach

$().button('toggle')

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

<button type = "button" class = "btn" data-toggle = "putan" > … </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.

<button type = "button" class = "btn" data-loading-text = ""a' luchdadh stuth..." > ... </button>    

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

<button type = "button" class = "btn" data-complete-text = "Crìochnaichte!" > ... </button>    
<script>
  $ ( '.btn' ). putan ( 'coileanta' )
</script>

Mu dheidhinn

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

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

<div class = "bogsa" id = "bogsa2" >  
  <div class = "buidheann-bogsa" > 
    <div class = "heading-bogsa" > 
      <a class="accordion-toggle" data-toggle = "tuiteam" data-parent = "#accordion2" href="#collapseOne"> _ _ _ _ _    
        Nì buidhne a ghabhas tuiteam #1
      </a>
    </div>
    <div id = "collapseOne" class = "tuiteam corp-bogsa ann" >  
      <div class = "bogsa-a-staigh" > 
        Anim pariatur cliche. .
      </div>
    </div>
  </div>
  <div class = "buidheann-bogsa" > 
    <div class = "heading-bogsa" > 
      <a class="accordion-toggle" data-toggle = "tuiteam" data-parent = "#accordion2" href="#collapseTwo"> _ _ _ _ _    
        Nì buidhne a ghabhas tuiteam #2
      </a>
    </div>
    <div id = "collapseTwo" class = "tuiteam corp-bogsa" >  
      <div class = "bogsa-a-staigh" > 
        Anim pariatur cliche. .
      </div>
    </div>
  </div>
</div>
...

Faodaidh tu cuideachd am plugan a chleachdadh às aonais comharra a’ bhocsa. Dèan putan tog leudachadh is tuiteam eileamaid eile.

<button type = "button" class = "btn btn-danger" data-toggle = "tuiteam" data-target = "#demo" >    
  sìmplidh tuiteamach
</putan>
 
<div id = "demo" class = "tuiteam a-steach" > ... </div>  

Cleachdadh

Tro fheartan dàta

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.

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.

Air sgàth javascript

Dèan comas le làimh le:

$ ( ".collapse" ). tuiteam ()

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-parent="".

Dòighean-obrach

.tuiteam (roghainnean)

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

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

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

$ ( '#myCollapsible' ). air ( 'falaichte' , gnìomh () {   
  // dèan rudeigin…
})

Eisimpleir carousel

Tha an taisbeanadh-shleamhnagan gu h-ìosal a’ sealltainn plugan coitcheann agus co-phàirt airson rothaireachd tro eileamaidean mar carousel.

Leubail a’ chiad Thumbnail

Cras justo odio, dapibus agus facilisis in, egestas eget quam. Donec id elit non mi porta gravida agus eget metus. Nullam id dolor id nibh 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 = "sleamhnag carousel" >  
  <ol class = "comharran carousel" > 
    <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>
  <!-- Nithean carousel -->
  <div class = "carousel-staigh" > 
    <div class = "rud gnìomhach" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="roimhe"> & lsaquo ; _ _ _ _ </a>   
  <a class="carousel-control right" href="#myCarousel" data-slide = "an ath-" > & rsaquo ; </a>   
</div>

Cleachdadh

Tro fheartan dàta

Cleachd buadhan dàta gus smachd a chumail air suidheachadh a’ charousel gu furasta. data-slidea’ gabhail ris na prìomh fhaclan prevno next, a dh’ atharraicheas suidheachadh an t-sleamhnag an coimeas ris an t-suidheachadh làithreach aige. Air neo, cleachd data-slide-toclàr-amais sleamhnag amh a thoirt don charousel data-slide-to="2", a leumas suidheachadh an t-sleamhnachaidh gu clàr-amais sònraichte a’ tòiseachadh le 0.

Air sgàth javascript

Cuir fòn gu carousel le làimh le:

$ ( '.carousel' ). carousel ()

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScriptz. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-interval="".

Dòighean-obrach

.carousel (roghainnean)

A 'tòiseachadh an carousel le roghainn roghnach objectagus a' tòiseachadh a 'rothaireachd tro nithean.

$ ( '.carousel' ). carousel ({
  eadar- ama : 2000 
})

.carousel ('cearcall')

Rothaich tro na stuthan carousel bho chlì gu deas.

.carousel ('pause')

A’ cur stad air an carousel bho bhith a’ rothaireachd tro nithean.

.carousel (àireamh)

Rothaich an carousel gu frèam sònraichte (stèidhichte 0, coltach ri sreath).

.carousel ('roimhe')

Cearcallan chun an rud roimhe.

.carousel ('ath')

Rothaich chun an ath rud.

Tachartasan

Bidh clas carousel Bootstrap a’ nochdadh dà thachartas airson a bhith ceangailte ri gnìomhachd carousel.

eisimpleir

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

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

Bidh thu airson suidheachadh autocomplete="off"gus casg a chuir air clàran-bìdh bunaiteach brabhsair bho bhith a’ nochdadh thairis air an tuiteam-sìos Bootstrap typeahead.

Cleachdadh

Tro fheartan dàta

Cuir buadhan dàta a-steach gus eileamaid a chlàradh le comas-gnìomh clò-bhualaidh mar a chithear san eisimpleir gu h-àrd.

Air sgàth javascript

Cuir fòn gu typeahead le làimh le:

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

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-source="".

Dòighean-obrach

.typehead(roghainnean)

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

eisimpleir

Tha an subnavigation air an taobh chlì na thaisbeanadh beò den plugan affix.

Cleachdadh

Tro fheartan dàta

Gus giùlan ceangail a chuir ri eileamaid sam bith gu furasta, dìreach cuir data-spy="affix"ris an eileamaid a tha thu airson brath a ghabhail. An uairsin cleachd comharran dheth gus mìneachadh cuin a bu chòir dhut pinadh eileamaid a thionndadh air agus dheth.

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

Air sgàth javascript

Cuir fòn gu plugan affix tro JavaScript:

$ ( '#navbar' ). ceangail ()

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-offset-top="200".