Javascript fyrir Bootstrap

Lífgaðu íhlutum Bootstrap til lífsins - nú með 12 sérsniðnum jQuery viðbótum.

Modals

Straumlínulöguð, en sveigjanleg, taka á hefðbundnu javascript modal viðbótinni með aðeins lágmarks nauðsynlegri virkni og snjöllum sjálfgefnum stillingum.

Dropdowns

Bættu fellivalmyndum við næstum hvað sem er í Bootstrap með þessari einföldu viðbót. Bootstrap býður upp á fullan stuðning í fellivalmyndum á navbar, flipa og pillum.

Scrollspy

Notaðu scrollspy til að uppfæra tenglana á siglingastikunni sjálfkrafa til að sýna núverandi virka hlekk byggt á skrunstöðu.

Breytanlegir flipar

Notaðu þessa viðbót til að gera flipa og pillur gagnlegri með því að leyfa þeim að skipta í gegnum flipa með staðbundnu efni.

Verkfæraráð

Ný útgáfa af jQuery Tipsy viðbótinni, Tooltips treysta ekki á myndir - þeir nota CSS3 fyrir hreyfimyndir og gagnaeiginleika fyrir staðbundna titlageymslu.

Popovers *

Bættu litlum yfirlagi af efni, eins og á iPad, við hvaða þátt sem er til að hýsa aukaupplýsingar.

* Krefst þess að verkfæraráð séu innifalin

Viðvörunarskilaboð

Viðvörunarviðbótin er pínulítill flokkur til að bæta náinni virkni við tilkynningar.

Hnappar

Gerðu meira með hnöppum. Stjórna hnappastöður eða búa til hópa af hnöppum fyrir fleiri hluti eins og tækjastikur.

Hrun

Fáðu grunnstíl og sveigjanlegan stuðning fyrir samanbrjótanlega hluti eins og harmonikkur og siglingar.

Hringekja

Búðu til skemmtiferð um hvaða efni sem þú vilt bjóða upp á gagnvirka myndasýningu með efni.

Skrifaðu á undan

Grunnviðbót, sem auðvelt er að útvíkka, til að búa til glæsilega innslátt á fljótlegan hátt með hvaða textainnslátt sem er.

Umskipti *

Til að fá einföld umbreytingaráhrif skaltu láta bootstrap-transition.js fylgja einu sinni til að renna inn formum eða hverfa út viðvaranir.

* Nauðsynlegt fyrir hreyfimyndir í viðbótum

Höfuð upp! Öll javascript viðbætur þurfa nýjustu útgáfuna af jQuery.

Um módel

Straumlínulöguð, en sveigjanleg, taka á hefðbundnu javascript modal viðbótinni með aðeins lágmarks nauðsynlegri virkni og snjöllum sjálfgefnum stillingum.

Hlaða niður skrá

Statískt dæmi

Hér að neðan er kyrrstætt myndað form.

Sýning í beinni

Skiptu um form með javascript með því að smella á hnappinn hér að neðan. Það mun renna niður og hverfa inn efst á síðunni.

Ræstu demo modal

Notar bootstrap-modal

Hringdu í modal í gegnum javascript:

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

Valmöguleikar

Nafn	tegund	sjálfgefið	lýsingu
bakgrunn	Boolean	satt	Inniheldur modal-bakgrunnsþátt. Að öðrum kosti, tilgreindu `static`fyrir bakgrunn sem lokar ekki forminu þegar smellt er.
lyklaborð	Boolean	satt	Lokar forminu þegar ýtt er á escape takkann
sýna	Boolean	satt	Sýnir aðferðina þegar hann er frumstilltur.

Markup

Þú getur virkjað form á síðunni þinni auðveldlega án þess að þurfa að skrifa eina línu af javascript. Stilltu bara data-toggle="modal"á stjórnunareiningu með data-target="#foo"eða href="#foo"sem samsvarar auðkenni mótunarþáttar, og þegar smellt er á það mun það ræsa mótalinn þinn.

Einnig, til að bæta valmöguleikum við formtilvikið þitt, skaltu bara láta þá fylgja sem viðbótargagnaeiginleika á annaðhvort stjórnhlutann eða mótunarmerkinguna sjálfa.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Ræsa Modal </a>

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <a class = "close" data-dismiss = "modal" > × </a>  
    <h3> Modal haus </h3>
  </div>
  <div class = "modal-body" > 
    <p> Einn fínn líkami… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Loka </a>  
    <a href = "#" class = "btn btn-primary" > Vista breytingar </a>  
  </div>
</div>

Höfuð upp! Ef þú vilt að modalinn þinn hreyfi sig inn og út skaltu bara bæta .fadeflokki við .modalþáttinn (sjá kynninguna til að sjá þetta í aðgerð) og láta bootstrap-transition.js fylgja með.

Aðferðir

.modal(valkostir)

Virkjar efnið þitt sem form. Samþykkir valfrjálsa valkosti object.

$ ( '#myModal' ). módel ({
  lyklaborð : rangt 
})

.modal('toggle')

Skiptir handvirkt um form.

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

.modal('sýning')

Opnar form handvirkt.

$ ( '#myModal' ). modal ( 'sýning' )

.modal('fela')

Felur form handvirkt.

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

Viðburðir

Modal flokkur Bootstrap afhjúpar nokkra atburði til að tengja við formlega virkni.

Viðburður	Lýsing
sýna	Þessi atburður ræsir strax þegar `show`tilviksaðferðin er kölluð.
Sýnt	Þessi atburður er ræstur þegar modal hefur verið gert sýnilegt notanda (mun bíða eftir að css umbreytingum ljúki).
fela sig	Þessi atburður er ræstur strax þegar `hide`tilviksaðferðin hefur verið kölluð.
falið	Þessi atburður er ræstur þegar modal hefur lokið við að vera falið fyrir notanda (mun bíða eftir að css umbreytingum ljúki).

$ ( '#myModal' ). á ( 'falinn' , fall () {   
  // gera eitthvað…
})

Um fellilista

Bættu fellivalmyndum við næstum hvað sem er í Bootstrap með þessari einföldu viðbót. Bootstrap býður upp á fullan stuðning í fellivalmyndum á navbar, flipa og pillum.

Hlaða niður skrá

Dæmi

Smelltu á fellivalmyndartenglana í navstikunni og pillurnar hér að neðan til að prófa fellilistann.

Með því að nota bootstrap-dropdown.js

Hringdu í fellilistana í gegnum javascript:

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

Markup

Til að bæta fellilistanum fljótt við hvaða þátt sem er skaltu bara bæta við data-toggle="dropdown"og allir gildir fellivalmyndir verða sj��lfkrafa virkjaðir.

Höfuð upp! Þú getur valfrjálst miðað á tiltekna fellilista með því að nota data-target="#fat"eða href="#fat".

<ul class = "nav nav-pillur" > 
  <li class = "virkur" ><a href = "#" > Venjulegur hlekkur </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Fellilisti
      <b class = "caret" ></b> 
    </a>
    <ul class = "fellivalmynd" > 
      <li><a href = "#" > Aðgerð </a></li> 
      <li><a href = "#" > Önnur aðgerð </a></li> 
      <li><a href = "#" > Eitthvað annað hér </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Aðskilinn hlekkur </a></li> 
    </ul>
  </li>
  ...
</ul>

Aðferðir

$().dropdown()

Forritaforrit til að virkja valmyndir fyrir tiltekna siglingastiku eða flipaleiðsögn.

ScrollSpy viðbótin er til að uppfæra siglingamarkmið sjálfkrafa á grundvelli skrunstöðu.

Hlaða niður skrá

Dæmi um navbar með scrollspy

Skrunaðu svæðið hér að neðan og horfðu á leiðsöguuppfærsluna. Undirliðir í fellilistanum verða einnig auðkenndir. Reyna það!

@feiti

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi áður en þeir seldust upp qui. Tumblr reiðhjólaréttindi frá bænum til borðs hvað sem er. Anim keffiyeh carles peysa. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby peysa lomo gallabuxur, Williamsburg hettupeysa lágmark qui þú hefur líklega ekki heyrt um þær og cardigan trust fund culpa biodiesel wes anderson fagurfræðilegu. Nihil húðflúrað accusamus, cred kaldhæðni lífdísil keffiyeh handverksmaður ullamco consequat.

@mdo

Veniam Marfa yfirvaraskeggs hjólabretti, fitandi fugiat velit hágaffelskegg. Freegan skegg aliqua cupidatat mcsweeney's vero. Cupidatat fjögur loko nisi, ea helvetica nulla carles. Tattooed cosby peysu matarbíll, Mcsweeney's quis non freegan vínyl. Lo-fi wes anderson +1 sartorial. Carles ekki fagurfræðileg æfing quis gentrify. Brooklyn fóðrandi föndurbjór vara keytar eyðimerkur.

einn

Occaecat commodo aliqua delectus. Fap craft beer deserunt hjólabretti ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS er adipisicing. Consectetur nisi DIY minim senditaska. Cred fyrrverandi í, sjálfbær delectus consectetur fanny pack iphone.

tveir

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 blogg, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica klisja kaldhæðni, thundercats þú hefur líklega ekki heyrt um þá consequat hettupeysa glútenlaus lo-fi fap aliquip. Labor elit placeat áður en þeir seldust upp, Terry richardson proident brunch nesciunt quis cosby peysa pariatur keffiyeh ut helvetica artisan. Cardigan handverksbjór seitan tilbúinn velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Með því að nota bootstrap-scrollspy.js

Hringdu í scrollspy í gegnum javascript:

$ ( '#navbar' ). scrollspy ()

Markup

Til að bæta scrollspy hegðun auðveldlega við toppstikuna þína skaltu bara bæta data-spy="scroll"við þáttinn sem þú vilt njósna um (oftast væri þetta líkaminn).

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

Höfuð upp! Navbar tenglar verða að hafa leysanleg auðkennismarkmið. Til dæmis, a <a href="#home">home</a>verður að samsvara einhverju í dom eins og <div id="home"></div>.

Valmöguleikar

Nafn	tegund	sjálfgefið	lýsingu
á móti	númer	10	Dílar til að vega upp frá toppi þegar reiknað er út stöðu flettu.

Þessi viðbót bætir við skjótum, kraftmiklum flipa og pilla virkni til að skipta um staðbundið efni.

Hlaða niður skrá

Dæmi flipar

Smelltu á flipana hér að neðan til að skipta á milli falinna glugga, jafnvel með fellivalmyndum.

Hrátt denim þú hefur líklega ekki heyrt um þær gallabuxur Austin. Nesciunt tofu stumptown aliqua, retro synth master hreinsun. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit Butcher Retro Keffiyeh draumafangari synth. Cosby peysa eu banh mi, qui irure Terry Richardson fyrrverandi smokkfiskur. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan amerískur fatnaður, slátrari 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 raw denim keffiyeh etsy list partý áður en þeir seldust upp master cleanse glútenfrír squid scenester freegan cosby peysa. Fanny pack portland seitan DIY, listaveisla locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi áður en þeir seldu upp VHS veiru locavore cosby peysu frá bæ til borðs. Lomo wolf veiru, yfirvaraskegg tilbúnir thundercats keffiyeh craft beer marfa siðferðileg. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

Með því að nota bootstrap-tab.js

Virkjaðu flipa sem hægt er að nota með javascript:

$ ( '#myTab' ). flipi ( 'sýna' )

Markup

Þú getur virkjað flipa eða pilluleiðsögn án þess að skrifa nein javascript með því einfaldlega að tilgreina data-toggle="tab"eða data-toggle="pill"á frumefni.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Heim </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Prófíll </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Skilaboð </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Stillingar </a></li>  
</ul>

Aðferðir

$().flipi

Virkjar flipaþátt og innihaldsílát. Tab ætti að hafa annað hvort 'data-target' eða 'href' sem miðar á gámahnút í dom.

<ul class = "nav nav-tabs" > 
  <li class = "active" ><a href = "#home" > Heim </a></li>  
  <li><a href = "#profile" > Prófíll </a></li> 
  <li><a href = "#messages" > Skilaboð </a></li> 
  <li><a href = "#settings" > Stillingar </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "heima" > ... </div>  
  <div class = "tab-pane" id = "prófíl" > ... </div>  
  <div class = "tab-pane" id = "skilaboð" > ... </div>  
  <div class = "tab-pane" id = "stillingar" > ... </div>  
</div>
 
<handrit>
  $ ( fall () {  
    $ ( '.tabs a:last' ). flipi ( 'sýna' )
  })
</script>

Viðburðir

Viðburður	Lýsing
sýna	Þessi atburður ræsir á flipasýningu, en áður en nýi flipi hefur verið sýndur. Notaðu `event.target`og `event.relatedTarget`til að miða á virka flipann og fyrri virka flipann (ef tiltækur) í sömu röð.
Sýnt	Þessi atburður ræsir á flipasýningu eftir að flipi hefur verið sýndur. Notaðu `event.target`og `event.relatedTarget`til að miða á virka flipann og fyrri virka flipann (ef tiltækur) í sömu röð.

$ ( 'a[data-toggle="tab"]' ). á ( 'sýnt' , fall ( e ) {   
  e . target // virkjaður flipi
  e . relatedTarget // fyrri flipi
})

Um Tooltips

Innblásin af frábæru jQuery.tipsy viðbótinni skrifað af Jason Frame; Verkfæraráð eru uppfærð útgáfa, sem treystir ekki á myndir, notar css3 fyrir hreyfimyndir og gagnaeiginleika fyrir staðbundna titlageymslu.

Hlaða niður skrá

Dæmi um notkun Tooltips

Farðu yfir tenglana hér að neðan til að sjá verkfæraleiðbeiningar:

Með því að nota bootstrap-tooltip.js

Kveiktu á tóli með javascript:

$ ( '#dæmi' ). verkfæraráð ( valkostir )

Valmöguleikar

Nafn	tegund	sjálfgefið	lýsingu
fjör	Boolean	satt	notaðu css fade umskipti á tólabendinguna
staðsetningu	streng\|fall	'topp'	hvernig á að staðsetja tólið - efst \| botn \| vinstri \| rétt
veljara	strengur	rangt	Ef valkostur er til staðar verður verkfæravísahlutum úthlutað til tilgreindra skotmarka.
titill	strengur \| virka	''	sjálfgefið titilgildi ef `title` tag er ekki til staðar
kveikja	strengur	'sveima'	hvernig ábending er sett af stað - sveima \| fókus \| handbók
seinkun	númer \| mótmæla	0	seinka að sýna og fela verkfæraráð (ms) Ef númer er gefið upp er seinkun beitt á bæði fela/sýna Uppbygging hlutar er:`delay: { show: 500, hide: 100 }`

Höfuð upp! Að öðrum kosti er hægt að tilgreina valkosti fyrir einstakar verkfæraábendingar með því að nota gagnaeiginleika.

Markup

Af frammistöðuástæðum eru Tooltip og Popover gagnaforritin valin. Ef þú vilt nota þá skaltu bara tilgreina valmöguleika.

<a href = "#" rel = "tooltip" title = "fyrsta verkfæraráð" > sveima yfir mig </a>

Aðferðir

$().tooltip(valkostir)

Hengir verkfæraleiðbeiningum við einingarsafn.

.tooltip('sýna')

Sýnir verkfæraábendingu frumefnis.

$ ( '#þáttur' ). tooltip ( 'sýna' )

.tooltip('fela')

Felur ábendingu frumefnis.

$ ( '#þáttur' ). tooltip ( 'fela' )

.tooltip('toggle')

Breytir ábendingum frumefnis.

$ ( '#þáttur' ). tooltip ( 'skipta' )

Um popovers

Bættu litlum yfirlagi af efni, eins og á iPad, við hvaða þátt sem er til að hýsa aukaupplýsingar.

* Krefst þess að Tooltip sé innifalið

Hlaða niður skrá

Dæmi með sveimu um popover

Færðu bendilinn yfir hnappinn til að kveikja á popover.

sveima fyrir popover

Með því að nota bootstrap-popover.js

Virkja sprettiglugga með javascript:

$ ( '#dæmi' ). popover ( valkostir )

Valmöguleikar

Nafn	tegund	sjálfgefið	lýsingu
fjör	Boolean	satt	notaðu css fade umskipti á tólabendinguna
staðsetningu	streng\|fall	'rétt'	hvernig á að staðsetja popover - efst \| botn \| vinstri \| rétt
veljara	strengur	rangt	ef veljari er til staðar, verða verkfærishlutir framseldir til tilgreindra miða
kveikja	strengur	'sveima'	hvernig ábending er sett af stað - sveima \| fókus \| handbók
titill	strengur \| virka	''	sjálfgefið titilgildi ef „title“ eigind er ekki til staðar
efni	strengur \| virka	''	sjálfgefið innihaldsgildi ef eigind „data-content“ er ekki til staðar
seinkun	númer \| mótmæla	0	seinka að sýna og fela sprettigluggann (ms) Ef númer er gefið upp er seinkun beitt á bæði fela/sýna Uppbygging hlutar er:`delay: { show: 500, hide: 100 }`

Höfuð upp! Að öðrum kosti er hægt að tilgreina valkosti fyrir einstaka sprettiglugga með því að nota gagnaeiginleika.

Markup

Af frammistöðuástæðum eru Tooltip og Popover gagnaforritin valin. Ef þú vilt nota þá skaltu bara tilgreina valmöguleikann.

Aðferðir

$().popover(valkostir)

Frumstillir sprettiglugga fyrir þáttasafn.

.popover('sýna')

Afhjúpar þætti sem birtist.

$ ( '#þáttur' ). popover ( 'sýning' )

.popover('fela')

Felur frumefnisskjá.

$ ( '#þáttur' ). popover ( 'fela' )

.popover('toggle')

Breytir yfirlit yfir þætti.

$ ( '#þáttur' ). popover ( 'skipta' )

Um viðvaranir

Viðvörunarviðbótin er pínulítill flokkur til að bæta náinni virkni við tilkynningar.

Sækja

Dæmi um viðvaranir

Viðvörunarviðbótin virkar á venjulegum viðvörunarskilaboðum og loka fyrir skilaboð.

× Heilagur guacamole! Best að athuga sjálfan þig, þú lítur ekki of vel út.

Ó snappið! Þú fékkst villu!

Breyttu hinu og þessu og reyndu aftur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Taktu þessa aðgerð Eða gerðu þetta

Með því að nota bootstrap-alert.js

Virkjaðu frávísun á viðvörun með javascript:

$ ( ".viðvörun" ). viðvörun ()

Markup

Bættu bara við data-dismiss="alert"lokunarhnappinn þinn til að gefa sjálfkrafa viðvörunarlokunarvirkni.

<a class = "close" data-dismiss = "alert" href = "#" > × </a>

Aðferðir

$().alert()

Umlykur allar viðvaranir með náinni virkni. Til að láta tilkynningar þínar birtast þegar þær eru lokaðar skaltu ganga úr skugga um að þær hafi .fadeog .inflokkinn þegar notaður fyrir þær.

.alert('loka')

Lokar viðvörun.

$ ( ".viðvörun" ). viðvörun ( 'loka' )

Viðburðir

Viðvörunarflokkur Bootstrap afhjúpar nokkra atburði til að tengjast viðvörunarvirkni.

Viðburður	Lýsing
loka	Þessi atburður ræsir strax þegar `close`tilviksaðferðin er kölluð.
lokað	Þessi atburður er ræstur þegar viðvöruninni hefur verið lokað (bíður eftir að CSS-breytingum ljúki).

$ ( '#mín-viðvörun' ). binda ( 'lokað' , fall () {   
  // gera eitthvað…
})

Um

Gerðu meira með hnöppum. Stjórna hnappastöður eða búa til hópa af hnöppum fyrir fleiri hluti eins og tækjastikur.

Hlaða niður skrá

Dæmi um notkun

Notaðu hnappaviðbótina fyrir ríki og rofa.

Staðhæft
Einn rofi
Gátreitur
Útvarp

Með því að nota bootstrap-button.js

Virkja hnappa með javascript:

$ ( '.tabs' ). hnappur ()

Markup

Gagnaeiginleikar eru óaðskiljanlegur í hnappaviðbótinni. Skoðaðu dæmikóðann hér að neðan fyrir hinar ýmsu álagningargerðir.

<!-- Bættu við data-toggle="hnappi" til að virkja skipta á einum hnappi -->
<button class = "btn" data-toggle = "button" > Single Toggle </button>  
 
<!-- Bættu við data-toggle="buttons-checkbox" til að skipta um gátreitastíl á btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Vinstri </button> 
  <button class = "btn" > Mið </button> 
  <button class = "btn" > Hægri </button> 
</div>
 
<!-- Bættu við data-toggle="buttons-radio" til að skipta um útvarpsstíl á btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Vinstri </button> 
  <button class = "btn" > Mið </button> 
  <button class = "btn" > Hægri </button> 
</div>

Aðferðir

$().button('skipta')

Skiptir á ýtastöðu. Gefur hnappinum það útlit að hann hafi verið virkjaður.

Höfuð upp! Þú getur virkjað sjálfvirka skiptingu á hnappi með því að nota data-toggleeigindina.

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

$().button('hleðsla')

Stillir stöðu hnapps á hleðslu - slekkur á hnappi og breytir texta yfir í hleðslutexta. Hleðslutexti ætti að vera skilgreindur á hnappahlutanum með því að nota gagnaeiginleikann data-loading-text.

<button class = "btn" data-loading-text = "hleður efni..." > ... </button>

Höfuð upp! Firefox heldur áfram óvirku ástandi yfir síðuhleðslu . Lausn fyrir þessu er að nota autocomplete="off".

$().button('endurstilla')

Endurstillir stöðu hnapps - skiptir texta yfir í upprunalegan texta.

$().hnappur(strengur)

Endurstillir hnappastöðu - skiptir um texta í hvaða gagnaskilgreinda textastöðu sem er.

<button class = "btn" data-complete-text = "lokið!" > ... </hnappur>   
<handrit>
  $ ( '.btn' ). hnappur ( 'lokið' )
</script>

Um

Fáðu grunnstíl og sveigjanlegan stuðning fyrir samanbrjótanlega hluti eins og harmonikkur og siglingar.

Hlaða niður skrá

Dæmi um harmonikku

Með því að nota samrunaviðbótina bjuggum við til einfalda harmonikkustílgræju:

Samanbrjótanlegt hópatriði #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad smokkfiski. 3 Wolf moon officia aut, non cupidatat hjólabretti dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua setja fugl á það smokkfiskur einn uppruna kaffi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur Butcher Vice Lomo. Leggings occaecat handverksbjór frá bæ til borðs, hrár denim fagurfræðilegur synth nesciunt þú hefur líklega ekki heyrt um þá accusamus labore sjálfbær VHS.

Samanbrjótanlegt hópatriði #2

Samanbrjótanlegur hópur #3

Með því að nota bootstrap-collapse.js

Virkja með javascript:

$ ( ".collapse" ). hrynja ()

Valmöguleikar

Nafn	tegund	sjálfgefið	lýsingu
foreldri	veljara	rangt	Ef veljara verður öllum samanbrjótanlegum þáttum undir tilgreindu foreldri lokað þegar þetta samanbrjótanlega atriði er sýnt. (svipað og hefðbundin harmonikkuhegðun)
skipta	Boolean	satt	Kveikir á samanbrjótanlegu þættinum við ákall

Markup

Bættu bara við data-toggle="collapse"og a data-targettil þáttur til að úthluta sjálfkrafa stjórn á fellanlegum þætti. Eigindin data-targetsamþykkir css val til að beita samdrættinum á. Vertu viss um að bæta bekknum collapsevið samanbrjótanlega þáttinn. Ef þú vilt að það opni sjálfgefið skaltu bæta við viðbótarflokknum in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  einfalt samanbrjótanlegt
</hnappur>
 
<div id = "demo" class = "hrynja inn" > … </div>

Höfuð upp! Til að bæta harmónikkulíkri hópstjórnun við samanbrjótanlega stýringu skaltu bæta við gagnaeigindinni data-parent="#selector". Skoðaðu kynninguna til að sjá þetta í aðgerð.

Aðferðir

.collapse(valkostir)

Virkjar efnið þitt sem samanbrjótanlegan þátt. Samþykkir valfrjálsa valkosti object.

$ ( '#my Collapsible' ). hrynja ({
  skipta : rangt 
})

.collapse('toggle')

Skiptir um að fellanlegur þáttur sé sýndur eða falinn.

.collapse('show')

Sýnir samanbrjótanlegan þátt.

.collapse('fela')

Felur samanbrjótanlegt frumefni.

Viðburðir

Hrunflokkur Bootstrap afhjúpar nokkra atburði til að tengja sig við hrunvirkni.

Viðburður	Lýsing
sýna	Þessi atburður ræsir strax þegar `show`tilviksaðferðin er kölluð.
Sýnt	Þessi atburður er ræstur þegar hrunþáttur hefur verið gerður sýnilegur notanda (mun bíða eftir að css umbreytingum ljúki).
fela sig	Þessi atburður er ræstur strax þegar `hide`aðferðin hefur verið kölluð.
falið	Þessi atburður er ræstur þegar hrunþáttur hefur verið falinn fyrir notandanum (bíður eftir að css umbreytingum ljúki).

$ ( '#my Collapsible' ). á ( 'falinn' , fall () {   
  // gera eitthvað…
})

Um

Almenn viðbót til að hjóla í gegnum þætti. Gleðileikur.

Hlaða niður skrá

Dæmi um hringekju

Horfðu á myndasýninguna hér að neðan.

Fyrsta smámyndamerki

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.

Annað smámyndamerki

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.

Þriðja smámyndamerki

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.

‹ ›

Höfuð upp! Þegar þú innleiðir þessa hringekju skaltu fjarlægja myndirnar sem við höfum veitt og skipta þeim út fyrir þínar.

Að nota bootstrap-carousel.js

Hringdu í gegnum javascript:

$ ( '.carousel' ). hringekja ()

Valmöguleikar

Nafn	tegund	sjálfgefið	lýsingu
bil	númer	5000	Tíminn sem líður á milli þess að hlutur er hjólaður sjálfkrafa.
hlé	strengur	"sveima"	Gerir hlé á hjólreiðum hringekjunnar á músinni og heldur áfram hjólreiðum hringekjunnar á músarhólfi.

Markup

Gagnaeiginleikar eru notaðir fyrir fyrri og næstu stýringar. Skoðaðu sýnishornið hér að neðan.

<div id = "myCarousel" class = "carousel" >  
  <!-- Hringekjuhlutir -->
  <div class = "carousel-inner" > 
    <div class = "virkur hlutur" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "næsta" > › </a>   
</div>

Aðferðir

.carousel(valkostir)

Frumstillir hringekjuna með valkvæðum valkostum objectog byrjar að hjóla í gegnum hluti.

$ ( '.carousel' ). hringekkja ({
  bil : 2000 
})

.carousel('hringrás')

Hringur í gegnum hringekjuhlutina frá vinstri til hægri.

.carousel('hlé')

Kemur í veg fyrir að hringekjan hjóli í gegnum hluti.

.carousel(númer)

Hringir hringekjuna að tilteknum ramma (miðað við 0, svipað og fylki).

.carousel('prev')

Fer að fyrra atriði.

.carousel('næsta')

Fer í næsta atriði.

Viðburðir

Hringekjuflokkur Bootstrap afhjúpar tvo atburði til að tengjast hringekjuvirkni.

Viðburður	Lýsing
renna	Þessi atburður ræsir strax þegar `slide`tilviksaðferðin er kölluð fram.
renndi	Þessi atburður er ræstur þegar hringekjan hefur lokið rennibraut sinni.

Um

Grunnviðbót, sem auðvelt er að útvíkka, til að búa til glæsilega innslátt á fljótlegan hátt með hvaða textainnslátt sem er.

Hlaða niður skrá

Dæmi

Byrjaðu að slá inn í reitinn hér að neðan til að birta niðurstöðurnar.

Með því að nota bootstrap-typeahead.js

Hringdu í typeahead í gegnum javascript:

$ ( '.typeahead' ). slá fram ()

Valmöguleikar

Nafn	tegund	sjálfgefið	lýsingu
heimild	fylki	[ ]	Gagnagjafinn til að spyrjast fyrir á móti.
hlutir	númer	8	Hámarksfjöldi hluta til að birta í fellilistanum.
samsvarandi	virka	dæmalaus	Aðferðin sem notuð er til að ákvarða hvort fyrirspurn passi við hlut. Tekur við einni röksemd, `item`sem á að prófa fyrirspurnina gegn. Fáðu aðgang að núverandi fyrirspurn með `this.query`. Skilaðu boolean `true`ef fyrirspurn er samsvörun.
flokkari	virka	nákvæm samsvörun, hástafaviðkvæm, hástafanæmi	Aðferð notuð til að flokka niðurstöður sjálfvirkrar útfyllingar. Tekur við einni röksemdafærslu `items`og hefur umfang typeahead tilviksins. Tilvísaðu núverandi fyrirspurn með `this.query`.
hápunktur	virka	undirstrikar allar sjálfgefnar samsvörun	Aðferð notuð til að auðkenna niðurstöður sjálfvirkrar útfyllingar. Tekur við einni röksemdafærslu `item`og hefur umfang typeahead tilviksins. Ætti að skila html.

Markup

Bættu við gagnaeiginleikum til að skrá þátt með typeahead virkni.

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

Aðferðir

.typeahead(valkostir)

Frumstillir inntak með innslátt.

jQuery viðbætur Tugir Bootstrap viðbætur til að koma þér af stað

Popovers *

Umskipti *

Modals bootstrap-modal.js

Um módel

Statískt dæmi

Modal haus

Sýning í beinni

Modal Heading

Texti í formi

Popover in a modal

Tooltips in a modal

Overflowing text to show optional scrollbar

Notar bootstrap-modal

Valmöguleikar

Markup

Aðferðir

.modal(valkostir)

.modal('toggle')

.modal('sýning')

.modal('fela')

Viðburðir

Dropdowns bootstrap-dropdown.js

Um fellilista

Dæmi

Með því að nota bootstrap-dropdown.js

Markup

Aðferðir

$().dropdown()

ScrollSpy bootstrap-scrollspy.js

Dæmi um navbar með scrollspy

@feiti

@mdo

einn

tveir

three

Með því að nota bootstrap-scrollspy.js

Markup

Valmöguleikar

Skiptanlegir flipar bootstrap-tab.js

Dæmi flipar

Með því að nota bootstrap-tab.js

Markup

Aðferðir

$().flipi

Viðburðir

Tooltips bootstrap-tooltip.js

Um Tooltips

Dæmi um notkun Tooltips

Með því að nota bootstrap-tooltip.js

Valmöguleikar

Markup

Aðferðir

$().tooltip(valkostir)

.tooltip('sýna')

.tooltip('fela')

.tooltip('toggle')

Popovers bootstrap-popover.js

Um popovers

Dæmi með sveimu um popover

Með því að nota bootstrap-popover.js

Valmöguleikar

Markup

Aðferðir

$().popover(valkostir)

.popover('sýna')

.popover('fela')

.popover('toggle')

Viðvörunarskilaboð bootstrap-alert.js

Um viðvaranir

Dæmi um viðvaranir

Ó snappið! Þú fékkst villu!

Með því að nota bootstrap-alert.js

Markup

Aðferðir

$().alert()

.alert('loka')

Viðburðir

Hnappar bootstrap-button.js

Um