JavaScript

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

Einstök eða samsett

Hægt er að fylgja með viðbætur hver fyrir sig (þó sum hafi nauðsynlegar ósjálfstæði), eða allt í einu. Bæði bootstrap.js og bootstrap.min.js innihalda öll viðbætur í einni skrá.

Gagnaeiginleikar

Þú getur notað allar Bootstrap viðbætur eingöngu í gegnum markup API án þess að skrifa eina línu af JavaScript. Þetta er fyrsta flokks API frá Bootstrap og ætti að vera fyrsta íhugun þín þegar þú notar viðbót.

Sem sagt, í sumum tilfellum getur verið æskilegt að slökkva á þessari virkni. Þess vegna bjóðum við einnig upp á möguleikann á að slökkva á gagnaeigininni API með því að aftengja alla atburði í meginmálinu með nafnabili með ``data-api``. Þetta lítur svona út:

$('body').off('.data-api')

Að öðrum kosti, til að miða á ákveðna viðbót, skaltu bara láta nafn viðbótarinnar fylgja með sem nafnrými ásamt data-api nafnrýminu eins og þetta:

$('body').off('.alert.data-api')

Forritað API

Við teljum líka að þú ættir að geta notað öll Bootstrap viðbætur eingöngu í gegnum JavaScript API. Öll opinber API eru stakar, keðjanlegar aðferðir og skila söfnuninni sem brugðist hefur verið við.

$(".btn.danger").button("toggle").addClass("fat")

Allar aðferðir ættu að samþykkja valfrjálsan valmöguleikahlut, streng sem miðar á tiltekna aðferð eða ekkert (sem kemur af stað viðbót með sjálfgefna hegðun):

$("#myModal").modal() // frumstillt með sjálfgefnum stillingum
$("#myModal").modal({ keyboard: false }) // frumstillt án lyklaborðs
$("#myModal").modal('show') // frumstillir og kallar show strax

Hver tappi afhjúpar einnig hráa smiðinn sinn á 'Constructor' eign: $.fn.popover.Constructor. Ef þú vilt fá tiltekið viðbótatilvik skaltu sækja það beint úr frumefni: $('[rel=popover]').data('popover').

Engir átök

Stundum er nauðsynlegt að nota Bootstrap viðbætur með öðrum UI ramma. Við þessar aðstæður geta árekstrar í nafnrými átt sér stað einstaka sinnum. Ef þetta gerist geturðu hringt .noConflictí viðbótina sem þú vilt breyta gildinu á.

var bootstrapButton = $.fn.button.noConflict() // skila $.fn.button í áður úthlutað gildi
$.fn.bootstrapBtn = bootstrapButton // gefðu $().bootstrapBtn bootstrap virknina

Viðburðir

Bootstrap býður upp á sérsniðna atburði fyrir flestar einstöku aðgerðir viðbætur. Yfirleitt koma þær í óendanlegu formi og þátíð - þar sem óendanlegur (til dæmis show) er ræstur í upphafi atburðar og þátíðarháttur (til dæmis shown) er kveikt þegar aðgerð er lokið.

Allir óendanlegir atburðir veita preventDefault virkni. Þetta veitir möguleika á að stöðva framkvæmd aðgerða áður en hún hefst.

$('#myModal').on('show', function (e) {
    ef (!data) skilar e.preventDefault() // kemur í veg fyrir að modal sé sýnt
})

Um umskipti

Til að fá einföld umbreytingaráhrif skaltu setja bootstrap-transition.js einu sinni ásamt öðrum JS skrám. Ef þú ert að nota samansetta (eða minnkaða) bootstrap.js , það er engin þörf á að hafa þetta með – það er nú þegar til staðar.

Notkunartilvik

Nokkur dæmi um umbreytingarviðbótina:

  • Renna eða dofna í formum
  • Flipar fölna út
  • Að dofna út viðvaranir
  • Rennibrautarrúður

Dæmi

Modals eru straumlínulagaðar, en sveigjanlegar, svarglugga með lágmarks virkni og snjöllum sjálfgefnum stillingum.

Statískt dæmi

Útgjört form með haus, meginmáli og aðgerðasetti í síðufæti.

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <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>

Sýning í beinni

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

<!-- Hnappur til að kveikja á modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Setja kynningu</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal haus</h3>
  </div>
  <div class="modal-body">
    <p>Einn fínn líkami…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Loka</button>
    <button class="btn btn-primary">Vista breytingar</button>
  </div>
</div>

Notkun

Í gegnum gagnaeiginleika

Virkjaðu form án þess að skrifa JavaScript. Stillt data-toggle="modal"á stjórnunareiningu, eins og hnapp, ásamt a data-target="#foo"eða href="#foo"til að miða á ákveðna aðferð til að skipta.

<button type="button" data-toggle="modal" data-target="#myModal">Ræsa form</button>

Með JavaScript

Hringdu í modal með auðkenni myModalmeð einni línu af JavaScript:

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

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-backdrop="".

Nafn tegund sjálfgefið lýsingu
bakgrunn Boolean satt Inniheldur modal-bakgrunnsþátt. Að öðrum kosti, tilgreindu staticfyrir 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.
fjarlægur leið rangt

Ef ytri vefslóð er gefin upp verður efni hlaðið með loadaðferð jQuery og sprautað inn í .modal-body. Ef þú ert að nota gagnaforritið geturðu notað hrefmerkið til að tilgreina ytri uppsprettu. Dæmi um þetta er sýnt hér að neðan:

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

Aðferðir

.modal(valkostir)

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

$('#myModal').modal({
  lyklaborð: rangt
})

.modal('toggle')

Skiptir handvirkt um form.

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

.modal('sýning')

Opnar form handvirkt.

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

.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 showtilviksað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 hidetilviksað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').on('hidden', function () {
  // gera eitthvað…
})

Dæmi í navbar

ScrollSpy viðbótin er til að uppfæra siglingamarkmið sjálfkrafa á grundvelli skrunstöðu. Skrunaðu svæðið fyrir neðan siglingastikuna og horfðu á virka bekkinn breytast. Undirliðir í fellilistanum verða einnig auðkenndir.

@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

Í incididunt echo park, oficia deserunt Mcsweeney's proident meistari hreinsar thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum handverksbjór. Single-uppruna kaffi wayfarers irure four loko, cupidatat terry richardson master cleanse. Gerðu ráð fyrir að þú hafir líklega ekki heyrt um þá listpartý fanny pack, húðflúruð nulla cardigan tempor auglýsing. Proident wolf nesciunt sartorial keffiyeh eu banh mi sjálfbær. Elit wolf voluptate, lo-fi ea portland áður en þeir seldu upp fjögur loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

þrír

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.

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.


Notkun

Í gegnum gagnaeiginleika

Til að bæta scrollspy hegðun auðveldlega við toppstikuna þína skaltu bara bæta data-spy="scroll"við þættinum sem þú vilt njósna um (oftast væri þetta líkaminn) og data-target=".navbar"til að velja hvaða nav þú vilt nota. Þú munt vilja nota scrollspy með .navíhlut.

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

Með JavaScript

Hringdu í scrollspy í gegnum JavaScript:

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

Aðferðir

.scrollspy('refresh')

Þegar þú notar scrollspy í tengslum við að bæta við eða fjarlægja þætti úr DOM þarftu að kalla á endurnýjunaraðferðina svona:

$('[data-spy="scroll"]').each(fall () {
  var $spy = $(this).scrollspy('refresh')
});

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-offset="".

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.

Viðburðir

Viðburður Lýsing
virkja Þessi atburður ræsir í hvert sinn sem nýr hlutur verður virkjaður af scrollspy.

Dæmi flipar

Bættu við skjótum, kraftmiklum flipavirkni til að skipta í gegnum svæðisrúður, 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 einuppruna kaffi smokkfiskur. Æfing +1 vinnu velit, blogg sartorial PBR leggings næsta stig Wes anderson handverksmaður fjögur loko bæ til borðs handverksbjór twee. Qui photo booth letterpress, commodo enim handverksbjór mlkshk aliquip gallabuxur ullamco og vinyl cillum PBR. Homo nostrud lífræn, assumenda labore fagurfræðilegur magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bita, sjálfbær gallabuxur skegg og DIY siðferðislegur sökker terry richardson lífdísil. Art party scenester stumptown, tumblr slátrari vero sint qui sapiente accusamus húðflúraða echo park.


Notkun

Virkjaðu flipa sem hægt er að nota með JavaScript (hvern flipa þarf að virkja fyrir sig):

$('#myTab a').click(fall (e) {
  e.preventDefault();
  $(þetta).tab('sýna');
})

Þú getur virkjað einstaka flipa á nokkra vegu:

$('#myTab a[href="#profile"]').tab('show'); // Veldu flipa eftir nafni
$('#myTab a:first').tab('show'); // Veldu fyrsta flipa
$('#myTab a:last').tab('show'); // Veldu síðasta flipa
$('#myTab li:eq(2) a').tab('show'); // Veldu þriðja flipa (0-tryggður)

Markup

Þú getur virkjað flipa eða pilluleiðsögn án þess að skrifa JavaScript með því einfaldlega að tilgreina data-toggle="tab"eða data-toggle="pill"á frumefni. Með því að bæta navog nav-tabsflokkunum við flipann ulverður stíll Bootstrap flipans beitt.

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Heima</a></li>
  <li><a href="#profile" data-toggle="tab">Profil</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 a data-targeteða hrefmiða á gámahnút í DOM.

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Heima</a></li>
  <li><a href="#profile">Profil</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="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

<handrit>
  $(fall() {
    $('#myTab a:last').tab('show');
  })
</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.targetog event.relatedTargettil 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.targetog event.relatedTargettil að miða á virka flipann og fyrri virka flipann (ef tiltækur) í sömu röð.
$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // virkjaður flipi
  e.relatedTarget // fyrri flipi
})

Dæmi

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.

Af frammistöðuástæðum eru tólabendingin og popover gagnaforritin valin, sem þýðir að þú verður að frumstilla þau sjálfur .

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

Þröngar buxur næsta stig keffiyeh þú hefur líklega ekki heyrt um þær. Ljósmyndabás skegg hrár denim bókprentun vegan senditaska stumptown. Seitan frá bænum til borðs, mcsweeney's fixie sjálfbær quinoa 8 bita amerískur fatnaður er með terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu lífdísill Williamsburg Marfa, fjögurra loko mcsweeney's cleanse vegan chambray. Virkilega kaldhæðnislegur handverksmaður hvað sem er keytar , scenester bæ-til-borð banksy Austin twitter höndla freegan cred raw denim einuppruna kaffi veiru.

Fjórar áttir

Verkfæraráð í inntakshópum

Þegar þú notar verkfæraábendingar og sprettiglugga með Bootstrap inntakshópunum þarftu að stilla containervalkostinn (skráð hér að neðan) til að forðast óæskilegar aukaverkanir.


Notkun

Kveiktu á tóli í gegnum JavaScript:

$('#example').tooltip(valkostir)

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-animation="".

Nafn tegund sjálfgefið lýsingu
fjör Boolean satt notaðu css fade umskipti á tólabendinguna
html Boolean rangt Settu html inn í tólið. Ef það er rangt verður textaðferð jquery notuð til að setja efni inn í dom. Notaðu texta ef þú hefur áhyggjur af XSS árásum.
staðsetningu strengur | virka '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 fókus' hvernig ábending er sett af stað - smelltu á | sveima | fókus | handbók. Athugaðu að þú framhjá kveikjum fjölbreytileg, bil aðskilin, kveikjugerðir.
seinkun númer | mótmæla 0

seinkun á að sýna og fela tólið (ms) - á ekki við um handvirka kveikjugerð

Ef númer er gefið upp er seinkun beitt á bæði fela/sýna

Uppbygging hlutar er:delay: { show: 500, hide: 100 }

ílát strengur | rangt rangt

Bætir ábendingunni við ákveðinn þáttcontainer: 'body'

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

Markup

<a href="#" data-toggle="tooltip" title="first tooltip">svefðu yfir mig</a>

Aðferðir

$().tooltip(valkostir)

Hengir verkfæraleiðbeiningum við einingarsafn.

.tooltip('sýna')

Sýnir verkfæraábendingu frumefnis.

$('#element').tooltip('show')

.tooltip('fela')

Felur ábendingu frumefnis.

$('#element').tooltip('fela')

.tooltip('toggle')

Breytir ábendingum frumefnis.

$('#element').tooltip('toggle')

.tooltip('eyðileggja')

Felur og eyðileggur verkfæraábendingu frumefnis.

$('#element').tooltip('destroy')

Dæmi

Bættu litlum yfirlagi af efni, eins og á iPad, við hvaða þátt sem er til að hýsa aukaupplýsingar. Færðu bendilinn yfir hnappinn til að kveikja á popover. Krefst þess að Tooltip sé innifalið.

Static popover

Fjórir valkostir eru í boði: efst, hægri, neðst og vinstri stillt.

Popover toppur

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover rétt

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover botn

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover eftir

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Engin álagning sem sýnd er sem sprettigluggar eru búnar til úr JavaScript og efni innan dataeigindar.

Sýning í beinni

Fjórar áttir


Notkun

Virkja popover í gegnum JavaScript:

$('#example').popover(valkostir)

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-animation="".

Nafn tegund sjálfgefið lýsingu
fjör Boolean satt notaðu css fade umskipti á tólabendinguna
html Boolean rangt Settu html inn í popover. Ef það er rangt verður textaðferð jquery notuð til að setja efni inn í dom. Notaðu texta ef þú hefur áhyggjur af XSS árásum.
staðsetningu strengur | virka '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 'smellur' hvernig popover er kveikt - smelltu á | 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

seinkun á að sýna og fela sprettigluggann (ms) - á ekki við um handvirka kveikjugerð

Ef númer er gefið upp er seinkun beitt á bæði fela/sýna

Uppbygging hlutar er:delay: { show: 500, hide: 100 }

ílát strengur | rangt rangt

Bætir sprettiglugganum við ákveðinn þáttcontainer: 'body'

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öguleika.

Aðferðir

$().popover(valkostir)

Frumstillir sprettiglugga fyrir þáttasafn.

.popover('sýna')

Afhjúpar þætti sem birtist.

$('#element').popover('show')

.popover('fela')

Felur frumefnisskjá.

$('#element').popover('fela')

.popover('toggle')

Breytir yfirlit yfir þætti.

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

.popover('eyðileggja')

Felur og eyðileggur popover frumefnis.

$('#element').popover('destroy')

Dæmi um viðvaranir

Bættu við að hafna virkni við öll viðvörunarskilaboð með þessari viðbót.

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.

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


Notkun

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

$(".alert").alert()

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.

$(".alert").alert('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 closetilviksað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).
$('#my-alert').bind('closed', function () {
  // gera eitthvað…
})

Dæmi um notkun

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.

Staðhæft

Bæta við data-loading-text="Loading..."til að nota hleðsluástand á hnapp.

<button type="button" class="btn btn-primary" data-loading-text="Loading...">Ástand hleðslu</button>

Einn rofi

Bættu við data-toggle="button"til að virkja kveikt á einum hnappi.

<button type="button" class="btn btn-primary" data-toggle="button">Einn skipta</button>

Gátreitur

Bæta við data-toggle="buttons-checkbox"til að skipta um gátreitastíl á btn-group.

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn btn-primary">Vinstri</button>
  <button type="button" class="btn btn-primary">Miðja</button>
  <button type="button" class="btn btn-primary">Hægri</button>
</div>

Útvarp

Bættu við data-toggle="buttons-radio"til að skipta um útvarpsstíl á btn-group.

<div class="btn-group" data-toggle="buttons-radio">
  <button type="button" class="btn btn-primary">Vinstri</button>
  <button type="button" class="btn btn-primary">Miðja</button>
  <button type="button" class="btn btn-primary">Hægri</button>
</div>

Notkun

Virkja hnappa með JavaScript:

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

Markup

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

Valmöguleikar

Enginn

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 type="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 type="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 type="button" class="btn" data-complete-text="lokið!" >...</button>
<handrit>
  $('.btn').button('complete')
</script>

Um

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

* Krefst þess að Transitions viðbótin sé innifalin.

Dæmi um harmonikku

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

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.
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.
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.
<div class="harmonika" id="harmonika2">
  <div class="harmonikku-hópur">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Samanbrjótanlegt hópatriði #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="harmonika-innri">
        Lífræn klisja...
      </div>
    </div>
  </div>
  <div class="harmonikku-hópur">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Samanbrjótanlegt hópatriði #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="harmonika-innri">
        Lífræn klisja...
      </div>
    </div>
  </div>
</div>
...

Þú getur líka notað viðbótina án harmonikkumerkingar. Gerðu hnapp til að skipta um stækka og hrun annars þáttar.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  einfalt samanbrjótanlegt
</hnappur>

<div id="demo" class="collapse in"> … </div>

Notkun

Í gegnum gagnaeiginleika

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.

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

Með JavaScript

Virkja handvirkt með:

$(".collapse").collapse()

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-parent="".

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

Aðferðir

.collapse(valkostir)

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

$('#myCollapsible').collapse({
  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 showtilviksað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 hideað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).
$('#myCollapsible').on('hidden', function () {
  // gera eitthvað…
})

Dæmi

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.

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

Þú vilt stilla autocomplete="off"til að koma í veg fyrir að sjálfgefna vafravalmyndir birtist yfir Bootstrap typeahead fellilistanum.


Notkun

Í gegnum gagnaeiginleika

Bættu við gagnaeiginleikum til að skrá einingu með typeahead virkni eins og sýnt er í dæminu hér að ofan.

Með JavaScript

Hringdu handvirkt í innsláttinn með:

$('.typeahead').typeahead()

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-source="".

Nafn tegund sjálfgefið lýsingu
heimild fylki, virka [ ] Gagnagjafinn til að spyrjast fyrir á móti. Getur verið fylki strengja eða fall. Fallið fær tvö rök, querygildið í innsláttarreitnum og processsvarhringingin. Hægt er að nota aðgerðina samstillt með því að skila gagnagjafanum beint eða ósamstillt með processeinni rifrildi svarhringingarinnar.
hlutir númer 8 Hámarksfjöldi hluta til að birta í fellilistanum.
mínLengd númer 1 Lágmarksstafalengd sem þarf áður en uppástungur um sjálfvirka útfyllingu koma af stað
samsvarandi virka dæmalaus Aðferðin sem notuð er til að ákvarða hvort fyrirspurn passi við hlut. Tekur við einni röksemd, itemsem á að prófa fyrirspurnina gegn. Fáðu aðgang að núverandi fyrirspurn með this.query. Skilaðu boolean trueef 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 itemsog hefur umfang typeahead tilviksins. Tilvísaðu núverandi fyrirspurn með this.query.
uppfærslur virka skilar völdum hlut Aðferðin sem notuð er til að skila völdum hlut. Samþykkir eina röksemdafærslu, itemog hefur umfang typeahead tilviksins.
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 itemog hefur umfang typeahead tilviksins. Ætti að skila html.

Aðferðir

.typeahead(valkostir)

Frumstillir inntak með innslátt.

Dæmi

Undirleiðsögnin til vinstri er lifandi kynning á affix viðbótinni.


Notkun

Í gegnum gagnaeiginleika

Til að bæta við festuhegðun auðveldlega við hvaða þátt sem er, bættu bara við data-spy="affix"þáttinn sem þú vilt njósna um. Notaðu síðan frávik til að skilgreina hvenær á að kveikja og slökkva á festingu einingar.

<div data-spy="affix" data-offset-top="200">...</div>
Höfuð upp! Þú verður að stjórna stöðu fests þáttar og hegðun nánasta foreldris hans. Staða er stjórnað af affix, affix-top, og affix-bottom. Mundu að athuga hvort foreldri sé hugsanlega hrunið þegar viðmiðið kemur inn þar sem það er að fjarlægja efni úr venjulegu flæði síðunnar.

Með JavaScript

Hringdu í affix viðbótina í gegnum JavaScript:

$('#navbar').affix()

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-offset-top="200".

Nafn tegund sjálfgefið lýsingu
á móti númer | fall | mótmæla 10 Dílar til að vega á móti frá skjánum þegar reiknað er út stöðu skrununar. Ef ein tala er gefin upp verður offsetið beitt bæði efst og til vinstri. Til að hlusta eftir einni stefnu, eða mörgum einstökum frávikum, gefðu bara upp hlut offset: { x: 10 }. Notaðu aðgerð þegar þú þarft að gefa kraftmikinn uppjöfnun (gagnlegt fyrir suma móttækilega hönnun).