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="".

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

$('#myModal').on('hidden', function () {
  // gera eitthvað…
})

Dæmi

Bættu fellivalmyndum við næstum hvað sem er með þessari einföldu viðbót, þar á meðal navbar, flipa og pillur.

Innan siglingastiku

Innan flipa

Notkun

Í gegnum gagnaeiginleika

Bættu data-toggle="dropdown"við tengil eða hnapp til að skipta um fellilista.

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Fellivalmynd</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Til að halda vefslóðum óskertum skaltu nota data-targeteigindina í stað href="#".

<div class="dropdown">
  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Fellilisti
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Með JavaScript

Hringdu í fellilistana í gegnum JavaScript:

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

Valmöguleikar

Enginn

Aðferðir

$().dropdown('toggle')

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

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.

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

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="".

Viðburðir

Dæmi flipar

Bættu við skjótum, kraftmiklum flipavirkni til að skipta í gegnum svæðisrúður, jafnvel með fellivalmyndum.

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

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

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="".

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.

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="".

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.

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.

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

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

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

<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="".

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.

$('#myCollapsible').on('hidden', function () {
  // gera eitthvað…
})

Dæmi um hringekju

Skyggnusýningin hér að neðan sýnir almenna viðbót og íhlut til að hjóla í gegnum þætti eins og hringekju.

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.

‹ ›

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Hringekjuhlutir -->
  <div class="carousel-inner">
    <div class="active item">…</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="next">›</a>
</div>

Notkun

Í gegnum gagnaeiginleika

Notaðu gagnaeiginleika til að stjórna staðsetningu hringekjunnar auðveldlega. data-slidesamþykkir lykilorðin preveða next, sem breytir staðsetningu skyggnunnar miðað við núverandi staðsetningu hennar. Að öðrum kosti, notaðu data-slide-totil að senda hráa skyggnuvísitölu í hringekjuna data-slide-to="2", sem stökk er skyggnustaðan í tiltekna vísitölu sem byrjar á 0.

Með JavaScript

Hringdu handvirkt í hringekju með:

$('.carousel').carousel()

Valmöguleikar

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

Aðferðir

.carousel(valkostir)

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

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

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="".

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>

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