Indibidual wenno naurnong

Dagiti plugin ket mabalin a mairaman a saggaysa (nupay dagiti dadduma ket addaan kadagiti kasapulan a panagpanpanunot), wenno amin a maminsan. Agpada a ti bootstrap.js ken bootstrap.min.js ket aglaon kadagiti amin a plugin iti maymaysa a file.

Dagiti kababalin ti datos

Mabalinmo nga usaren amin a plugin ti Bootstrap a puro babaen ti markup API a saan a mangisurat iti maymaysa a linia ti JavaScript. Daytoy ti umuna a klase nga API ti Bootstrap ken rumbeng nga umuna a konsiderasionmo no agus-usar iti plugin.

Kas naibaga, iti dadduma a kasasaad mabalin a matarigagayan nga iddepen daytoy a panagandar. Gapuna, mangipaaykami pay ti abilidad a mangbaldado ti API ti attribute ti datos babaen ti panangikkat kadagiti amin a pasamak iti bagi a namespaced babaen ti `'data-api'`. Kastoy ti langa daytoy:

$ ( 'bagi' ). naiddep ( '.data-api' ) .

Saan laeng a dayta, tapno puntiriaen ti espesipiko a plugin, iraman laeng ti nagan ti plugin a kas maysa nga espasio ti nagan agraman ti espasio ti nagan ti data-api a kas iti daytoy:

$ ( 'bagi' ). off ( '.alerto.datos-api' ) .

Programmatiko nga API

Patienmi pay a rumbeng a kabaelam nga usaren amin a plugin ti Bootstrap a puro babaen ti JavaScript API. Amin dagiti publiko nga API ket agmaymaysa, makadena a pamay-an, ken mangisubli ti koleksion a nagtignay.

$ ( ".btn.peggad" ). buton ( "agbaliwbaliw" ). addKlase ( "taba" ) .

Amin a pamay-an ket rumbeng nga umawat ti maysa nga opsional a banag ti pagpilian, ti maysa a kuerdas a mangpuntiria ti partikular a pamay-an, wenno awan (a mangirugi ti plugin nga addaan iti kasisigud a kababalin):

$ ( "# ti Modalko" ). modal () // nairugi nga addaan kadagiti default                       
$ ( "# ti Modalko" ). modal ({ teklado : palso }) // nairugi nga awan ti teklado     
$ ( "# ti Modalko" ). modal ( 'ipakita' ) // mangirugi ken mangawag ti ipakita a dagus                

Tunggal plugin ket mangibutaktak pay ti raw a konstruktorna iti maysa a tagikua ti `Konstruktor`: $.fn.popover.Constructor. No kayatmo ti makaala ti partikular a pagarigan ti plugin, alaem a direkta manipud iti maysa nga elemento: $('[rel=popover]').data('popover').

Awan ti Panagsusupiat

No dadduma ket kasapulan nga agusar kadagiti plugin ti Bootstrap kadagiti dadduma a balangkas ti UI. Kadagitoy a kasasaad, dagiti panagdinnungpar ti namespace ket mabalin a sagpaminsan a mapasamak. No mapasamak daytoy, mabalinmo nga awagan .noConflictti plugin a kayatmo nga isublin ti pategna.

var Buton ti bootstrap = $ . fn nga . buton ti . noConflict () // isubli ti $.fn.button iti dati a naituding a pateg 
$ nga . fn nga . bootstrapBtn = bootstrapButton             // ited ti $().bootstrapBtn ti panagusar ti bootstrap

Dagiti Pasamak

Ti Bootstrap ket mangipaay kadagiti kostumbre a pasamak para kadagiti kaaduan a naisangayan nga aramid ti plugin. Sapasap, dagitoy ket umay iti maysa nga infinitibo ken napalabas a partisipio a porma - a ti infinitibo (ex. show) ket maitignay iti rugi ti maysa a pasamak, ken ti napalabas a partisipio a pormana (ex. shown) ket mangtignay iti pannakaileppas ti maysa nga aramid.

Amin nga infinitibo a pasamak ket mangipaay ti panagusar ti preventDefault. Daytoy ket mangipaay ti abilidad a mangpasardeng ti pannakaipatungpal ti maysa nga aramid sakbay a mangrugi daytoy.

$ ( '# ti Modalko' ). on ( 'ipakita' , trabaho ( e ) {   
    no (! datos ) agsubli iti e . preventDefault () // pasardengen ti modal manipud iti pannakaipakita   
}) nga

Maipapan kadagiti panagbalbaliw

Para kadagiti simple nga epekto ti panagbalbaliw, iraman ti bootstrap-transition.js a maminsan a kadua dagiti dadduma a JS a papeles. No agus-usar ka ti naurnong (wenno napabassit) a bootstrap.js , saan a kasapulan nga iraman daytoy—addan dayta.

Usaren dagiti kaso

Sumagmamano a pagarigan ti plugin ti panagbalbaliw:

• Panag-slide wenno panagkupas kadagiti modal
• Agkupas dagiti tab
• Agkupas dagiti alerto
• Ag-slide kadagiti carousel a pane

Dagiti pagarigan

Dagiti modal ket naurnos, ngem nalaka a maibagay, dagiti dialogo a panagkiddaw nga addaan kadagiti kabassitan a kasapulan a panagusar ken dagiti nasirib a default.

Estatiko nga ehemplo

Maysa a naiparang a modal nga addaan iti ulo, bagi, ken grupo dagiti tignay iti footer.

<div class = "panagkupas ti modal nga ilemmeng" > 
  <div klase = "modal-nga-ulo" > 
    < tipo ti buton = "buton" klase = "serraan" data-dismiss = "modal" aria-nailemmeng = "pudno" > × </button> nga    
    <h3> Modal nga ulo </h3>
  </div>
  <div klase = "modal-a-bagi" > 
    <p> Maysa a napino a bagi... </p>
  </div>
  <div klase = "modal-a-saka" > 
    <a href = "#" klase = "btn" > Serraan </a>  
    <a href = "#" class = "btn btn-primary" > Idulin dagiti panagbalbaliw </a>  
  </div>
</div>

Agbiag nga demo

I-toggle ti maysa a modal babaen ti JavaScript babaen ti panangi-klik ti buton iti baba. Ag-slide dayta nga agpababa ken agkupas manipud iti ngato ti panid.

<!-- Buton nga ag-trigger ti modal -->
<a href = "#myModal" akem = "buton" klase = "btn" data-toggle = "modal" > Irugi ti modal ti demo </a>    
 
<!-- Modal nga -->
<div id = "myModal" klase = "modal nga ilemmeng agkupas" tabindex = "-1" akem = "dialogo" aria-labelledby = "myModalLabel" aria-nailemmeng = "pudno" >      
  <div klase = "modal-nga-ulo" > 
    < kita ti buton = "buton" klase = "serraan" data-dismiss = "modal" aria-nailemmeng = "pudno" > × </button>    
    <h3 id = "myModalLabel" > Ulo ti modal </h3> 
  </div>
  <div klase = "modal-a-bagi" > 
    <p> Maysa a napino a bagi... </p>
  </div>
  <div klase = "modal-a-saka" > 
    <buton klase = "btn" data-dismiss = "modal" aria-nailemmeng = "pudno" > Serraan </buton>   
    <button class = "btn btn-primary" > Idulin dagiti panagbalbaliw </button> 
  </div>
</div>

Panagusar

Babaen kadagiti attribute ti datos

Aktiboen ti modal a saan nga agsurat iti JavaScript. Itakderan data-toggle="modal"iti maysa nga elemento ti kontrolador, a kas ti buton, agraman ti maysa data-target="#foo"wenno href="#foo"tapno puntiriaen ti espesipiko a modal tapno ag-toggle.

< kita ti buton = "buton" data-toggle = "modal" data-target = "#myModal" > Irugi ti modal </button>   

Babaen ti JavaScript

Awagan ti modal nga addaan iti id myModalnga addaan iti maymaysa a linia ti JavaScript:

$ ( '# ti Modalko' ). modal ( dagiti pagpilian ) .

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-backdrop="".

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

Dagiti Pamay-an

.modal(dagiti pagpilian) .

Aktiboenna ti linaonmo kas modal. Awaten ti maysa nga opsional a pagpilian object.

$ ( '# ti Modalko' ). modal nga ({
  teklado : palso nga 
}) nga

.modal ('agbalbaliw') .

Manual nga i-toggle ti maysa a modal.

$ ( '# ti Modalko' ). modal ( 'agbaliwbaliw' ) .

.modal('ipakita') .

Manual a luktan ti maysa a modal.

$ ( '# ti Modalko' ). modal ( 'ipakita' ) .

.modal('ilemmeng') .

Manual nga ilemmeng ti maysa a modal.

$ ( '# ti Modalko' ). modal ( 'ilemmeng' ) .

Dagiti Pasamak

Ti modal a klase ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti modal a panagusar.

$ ( '# ti Modalko' ). on ( 'nalimed' , trabaho () {   
  // aramiden ti maysa a banag...
}) nga

Dagiti pagarigan

Inayon dagiti dropdown menu iti dandani aniaman babaen iti daytoy simple a plugin, agraman ti navbar, tab, ken pildoras.

Iti uneg ti maysa a navbar

Iti uneg dagiti tab

Panagusar

Babaen kadagiti attribute ti datos

Inayon data-toggle="dropdown"iti link wenno buton tapno mai-toggle ti dropdown.

<div klase = "agpababa" > 
  <a class = "ag-dropdown-toggle" data-toggle = "agpababa" href = "#" > Mangtignay ti panagpababa </a>   
  <ul klase = "dropdown-menu" akem = "menu" aria-naimarka babaen = "dLabel" >   
    ...
  </ul>
</div>

Tapno agtalinaed a saan a nadadael dagiti URL, usaren ti data-targetattribute imbes a href="#".

<div klase = "agpababa" > 
  <a klase = "pababa-a-mabaliwan" id = "dLabel" akem = "buton" a-mabaliwan ti datos = "agpababa" a-puntiria ti datos = "#" href = "/panid.html" >      
    Dropdown nga
    <b klase = "caret" ></b> 
  </a>
  <ul klase = "dropdown-menu" akem = "menu" aria-naimarka babaen = "dLabel" >   
    ...
  </ul>
</div>

Babaen ti JavaScript

Tawagan dagiti dropdown babaen ti JavaScript:

$ ( '.agbaba-ag-toggle' ). dropdown nga () .

Dagiti Pagpilian

Awan

Dagiti Pamay-an

$ ().dropdown ('agbaliwbaliw') .

Ti programatiko nga api para iti panag-toggling kadagiti menu para iti naited a navbar wenno tabbed a panagnabigasion.

Pagarigan iti navbar

Ti plugin ti ScrollSpy ket para iti automatiko a panangpabaro kadagiti puntiria ti nav a naibatay iti posision ti panag-scroll. I-scroll ti lugar iti baba ti navbar ken buyaen ti aktibo a panagbalbaliw ti klase. Mai-highlight met dagiti dropdown sub items.

Panagusar

Babaen kadagiti attribute ti datos

Tapno nalaka a mainayon ti kababalin ti scrollspy iti nabigasionmo iti topbar, inayonmo data-spy="scroll"laeng ti elemento a kayatmo nga espia (kaaduan a gagangay a daytoy koma ti bagi) ken data-target=".navbar"tapno pilien no ania a nav ti usarem. Kayatmo nga usaren ti scrollspy nga addaan iti .navcomponent.

<bagi a datos-espia = "ag-scroll" datos-a-puntiria = ".navbar" > ... </body>  

Babaen ti JavaScript

Awagan ti scrollspy babaen ti JavaScript:

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

Dagiti Pamay-an

.scrollspy ('agpabaro') .

No agus-usar ti scrollspy a maikuyog ti pananginayon wenno panangikkat kadagiti elemento manipud iti DOM, kasapulam nga awagan ti pamay-an ti panagpabaro a kas iti kasta:

$ ( '[datos-espia="ag-scroll"]' ). tunggal ( function () { .  
  var $ espia = $ ( daytoy ). scrollspy ( 'pabaro' ) .
});

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-offset="".

Dagiti Pasamak

Pagarigan dagiti tab

Inayon ti napardas, dinamiko a panagusar ti tab iti panagbalbaliw babaen dagiti pane ti lokal a linaon, urayno babaen dagiti dropdown a menu.

Panagusar

Pagbalinen dagiti tabbable a tab babaen ti JavaScript (tunggal tab ket kasapulan a mapaaktibo a saggaysa):

$ ( '# ti Tab ko a' ). i-click ti ( funsion ( e ) { .  
  e . lapdan tiDefault ();
  $ ( daytoy ). tab ( 'ipakita' );
}) nga

Mabalinmo nga aktiboen dagiti indibidual a tab iti sumagmamano a wagas:

$ ( '# ti Tabko a[href="#profile"]' ). tab ( 'ipakita' ); // Pilien ti tab babaen ti nagan 
$ ( '# ti Tab ko a:umuna' ). tab ( 'ipakita' ); // Pilien ti umuna a tab 
$ ( '# ti Tab ko a: maudi' ). tab ( 'ipakita' ); // Pilien ti maudi a tab 
$ ( '# ti Tab ko li: eq (2) a' ). tab ( 'ipakita' ); // Pilien ti maikatlo a tab (0-indexed) . 

Panagmarka

Mabalinmo nga aktiboen ti tab wenno pildoras a nabigasion a dika agsurat iti aniaman a JavaScript babaen ti basta panangidatag data-toggle="tab"wenno data-toggle="pill"iti maysa nga elemento. Ti pananginayon ti navken nav-tabsdagiti klase iti tab ulket mangyaplikar ti estilo ti tab ti Bootstrap.

<ul klase = "nav nav-tabs" > 
  <li><a href = "#pagtaengan" data-toggle = "tab" > Pagtaengan </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Pakasaritaan </a></li>  
  <li><a href = "#mensahe" data-toggle = "tab" > Dagiti mensahe </a></li>  
  <li><a href = "#dagiti panagitunos" data-toggle = "tab" > Dagiti panagitunos </a></li>  
</ul>

Dagiti Pamay-an

$().tab nga

Paaktiboenna ti elemento ti tab ken container ti linaon. Ti tab ket rumbeng nga addaan iti maysa data-targetwenno maysa a hrefmangpuntiria iti maysa a container node iti DOM.

<ul klase = "nav nav-tabs" id = "tabko" >  
  <li klase = "aktibo" ><a href = "#pagtaengan" > Pagtaengan </a></li>  
  <li><a href = "#profile" > Pakasaritaan </a></li> 
  <li><a href = "#mensahe" > Dagiti mensahe </a></li> 
  <li><a href = "#dagiti panagitunos" > Dagiti panagitunos </a></li> 
</ul>
 
<div klase = "linaon-tab" > 
  <div klase = "aktibo ti tab-pane" id = "pagtaengan" > ... </div>  
  <div klase = "tab-pane" id = "profile" > ... </div>  
  <div klase = "tab-pane" id = "dagiti mensahe" > ... </div>  
  <div klase = "tab-pane" id = "dagiti panagitunos" > ... </div>  
</div>
 
<iskrip>
  $ ( trabaho () { .  
    $ ( '# ti Tab ko a: maudi' ). tab ( 'ipakita' );
  }) nga
</script>

Dagiti Pasamak

$ ( 'a [datos-a-panagbalbaliw = "tab"]' ). on ( 'naipakita' , trabaho ( e ) {   
  e . target // na-activate nga tab
  e . mainaig a Target // napalabas a tab
}) nga

Dagiti pagarigan

Napaltiingan babaen ti nagsayaat a jQuery.tipsy plugin nga insurat ni Jason Frame; Dagiti tip ti ramit ket maysa a napabaro a bersion, a saan nga agpannuray kadagiti ladawan, agus-usar ti CSS3 para kadagiti animasion, ken dagiti data-attribute para iti lokal a pagipempenan ti paulo.

Para kadagiti rason ti panagaramid, ti tooltip ken popover data-apis ket opt ​​in, kayatna a sawen a masapul nga irugim a mismo dagitoy .

I-hover dagiti link iti baba tapno makita dagiti toltips:

Uppat a direksion

Tooltips kadagiti grupo ti input

No agus-usar kadagiti tooltip ken popovers kadagiti grupo ti input ti Bootstrap, masapul nga ikeddengmo ti container(nadokumento iti baba) a pagpilian tapno maliklikan dagiti di matarigagayan nga epekto.

Panagusar

I-trigger ti tooltip babaen ti JavaScript:

$ ( '#pagarigan' ). tooltip ( dagiti pagpilian ) .

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-animation="".

Panagmarka

<a href = "#" data-toggle = "tip ti ramit" title = "umuna a tip ti ramit" > ag-hover iti rabawko </a>   

Dagiti Pamay-an

$ (). tip ti ramit (dagiti pagpilian) .

Ikapet ti tooltip handler iti maysa a koleksion ti elemento.

.tooltip ('ipakita') .

Ipalgakna ti tooltip ti maysa nga elemento.

$ ( '#elemento' ). tooltip ( 'ipakita' ) .

.tooltip ('ilemmeng') .

Ilemmeng ti tooltip ti maysa nga elemento.

$ ( '#elemento' ). tip ti ramit ( 'ilemmeng' ) .

.tooltip ('agbalbaliw') .

I-toggle ti tooltip ti maysa nga elemento.

$ ( '#elemento' ). tip ti ramit ( 'agbaliwbaliw' ) .

.tooltip ('dadaelen') .

Ilemmeng ken dadaelenna ti tooltip ti maysa nga elemento.

$ ( '#elemento' ). tooltip ( 'dadaelen' ) .

Dagiti pagarigan

Inayon dagiti babassit nga overlay ti linaon, kas kadagidiay adda iti iPad, iti aniaman nga elemento para iti balay a segundario nga impormasion. I-hover ti buton tapno mai-trigger ti popover. Masapul a mairaman ti Tooltip .

Estatiko nga popover

Uppat a pagpilian ti magun-odan: ngato, kannawan, baba, ken kannigid a naitunos.

Awan ti marka a naipakita a kas dagiti popover ket napataud manipud iti JavaScript ken linaon iti uneg ti maysa nga dataattribute.

Agbiag nga demo

Uppat a direksion

Panagusar

Pagbalinen dagiti popover babaen ti JavaScript:

$ ( '#pagarigan' ). popover ( dagiti pagpilian ) .

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-animation="".

Panagmarka

Para kadagiti rason ti panagaramid, ti Tooltip ken Popover data-apis ket ag-opt in. No kayatmo nga usaren dagitoy ket mangibaga laeng ti maysa a pagpilian ti agpili.

Dagiti Pamay-an

$ ().popover (dagiti pagpilian) .

Mangrugi kadagiti popovers para iti maysa a koleksion ti elemento.

.popover('ipakita') .

Ipalgakna ti maysa nga elemento popover.

$ ( '#elemento' ). popover ( 'ipakita' ) .

.popover('ilemmeng') .

Ilemmeng ti maysa nga elemento popover.

$ ( '#elemento' ). popover ( 'paglemmeng' ) .

.popover ('agbaliwbaliw') .

Toggles ti maysa nga elemento popover.

$ ( '#elemento' ). popover ( 'agbaliwbaliw' ) .

.popover('dadaelen') .

Ilemmeng ken dadaelenna ti popover ti maysa nga elemento.

$ ( '#elemento' ). popover ( 'dadaelen' ) .

Pagarigan dagiti alerto

Inayon ti panagusar ti panangilaksid kadagiti amin a mensahe ti alerto babaen daytoy a plugin.

Panagusar

Pagbalinen ti pannakaikkat ti maysa nga alerto babaen ti JavaScript:

$ ( ".alerto" ). alerto () .

Panagmarka

Inayon data-dismiss="alert"laeng iti close button-mo tapno automatiko a mangted iti alerto close functionality.

<a klase = "serraan" data-dismiss = "alerto" href = "#" > × </a>   

Dagiti Pamay-an

$ ().alerto () .

Balkotenna amin nga alerto nga addaan iti asideg a panagandar. Tapno dagiti alertom ket ag-animate out no naserraan, siguraduem nga addaanda iti .fadeken .inklase a dati a naipakat kadakuada.

.alert('serraan') .

Serraan ti maysa nga alerto.

$ ( ".alerto" ). alerto ( 'serraan' ) .

Dagiti Pasamak

Ti klase ti alerto ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti panagusar ti alerto.

$ ( '#ti-alertok' ). bind ( 'naserraan' , trabaho () {   
  // aramiden ti maysa a banag...
}) nga

Pagarigan nga usaren

Aramiden ti ad-adu pay babaen kadagiti buton. Ibaga ti buton ti kontrol wenno mangpartuat kadagiti grupo dagiti buton para kadagiti ad-adu a paset a kas dagiti toolbar.

Stateful nga

Inayon data-loading-text="Loading..."tapno agusar ti kasasaad ti panagkarga iti maysa a buton.

<button type = "button" class = "btn btn-primary" data-loading-text = "Agkarga..." > Kasasaad ti panagkarga </button>   

Maymaysa nga toggle

Inayon data-toggle="button"tapno mapaandar ti toggling iti maymaysa a buton.

< kita ti buton = "buton" klase = "btn btn-pangruna" data-toggle = "buton" > Agmaymaysa a Panagbalbaliw </button>   

Kahon ti tsek

Inayon data-toggle="buttons-checkbox"para iti panag-toggling ti estilo ti kahon ti tsek iti btn-group.

<div klase = "btn-grupo" data-toggle = "kahon ti tsek dagiti buton" >  
  < tipo ti buton = "buton" klase = "btn btn-pangruna" > Kannigid </button>  
  < kita ti buton = "buton" klase = "btn btn-pangruna" > Tengnga </button>  
  < tipo ti buton = "buton" klase = "btn btn-pangruna" > Kannawan </button>  
</div>

Radio nga

Inayon data-toggle="buttons-radio"para iti panag-toggling ti estilo ti radio iti btn-group.

<div klase = "btn-grupo" data-toggle = "dagiti buton-radio" >  
  < tipo ti buton = "buton" klase = "btn btn-pangruna" > Kannigid </button>  
  < kita ti buton = "buton" klase = "btn btn-pangruna" > Tengnga </button>  
  < tipo ti buton = "buton" klase = "btn btn-pangruna" > Kannawan </button>  
</div>

Panagusar

Pagbalinen dagiti buton babaen ti JavaScript:

$ ( '.nav-tab' ). buton () .

Panagmarka

Dagiti attribute ti datos ket napateg iti plugin ti buton. Kitaen ti pagarigan a kodigo iti baba para kadagiti nadumaduma a kita ti marka.

Dagiti Pagpilian

Awan

Dagiti Pamay-an

$ (). buton ('ag-toggle') .

Toggles ti estado ti iduron. Ikkan ti buton ti langa a na-activate dayta.

< tipo ti buton = "buton" klase = "btn" data-toggle = "buton" > ... </buton>    

$ (). buton ( 'agkarga') .

Itakderanna ti estado ti buton iti panagkarga - balbaliwanna ti buton ken isukat ti teksto iti panagkarga ti teksto. Ti panagkarga ti teksto ket rumbeng a maipalawag iti elemento ti buton babaen ti panagusar ti kabileg ti datos data-loading-text.

<button type = "button" class = "btn" data-loading-text = "agkarga ti bambanag..." > ... </button>    

$ (). buton ('i-reset') .

Isubli ti estado ti buton - isukat ti teksto iti orihinal a teksto.

$ ().buton (kuerdas) .

Isubli ti estado ti buton - agsinnukat ti teksto iti ania man a datos a naikeddeng nga estado ti teksto.

<button type = "button" class = "btn" datos-kompleto-a-teksto = "nalpasen!" > ... </buton> nga    
<iskrip>
  $ ( '.btn' nga ). buton ( 'kompleto' ) .
</script>

Maipapan

Mangala kadagiti batayan nga estilo ken nalaka a maibagay a suporta para kadagiti mai-collapsible a paset a kas dagiti akordeon ken nabigasion.

* Kasapulan a mairaman ti Transitions plugin.

Pagarigan ti akordeon

Babaen ti panagusar ti collapse plugin, nangaramidkami ti simple a widget ti estilo ti akordeon:

<div klase = "akordeon" id = "akordeon2" >  
  <div klase = "grupo-akordeon" > 
    <div class = "paulo ti akordeon" > 
      <a klase = "acordion-toggle" data-toggle = "ag-collapse" data-nagannak = "#akordeon2" href = "#ag-collapseMaysa" >    
        Mabalin nga i-collapsible nga Grupo nga Item #1
      </a>
    </div>
    <div id = "collapseOne" class = "panag-collapse ti bagi ti akordeon iti" >  
      <div klase = "akordeon-akin-uneg" > 
        Anim pariatur nga cliche...
      </div>
    </div>
  </div>
  <div klase = "grupo-akordeon" > 
    <div class = "paulo ti akordeon" > 
      <a klase = "acordion-toggle" data-toggle = "ag-collapse" data-nagannak = "#akordeon2" href = "#ag-collapseDua" >    
        Ma-collapsible nga Grupo nga Item #2
      </a>
    </div>
    <div id = "collapseTwo" class = "panag-collapse ti bagi ti akordeon" >  
      <div klase = "akordeon-akin-uneg" > 
        Anim pariatur nga cliche...
      </div>
    </div>
  </div>
</div>
...

Mabalinmo met nga usaren ti plugin nga awan ti accordion markup. Mangaramid ti maysa a buton a mangbalbaliw ti panagpalawa ken panagreggaay ti sabali nga elemento.

< tipo ti buton = "buton" klase = "btn btn-peggad" data-toggle = "panag-collapse" data-target = "#demo" >    
  simple nga collapsible
</button> nga
 
<div id = "demo" klase = "agtinnag iti" > ... </div>  

Panagusar

Babaen kadagiti attribute ti datos

Basta add data-toggle="collapse"ken a data-targetto element tapno automatiko a mangituding ti kontrol ti maysa a collapsible nga elemento. Ti data-targetattribute ket umawat ti css selector a pangipakat ti collapse. Siguraduen nga inayon ti klase collapseiti collapsible nga elemento. No kayatmo a default a malukatan, inayon ti kanayonan a klase in.

Tapno manginayon ti kasla akordeon a panagituray ti grupo iti maysa a maibukbok a kontrol, inayon ti kabileg ti datos data-parent="#selector". Kitaen ti demo tapno makita daytoy nga agtigtignay.

Babaen ti JavaScript

Pagbalinen a manual babaen ti:

$ ( ".ag-collapse" ). agrupsa () .

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-parent="".

Dagiti Pamay-an

.collapse(dagiti pagpilian) .

Paaktiboenna ti linaonmo kas maysa a collapsible nga elemento. Awaten ti maysa nga opsional a pagpilian object.

$ ( '# ti Makollap-ko' ). marpuog ({
  toggle : palso nga 
}) nga

.collapse ('agbalbaliw') .

I-toggles ti collapsible nga elemento iti maipakita wenno mailemmeng.

.collapse ('ipakita') .

Ipakita ti maysa a collapsible nga elemento.

.collapse('ilemmeng') .

Ilemmengna ti maysa a collapsible nga elemento.

Dagiti Pasamak

Ti klase ti panagreggaay ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti panagusar ti panagreggaay.

$ ( '# ti Makollap-ko' ). on ( 'nalimed' , trabaho () {   
  // aramiden ti maysa a banag...
}) nga

Pagarigan ti carousel

Ti slideshow iti baba ket mangipakita ti sapasap a plugin ken paset para iti panagbisikleta babaen dagiti elemento a kas ti carousel.

Umuna nga etiketa ti Thumbnail

Cras justo odio, dapibus a pasilidad iti, egestas eget quam. Donec id elit nga saan nga mi porta gravida iti eget metus. Nullam id dolor id nibh ultricies lugan 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.

‹ nga › .

<div id = "myCarousel" klase = "slide ti karusel" >  
  <ol klase = "dagiti-karusel-a-mangipakita" > 
    <li data-target = "#myCarousel" data-slide-to = "0" klase = "aktibo" ></li>   
    <li data-target = "#myCarousel"-datos -a-slide-iti = "1" ></li>  
    <li data-target = "#myCarousel"-datos -a-slide-iti = "2" ></li>  
  </ol>
  <!-- Dagiti banag ti karusel -->
  <div klase = "karusel-akin-uneg" > 
    <div klase = "aktibo a banag" > ... </div> 
    <div klase = "banag" > ... </div> 
    <div klase = "banag" > ... </div> 
  </div>
  <!-- Karrusel nga nav -->
  <a klase = "karosel-a-kontrol ti kannigid" href = "#myCarousel" data-slide = "naudi" > ‹ </a>   
  <a klase = "kalintegan-a-mangtengngel ti karusel" href = "#myCarousel" data-slide = "sumaruno" > › </a>   
</div>

Panagusar

Babaen kadagiti attribute ti datos

Usaren dagiti data attribute tapno nalaka a makontrol ti posision ti carousel. data-slideawatenna dagiti nasken a balikas prevwenno next, a mangbalbaliw ti posision ti slide a relatibo iti agdama a posisionna. Saan laeng a dayta, usaren data-slide-toa mangipasa ti raw slide index iti carousel data-slide-to="2", a lumlumtaw ti posision ti slide iti partikular nga indeks a mangrugi iti 0.

Babaen ti JavaScript

Awagan ti carousel a manual babaen ti:

$ ( '.karusel' ). karusel () .

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScriptz. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-interval="".

Dagiti Pamay-an

.karusel(dagiti pagpilian) .

Irugi ti carousel nga addaan kadagiti opsional a pagpilian objectken mangrugi nga agbisikleta babaen kadagiti banag.

$ ( '.karusel' ). karusel nga ({
  aggigiddan : 2000 
}) nga

.karusel ('siklo') .

Agsiklo kadagiti carousel items manipud kannigid agingga iti kannawan.

.karusel('agsardeng') .

Pasardengenna ti carousel nga agbisikleta kadagiti banag.

.karusel(numero) .

Isiklo ti carousel iti partikular a kuadro (0 a naibatay, kapada ti maysa nga array).

.karusel('naudi') .

Agsiklo iti napalabas a banag.

.karusel('sumaruno') .

Agsiklo iti sumaganad a banag.

Dagiti Pasamak

Ti klase ti carousel ti Bootstrap ket mangibutaktak ti dua a pasamak para iti panag-hook iti panagusar ti carousel.

Pagwadan

Maysa a batayan, nalaka a mapalawa a plugin para iti napardas a panagpartuat kadagiti elegante a typeahead nga addaan iti ania man a panagserrek ti teksto ti porma.

< tipo ti panagserrek = "teksto" data-provide = "typeahead" >  

Kayatmo nga ikeddeng autocomplete="off"tapno malapdan ti panagparang dagiti default a menu ti browser iti rabaw ti Bootstrap typeahead dropdown.

Panagusar

Babaen kadagiti attribute ti datos

Inayon dagiti kababalin ti datos tapno mangirehistro ti maysa nga elemento nga addaan iti panagusar ti typeahead a kas naipakita iti pagarigan iti ngato.

Babaen ti JavaScript

Awagan ti typeahead a manual babaen ti:

$ ( '.ag-typeahead' ). i- typeahead () .

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-source="".

Dagiti Pamay-an

.typeahead(dagiti pagpilian) .

Mangrugi ti maysa nga input babaen ti typeahead.

Pagwadan

Ti subnabigasion iti kannigid ket maysa a live demo ti affix plugin.

Panagusar

Babaen kadagiti attribute ti datos

Tapno nalaka a mainayon ti affix behavior iti ania man nga elemento, basta inayon data-spy="affix"ti elemento a kayatmo nga espia. Kalpasanna agusar kadagiti offset tapno mangikeddeng no kaano nga i-toggle ti panag-pinning ti maysa nga elemento nga on ken off.

<div datos-espia = "ikapet" datos-offset-ngato = "200" > ... </div>  

Babaen ti JavaScript

Awagan ti affix plugin babaen ti JavaScript:

$ ( '#navbar' ). affix nga () .

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-offset-top="200".