Javascript pou Bootstrap

Bay konpozan Bootstrap yo nan lavi-kounye a ak 12 grefon jQuery koutim.

Modal

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

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.

Scrollspy

Sèvi ak scrollspy pou mete ajou otomatikman lyen ki nan navbar ou a pou montre lyen aktif aktyèl la ki baze sou pozisyon woulo liv la.

Onglet baskile

Sèvi ak Plugin sa a pou fè tab ak grenn yo pi itil lè yo pèmèt yo pase nan fenèt tabulab nan kontni lokal yo.

Konsèy zouti

Yon nouvo pran sou jQuery Tipsy Plugin la, Tooltips pa konte sou imaj-yo itilize CSS3 pou animasyon ak done-atribi pou depo tit lokal yo.

Popovers *

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

* Egzije konsèy zouti yo dwe enkli

Mesaj alèt

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

Bouton

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

Tonbe

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

Carousel

Kreye yon jwaye nan nenpòt kontni ou vle bay yon diaporama entèaktif nan kontni.

Typeahead

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

Tranzisyon *

Pou efè tranzisyon senp, enkli bootstrap-transition.js yon fwa pou glise nan modal oswa fennen alèt.

* Obligatwa pou animasyon nan grefon

Tèt leve! Tout grefon javascript mande pou dènye vèsyon jQuery.

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.

Telechaje fichye a

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.

Lanse Demo modal

Sèvi ak bootstrap-modal

Rele modal la via javascript:

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

Opsyon

Non	kalite	default	deskripsyon
seri	booleyen	vre	Gen ladann yon eleman modal-backdrop. Altènativman, presize `static`pou yon seri ki pa fèmen modal la sou klike sou.
klavye	booleyen	vre	Fèmen modal la lè yo peze kle chape
montre	booleyen	vre	Montre modal la lè inisyalize.

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" id = "myModal" >  
  <div class = "modal-header" > 
    <a class = "close" data-dismiss = "modal" > × </a>  
    <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" > Fèmen </a>  
    <a href = "#" class = "btn btn-primary" > Sove chanjman yo </a>  
  </div>
</div>

Tèt leve! Si ou vle modal ou a anime nan ak soti, jis ajoute yon .fadeklas nan .modaleleman an (al gade nan Demo a pou wè sa a nan aksyon) epi enkli bootstrap-transition.js.

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.

Evènman	Deskripsyon
montre	Evènman sa a dife imedyatman lè yo `show`rele metòd egzanp lan.
montre	Evènman sa a te tire lè modal la te fè vizib itilizatè a (ap tann pou tranzisyon css fini).
kache	Evènman sa a te tire imedyatman lè yo `hide`te rele metòd egzanp lan.
kache	Evènman sa a revoke lè modal la fini kache pou itilizatè a (ap tann pou tranzisyon CSS fini).

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

Telechaje fichye a

Egzanp yo

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

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.

Tèt leve! Si ou vle, ou ka vize yon deroule espesifik lè w itilize data-target="#fat"oswa href="#fat".

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

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.

Telechaje fichye a

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!

@grès

Ad leggings keytar, kolasyon id atizay pati dolor labore. Pitchfork yr enim lo-fi avan yo vann out qui. Tumblr dwa bisiklèt fèm-a-tab tou sa. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui ou pwobableman pa tande pale de yo et cardigan trust fund culpa biodiesel wes anderson estetik. Nihil tattooed accusamus, kredi iwoni biodiesel keffiyeh atizan ullamco consequat.

@mdo

Veniam marfa moustache skateboard, adipisicing fugiat velit pitchfork bab. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat kat loko nisi, ea helvetica nulla carles. Kamyon manje kosby chanday tatouage, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non ekzèsisman estetik kis gentrify. Brooklyn adipisicing craft byer vis keytar deserunt.

youn

Occaecat commodo aliqua delectus. Fap craft byer deserunt skateboard ea. Lomo bicycle right adipisicing banh mi, velit ea are next level locavore single-orijin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS se adipisicing. Consectetur nisi DIY minim messenger bag. Kredi ansyen nan, durable delectus consectetur fanny pack iphone.

de

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapient synth id assumenda. Locavore sed helvetica cliche iwoni, thundercats ou pwobableman pa te tande pale de yo consequat hoodie gluten-free lo-fi fap aliquip. Travay elit placeat before they sold out, Terry Richardson proident brunch nesciunt kis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

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>

Tèt leve! Lyen Navbar yo dwe gen sib id ki ka rezoud. Pou egzanp, yon <a href="#home">home</a>dwe koresponn ak yon bagay nan dom la tankou <div id="home"></div>.

Opsyon

Non	kalite	default	deskripsyon
konpanse	nimewo	10	Piksèl pou konpanse nan tèt lè w ap kalkile pozisyon woulo liv la.

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

Telechaje fichye a

Onglet egzanp

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

Denim kri ou pwobableman pa te tande pale de yo pantalon pantalon jean Austin. Nesciunt tofou stumptown aliqua, rétro synth mèt netwaye. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit bouche retro kefiyeh dreamcatcher synth. Cosby sweater eu banh mi, ki irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar kri abako keffiyeh etsy atizay pati anvan yo vann soti mèt netwaye gluten-gratis kalma scenester freegan cosby chanday. Fanny pack portland seitan brikoleur, atizay pati locavore wolf cliche high life echo park Austin. Kredi vinil keffiyeh brikoleur salvia PBR, banh mi anvan yo te vann soti farm-to-table VHS viral locavore cosby chanday. Lomo wolf viral, moustach readymade thundercats keffiyeh byè atizanal marfa etik. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

Sèvi ak bootstrap-tab.js

Pèmèt onglet tab yo atravè javascript:

$ ( '#myTab' ). tab ( 'montre' )

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.

<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-target" oswa yon "href" ki vize yon node veso nan dom la.

<ul class = "nav nav-tabs" > 
  <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 () {  
    $ ( '.tabs a:last' ). tab ( 'montre' )
  })
</script>

Evènman

Evènman	Deskripsyon
montre	Evènman sa a dife sou tab montre, men anvan yo te montre nouvo tab la. Sèvi `event.target`ak ak `event.relatedTarget`pou vize tab aktif la ak tab aktif anvan an (si disponib) respektivman.
montre	Evènman sa a pran dife sou tab montre apre yo fin montre yon tab. Sèvi `event.target`ak ak `event.relatedTarget`pou vize tab aktif la ak tab aktif anvan an (si disponib) respektivman.

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

Telechaje fichye a

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

Non	kalite	default	deskripsyon
animasyon	booleyen	vre	aplike yon tranzisyon fade css nan konsèy la
plasman	fisèl\|fonksyon	'top'	ki jan yo pozisyon konsèy la - tèt \| anba \| kite \| dwa
seleksyon	fisèl	fo	Si yo bay yon seleksyon, objè konsèy yo pral delege nan sib yo espesifye.
tit	fisèl \| fonksyon	''	valè tit default si tag `title` pa prezan
deklanche	fisèl	'plane'	kijan tooltip deklanche - hover \| konsantre \| manyèl
reta	nimewo \| objè	0	reta montre ak kache konsèy zouti a (ms) Si yo bay yon nimewo, reta aplike pou tou de kache/montre Estrikti objè se:`delay: { show: 500, hide: 100 }`

Tèt leve! Opsyon pou konsèy endividyèl yo ka altènativman espesifye atravè itilizasyon atribi done yo.

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

Telechaje fichye a

Egzanp hover popover

Pase sou bouton an pou deklanche popover a.

hover pou popover

Sèvi ak bootstrap-popover.js

Pèmèt popovers via javascript:

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

Opsyon

Non	kalite	default	deskripsyon
animasyon	booleyen	vre	aplike yon tranzisyon fade css nan konsèy la
plasman	fisèl\|fonksyon	'dwa'	ki jan yo pozisyon popover a - tèt \| anba \| kite \| dwa
seleksyon	fisèl	fo	si yo bay yon seleksyon, objè konsèy yo pral delege nan sib yo espesifye
deklanche	fisèl	'plane'	kijan tooltip deklanche - hover \| konsantre \| manyèl
tit	fisèl \| fonksyon	''	valè tit default si atribi `title` pa prezan
kontni	fisèl \| fonksyon	''	valè kontni default si atribi `data-content` pa prezan
reta	nimewo \| objè	0	reta montre ak kache popover a (ms) Si yo bay yon nimewo, reta aplike pou tou de kache/montre Estrikti objè se:`delay: { show: 500, hide: 100 }`

Tèt leve! Opsyon pou popovers endividyèl yo ka altènativman espesifye atravè itilizasyon atribi done yo.

Marke

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

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.

Telechaje

Egzanp alèt

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

× Sentespri guacamole! Pi bon tcheke ou tèt ou, ou pa gade twò bon.

Oh menen! Ou gen yon erè!

Chanje sa ak sa epi eseye ankò. Men, li pa gen okenn komodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Pran aksyon sa a Oswa fè sa

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.

Evènman	Deskripsyon
fèmen	Evènman sa a dife imedyatman lè yo `close`rele metòd egzanp lan.
fèmen	Evènman sa a revoke lè alèt la fèmen (ap tann tranzisyon css fini).

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

Telechaje fichye a

Egzanp itilizasyon

Sèvi ak Plugin bouton pou eta ak baskil.

Stateful
Single baskile
Case
Radyo

Sèvi ak bootstrap-button.js

Aktive bouton via javascript:

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

Tèt leve! Ou ka pèmèt oto baskile nan yon bouton lè w itilize data-toggleatribi a.

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

Tèt leve! Firefox pèsiste eta andikape nan tout chaj paj yo . Yon solisyon pou sa a se sèvi ak autocomplete="off".

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

Telechaje fichye a

Egzanp akòdeyon

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

Atik gwoup ki plizye #1

Anim pariatur cliche reprehenderit, enim eiusmod high life akize Terry Richardson ak kalma. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamyon manje kinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, yo mete yon zwazo sou li kalma sèl-orijin kafe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur bouche vice lomo. Leggings occaecat atizanal byè fèm-a-tab, anvan tout koreksyon abako ayestetik sent nesciunt ou pwobableman pa te tande pale de yo accusamus labore dirab VHS.

Atik #2 Gwoup Repliable

Atik Gwoup # 3 ki ka kraze

Sèvi ak bootstrap-collapse.js

Pèmèt via javascript:

$ ( ".effondreman" ). tonbe ()

Opsyon

Non	kalite	default	deskripsyon
paran	seleksyon	fo	Si seleksyon an, lè sa a tout eleman plimakab anba paran espesifye yo pral fèmen lè yo montre atik sa a pliable. (menm jan ak konpòtman akòdeyon tradisyonèl)
baskile	booleyen	vre	Aktivite eleman ki rabat sou envokasyon

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>

Tèt leve! Pou ajoute jesyon gwoup ki sanble ak akòdeyon nan yon kontwòl ki kapab retire, ajoute atribi done yo data-parent="#selector". Al gade nan Demo a pou wè sa a an aksyon.

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.

Evènman	Deskripsyon
montre	Evènman sa a dife imedyatman lè yo `show`rele metòd egzanp lan.
montre	Evènman sa a revoke lè yon eleman tonbe vin vizib pou itilizatè a (ap tann pou tranzisyon CSS fini).
kache	Evènman sa a te tire imedyatman lè yo `hide`te rele metòd la.
kache	Evènman sa a revoke lè yon eleman tonbe kache nan men itilizatè a (ap tann pou tranzisyon CSS fini).

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

Konsènan

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

Telechaje fichye a

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.

Dezyèm 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.

Twazyèm 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.

‹ ›

Tèt leve! Lè w ap aplike Carousel sa a, retire imaj nou te bay yo epi ranplase yo pa pwòp ou yo.

Sèvi ak bootstrap-carousel.js

Rele via javascript:

$ ( '.carousel' ). Carousel ()

Opsyon

Non	kalite	default	deskripsyon
entèval	nimewo	5000	Kantite tan pou retade ant otomatikman monte bisiklèt yon atik.
pran yon poz	fisèl	"plane"	Fè yon poz monte bisiklèt la nan Carousel la sou mouseenter epi rekòmanse monte bisiklèt la nan Carousel la sou mouseleave.

Marke

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

<div id = "myCarousel" class = "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.

Evènman	Deskripsyon
glise	Evènman sa a dife imedyatman lè yo `slide`envoke metòd egzanp lan.
glise	Evènman sa a revoke lè Carousel la fini tranzisyon glise li.

Konsènan

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

Telechaje fichye a

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

Non	kalite	default	deskripsyon
sous	etalaj	[ ]	Sous done pou rechèch kont.
atik yo	nimewo	8	Kantite maksimòm atik pou montre nan deroule a.
matcher	fonksyon	ka ensansib	Metòd yo itilize pou detèmine si yon rechèch matche ak yon atik. Aksepte yon sèl agiman, `item`kont ki teste rechèch la. Aksede rechèch aktyèl la avèk `this.query`. Retounen yon boolean `true`si rechèch se yon matche ak.
triye	fonksyon	matche egzak, ka sansib, ka ensansib	Metòd yo itilize pou klase rezilta autocomplete. Aksepte yon sèl agiman `items`epi li gen sijè ki abòde lan egzanp typeahead la. Referans rechèch aktyèl la ak `this.query`.
en	fonksyon	mete aksan sou tout alimèt default	Metòd yo itilize pou mete aksan sou rezilta autocomplete. Aksepte yon sèl agiman `item`epi li gen sijè ki abòde lan egzanp typeahead la. Ta dwe retounen html.

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.

Plugins jQuery Yon douzèn Plugin Bootstrap pou w kòmanse

Popovers *

Tranzisyon *

Modal bootstrap-modal.js

Konsènan modal yo

Egzanp estatik

Tèt modal

Live Demo

Modèl Tit

Tèks nan yon modal

Popover nan yon modal

Konsèy zouti nan yon modal

Tèks ki debòde pou montre defile si ou vle

Sèvi ak bootstrap-modal

Opsyon

Marke

Metòd

.modal(opsyon)

.modal('toggle')

.modal('montre')

.modal('kache')

Evènman

Dropdowns bootstrap-dropdown.js

Konsènan dropdowns

Egzanp yo

Sèvi ak bootstrap-dropdown.js

Marke

Metòd

$().dropdown()

ScrollSpy bootstrap-scrollspy.js

Egzanp navbar ak scrollspy

@grès

@mdo

youn

de

three

Sèvi ak bootstrap-scrollspy.js

Marke

Opsyon

Onglet baskile bootstrap-tab.js

Onglet egzanp

Sèvi ak bootstrap-tab.js

Marke

Metòd

$().tab

Evènman

Ti konsèy bootstrap- tooltip.js

Konsènan Tooltips

Egzanp itilizasyon Tooltips

Sèvi ak bootstrap-tooltip.js

Opsyon

Marke

Metòd

$().tooltip(opsyon)

.tooltip('montre')

.tooltip('kache')

.tooltip('toggle')

Popovers bootstrap-popover.js

Konsènan popovers

Egzanp hover popover

Sèvi ak bootstrap-popover.js

Opsyon

Marke

Metòd

$().popover(opsyon)

.popover('montre')

.popover('kache')

.popover('toggle')

Mesaj alèt bootstrap-alert.js

Konsènan alèt

Egzanp alèt

Oh menen! Ou gen yon erè!

Sèvi ak bootstrap-alert.js

Marke

Metòd

$().alèt()

.alèt('fèmen')

Evènman

Bouton bootstrap-button.js

Konsènan