Pregled

Pojedinačno ili sastavljeno

Dodaci se mogu uključiti pojedinačno (koristeći pojedinačne *.jsdatoteke Bootstrapa), ili sve odjednom (koristeći bootstrap.jsili minimizirani bootstrap.min.js).

Atributi podataka

Možete koristiti sve dodatke za Bootstrap isključivo preko API-ja za označavanje bez pisanja nijednog reda JavaScripta. Ovo je Bootstrap-ov prvoklasni API i trebao bi vam biti na prvom mjestu kada koristite dodatak.

Međutim, u nekim situacijama može biti poželjno isključiti ovu funkciju. Stoga također pružamo mogućnost da onemogućimo API atributa podataka tako što ćemo poništiti sve događaje na dokumentu s prostorom imena sa data-api. ovo izgleda ovako:

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

Alternativno, da biste ciljali određeni dodatak, samo uključite ime dodatka kao imenski prostor zajedno sa data-api imenskim prostorom ovako:

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

Programski API

Također vjerujemo da biste trebali moći koristiti sve dodatke za Bootstrap isključivo preko JavaScript API-ja. Svi javni API-ji su jednostruke, lančane metode i vraćaju kolekciju na koju se postupa.

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

Sve metode bi trebale prihvatiti opcijski objekt opcija, string koji cilja određenu metodu ili ništa (što pokreće dodatak sa zadanim ponašanjem):

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

Svaki dodatak također izlaže svoj sirovi konstruktor na Constructorsvojstvu: $.fn.popover.Constructor. Ako želite da dobijete određenu instancu dodatka, dohvatite je direktno iz elementa: $('[rel="popover"]').data('popover').

Zadane postavke

Možete promijeniti zadane postavke za dodatak mijenjanjem objekta dodatka Constructor.DEFAULTS:

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

Nema sukoba

Ponekad je potrebno koristiti dodatke za Bootstrap sa drugim UI okvirima. U ovim okolnostima povremeno se mogu dogoditi kolizije prostora imena. Ako se to dogodi, možete pozvati .noConflictdodatak kojem želite vratiti vrijednost.

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

Događaji

Bootstrap pruža prilagođene događaje za jedinstvene radnje većine dodataka. Općenito, oni dolaze u obliku infinitiva i participa u prošlosti - gdje se infinitiv (npr. show) pokreće na početku događaja, a njegov glagolski oblik prošlosti (npr. shown) se pokreće po završetku radnje.

Od verzije 3.0.0, svi Bootstrap događaji imaju prostor imena.

Svi infinitivni događaji pružaju preventDefaultfunkcionalnost. Ovo pruža mogućnost zaustavljanja izvršenja radnje prije nego što ona počne.

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

Brojevi verzija

Verziji svakog od Bootstrap-ovih jQuery dodataka može se pristupiti preko VERSIONsvojstva konstruktora dodatka. Na primjer, za dodatak s opisom alata:

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

Nema posebnih rezervi kada je JavaScript onemogućen

Bootstrap-ovi dodaci se ne vraćaju posebno graciozno kada je JavaScript onemogućen. Ako vam je stalo do korisničkog iskustva u ovom slučaju, koristite <noscript>da objasnite situaciju (i kako da ponovo omogućite JavaScript) svojim korisnicima, i/ili dodajte svoje vlastite prilagođene rezerve.

Prijelazi tranzicija.js

O tranzicijama

Za jednostavne efekte prijelaza, uključite transition.jsjednom uz druge JS datoteke. Ako koristite prevedenu (ili minimiziranu) bootstrap.js, nema potrebe da ovo uključujete – već je tu.

Šta je unutra

Transition.js je osnovni pomoćnik za transitionEnddogađaje kao i CSS emulator tranzicije. Koriste ga drugi dodaci za provjeru podrške za CSS prijelaz i za hvatanje visećih prijelaza.

Onemogućavanje prijelaza

Prijelazi se mogu globalno onemogućiti korištenjem sljedećeg JavaScript isječka, koji mora doći nakon transition.js(ili bootstrap.jsili bootstrap.min.js, ovisno o slučaju) učitavanja:

$.support.transition = false

Modals modal.js

Modali su pojednostavljeni, ali fleksibilni, dijaloški upiti s minimalnom potrebnom funkcionalnošću i pametnim zadanim postavkama.

Zbog načina na koji HTML5 definira svoju semantiku, autofocusHTML atribut nema efekta u Bootstrap modalima. Da biste postigli isti efekat, koristite neki prilagođeni JavaScript:

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

Primjeri

Statički primjer

Renderovani modalni sa zaglavljem, tijelom i skupom radnji u podnožju.

<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 uživo

Prebacite modal putem JavaScripta klikom na dugme ispod. Kliziće nadole i nestajati sa vrha stranice.

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

Opcione veličine

Modali imaju dvije opcione veličine, dostupne preko klasa modifikatora koje se postavljaju 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>

Ukloni animaciju

Za modale koji se jednostavno pojavljuju, a ne blede u prikazu, uklonite .fadeklasu iz modalne oznake.

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

Korištenje mrežnog sistema

Da biste iskoristili prednosti Bootstrap grid sistema unutar modalnog, samo ugnijezdite .rows unutar .modal-bodyi zatim koristite normalne klase grid 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 -->

Različiti modalni sadržaj na osnovu dugmeta okidača

Imate gomilu dugmadi koja svi pokreću isti modal, samo sa malo drugačijim sadržajem? Koristite event.relatedTargeti HTML data-*atribute (moguće putem jQueryja ) da promijenite sadržaj modalnog u zavisnosti od toga na koje dugme ste kliknuli. Pogledajte dokumentaciju o modalnim događajima za detalje 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)
})

Upotreba

Modalni dodatak uključuje vaš skriveni sadržaj na zahtjev, putem atributa podataka ili JavaScripta. Takođe dodaje .modal-openda se <body>zaobiđe podrazumevano ponašanje pomeranja i generiše a .modal-backdropda bi se obezbedila oblast klika za odbacivanje prikazanih modala kada se klikne izvan modalnog.

Preko atributa podataka

Aktivirajte modalni bez pisanja JavaScripta. Postavite data-toggle="modal"na element kontrolera, poput dugmeta, zajedno sa data-target="#foo"ili href="#foo"da biste ciljali određeni modal za prebacivanje.

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

Preko JavaScripta

Pozovite modalni s ID myModal-om s jednom linijom JavaScripta:

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

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-backdrop="".

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

Metode

.modal(options)

Aktivira vaš sadržaj kao modalni. Prihvata opcione opcije object.

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

.modal('toggle')

Ručno prebacuje modal. Vraća pozivaocu prije nego što je modal zapravo prikazan ili sakriven (tj. prije nego se dogodi događaj shown.bs.modalili ).hidden.bs.modal

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

.modal('show')

Ručno otvara modalni. Vraća se pozivaocu prije nego što je modalni stvarno prikazan (tj. prije nego što se shown.bs.modaldogađaj dogodi).

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

.modal('hide')

Ručno skriva modal. Vraća se pozivaocu prije nego što je modal zapravo skriven (tj. prije nego što se hidden.bs.modaldogađaj dogodi).

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

.modal('handleUpdate')

Ponovo prilagođava pozicioniranje modala da bi se suprotstavio traki za pomicanje u slučaju da se pojavi, što bi dovelo do modalnog skoka ulijevo.

Potrebno je samo kada se visina modala promijeni dok je otvorena.

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

Događaji

Bootstrap-ova modalna klasa izlaže nekoliko događaja za spajanje na modalnu funkcionalnost.

Svi modalni događaji se aktiviraju na samom modalnom (tj. na <div class="modal">).

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

Padajući meni dropdown.js

Primjeri

Dodajte padajuće menije gotovo svemu pomoću ovog jednostavnog dodatka, uključujući navigacijsku traku, kartice i tablete.

Unutar navigacijske trake

Unutar tableta

Upotreba

Preko atributa podataka ili JavaScript-a, padajući dodatak uključuje skriveni sadržaj (padajući meniji) tako što uključuje .openklasu na roditeljskoj listi.

Na mobilnim uređajima, otvaranje padajućeg menija dodaje a .dropdown-backdropkao oblast za dodir za zatvaranje padajućih menija kada dodirnete van menija, što je uslov za ispravnu podršku za iOS. To znači da prelazak sa otvorenog padajućeg menija na drugi padajući meni zahteva dodatni dodir na mobilnom telefonu.

Napomena: data-toggle="dropdown"Atribut se oslanja na zatvaranje padajućih menija na nivou aplikacije, tako da je dobra ideja da ga uvek koristite.

Preko atributa podataka

Dodajte data-toggle="dropdown"na vezu ili dugme da biste uključili padajući 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>

Da bi URL-ovi ostali netaknuti s dugmadima za vezu, koristite data-targetatribut umjesto 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>

Preko JavaScripta

Pozovite padajuće menije putem JavaScripta:

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

Opcije

Nema

Metode

$().dropdown('toggle')

Prebacuje padajući meni određene navigacijske trake ili navigacije sa karticama.

Događaji

Svi padajući događaji se aktiviraju na .dropdown-menuroditeljskom elementu 's.

Svi padajući događaji imaju relatedTargetsvojstvo, čija je vrijednost preklopni element sidra.

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

ScrollSpy scrollspy.js

Primjer u navigacijskoj traci

Dodatak ScrollSpy služi za automatsko ažuriranje navigacijskih ciljeva na osnovu položaja pomicanja. Skrolujte područje ispod navigacijske trake i gledajte kako se aktivni razred mijenja. Padajuće podstavke će također biti istaknute.

Upotreba

Zahtijeva relativno pozicioniranje

Bez obzira na metodu implementacije, scrollspy zahtijeva korištenje position: relative;na elementu koji špijunirate. U većini slučajeva ovo je <body>. Kada skrolujete elemente koji nisu <body>, budite sigurni da imate heightskup i overflow-y: scroll;primijenjen.

Preko atributa podataka

Da biste lako dodali ponašanje skrolovanja vašoj navigaciji na gornjoj traci, dodajte data-spy="scroll"elementu koji želite da špijunirate (najčešće bi to bio <body>). Zatim dodajte data-targetatribut s ID-om ili klasom roditeljskog elementa bilo koje Bootstrap .navkomponente.

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>

Preko JavaScripta

Nakon što dodate position: relative;svoj CSS, pozovite scrollspy putem JavaScripta:

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

Metode

.scrollspy('refresh')

Kada koristite scrollspy u kombinaciji sa dodavanjem ili uklanjanjem elemenata iz DOM-a, morat ćete pozvati metodu osvježavanja na sljedeći način:

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

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-offset="".

Događaji

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

Preklopne kartice tab.js

Primjeri kartica

Dodajte brzu, dinamičku funkcionalnost kartica za prelaz kroz okna lokalnog sadržaja, čak i putem padajućih menija. Ugniježđene kartice nisu podržane.

Upotreba

Omogućite kartice koje se mogu tabbirati putem JavaScripta (svaka kartica mora biti aktivirana zasebno):

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

Pojedinačne kartice možete aktivirati na nekoliko načina:

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

Možete aktivirati navigaciju po kartici ili tabletama bez pisanja JavaScripta jednostavnim navođenjem data-toggle="tab"ili data-toggle="pill"na elementu. Dodavanjem klasa navi nav-tabsna karticu će se primijeniti stil karticeul Bootstrap , dok će se dodavanjem i klasa primijeniti stil pilule .navnav-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>

Fade efekat

Da biste učinili da kartice nestaju, dodajte .fadesvakom .tab-pane. Prvo okno kartica također mora imati .inda početni sadržaj bude vidljiv.

<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 kartice i kontejner sadržaja. Tab bi trebao imati ili data-targetciljni hrefčvor kontejnera u DOM-u. U gornjim primjerima, kartice su <a>s s data-toggle="tab"atributima.

.tab('show')

Odabire datu karticu i prikazuje pridruženi sadržaj. Bilo koja druga kartica koja je prethodno odabrana postaje poništena, a njen povezani sadržaj je skriven. Vraća se pozivaocu prije nego što je tabulator stvarno prikazan (tj. prije nego što se shown.bs.tabdogađaj dogodi).

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

Događaji

Kada se prikaže nova kartica, događaji se aktiviraju sljedećim redoslijedom:

1. hide.bs.tab(na trenutno aktivnoj kartici)
2. show.bs.tab(na kartici za prikaz)
3. hidden.bs.tab(na prethodnoj aktivnoj kartici, ista kao i za hide.bs.tabdogađaj)
4. shown.bs.tab(na novo-aktivnoj upravo prikazanoj kartici, ista kao i za show.bs.tabdogađaj)

Ako nijedna kartica već nije bila aktivna, događaji hide.bs.tabi hidden.bs.tabneće se pokrenuti.

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

Tooltips tooltip.js

Inspirisan odličnim jQuery.tipsy dodatkom koji je napisao Jason Frame; Alati su ažurirana verzija, koja se ne oslanja na slike, koristi CSS3 za animacije i data-atribute za lokalno skladištenje naslova.

Alati sa naslovima nulte dužine se nikada ne prikazuju.

Primjeri

Zadržite pokazivač miša preko linkova ispod da vidite opise alata:

Statički opis alata

Dostupne su četiri opcije: gore, desno, dolje i lijevo poravnato.

Četiri pravca

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

Upotreba

Dodatak za opis alata generira sadržaj i oznake na zahtjev, a prema zadanim postavkama postavlja opise alata nakon njihovog elementa okidača.

Aktivirajte opis alata putem JavaScripta:

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

Markup

Potrebna oznaka za opis alata je samo dataatribut i titlena HTML elementu želite da imate opis alata. Generirana oznaka opisa alata je prilično jednostavna, iako zahtijeva poziciju (podrazumevano, postavljena na topdodatak).

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

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-animation="".

Metode

$().tooltip(options)

Prilaže rukovao opisom alata kolekciji elemenata.

.tooltip('show')

Otkriva opis elementa. Vraća se pozivaocu prije nego što je opis alata zapravo prikazan (tj. prije nego što se shown.bs.tooltipdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem opisa alata. Alati sa naslovima nulte dužine se nikada ne prikazuju.

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

.tooltip('hide')

Sakriva opis elementa. Vraća se pozivaocu prije nego što je opis alata zapravo skriven (tj. prije nego što se hidden.bs.tooltipdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem opisa alata.

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

.tooltip('toggle')

Prebacuje opis elementa. Vraća se pozivaocu prije nego što je opis alata zapravo prikazan ili skriven (tj. prije nego što se dogodi događaj shown.bs.tooltipili ). hidden.bs.tooltipOvo se smatra "ručnim" pokretanjem opisa alata.

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

.tooltip('destroy')

Sakriva i uništava opis elementa. Oznake alata koje koriste delegiranje (koje su kreirane pomoću opcije selector) ne mogu se pojedinačno uništiti na elementima okidača potomaka.

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

Događaji

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

Popovers popover.js

Dodajte male slojeve sadržaja, poput onih na iPadu, bilo kojem elementu za smještaj sekundarnih informacija.

Skočni prozori čiji su i naslov i sadržaj nulte dužine se nikada ne prikazuju.

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

Primjeri

Statički popover

Dostupne su četiri opcije: gore, desno, dolje i lijevo poravnato.

Demo už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>

Četiri pravca

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

Odbacite sljedećim klikom

Koristite focusokidač da odbacite skočne prozore pri sljedećem kliku koji korisnik napravi.

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

Upotreba

Omogućite iskačuće prikaze putem JavaScripta:

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

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-animation="".

Metode

$().popover(options)

Inicijalizira skočne prozore za kolekciju elemenata.

.popover('show')

Otkriva iskakanje elementa. Vraća se pozivaocu prije nego što je iskačući dio stvarno prikazan (tj. prije nego što se shown.bs.popoverdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem iskačućeg prozora. Skočni prozori čiji su i naslov i sadržaj nulte dužine se nikada ne prikazuju.

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

.popover('hide')

Sakriva skočni prozor elementa. Vraća se pozivaocu prije nego što je iskačući dio stvarno skriven (tj. prije nego što se hidden.bs.popoverdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem iskačućeg prozora.

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

.popover('toggle')

Prebacuje iskačući prozor elementa. Vraća se pozivaocu prije nego što je iskačući dio zapravo prikazan ili skriven (tj. prije nego što se dogodi događaj shown.bs.popoverili ). hidden.bs.popoverOvo se smatra "ručnim" pokretanjem iskačućeg prozora.

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

.popover('destroy')

Sakriva i uništava iskačući prikaz elementa. Skočni prozori koji koriste delegiranje (koji se kreiraju pomoću opcije selector) ne mogu se pojedinačno uništiti na elementima okidača potomaka.

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

Događaji

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

Poruke upozorenja alert.js

Primjer upozorenja

Dodajte funkciju odbacivanja svim porukama upozorenja pomoću ovog dodatka.

Kada koristite .closedugme, ono mora biti prvo dete .alert-dismissiblei nijedan tekstualni sadržaj ne sme da bude ispred njega u označavanju.

Upotreba

Samo dodajte data-dismiss="alert"dugme za zatvaranje da biste automatski dali funkciju upozorenja za zatvaranje. Zatvaranje upozorenja uklanja ga iz DOM-a.

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

Da bi vaša upozorenja koristila animaciju prilikom zatvaranja, uvjerite se da imaju .fadei.in na njih već primijenjene klase i

Metode

$().alert()

Omogućava da upozorenje osluškuje događaje klika na elementima potomcima koji imaju data-dismiss="alert"atribut. (Nije neophodno kada se koristi data-api auto-inicijalizacija.)

$().alert('close')

Zatvara upozorenje uklanjanjem iz DOM-a. Ako su klase .fadei .inprisutne na elementu, upozorenje će nestati prije nego što se ukloni.

Događaji

Bootstrap-ov dodatak za upozorenje izlaže nekoliko događaja za spajanje na funkcionalnost upozorenja.

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

Dugmad button.js

Uradite više sa dugmadima. Kontrolirajte stanja dugmadi ili kreirajte grupe dugmadi za više komponenti kao što su trake sa alatkama.

Stateful

Dodajte data-loading-text="Loading..."za korištenje stanja učitavanja na gumbu.

Ova funkcija je zastarjela od v3.3.5 i uklonjena je u v4.

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

Pojedinačni prekidač

Dodajte data-toggle="button"da aktivirate prebacivanje na jednom dugmetu.

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

Polje za potvrdu / Radio

Dodajte data-toggle="buttons"u okvir za .btn-grouppotvrdu ili radio ulaze da biste omogućili prebacivanje u njihovim odgovarajućim stilovima.

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

Uključuje push stanje. Daje dugmetu izgled da je aktivirano.

$().button('reset')

Resetuje stanje dugmeta - menja tekst u originalni tekst. Ova metoda je asinhrona i vraća se prije nego što se resetiranje zaista završi.

$().button(string)

Zamjenjuje tekst u bilo koje stanje teksta definirano podacima.

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

Collapse collapse.js

Fleksibilni dodatak koji koristi pregršt klasa za jednostavno prebacivanje ponašanja.

Primjer

Kliknite na dugmad ispod da prikažete i sakrijete drugi element putem promjena klase:

• .collapsesakriva sadržaj
• .collapsingprimjenjuje se tokom prijelaza
• .collapse.inprikazuje sadržaj

Možete koristiti vezu sa hrefatributom ili dugme sa data-targetatributom. U oba slučaja 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>

Primjer harmonike

Proširite zadano ponašanje sažimanja kako biste stvorili harmoniku s komponentom panela.

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

Također je moguće zamijeniti .panel-bodys sa .list-groups.

Upotreba

Dodatak za kolaps koristi nekoliko klasa za rukovanje teškim podizanjem:

• .collapsesakriva sadržaj
• .collapse.inprikazuje sadržaj
• .collapsingse dodaje kada prijelaz počne, a uklanja se kada se završi

Ovi časovi se mogu naći u component-animations.less.

Preko atributa podataka

Samo dodajte data-toggle="collapse"i a data-targetelementu da automatski dodijelite kontrolu nad sklopivim elementom. Atribut data-targetprihvaća CSS selektor za primjenu kolapsa na. Obavezno dodajte klasu collapsesklopivom elementu. Ako želite da se zadano otvori, dodajte dodatnu klasu in.

Da biste sklopivoj kontroli dodali upravljanje grupom nalik harmonici, dodajte atribut podataka data-parent="#selector". Pogledajte demo da vidite ovo na djelu.

Preko JavaScripta

Omogućite ručno pomoću:

$('.collapse').collapse()

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-parent="".

Metode

.collapse(options)

Aktivira vaš sadržaj kao sklopivi element. Prihvata opcione opcije object.

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

.collapse('toggle')

Prebacuje sklopivi element na prikazan ili skriven. Vraća pozivaocu prije nego što je sklopivi element zapravo prikazan ili sakriven (tj. prije nego se dogodi događaj shown.bs.collapseili ).hidden.bs.collapse

.collapse('show')

Prikazuje sklopivi element. Vraća pozivaocu prije nego što je sklopivi element zapravo prikazan (tj. prije nego što se shown.bs.collapsedogađaj dogodi).

.collapse('hide')

Sakriva sklopivi element. Vraća se pozivaocu prije nego što je sklopivi element zapravo skriven (tj. prije nego što se hidden.bs.collapsedogađaj dogodi).

Događaji

Bootstrapova klasa kolapsa izlaže nekoliko događaja za spajanje na funkcionalnost kolapsa.

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

Carousel carousel.js

Komponenta projekcije slajdova za kretanje kroz elemente, poput vrtuljka. Ugniježđeni vrtuljci nisu podržani.

Primjeri

Prethodno Sljedeći

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

Opcionalni natpisi

Jednostavno dodajte natpise svojim slajdovima pomoću .carousel-captionelementa unutar bilo kojeg .item. Stavite bilo koji opcioni HTML unutra i on će biti automatski poravnat i formatiran.

Oznaka prvog slajda

Nulla vitae elit libero, a pharetra augue mollis interdum.

Oznaka drugog slajda

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Oznaka trećeg slajda

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Prethodno Sljedeći

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

Upotreba

Višestruki vrtuljci

Vrteške zahtijevaju korištenje idna krajnjem vanjskom spremniku ( .carousel) da bi kontrole vrtuljke ispravno funkcionirale. Kada dodajete više vrteški, ili kada mijenjate vrtuljke id, obavezno ažurirajte relevantne kontrole.

Preko atributa podataka

Koristite atribute podataka za laku kontrolu položaja vrtuljka. data-slideprihvaća ključne riječi previli next, što mijenja položaj slajda u odnosu na njegovu trenutnu poziciju. Alternativno, koristite data-slide-toza prosljeđivanje sirovog indeksa slajda na vrtuljak data-slide-to="2", koji pomiče poziciju slajda na određeni indeks koji počinje sa 0.

Atribut data-ride="carousel"se koristi za označavanje vrtuljka kao animacije počevši od učitavanja stranice. Ne može se koristiti u kombinaciji sa (suvišnim i nepotrebnim) eksplicitnim JavaScript inicijalizacijom istog vrtuljka.

Preko JavaScripta

Ručno pozovite vrtuljak pomoću:

$('.carousel').carousel()

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-interval="".

Metode

.carousel(options)

Inicijalizira vrtuljak s opcijskim opcijama objecti počinje se kretati kroz stavke.

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

.carousel('cycle')

Kruži kroz stavke vrteške s lijeva na desno.

.carousel('pause')

Zaustavlja vrtuljku da se kreće kroz stavke.

.carousel(number)

Kruži vrtuljak do određenog okvira (na bazi 0, slično nizu).

.carousel('prev')

Prelazi na prethodnu stavku.

.carousel('next')

Prelazi na sljedeću stavku.

Događaji

Bootstrapova carousel klasa izlaže dva događaja za spajanje na funkcionalnost vrteške.

Oba događaja imaju sljedeća dodatna svojstva:

• direction: Smjer u kojem vrtuljak klizi (ili "left"ili "right").
• relatedTarget: DOM element koji se postavlja na mjesto kao aktivna stavka.

Svi događaji vrteške se aktiviraju na samom vrteškom (tj. na <div class="carousel">).

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

Afiks affix.js

Primjer

Dodatak za afiks position: fixed;se uključuje i isključuje, emulirajući efekat koji se nalazi sa position: sticky;. Podnavigacija sa desne strane je demo afiks dodatka uživo.

Upotreba

Koristite dodatak za afiks putem atributa podataka ili ručno sa vlastitim JavaScriptom. U obje situacije, morate dati CSS za pozicioniranje i širinu vašeg priloženog sadržaja.

Napomena: Nemojte koristiti dodatak za afiks na elementu koji se nalazi u relativno pozicioniranom elementu, kao što je povučena ili gurnuta kolona, ​​zbog greške u renderiranju u Safariju .

Pozicioniranje putem CSS-a

Dodatak afiksa se prebacuje između tri klase, od kojih svaka predstavlja određeno stanje: .affix, .affix-top, i .affix-bottom. Morate dati stilove, sa izuzetkom position: fixed;on .affix, za ove klase sami (nezavisno od ovog dodatka) za rukovanje stvarnim pozicijama.

Evo kako funkcioniše dodatak afiks:

1. Za početak, dodatak dodaje .affix-topkako bi označio da je element na najvišoj poziciji. U ovom trenutku nije potrebno CSS pozicioniranje.
2. Pomicanje pored elementa koji želite da pričvrstite trebalo bi da pokrene stvarno postavljanje. Ovo je mjesto gdje .affixzamjenjuje .affix-topi postavlja position: fixed;(obezbeđuje Bootstrap-ov CSS).
3. Ako je definiran donji pomak, pomicanje pored njega treba zamijeniti .affixsa .affix-bottom. Budući da su pomaci opcioni, postavljanje jednog zahtijeva od vas da postavite odgovarajući CSS. U tom slučaju dodajte position: absolute;po potrebi. Dodatak koristi atribut podataka ili JavaScript opciju da odredi gdje će pozicionirati element odatle.

Slijedite gornje korake da postavite svoj CSS za bilo koju od opcija korištenja u nastavku.

Preko atributa podataka

Da biste lako dodali ponašanje afiksa bilo kojem elementu, samo dodajte data-spy="affix"elementu koji želite da špijunirate. Koristite pomake da definišete kada da prebacujete zakačenje elementa.

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

Preko JavaScripta

Pozovite dodatak afiksa putem JavaScripta:

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

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-offset-top="200".

Metode

.affix(options)

Aktivira vaš sadržaj kao priloženi sadržaj. Prihvata opcione opcije object.

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

.affix('checkPosition')

Ponovno izračunava stanje afiksa na osnovu dimenzija, položaja i položaja pomicanja relevantnih elemenata. Klase .affix, .affix-top, i .affix-bottomse dodaju ili uklanjaju iz priloženog sadržaja prema novom stanju. Ovu metodu treba pozvati kad god se mijenjaju dimenzije priloženog sadržaja ili ciljnog elementa, kako bi se osiguralo ispravno pozicioniranje priloženog sadržaja.

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

Događaji

Bootstrap-ov dodatak za afiks izlaže nekoliko događaja za spajanje na funkcionalnost afiksa.