Pregled

Posamezno ali sestavljeno

Vtičnike je mogoče vključiti posamezno (z uporabo posameznih *.jsdatotek Bootstrapa) ali vse naenkrat (z uporabo bootstrap.jsali pomanjšanim bootstrap.min.js).

Atributi podatkov

Vse vtičnike Bootstrap lahko uporabljate izključno prek API-ja za označevanje, ne da bi napisali eno vrstico JavaScripta. To je prvorazredni API Bootstrapa in bi ga morali najprej upoštevati pri uporabi vtičnika.

Kljub temu je v nekaterih situacijah morda zaželeno, da to funkcijo izklopite. Zato nudimo tudi možnost onemogočanja API-ja atributa podatkov tako, da razvežete vse dogodke v imenskem prostoru dokumenta z data-api. To izgleda takole:

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

Druga možnost je, da ciljate na določen vtičnik, samo vključite ime vtičnika kot imenski prostor skupaj z imenskim prostorom data-api, kot je ta:

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

Programski API

Prav tako verjamemo, da bi morali imeti možnost uporabljati vse vtičnike Bootstrap zgolj prek JavaScript API-ja. Vsi javni API-ji so enojne metode, ki jih je mogoče verižiti, in vrnejo zbirko, po kateri je ukrepal.

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

Vse metode bi morale sprejeti izbirni predmet možnosti, niz, ki cilja na določeno metodo, ali nič (kar sproži vtičnik s privzetim vedenjem):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

Vsak vtičnik izpostavi tudi svoj neobdelani konstruktor v Constructorlastnosti: $.fn.popover.Constructor. Če želite dobiti določen primerek vtičnika, ga pridobite neposredno iz elementa: $('[rel="popover"]').data('popover').

Privzete nastavitve

Privzete nastavitve za vtičnik lahko spremenite tako, da spremenite predmet vtičnika Constructor.DEFAULTS:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

Brez konflikta

Včasih je treba uporabiti vtičnike Bootstrap z drugimi okviri uporabniškega vmesnika. V teh okoliščinah lahko občasno pride do kolizij imenskega prostora. Če se to zgodi, lahko pokličete .noConflictvtičnik, katerega vrednost želite razveljaviti.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Dogodki

Bootstrap ponuja dogodke po meri za večino edinstvenih dejanj vtičnikov. Na splošno so ti v obliki nedoločnika in deležnika preteklosti – kjer se nedoločnik (npr. show) sproži na začetku dogodka, njegova oblika deležnika preteklosti (npr. shown) pa se sproži ob zaključku dejanja.

Od 3.0.0 so vsi dogodki Bootstrap v imenskem prostoru.

Vsi nedoločni dogodki zagotavljajo preventDefaultfunkcionalnost. To omogoča, da ustavite izvajanje dejanja, preden se začne.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Številke različic

Do različice vsakega od Bootstrapovih vtičnikov jQuery je mogoče dostopati prek VERSIONlastnosti konstruktorja vtičnika. Na primer za vtičnik orodnih namigov:

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

Ni posebnih nadomestnih možnosti, ko je JavaScript onemogočen

Bootstrapovi vtičniki se ne vrnejo posebej elegantno, ko je JavaScript onemogočen. Če vam je mar za uporabniško izkušnjo v tem primeru, uporabite, <noscript>da svojim uporabnikom razložite situacijo (in kako znova omogočiti JavaScript) in/ali dodajte lastne nadomestne možnosti po meri.

Prehodi conversion.js

O prehodih

Za preproste učinke prehoda vključite transition.jsenkrat poleg drugih datotek JS. Če uporabljate prevedeno (ali pomanjšano) bootstrap.js, tega ni treba vključiti – že je tam.

Kaj je notri

Transition.js je osnovni pomočnik za transitionEnddogodke, pa tudi emulator prehodov CSS. Uporabljajo ga drugi vtičniki za preverjanje podpore za prehode CSS in za lovljenje visečih prehodov.

Onemogočanje prehodov

Prehode je mogoče globalno onemogočiti z naslednjim delčkom JavaScripta, ki mora priti po nalaganju transition.js(ali bootstrap.jsali bootstrap.min.js, odvisno od primera):

$.support.transition = false

Modali modal.js

Modali so poenostavljeni, a prilagodljivi pogovorni pozivi z minimalno zahtevano funkcionalnostjo in pametnimi privzetimi nastavitvami.

Zaradi tega, kako HTML5 opredeljuje svojo semantiko, autofocusatribut HTML nima vpliva na modale Bootstrap. Če želite doseči enak učinek, uporabite JavaScript po meri:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Primeri

Statični primer

Upodobljen modal z glavo, telesom in nizom dejanj v nogi.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Demo v živo

Preklopite modal prek JavaScripta s klikom na spodnji gumb. Zdrsel bo navzdol in zbledel z vrha strani.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Izbirne velikosti

Modali imajo dve izbirni velikosti, ki sta na voljo prek razredov modifikatorjev, ki jih je treba postaviti na .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Odstrani animacijo

Za modale, ki se preprosto prikažejo, namesto da bi zbledeli, odstranite .faderazred iz svoje modalne oznake.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

Uporaba mrežnega sistema

Če želite izkoristiti omrežni sistem Bootstrap znotraj modala, samo ugnezdite .rows znotraj .modal-bodyin nato uporabite običajne razrede omrežnega sistema.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Spremenljiva modalna vsebina glede na sprožilni gumb

Imate kup gumbov, ki sprožijo isti način, le z nekoliko drugačno vsebino? Uporabite atributeevent.relatedTarget in HTMLdata-* (po možnosti prek jQuery ), da spremenite vsebino modala glede na to, kateri gumb je bil kliknjen. Oglejte si dokumentacijo o modalnih dogodkih za podrobnosti o relatedTarget,

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Uporaba

Modalni vtičnik preklaplja vašo skrito vsebino na zahtevo prek podatkovnih atributov ali JavaScripta. Doda .modal-opentudi <body>k preglasitvi privzetega vedenja drsenja in ustvari .modal-backdropobmočje za klikanje za opustitev prikazanih modal, ko kliknete zunaj modala.

Preko podatkovnih atributov

Aktivirajte modal brez pisanja JavaScripta. Nastavite data-toggle="modal"na element krmilnika, kot je gumb, skupaj z data-target="#foo"ali href="#foo"za ciljanje določenega načina za preklop.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Prek JavaScripta

Pokličite modal z ID -jem myModalz eno vrstico JavaScripta:

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

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-backdrop="".

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

Metode

.modal(options)

Aktivira vašo vsebino kot modalno. Sprejema neobvezne možnosti object.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Ročno preklopi modal. Vrne se klicatelju, preden je modal dejansko prikazan ali skrit (tj. preden pride do dogodka shown.bs.modalali ).hidden.bs.modal

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

.modal('show')

Ročno odpre modal. Vrne se klicatelju, preden je modal dejansko prikazan (tj. preden shown.bs.modalpride do dogodka).

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

.modal('hide')

Ročno skrije modal. Vrne se klicatelju, preden je bil modal dejansko skrit (tj. preden hidden.bs.modalpride do dogodka).

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

.modal('handleUpdate')

Ponovno prilagodi položaj modala, da prepreči drsni trak, če bi se pojavil, zaradi česar bi modal skočil v levo.

Potreben le, če se višina modala spremeni, ko je odprt.

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

Dogodki

Modalni razred Bootstrapa izpostavlja nekaj dogodkov za priključitev na modalno funkcionalnost.

Vsi modalni dogodki se sprožijo na samem modalu (tj. na <div class="modal">).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Spustni meniji dropdown.js

Primeri

S tem preprostim vtičnikom dodajte spustne menije skoraj vsemu, vključno z navbarom, zavihki in pilulami.

Znotraj vrstice za krmarjenje

Znotraj tablet

Uporaba

Spustni vtičnik prek podatkovnih atributov ali JavaScripta preklopi skrito vsebino (spustne menije) tako, da preklopi .openrazred na nadrejenem elementu seznama.

V mobilnih napravah odpiranje spustnega menija doda .dropdown-backdropkot območje za dotik za zapiranje spustnih menijev, ko tapnete zunaj menija, kar je zahteva za ustrezno podporo za iOS. To pomeni, da preklop z odprtega spustnega menija na drug spustni meni zahteva dodaten dotik na mobilni napravi.

Opomba: data-toggle="dropdown"atribut se uporablja za zapiranje spustnih menijev na ravni aplikacije, zato je dobro, da ga vedno uporabite.

Preko podatkovnih atributov

Dodajte data-toggle="dropdown"na povezavo ali gumb, da preklopite spustni meni.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Če želite URL-je ohraniti nedotaknjene z gumbi povezav, uporabite data-targetatribut namesto href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Prek JavaScripta

Prikličite spustne menije prek JavaScripta:

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

Opcije

Noben

Metode

$().dropdown('toggle')

Preklopi spustni meni dane navigacijske vrstice ali navigacije z zavihki.

Dogodki

Vsi spustni dogodki se sprožijo na .dropdown-menunadrejenem elementu.

Vsi spustni dogodki imajo relatedTargetlastnost, katere vrednost je preklopni sidrni element.

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Primer v vrstici za krmarjenje

Vtičnik ScrollSpy je namenjen samodejnemu posodabljanju ciljev navigacije glede na položaj drsenja. Pomaknite se po območju pod vrstico za krmarjenje in opazujte spremembo aktivnega razreda. Označeni bodo tudi spustni podelementi.

Uporaba

Zahteva relativno pozicioniranje

Ne glede na metodo implementacije, scrollspy zahteva uporabo position: relative;na elementu, za katerim vohunite. V večini primerov je to <body>. Pri vohunjenju po elementih, ki niso <body>, se prepričajte, da imate heightnastavljen in overflow-y: scroll;uporabljen.

Preko podatkovnih atributov

Če želite enostavno dodati vohunsko vedenje v svojo zgornjo vrstico, dodajte data-spy="scroll"element, za katerim želite vohuniti (najpogosteje je to <body>). Nato dodajte data-targetatribut z ID-jem ali razredom nadrejenega elementa katere koli .navkomponente Bootstrap.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Prek JavaScripta

Ko dodate position: relative;svoj CSS, pokličite scrollspy prek JavaScripta:

$('body').scrollspy({ target: '#navbar-example' })

Metode

.scrollspy('refresh')

Ko uporabljate scrollspy v povezavi z dodajanjem ali odstranjevanjem elementov iz DOM, boste morali poklicati metodo osveževanja takole:

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

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-offset="".

Dogodki

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Preklopni zavihki tab.js

Primeri zavihkov

Dodajte hitro, dinamično funkcijo zavihkov za prehod med podokni lokalne vsebine, tudi prek spustnih menijev. Ugnezdeni zavihki niso podprti.

Uporaba

Omogoči zavihke z možnostjo zavihkov prek JavaScripta (vsak zavihek je treba aktivirati posebej):

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Posamezne zavihke lahko aktivirate na več načinov:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Markup

Navigacijo po zavihku ali tabletki lahko aktivirate, ne da bi pisali JavaScript, tako da preprosto določite data-toggle="tab"ali data-toggle="pill"na elementu. Če na zavihek dodate razrede navin , boste uporabili slog zavihka Bootstrap , medtem ko boste dodali razrede in uporabili slog tabletke .nav-tabsulnavnav-pills

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Učinek bledenja

Če želite, da zavihki zbledijo, dodajte .fadevsakemu .tab-pane. V prvem podoknu z zavihki mora biti .invidna tudi začetna vsebina.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Metode

$().tab

Aktivira element zavihka in vsebnik vsebine. Zavihek mora imeti bodisi data-targetali hrefciljno usmerjen na vozlišče vsebnika v DOM. V zgornjih primerih so zavihki <a>s z data-toggle="tab"atributi.

.tab('show')

Izbere dani zavihek in prikaže povezano vsebino. Vsi drugi zavihki, ki so bili predhodno izbrani, postanejo neizbrani in njihova povezana vsebina je skrita. Vrne se klicatelju, preden je podokno z zavihki dejansko prikazano (tj. preden shown.bs.tabpride do dogodka).

$('#someTab').tab('show')

Dogodki

Pri prikazu novega zavihka se dogodki sprožijo v naslednjem vrstnem redu:

1. hide.bs.tab(na trenutno aktivnem zavihku)
2. show.bs.tab(na zavihku za prikaz)
3. hidden.bs.tab(na prejšnjem aktivnem zavihku, enak kot za hide.bs.tabdogodek)
4. shown.bs.tab(na novoaktivnem pravkar prikazanem zavihku, isti kot za show.bs.tabdogodek)

Če noben zavihek še ni bil aktiven, se dogodki hide.bs.tabin hidden.bs.tabne bodo sprožili.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Orodja tooltip.js

Navdih za odličen vtičnik jQuery.tipsy, ki ga je napisal Jason Frame; Namigi orodij so posodobljena različica, ki se ne zanaša na slike, uporablja CSS3 za animacije in podatkovne atribute za lokalno shranjevanje naslovov.

Namigi z naslovi ničelne dolžine niso nikoli prikazani.

Primeri

Premaknite miškin kazalec nad spodnje povezave, da si ogledate opise orodij:

Statični opis orodja

Na voljo so štiri možnosti: zgoraj, desno, spodaj in levo poravnano.

Štiri smeri

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Uporaba

Vtičnik orodnih namigov ustvari vsebino in oznake na zahtevo ter privzeto postavi namige orodij za njihov sprožilni element.

Sproži opis orodja prek JavaScripta:

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

Markup

Zahtevana oznaka za opis orodja je le dataatribut in titlena elementu HTML, za katerega želite, da je opis orodja. Ustvarjena oznaka orodnega opisa je precej preprosta, čeprav zahteva položaj (privzeto nastavljen tops strani vtičnika).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-animation="".

Metode

$().tooltip(options)

Zbirki elementov priloži obravnavo namigov orodij.

.tooltip('show')

Razkrije namig elementa. Vrne se klicatelju, preden se dejansko prikaže opis orodja (tj. preden shown.bs.tooltippride do dogodka). To velja za "ročno" proženje namiga orodja. Namigi z naslovi ničelne dolžine niso nikoli prikazani.

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

.tooltip('hide')

Skrije namig elementa. Vrne se klicatelju, preden je bil opis orodja dejansko skrit (tj. preden se hidden.bs.tooltipzgodi dogodek). To velja za "ročno" proženje namiga orodja.

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

.tooltip('toggle')

Preklopi opis orodja elementa. Vrne se klicatelju, preden je bil opis orodja dejansko prikazan ali skrit (tj. preden pride do dogodka shown.bs.tooltipali ). hidden.bs.tooltipTo velja za "ročno" proženje namiga orodja.

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

.tooltip('destroy')

Skrije in uniči namig elementa. Namigov orodij, ki uporabljajo delegiranje (ki so ustvarjeni z možnostjo selector) , ni mogoče posamično uničiti na podrejenih sprožilnih elementih.

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

Dogodki

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popoverji popover.js

Dodajte majhne prekrivne vsebine, kot so tiste na iPadu, kateremu koli elementu za namestitev sekundarnih informacij.

Popoverji, katerih naslov in vsebina sta ničelne dolžine, niso nikoli prikazani.

$(function () {
  $('[data-toggle="popover"]').popover()
})

Primeri

Statični popover

Na voljo so štiri možnosti: zgoraj, desno, spodaj in levo poravnano.

Demo v živo

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Štiri smeri

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

Opusti ob naslednjem kliku

Uporabite focussprožilec, da opustite pojavna okna ob naslednjem kliku uporabnika.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Uporaba

Omogoči pojavna okna prek JavaScripta:

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

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-animation="".

Metode

$().popover(options)

Inicializira pojavna okna za zbirko elementov.

.popover('show')

Razkrije popover elementa. Vrne se k klicatelju, preden se popover dejansko prikaže (tj. preden shown.bs.popoverpride do dogodka). To velja za "ročno" proženje popoverja. Popoverji, katerih naslov in vsebina sta ničelne dolžine, niso nikoli prikazani.

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

.popover('hide')

Skrije pojavni element elementa. Vrne se k klicatelju, preden je bil popover dejansko skrit (tj. preden hidden.bs.popoverpride do dogodka). To velja za "ročno" proženje popoverja.

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

.popover('toggle')

Preklopi pojavni element elementa. Vrne se klicatelju, preden je pojavni element dejansko prikazan ali skrit (tj. preden pride do dogodka shown.bs.popoverali ). hidden.bs.popoverTo velja za "ročno" proženje popoverja.

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

.popover('destroy')

Skrije in uniči popover elementa. Popoverjev, ki uporabljajo delegiranje (ki so ustvarjeni z možnostjo selector) , ni mogoče posamezno uničiti na elementih prožilcev potomcev.

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

Dogodki

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Opozorilna sporočila alert.js

Primeri opozoril

S tem vtičnikom dodajte funkcijo opustitve vsem opozorilnim sporočilom.

Ko uporabljate .closegumb, mora biti prvi podrejeni gumb .alert-dismissiblein nobena besedilna vsebina ne sme biti pred njim v označevanju.

Uporaba

Preprosto dodajte data-dismiss="alert"svojemu gumbu za zapiranje, da samodejno omogočite funkcijo zapiranja opozorila. Če zaprete opozorilo, ga odstranite iz DOM.

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Če želite, da vaša opozorila ob zapiranju uporabljajo animacijo, se prepričajte, da imajo .fadein.in zanje že uporabljeni razredi

Metode

$().alert()

Naredi opozorilo, ki posluša dogodke klikov na podrejenih elementih, ki imajodata-dismiss="alert" atribut. (Ni potrebno pri uporabi samodejne inicializacije data-api.)

$().alert('close')

Zapre opozorilo tako, da ga odstrani iz DOM. Če je.fade sta v elementu prisotna razreda in .in, bo opozorilo zbledelo, preden bo odstranjeno.

Dogodki

Bootstrapov vtičnik za opozorila razkriva nekaj dogodkov za priključitev na funkcijo opozorila.

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Gumbi button.js

Naredite več z gumbi. Nadzorni gumb navaja ali ustvari skupine gumbov za več komponent, kot so orodne vrstice.

Stalni

Dodajte data-loading-text="Loading..."za uporabo stanja nalaganja na gumbu.

Ta funkcija je zastarela od različice 3.3.5 in je bila odstranjena v različici 4.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Enotni preklop

Dodajte data-toggle="button"za aktiviranje preklapljanja na enem gumbu.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Potrditveno polje / Radio

Dodajte vsebujočemu data-toggle="buttons"potrditvenemu .btn-grouppolju ali radijske vnose, da omogočite preklapljanje v njihovih slogih.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Metode

$().button('toggle')

Preklopi potisno stanje. Gumb daje videz, kot da je bil aktiviran.

$().button('reset')

Ponastavi stanje gumba - zamenja besedilo z izvirnim besedilom. Ta metoda je asinhrona in se vrne, preden je ponastavitev dejansko končana.

$().button(string)

Zamenja besedilo v poljubno podatkovno definirano stanje besedila.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Strni collapse.js

Prilagodljiv vtičnik, ki uporablja peščico razredov za enostavno preklapljanje.

Primer

Kliknite spodnje gumbe, da prikažete ali skrijete drug element prek sprememb razreda:

• .collapseskriva vsebino
• .collapsingse uporablja med prehodi
• .collapse.inprikazuje vsebino

Uporabite lahko povezavo z hrefatributom ali gumb z data-targetatributom. V obeh primerih data-toggle="collapse"je potrebno.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Primer harmonike

Razširite privzeto vedenje strnjevanja, da ustvarite harmoniko s komponento plošče.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee 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 craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee 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 craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee 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 craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Možna je tudi zamenjava .panel-bodys s .list-groups.

Uporaba

Vtičnik za zrušitev uporablja nekaj razredov za obvladovanje težkega dvigovanja:

• .collapseskriva vsebino
• .collapse.inprikazuje vsebino
• .collapsingse doda, ko se prehod začne, in odstrani, ko se konča

Te razrede lahko najdete v component-animations.less.

Preko podatkovnih atributov

Samo dodajte data-toggle="collapse"in data-targetelementu, da samodejno dodelite nadzor nad zložljivim elementom. Atribut data-targetsprejme izbirnik CSS za uporabo strnjenja. Ne pozabite dodati razreda collapsezložljivemu elementu. Če želite, da se privzeto odpre, dodajte dodatni razred in.

Če želite zložljivemu nadzoru dodati upravljanje skupine, podobno harmoniki, dodajte atribut podatkov data-parent="#selector". Oglejte si predstavitev, da vidite to v akciji.

Prek JavaScripta

Omogoči ročno z:

$('.collapse').collapse()

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-parent="".

Metode

.collapse(options)

Aktivira vašo vsebino kot zložljiv element. Sprejema neobvezne možnosti object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Preklopi zložljiv element med prikazanim ali skritim. Vrne se klicatelju, preden je zložljivi element dejansko prikazan ali skrit (tj. preden pride do dogodka shown.bs.collapseali ).hidden.bs.collapse

.collapse('show')

Prikazuje zložljiv element. Vrne se klicatelju, preden je zložljivi element dejansko prikazan (tj. preden shown.bs.collapsepride do dogodka).

.collapse('hide')

Skrije zložljiv element. Vrne se klicatelju, preden je bil zložljivi element dejansko skrit (tj. preden hidden.bs.collapsepride do dogodka).

Dogodki

Bootstrapov razred kolapsa razkrije nekaj dogodkov za priključitev na funkcionalnost kolapsa.

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Komponenta diaprojekcije za kroženje po elementih, kot je vrtiljak. Ugnezdeni vrtiljaki niso podprti.

Primeri

Prejšnja Naslednji

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Izbirni napisi

Svojim diapozitivom preprosto dodajte napise z .carousel-captionelementom znotraj katerega koli .item. Vanj vstavite skoraj vsak izbirni HTML in samodejno bo poravnan in oblikovan.

Oznaka prvega diapozitiva

Nulla vitae elit libero, a pharetra augue mollis interdum.

Oznaka drugega diapozitiva

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Oznaka tretjega diapozitiva

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Prejšnja Naslednji

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Uporaba

Več vrtiljakov

Vrtiljaki zahtevajo uporabo idna skrajni zunanji posodi ( .carousel) za pravilno delovanje krmilnikov vrtiljaka. Ko dodajate več vrtiljakov ali spreminjate vrtiljak id, ne pozabite posodobiti ustreznih kontrolnikov.

Preko podatkovnih atributov

Uporabite atribute podatkov za preprost nadzor položaja vrtiljaka. data-slidesprejme ključne besede prevali next, ki spremenijo položaj diapozitiva glede na trenutni položaj. Druga možnost je, da uporabite data-slide-toza posredovanje neobdelanega indeksa diapozitiva na vrtiljak data-slide-to="2", ki premakne položaj diapozitiva na določen indeks, ki se začne z 0.

Atribut data-ride="carousel"se uporablja za označevanje vrtiljaka kot animiranega, ki se začne ob nalaganju strani. Ni ga mogoče uporabiti v kombinaciji z (odvečno in nepotrebno) eksplicitno inicializacijo JavaScript istega vrtiljaka.

Prek JavaScripta

Ročno pokličite vrtiljak z:

$('.carousel').carousel()

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-interval="".

Metode

.carousel(options)

Inicializira vrtiljak z izbirnimi možnostmi objectin začne krožiti med elementi.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Kroži skozi elemente vrtiljaka od leve proti desni.

.carousel('pause')

Prepreči kroženje vrtiljaka med predmeti.

.carousel(number)

Preklopi vrtiljak na določen okvir (na osnovi 0, podobno matriki).

.carousel('prev')

Preklopi na prejšnji element.

.carousel('next')

Preklopi na naslednji element.

Dogodki

Bootstrapov razred vrtiljaka izpostavlja dva dogodka za priključitev na funkcijo vrtiljaka.

Oba dogodka imata naslednje dodatne lastnosti:

• direction: Smer, v katero drsi vrtiljak ( "left"ali "right").
• relatedTarget: Element DOM, ki je potisnjen na svoje mesto kot aktivni element.

Vsi dogodki vrtiljaka se sprožijo na samem vrtiljaku (tj. na <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Pritrdite affix.js

Primer

Vtičnik za pritrditev se vklopi position: fixed;in izklopi ter posnema učinek, ki ga najdete z position: sticky;. Podnavigacija na desni je predstavitev vtičnika za pritrditev v živo.

Uporaba

Uporabite vtičnik za pritrditev prek atributov podatkov ali ročno z lastnim JavaScriptom. V obeh primerih morate zagotoviti CSS za položaj in širino vaše pripete vsebine.

Opomba: ne uporabljajte vtičnika za pritrditev na elementu, ki je v sorazmerno postavljenem elementu, kot je vlečeni ali potisnjeni stolpec, zaradi napake pri upodabljanju Safarija .

Pozicioniranje preko CSS

Vtičnik za pritrditev preklaplja med tremi razredi, od katerih vsak predstavlja določeno stanje: .affix, .affix-topin .affix-bottom. Za obdelavo dejanskih položajev morate za te razrede zagotoviti sloge, z izjemo position: fixed;na , sami (neodvisno od tega vtičnika)..affix

Takole deluje vtičnik za pritrditev:

1. Za začetek vtičnik doda .affix-top, da označi, da je element na skrajnem zgornjem položaju. Na tej točki CSS pozicioniranje ni potrebno.
2. Pomikanje mimo elementa, ki ga želite pritrditi, bi moralo sprožiti dejansko pritrditev. Tukaj .affixzamenja .affix-topin nastavi position: fixed;(zagotavlja Bootstrapov CSS).
3. Če je definiran spodnji odmik, mora pomikanje mimo njega nadomestiti .affixz .affix-bottom. Ker odmiki niso obvezni, morate za nastavitev enega nastaviti ustrezen CSS. V tem primeru dodajte position: absolute;po potrebi. Vtičnik uporablja atribut podatkov ali možnost JavaScript, da od tam določi, kam naj postavi element.

Sledite zgornjim korakom, da nastavite svoj CSS za eno od spodnjih možnosti uporabe.

Preko podatkovnih atributov

Če želite preprosto dodati vedenje pritrjevanja kateremu koli elementu, preprosto dodajte data-spy="affix"elementu, za katerim želite vohuniti. Uporabite odmike, da določite, kdaj želite preklopiti pripenjanje elementa.

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

Prek JavaScripta

Pokličite vtičnik za pritrditev prek JavaScripta:

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-offset-top="200".

Metode

.affix(options)

Aktivira vašo vsebino kot priloženo vsebino. Sprejema neobvezne možnosti object.

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

Ponovno izračuna stanje pritrditve na podlagi dimenzij, položaja in položaja drsenja ustreznih elementov. Razredi .affix, .affix-top, in .affix-bottomse dodajo ali odstranijo iz pripete vsebine glede na novo stanje. To metodo je treba poklicati vsakič, ko se spremenijo dimenzije pritrjene vsebine ali ciljnega elementa, da se zagotovi pravilno pozicioniranje pritrjene vsebine.

$('#myAffix').affix('checkPosition')

Dogodki

Bootstrapov vtičnik za pritrditev razkrije nekaj dogodkov za priključitev na funkcionalnost pritrditev.