Mu dheidhinn modalan

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

Eisimpleir statach

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

Demo beò

Tog modal tro javascript le bhith a’ briogadh air a’ phutan gu h-ìosal. Bidh e a 'sleamhnachadh sìos agus a' seargadh a-steach bho mhullach na duilleige.

A 'cleachdadh bootstrap-modal

Cuir fòn gu modal tro javascript:

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

Roghainnean

Marcaich

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

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

<a class="btn" data-toggle="modal" href="#myModal"> Modal cur air bhog </a> _ _ _ _    

<div class = "modal seiche" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Ceann- cinn modal </h3>
  </div>
  <div class = "modal-corp" > 
    <p> Aon chorp ghrinn… </p>
  </div>
  <div class = "modal-footer" > 
    <a href="#" class="btn" data-dismiss="modal"> Dùin </a> _ _ _ _ _ _ _   
    <a href="#" class="btn btn-primary"> Sàbhail na h - atharraichean </a>  
  </div>
</div>

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

Mu dheidhinn dropdowns

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

Eisimpleirean

Cliog air na ceanglaichean nav a tha a’ tuiteam sìos anns a ’bhàr seòlaidh agus na pills gu h-ìosal gus deuchainn a dhèanamh air dropdowns.

• Ceangal cunbhalach
• Droch-dhiol
  • Action
  • Another action
  • Something else here
  • Separated link
• Clò-bhuail 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Clò-bhuail 3
  • Action
  • Another action
  • Something else here
  • Separated link

A 'cleachdadh bootstrap-dropdown.js

Cuir fòn gu na dropdowns tro javascript:

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

Marcaich

Gus gnìomhachd tuiteam-sìos a chuir gu sgiobalta ri eileamaid sam bith dìreach cuir ris data-toggle="dropdown"agus thèid tuiteam sìos bootstrap dligheach sam bith a chuir an gnìomh gu fèin-ghluasadach.

<ul class = "nav nav-pills" > 
  <li class = "active" > <a href = "#"> Ceangal cunbhalach </a></li>  
  <li class = "dropdown" id = "clàr-taice1" >  
    <a class="dropdown-toggle" data-toggle = "dropdown" href = "#menu1"> _ _ _   
      Droch-dhiol
      <b class = "caret" ></b> 
    </a>
    <ul class = ""dropdown-menu" > 
      <li><a href="#"> Gnìomh </a> < /li > 
      <li><a href="#"> Gnìomh eile </a> </li > 
      <li><a href="#"> Rudeigin eile an seo </a></li > 
      <li class = "divider" ></li> 
      <li><a href = "#"> Ceangal dealaichte </a> </li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class="dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "slighe/gu/page.html"> _ _ _    
      Droch-dhiol
      <b class = "caret" ></b> 
    </a>
    <ul class = ""dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Dòighean-obrach

$(). dropdown()

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

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

Eisimpleir navbar le scrollspy

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

A 'cleachdadh bootstrap-scrollspy.js

Cuir fòn gu scrollspy tro javascript:

$ ( '#navbar' ). scrollspy ()

Marcaich

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

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

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

Tachartasan

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

Eisimpleirean tabaichean

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

• Dhachaigh
• Pròifil
• Droch-dhiol
  • @fat
  • @mdo

A’ cleachdadh bootstrap-tab.js

Dèan comas air tabaichean tabable tro javascript (feumar 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 a bhith a’ sgrìobhadh javascript sam bith le bhith dìreach a’ sònrachadh data-toggle="tab"no data-toggle="pill"air eileamaid. Le bhith a’ cur na clasaichean navagus ris an taba cuiridh sin an stoidhle tab bootstrap an sàs.nav-tabsul

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

Mu Tooltips

Air a bhrosnachadh leis a’ plugan sàr-mhath jQuery.tipsy sgrìobhte le Jason Frame; Is e dreach ùraichte a th’ ann an Tooltips, nach eil an urra ri ìomhaighean, a’ cleachdadh css3 airson beòthachaidhean, agus feartan dàta airson stòradh tiotal ionadail.

Eisimpleirean de chleachdadh Tooltips

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

A’ cleachdadh bootstrap-tooltip.js

Luchdaich a-nuas an t-inneal tro javascript:

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

Roghainnean

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.

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

Dòighean-obrach

$().tooltip(roghainnean)

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

.tooltip('show')

A 'nochdadh comhairle inneal eileamaid.

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

Mu dheidhinn popovers

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

* Feumaidh Tooltip a bhith air a thoirt a-steach

Eisimpleir hover popover

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

A 'cleachdadh bootstrap-popover.js

Dèan comas air popovers tro javascript:

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

Roghainnean

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

Mu rabhaidhean

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

Eisimpleirean de rabhaidhean

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

A 'cleachdadh bootstrap-alert.js

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

Mu dheidhinn

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

Eisimpleirean de chleachdadh

Cleachd am plugan putanan airson stàitean agus toggles.

A’ cleachdadh bootstrap-button.js

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.

<!-- Cuir data-toggle="putan" ris gus togadh air aon phutan a ghnìomhachadh -->
<button class = "btn" data-toggle = "putan" > Togbhail singilte </button>  
 
<!-- Cuir data-toggle="buttons-checkbox" airson stoidhle bogsa-seic a’ togadh air btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Clì </button> 
  <button class = "btn" > Meadhan </button> 
  <button class = "btn" > Deas </button> 
</div>
 
<!-- Cuir data-toggle="buttons-radio" airson stoidhle rèidio a’ togadh air btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Clì </button> 
  <button class = "btn" > Meadhan </button> 
  <button class = "btn" > Deas </button> 
</div>

Dòighean-obrach

$().button('toggle')

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

<button class = "btn" data-toggle = "button" > … </button>   

$().button('luchdachadh')

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

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

A’ cleachdadh bootstrap-collapse.js

Dèan comas tro javascript:

$ ( ".collapse" ). tuiteam ()

Roghainnean

Marcaich

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

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

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

Mu dheidhinn

Plugin coitcheann airson rothaireachd tro eileamaidean. Cearcall sunndach.

Eisimpleir carousel

Thoir sùil air an taisbeanadh-shleamhnagan gu h-ìosal.

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.

Leubail an dàrna 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.

An treas leubail 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.

‹ ›

A 'cleachdadh bootstrap-carousel.js

Cuir fòn tro javascript:

$ ( '.carousel' ). carousel ()

Roghainnean

Marcaich

Bithear a’ cleachdadh buadhan dàta airson na smachdan roimhe agus an ath smachd. Thoir sùil air an eisimpleir comharrachadh gu h-ìosal.

<div id = "myCarousel" class = "sleamhnag carousel" >  
  <!-- 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>

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.

Mu dheidhinn

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

eisimpleir

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

A 'cleachdadh bootstrap-typeahead.js

Cuir fòn gu typeahead tro javascript:

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

Roghainnean

Marcaich

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

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

Dòighean-obrach

.typehead(roghainnean)

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