Maipapan kadagiti modal

Ti naurnos, ngem nalaka a maibagay, a mangala ti tradisional a javascript a modal a plugin nga addaan laeng ti kabassitan a kasapulan a panagusar ken dagiti nasirib a default.

Estatiko nga ehemplo

Iti baba ket ti estatiko a naiparang a modal.

Agbiag nga demo

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

Babaen ti panangusar iti bootstrap-modal

Awagan ti modal babaen ti javascript:

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

Dagiti Pagpilian

Panagmarka

Mabalinmo nga aktiboen dagiti modal iti panidmo a nalaka a saan a kasapulan nga agsuratka iti maymaysa a linia ti javascript. Itakderan laeng data-toggle="modal"iti maysa nga elemento ti kontrolador nga addaan iti data-target="#foo"wenno href="#foo"a katupag ti modal nga elemento nga id, ken no mai-klik, daytoy ket mangirugi ti modalmo.

Kasta met, tapno manginayon kadagiti pagpilian iti modal a pagariganmo, iraman laeng dagitoy a kas dagiti kanayonan a kababalin ti datos iti urayno ti elemento ti panagtengngel wenno ti modal a panagmarka a mismo.

<a klase = "btn" data-toggle = "modal" href = "#myModal" > Irugi ti Modal </a>    

<div klase = "modal nga ilemmeng" id = "myModal" >  
  <div klase = "modal-nga-ulo" > 
    < kita ti buton = "buton" klase = "serraan" data-dismiss = "modal" > × </buton>   
    <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" data-dismiss = "modal" > Serraan </a>   
    <a href = "#" class = "btn btn-primary" > Idulin dagiti panagbalbaliw </a>  
  </div>
</div>

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

Maipapan kadagiti dropdown

Inayon dagiti dropdown menu iti dandani aniaman iti Bootstrap babaen iti daytoy simple a plugin. Ti Bootstrap ket mangitampok ti naan-anay a suporta ti dropdown menu iti navbar, tabs, ken pildoras.

Dagiti pagarigan

I-click dagiti dropdown nav links iti navbar ken pildoras iti baba tapno masubok dagiti dropdown.

• Regular nga link
• Dropdown nga
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown nga 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Panag-dropdown 3
  • Action
  • Another action
  • Something else here
  • Separated link

Usar ti bootstrap-dropdown.js

Awagan dagiti dropdown babaen ti javascript:

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

Panagmarka

Tapno napardas a manginayon ti dropdown a panagusar iti ania man nga elemento basta inayon data-toggle="dropdown"ken ania man a balido a bootstrap a dropdown ket automatiko a mapaaktibo.

<ul klase = "nav nav-pildoras" > 
  <li class = "aktibo" ><a href = "#" > Regular a silpo </a></li>  
  <li klase = "agpababa" id = "menu1" >  
    <a klase = "pababa-a-mabaliwan" data-toggle = "agpababa" href = "#menu1" >   
      Dropdown nga
      <b klase = "caret" ></b> 
    </a>
    <ul klase = "nababa-a-menu" > 
      <li><a href = "#" > Aksyon </a></li> 
      <li><a href = "#" > Sabali nga aramid </a></li> 
      <li><a href = "#" > Sabali pay ditoy </a></li> 
      <li klase = "mangbingay" </li> 
      <li><a href = "#" > Naisina a silpo </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul klase = "nav nav-pildoras" > 
  <li klase = "agpababa" > 
    <a klase = "agpababa-a-mangbalbaliw" data-toggle = "agbaba" a puntiria ti datos = "#" href = "dalan/agingga/panid.html" >    
      Dropdown nga
      <b klase = "caret" ></b> 
    </a>
    <ul klase = "nababa-a-menu" > 
      ...
    </ul>
  </li>
</ul>

Dagiti Pamay-an

$ (). dropdown () .

Maysa a programatiko nga api para iti panangpaaktibo kadagiti menu para iti naited a navbar wenno tabbed a nabigasion.

Ti plugin ti ScrollSpy ket para iti automatiko a panangpabaro kadagiti puntiria ti nav a naibatay iti posision ti panag-scroll.

Pagarigan ti navbar nga addaan iti scrollspy

I-scroll ti lugar iti baba ken buyaem ti update ti nabigasion. Mai-highlight met dagiti dropdown sub items. Padasem dayta!

Usar ti bootstrap-scrollspy.js

Awagan ti scrollspy babaen ti javascript:

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

Panagmarka

Tapno nalaka a mainayon ti scrollspy a kababalin iti nabigasionmo iti topbar, inayonmo data-spy="scroll"laeng ti elemento a kayatmo nga espia (kaaduan a gagangay a daytoy koma ti bagi).

<bagi data-espia = "ag-scroll" > ... </bagi>  

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 Pasamak

Daytoy a plugin ket manginayon ti napardas, dinamiko a panagandar ti tab ken pildoras para iti panagbalbaliw babaen ti lokal a linaon.

Pagarigan dagiti tab

I-click dagiti tab iti baba tapno ag-toggle iti nagbaetan dagiti nailemmeng a pane, uray babaen kadagiti dropdown menu.

• Balay
• Profile
• Dropdown nga
  • @fat
  • @mdo

Usar ti bootstrap-tab.js

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

Maipapan kadagiti Tooltips

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.

Pagarigan ti panagusar ti Tooltips

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

Usar ti bootstrap-tooltip.js

I-trigger ti tooltip babaen ti javascript:

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

Dagiti Pagpilian

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.

<a href = "#" rel = "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' ) .

Maipapan kadagiti popovers

Inayon dagiti babassit nga overlay ti linaon, kas kadagidiay adda iti iPad, iti aniaman nga elemento para iti panagbalay iti segundario nga impormasion.

* Kasapulan a mairaman ti Tooltip

Pagarigan ti hover popover

I-hover ti buton tapno mai-trigger ti popover.

Usar ti bootstrap-popover.js

Pagbalinen dagiti popover babaen ti javascript:

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

Dagiti Pagpilian

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

Maipapan kadagiti alerto

Ti plugin ti alerto ket maysa a bassit a klase para iti pananginayon ti asideg a panagusar kadagiti alerto.

Pagarigan dagiti alerto

Ti plugin dagiti alerto ket agtrabaho kadagiti regular a mensahe ti alerto, ken dagiti mensahe ti bloke.

Babaen ti panangusar iti bootstrap-alert.js

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

Maipapan

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.

Pagarigan nga usaren

Usaren ti plugin dagiti buton para kadagiti estado ken dagiti panagbalbaliw.

Babaen ti panangusar iti bootstrap-button.js

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.

<!-- Inayon ti data-toggle="button" tapno mapaandar ti panag-toggle iti maymaysa a buton -->
< klase ti buton = "btn" data-toggle = "buton" > Agmaymaysa a Panagbalbaliw </button>  
 
<!-- Inayon ti data-toggle="buttons-checkbox" para iti panagbalbaliw ti estilo ti kahon ti tsek iti btn-group -->
<div klase = "btn-grupo" data-toggle = "kahon ti tsek dagiti buton" >  
  <buton klase = "btn" > Kannigid </button> 
  <buton klase = "btn" > Tengnga </button> 
  < klase ti buton = "btn" > Kannawan </button> 
</div>
 
<!-- Inayon ti data-toggle="buttons-radio" para iti panagbalbaliw ti estilo ti radio iti btn-group -->
<div klase = "btn-grupo" data-toggle = "dagiti buton-radio" >  
  <buton klase = "btn" > Kannigid </button> 
  <buton klase = "btn" > Tengnga </button> 
  < klase ti buton = "btn" > Kannawan </button> 
</div>

Dagiti Pamay-an

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

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

< klase ti buton = "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 class = "btn" data-loading-text = "agkarga kadagiti 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 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:

Usar ti bootstrap-collapse.js

Pagbalinen babaen ti javascript:

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

Dagiti Pagpilian

Panagmarka

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.

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

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

Maipapan

Maysa a sapasap a plugin para iti panagbisikleta babaen kadagiti elemento. Maysa a merry-go-round.

Pagarigan ti carousel

Buyaen ti slideshow iti baba.

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.

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

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

‹ nga › .

Usar ti bootstrap-carousel.js

Tawagan babaen ti javascript:

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

Dagiti Pagpilian

Panagmarka

Dagiti attribute ti datos ket naus-usar para kadagiti napalabas ken sumaganad a conrol. Kitaen ti pagarigan a markup iti baba.

<div id = "myCarousel" klase = "slide ti karusel" >  
  <!-- 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>

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.

Maipapan

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.

Pagwadan

Rugian ti ag-type iti tay-ak iti baba tapno maipakita dagiti resulta ti typeahead.

Usar ti bootstrap-typeahead.js

Awagan ti typeahead babaen ti javascript:

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

Dagiti Pagpilian

Panagmarka

Inayon dagiti kababalin ti datos tapno mangirehistro ti maysa nga elemento nga addaan iti panagusar ti typeahead.

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

Dagiti Pamay-an

.typeahead(dagiti pagpilian) .

Mangrugi ti maysa nga input babaen ti typeahead.