Konsènan modal yo

Yon rasyonalize, men fleksib, pran sou tradisyonèl javascript modal Plugin la ak sèlman minimòm fonksyonalite ki nesesè yo ak default entelijan.

Egzanp estatik

Anba a se yon modal rann statik.

Live Demo

Chanje yon modal via javascript lè w klike sou bouton ki anba a. Li pral glise desann ak fennen soti nan tèt paj la.

Sèvi ak bootstrap-modal

Rele modal la via javascript:

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

Opsyon

Marke

Ou ka aktive modal sou paj ou a fasil san w pa bezwen ekri yon sèl liy javascript. Jis mete data-toggle="modal"sou yon eleman kontwolè ak yon data-target="#foo"oswa href="#foo"ki koresponn ak yon id eleman modal, epi lè klike sou, li pral lanse modal ou a.

Epitou, pou ajoute opsyon nan egzanp modal ou a, jis enkli yo kòm atribi done adisyonèl sou swa eleman kontwòl la oswa maketing nan modal tèt li.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Lanse modal </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "bouton" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Tèt modal </h3>
  </div>
  <div class = "modal-body" > 
    <p> Yon bèl kò... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Fèmen </a>   
    <a href = "#" class = "btn btn-primary" > Sove chanjman yo </a>  
  </div>
</div>

Metòd

.modal(opsyon)

Aktive kontni ou kòm yon modal. Aksepte yon opsyon opsyonèl object.

$ ( '#myModal' ). modal ({
  klavye : fo 
})

.modal('toggle')

Manyèlman aktive yon modal.

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

.modal('montre')

Manyèlman ouvè yon modal.

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

.modal('kache')

Manyèlman kache yon modal.

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

Evènman

Klas modal Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite modal.

$ ( '#myModal' ). on ( 'kache' , fonksyon () {   
  // fè yon bagay…
})

Konsènan dropdowns

Ajoute meni deroulan nan prèske nenpòt bagay nan Bootstrap ak senp plugin sa a. Bootstrap gen sipò konplè meni deroulant nan navbar, onglè, ak grenn.

Egzanp yo

Klike sou lyen navigasyon yo nan navbar ak grenn ki anba a pou teste dropdowns yo.

• Lyen regilye
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 3
  • Action
  • Another action
  • Something else here
  • Separated link

Sèvi ak bootstrap-dropdown.js

Rele dropdowns yo atravè javascript:

$ ( '.dropdown-toggle' ). dropdown ()

Marke

Pou ajoute byen vit fonksyonalite dropdown nan nenpòt eleman jis ajoute data-toggle="dropdown"epi nenpòt dropdown valab bootstrap pral otomatikman aktive.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Lyen regilye </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Dropdown
      <b class = "caret" ></b> 
    </a>
    <ul class = "meni dewoulman" > 
      <li><a href = "#" > Aksyon </a></li> 
      <li><a href = "#" > Yon lòt aksyon </a></li> 
      <li><a href = "#" > Yon lòt bagay isit la </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Lyen separe </a></li> 
    </ul>
  </li>
  ...
</ul>

Pou kenbe URL yo entak, sèvi ak data-targetatribi a olye pou yo href="#".

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Dropdown
      <b class = "caret" ></b> 
    </a>
    <ul class = "meni dewoulman" > 
      ...
    </ul>
  </li>
</ul>

Metòd

$().dropdown()

Yon API programatik pou aktive meni pou yon navbar oswa navigasyon onglet.

Plugin ScrollSpy a se pou mete ajou otomatikman sib navigasyon ki baze sou pozisyon woulo liv la.

Egzanp navbar ak scrollspy

Scroll zòn ki anba a epi gade aktyalizasyon navigasyon an. Sou atik yo deroule yo pral make tou. Eseye li!

Sèvi ak bootstrap-scrollspy.js

Rele scrollspy via javascript:

$ ( '#navbar' ). scrollspy ()

Marke

Pou fasilman ajoute konpòtman scrollspy nan navigasyon topbar ou a, jis ajoute data-spy="scroll"nan eleman ou vle al rekonèt sou (pi tipikman sa a ta dwe kò a).

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

Metòd

.scrollspy('refresh')

Lè w ap itilize scrollspy ansanm ak ajoute oswa retire eleman nan DOM, w ap bezwen rele metòd rafrechisman an konsa:

$ ( '[data-spy="scroll"]' ). chak ( fonksyon () {  
  var $espyon = $ ( sa a ). scrollspy ( 'refresh' )
});

Opsyon

Evènman

Plugin sa a ajoute rapid, dinamik tab ak fonksyonalite grenn pou tranzisyon nan kontni lokal yo.

Onglet egzanp

Klike sou onglè ki anba yo pou chanje ant fenèt kache, menm atravè meni dewoulan.

• Lakay
• Profile
• Dropdown
  • @fat
  • @mdo

Sèvi ak bootstrap-tab.js

Pèmèt onglè tabulab yo atravè javascript (yo dwe aktive chak tab endividyèlman):

$ ( '#myTab a' ). klike sou ( fonksyon ( e ) {  
  e . preventDefault ();
  $ ( sa a ). tab ( 'montre' );
})

Ou ka aktive onglè endividyèl yo nan plizyè fason:

$ ( '#myTab a[href="#profile"]' ). tab ( 'montre' ); // Chwazi tab pa non 
$ ( '#myTab a:first' ). tab ( 'montre' ); // Chwazi premye tab 
$ ( '#myTab a:last' ). tab ( 'montre' ); // Chwazi dènye tab 
$ ( '#myTab li:eq(2) a' ). tab ( 'montre' ); // Chwazi twazyèm tab (0-endèks) 

Marke

Ou ka aktive yon tab oswa navigasyon grenn san w pa ekri okenn javascript lè w tou senpleman presize data-toggle="tab"oswa data-toggle="pill"sou yon eleman. Ajoute navak nav-tabsklas yo nan tab la ulpral aplike manier tab bootstrap la.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Kay </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profile </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Mesaj </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Anviwònman </a></li>  
</ul>

Metòd

$().tab

Aktive yon eleman tab ak yon veso kontni. Tab ta dwe gen swa yon data-targetoswa yon hrefvize yon ne veso nan DOM la.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Kay </a></li>  
  <li><a href = "#profile" > Profile </a></li> 
  <li><a href = "#messages" > Mesaj </a></li> 
  <li><a href = "#settings" > Anviwònman </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "kay" > ... </div>  
  <div class = "tab-pane" id = "pwofil" > ... </div>  
  <div class = "tab-pane" id = "mesaj" > ... </div>  
  <div class = "tab-pane" id = "anviwònman" > ... </div>  
</div>
 
<script>
  $ ( fonksyon () {  
    $ ( '#myTab a:last' ). tab ( 'montre' );
  })
</script>

Evènman

$ ( 'a[data-toggle="tab"]' ). on ( 'montre' , fonksyon ( e ) {   
  e . sib // aktive tab
  e . relatedTarget // tab anvan
})

Konsènan Tooltips

Enspire pa ekselan plugin jQuery.tipsy ekri pa Jason Frame; Ti konsèy yo se yon vèsyon mete ajou, ki pa konte sou imaj, sèvi ak css3 pou animasyon, ak done-atribi pou estokaj tit lokal yo.

Egzanp itilizasyon Tooltips

Pase sou lyen ki anba yo pou wè konsèy sou zouti:

Sèvi ak bootstrap-tooltip.js

Deklanche konsèy zouti a atravè javascript:

$ ( '#egzanp' ). ti konsèy ( opsyon )

Opsyon

Marke

Pou rezon pèfòmans, Tooltip ak Popover done-apis yo patisipe nan. Si ou ta renmen itilize yo jis presize yon opsyon seleksyon.

<a href = "#" rel = "tooltip" title = "premye tooltip" > pase sou mwen </a>   

Metòd

$().tooltip(opsyon)

Tache yon moun ki okipe enfòmasyon sou yon koleksyon eleman.

.tooltip('montre')

Revele konsèy zouti yon eleman.

$ ( '#eleman' ). ti konsèy ( 'montre' )

.tooltip('kache')

Kache konsèy yon eleman.

$ ( '#eleman' ). ti konsèy ( 'kache' )

.tooltip('toggle')

Aktivite konsèy zouti yon eleman.

$ ( '#eleman' ). konsèy zouti ( 'bale' )

Konsènan popovers

Ajoute ti kouvri kontni, tankou sa yo sou iPad a, nan nenpòt eleman pou lojman segondè enfòmasyon.

* Egzije Tooltip yo dwe enkli

Egzanp hover popover

Pase sou bouton an pou deklanche popover a.

Sèvi ak bootstrap-popover.js

Pèmèt popovers via javascript:

$ ( '#egzanp' ). popover ( opsyon )

Opsyon

Marke

Pou rezon pèfòmans, Tooltip ak Popover done-apis yo patisipe nan. Si ou ta renmen itilize yo jis presize yon opsyon seleksyon.

Metòd

$().popover(opsyon)

Inisyalize popovers pou yon koleksyon eleman.

.popover('montre')

Revele yon popover eleman.

$ ( '#eleman' ). popover ( 'montre' )

.popover('kache')

Kache yon popover eleman.

$ ( '#eleman' ). popover ( 'kache' )

.popover('toggle')

Baskile yon popover eleman.

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

Konsènan alèt

Plugin alèt la se yon ti klas pou ajoute fonksyonalite fèmen nan alèt yo.

Egzanp alèt

Plugin alèt la ap travay sou mesaj alèt regilye yo, epi bloke mesaj yo.

Sèvi ak bootstrap-alert.js

Pèmèt ranvwa yon alèt via javascript:

$ ( ".alèt" ). alèt ()

Marke

Jis ajoute data-dismiss="alert"nan bouton fèmen ou a otomatikman bay yon fonksyonalite fèmen alèt.

<a class = "close" data-dismiss = "alèt" href = "#" > × </a>   

Metòd

$().alèt()

Anvlope tout alèt ak fonksyonalite fèmen. Pou gen alèt ou yo anime lè yo fèmen, asire w ke yo gen .fadeak .inklas la deja aplike nan yo.

.alèt('fèmen')

Fèmen yon alèt.

$ ( ".alèt" ). alèt ( 'fèmen' )

Evènman

Klas alèt Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite alèt.

$ ( '#alèt mwen an' ). bind ( 'fèmen' , fonksyon () {   
  // fè yon bagay…
})

Konsènan

Fè plis ak bouton. Kontwole eta bouton oswa kreye gwoup bouton pou plis konpozan tankou ba zouti.

Egzanp itilizasyon

Sèvi ak Plugin bouton pou eta ak baskil.

Sèvi ak bootstrap-button.js

Aktive bouton via javascript:

$ ( '.nav-tabs' ). bouton ()

Marke

Done atribi yo se entegral nan plugin bouton an. Tcheke kòd egzanp ki anba a pou divès kalite maketing yo.

<!-- Ajoute data-toggle="bouton" pou aktive baskile sou yon sèl bouton -->
<button class = "btn" data-toggle = "bouton" > Single Toggle </button>  
 
<!-- Ajoute data-toggle="buttons-checkbox" pou chanje style kaz sou btn-group -->
<div class = "btn-group" data-toggle = "bouton-checkbox" >  
  <button class = "btn" > Goch </button> 
  <button class = "btn" > Mwayen </button> 
  <button class = "btn" > Dwa </button> 
</div>
 
<!-- Ajoute data-toggle="buttons-radio" pou chanje style radyo sou btn-group -->
<div class = "btn-group" data-toggle = "bouton-radio" >  
  <button class = "btn" > Goch </button> 
  <button class = "btn" > Mwayen </button> 
  <button class = "btn" > Dwa </button> 
</div>

Metòd

$().bouton('toggle')

Baskile pouse eta a. Bay bouton an aparans ke li te aktive.

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

$().bouton('chaje')

Mete eta bouton an chaj - enfim bouton ak echanj tèks nan tèks chaje. Tèks chaje yo ta dwe defini sou eleman bouton an lè l sèvi avèk atribi done yo data-loading-text.

<button class = "btn" data-loading-text = "chaje bagay..." > ... </button>   

$().bouton('reset')

Reyajiste eta bouton - chanje tèks nan tèks orijinal la.

$().bouton(string)

Reyajiste eta bouton - echanj tèks nan nenpòt eta done defini tèks.

<button class = "btn" data-complete-text = "fini!" > ... </boutton>   
<script>
  $ ( '.btn' ). bouton ( 'konplè' )
</script>

Konsènan

Jwenn estil de baz ak sipò fleksib pou konpozan rabat tankou akòdeyon ak navigasyon.

* Egzije Plugin Tranzisyon yo dwe enkli.

Egzanp akòdeyon

Sèvi ak plugin efondreman an, nou bati yon senp widget style akòdeyon:

Sèvi ak bootstrap-collapse.js

Pèmèt via javascript:

$ ( ".effondreman" ). tonbe ()

Opsyon

Marke

Jis ajoute data-toggle="collapse"ak yon data-targeteleman pou otomatikman bay kontwòl yon eleman ki rabat. Atribi a data-targetaksepte yon seleksyon CSS pou aplike efondreman an. Asire ou ke ou ajoute klas collapsela nan eleman ki rabat. Si ou ta renmen li louvri defo, ajoute klas adisyonèl la in.

<button class = "btn btn-danger" data-toggle = "effondreman " data-target = "#demo" >   
  senp pliable
</boutton>
 
<div id = "demo" klas = "effondreman nan" > … </div>  

Metòd

.effondreman (opsyon)

Aktive kontni ou kòm yon eleman plim. Aksepte yon opsyon opsyonèl object.

$ ( '#myCollapsible' ). tonbe ({
  toggle : fo 
})

.effondre ('bale')

Baskile yon eleman ki rabat pou montre oswa kache.

.collapse('montre')

Montre yon eleman rabat.

.effondre ('kache')

Kache yon eleman ki rabat.

Evènman

Klas efondreman Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite efondreman.

$ ( '#myCollapsible' ). on ( 'kache' , fonksyon () {   
  // fè yon bagay…
})

Konsènan

Yon plugin jenerik pou monte bisiklèt nan eleman yo. Yon jwaye.

Egzanp Carousel

Gade diaporama ki anba a.

Premye etikèt miniature

Cras justo odio, dapibus ac facilitis in, egestas eget quam. Donec id elit non mi porta gravida at 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.

‹ ›

Sèvi ak bootstrap-carousel.js

Rele via javascript:

$ ( '.carousel' ). Carousel ()

Opsyon

Marke

Done atribi yo itilize pou konrol anvan ak pwochen yo. Tcheke egzanp maketing ki anba a.

<div id = "myCarousel" class = "glise Carousel" >  
  <!-- Atik Carousel -->
  <div class = "carousel-inner" > 
    <div class = "atik aktif" > … </div> 
    <div class = "atik" > … </div> 
    <div class = "atik" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Metòd

.carousel(opsyon)

Inisyalize Carousel la ak yon opsyon opsyonèl objectepi kòmanse monte bisiklèt nan atik yo.

$ ( '.carousel' ). Carousel ({
  entèval : 2000 
})

.carousel('sik')

Fè sik nan atik yo Carousel de goch a dwat.

.carousel('poz')

Sispann Carousel la soti nan monte bisiklèt nan atik yo.

.carousel(nimewo)

Cycles Carousel la nan yon ankadreman patikilye (0 ki baze sou, menm jan ak yon etalaj).

.carousel('prev')

Cycles pou atik anvan an.

.carousel('pwochen')

Cycles pou atik kap vini an.

Evènman

Klas Carousel Bootstrap la ekspoze de evènman pou branche nan fonksyonalite Carousel.

Konsènan

Yon plugin debaz, fasil pwolonje pou kreye byen vit tipaheads elegant ak nenpòt ki antre tèks fòm.

Egzanp

Kòmanse tape nan jaden ki anba a pou montre rezilta tape yo.

Sèvi ak bootstrap-typeahead.js

Rele typeahead via javascript:

$ ( '.typeahead' ). tape devan ()

Opsyon

Marke

Ajoute atribi done pou anrejistre yon eleman ak fonctionnalités typeahead.

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

Metòd

.typeahead(opsyon)

Inisyalize yon opinyon ak yon typeahead.