Pregled

Pojedinačni ili sastavljeni

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

Atributi podataka

Sve Bootstrap dodatke možete koristiti isključivo putem API-ja za označavanje bez pisanja ijednog retka JavaScripta. Ovo je Bootstrapov prvoklasni API i trebao bi vam biti na prvom mjestu pri korištenju dodatka.

Ipak, u nekim situacijama može biti poželjno isključiti ovu funkciju. Stoga također pružamo mogućnost onemogućavanja API-ja atributa podataka poništavanjem veza svih događaja na prostoru imena dokumenta s data-api. Ovo izgleda ovako:

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

Alternativno, da ciljate određeni dodatak, samo uključite naziv dodatka kao prostor imena zajedno s prostorom imena data-api ovako:

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

Programski API

Također vjerujemo da biste trebali moći koristiti sve Bootstrap dodatke isključivo putem JavaScript API-ja. Svi javni API-ji su pojedinačne metode koje se mogu ulančati i vraćaju zbirku na koju se djeluje.

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

Sve metode trebaju prihvatiti opcijski objekt opcija, niz koji cilja na 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 neobrađeni konstruktor na Constructorsvojstvu: $.fn.popover.Constructor. Ako želite dobiti određenu instancu dodatka, dohvatite je izravno iz elementa: $('[rel="popover"]').data('popover').

Zadane postavke

Možete promijeniti zadane postavke dodatka izmjenom Constructor.DEFAULTSobjekta dodatka:

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

Nema sukoba

Ponekad je potrebno koristiti Bootstrap dodatke s drugim UI okvirima. U tim okolnostima povremeno može doći do sukoba 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 većinu jedinstvenih radnji dodataka. Općenito, oni dolaze u obliku infinitiva i participa prošlosti - gdje se infinitiv (npr. show) pokreće na početku događaja, a njegov oblik participa prošlosti (npr. shown) se pokreće nakon završetka 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 započne.

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

Brojevi verzija

Verziji svakog Bootstrapovog jQuery dodatka može se pristupiti putem VERSIONsvojstva konstruktora dodatka. Na primjer, za dodatak s opisom alata:

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

Nema posebnih zamjena kada je JavaScript onemogućen

Bootstrapovi dodaci ne vraćaju se osobito graciozno kada je JavaScript onemogućen. Ako vam je stalo do korisničkog iskustva u ovom slučaju, upotrijebite <noscript>kako biste svojim korisnicima objasnili situaciju (i kako ponovno omogućiti JavaScript) i/ili dodajte vlastite prilagođene zamjene.

Prijelazi prijelaz.js

O prijelazima

Za jednostavne efekte prijelaza, uključite transition.jsjednom uz druge JS datoteke. Ako koristite kompilirani (ili umanjeni) bootstrap.js, nema potrebe uključivati ​​ovo—već je tu.

Što je unutra

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

Onemogućavanje prijelaza

Prijelazi se mogu globalno onemogućiti pomoću 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

Modali modal.js

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

Zbog načina na koji HTML5 definira svoju semantiku, autofocusHTML atribut nema učinka u Bootstrap modalima. Da biste postigli isti učinak, upotrijebite prilagođeni JavaScript:

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

Primjeri

Statički primjer

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

Uključite modal putem JavaScripta klikom na gumb ispod. Kliznit će prema dolje i izblijedjeti s 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>

Izborne veličine

Modali imaju dvije izborne veličine, dostupne putem modifikatorskih klasa 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 umjesto da blijede u prikazu, uklonite .fadeklasu iz svoje modalne oznake.

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

Korištenje mrežnog sustava

Da biste iskoristili prednosti Bootstrapovog mrežnog sustava unutar modalnog, samo ugniježdite .rows unutar .modal-bodyi zatim upotrijebite normalne klase mrežnog sustava.

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

Promjenjivi modalni sadržaj na temelju gumba okidača

Imate hrpu gumba koji svi pokreću isti modal, samo s malo drugačijim sadržajem? Upotrijebite HTML atributeevent.relatedTarget i (moguće putem jQueryja ) za mijenjanje sadržaja modala ovisno o tome koji je gumb kliknut. Pogledajte dokumente o modalnim događajima za detalje o ,data-*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)
})

Korištenje

Modalni dodatak prebacuje vaš skriveni sadržaj na zahtjev, putem atributa podataka ili JavaScripta. Također dodaje .modal-openza <body>nadjačavanje zadanog ponašanja pomicanja i generira .modal-backdropza pružanje područja klika za odbacivanje prikazanih modala kada se klikne izvan modala.

Preko atributa podataka

Aktivirajte modal bez pisanja JavaScripta. Postavite data-toggle="modal"na element kontrolera, poput gumba, zajedno s data-target="#foo"ili href="#foo"za ciljanje određenog modala za prebacivanje.

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

Preko JavaScripta

Pozovite modal s ID -om myModals jednim redom JavaScripta:

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

Mogućnosti

Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. 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 modal. Prihvaća izborne opcije object.

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

.modal('toggle')

Ručno mijenja modal. Vraća se pozivatelju prije nego što se modal stvarno prikaže ili sakrije (tj. prije nego što se dogodi događaj shown.bs.modalili ).hidden.bs.modal

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

.modal('show')

Ručno otvara modal. Vraća se pozivatelju prije nego što se modal stvarno prikaže (tj. prije nego što se shown.bs.modaldogađaj dogodi).

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

.modal('hide')

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

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

.modal('handleUpdate')

Ponovno prilagođava pozicioniranje modala kako bi spriječio traku za pomicanje u slučaju da se pojavi, što bi dovelo do skoka modala ulijevo.

Potrebno samo kada se visina modala mijenja dok je otvoren.

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

Događaji

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

Svi modalni događaji pokreću se na samom modalu (tj. na <div class="modal">).

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

Padajući meni dropdown.js

Primjeri

Dodajte padajuće izbornike gotovo svemu s ovim jednostavnim dodatkom, uključujući navigacijsku traku, kartice i pilule.

Unutar navigacijske trake

Unutar tableta

Korištenje

Putem atributa podataka ili JavaScripta, padajući dodatak uključuje i isključuje skriveni sadržaj (padajući izbornici) mijenjanjem .openklase na nadređenoj stavci popisa.

Na mobilnim uređajima otvaranje padajućeg izbornika dodaje .dropdown-backdroppodručje za dodirivanje za zatvaranje padajućih izbornika kada dodirnete izvan izbornika, što je preduvjet za odgovarajuću podršku za iOS. To znači da prebacivanje s otvorenog padajućeg izbornika na drugi padajući izbornik zahtijeva dodatni dodir na mobilnom telefonu.

Napomena: data-toggle="dropdown"atribut se oslanja na zatvaranje padajućih izbornika na razini aplikacije, stoga je dobra ideja uvijek ga koristiti.

Preko atributa podataka

Dodajte data-toggle="dropdown"na vezu ili gumb za prebacivanje padajućeg izbornika.

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

Kako bi URL-ovi ostali netaknuti s gumbima veza, upotrijebite 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 izbornike putem JavaScripta:

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

Mogućnosti

Nijedan

Metode

$().dropdown('toggle')

Prebacuje padajući izbornik određene navigacijske trake ili navigacije s karticama.

Događaji

Svi padajući događaji pokreću se na .dropdown-menuroditeljskom elementu.

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

$('#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 temelju položaja pomicanja. Pomičite područje ispod navigacijske trake i promatrajte promjenu aktivne klase. Podstavke padajućeg izbornika također će biti istaknute.

Korištenje

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 špijunirate na elementima koji nisu <body>, svakako imate heightpostavljen i overflow-y: scroll;primijenjen.

Preko atributa podataka

Da biste jednostavno dodali scrollspy ponašanje svojoj navigaciji gornje trake, dodajte data-spy="scroll"elementu koji želite špijunirati (najčešće bi to bio <body>). Zatim dodajte data-targetatribut s ID-om ili klasom nadređenog 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 dodavanja position: relative;vašeg CSS-a, pozovite scrollspy putem JavaScripta:

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

Metode

.scrollspy('refresh')

Kada koristite scrollspy u kombinaciji s 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')
})

Mogućnosti

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

Događaji

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

Kartice koje se mogu mijenjati tab.js

Primjeri kartica

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

Korištenje

Omogućite tabbable kartice putem JavaScripta (svaku karticu potrebno je zasebno aktivirati):

$('#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 karticu ili navigaciju pilulom bez pisanja bilo kakvog JavaScripta jednostavnim navođenjem data-toggle="tab"ili data-toggle="pill"na elementu. Dodavanjem klasa navi nav-tabsna karticu primijenit će se stil karticeul Bootstrap , dok će dodavanjem klasa i primijeniti stil tablete .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>

Efekt blijeđenja

Da bi kartice blijedjele, dodajte .fadesvakoj .tab-pane. Prvo okno kartice također mora .inučiniti početni sadržaj vidljivim.

<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 spremnik sadržaja. Kartica bi trebala imati data-targetili hrefciljanje čvora spremnika u DOM-u. U gornjim primjerima, kartice su <a>s s data-toggle="tab"atributima.

.tab('show')

Odabire zadanu karticu i prikazuje pridruženi sadržaj. Bilo koja druga kartica koja je prethodno bila odabrana postaje neodabrana, a pridruženi sadržaj skriven. Vraća se pozivatelju prije nego što se okno kartice stvarno prikaže (tj. prije nego što se shown.bs.tabdogađaj dogodi).

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

Događaji

Kada se prikazuje nova kartica, događaji se aktiviraju sljedećim redoslijedom:

1. hide.bs.tab(na trenutno aktivnoj kartici)
2. show.bs.tab(na kartici koje će biti prikazano)
3. hidden.bs.tab(na prethodnoj aktivnoj kartici, ista kao za hide.bs.tabdogađaj)
4. shown.bs.tab(na novoaktivnoj upravo prikazanoj kartici, ista kao i za show.bs.tabdogađaj)

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

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

Opisi tooltip.js

Nadahnut izvrsnim dodatkom jQuery.tipsy koji je napisao Jason Frame; Opisi alata ažurirana su verzija koja se ne oslanja na slike, koristi CSS3 za animacije i atribute podataka za lokalnu pohranu naslova.

Opisi s naslovima nulte duljine nikad se ne prikazuju.

Primjeri

Zadržite pokazivač iznad donjih veza da biste vidjeli savjete:

Statički opis alata

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

Četiri smjera

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

Korištenje

Dodatak s opisom alata generira sadržaj i oznake na zahtjev i prema zadanim postavkama postavlja opise alata nakon elementa pokretača.

Pokreni opis alata putem JavaScripta:

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

Markup

Potrebna oznaka za opis alata samo je dataatribut, a titlena HTML elementu želite imati opis alata. Generirano označavanje opisa alata je prilično jednostavno, iako zahtijeva poziciju (prema zadanim postavkama, postavljena topod strane dodatka).

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

Mogućnosti

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

Metode

$().tooltip(options)

Priključuje rukovatelj opisom alata kolekciji elemenata.

.tooltip('show')

Otkriva opis elementa. Vraća se pozivatelju prije nego što se alatni opis stvarno prikaže (tj. prije nego što se shown.bs.tooltipdogađaj dogodi). To se smatra "ručnim" pokretanjem opisa alata. Opisi s naslovima nulte duljine nikad se ne prikazuju.

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

.tooltip('hide')

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

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

.tooltip('toggle')

Prebacuje opis elementa. Vraća se pozivatelju prije nego što se opis alata zapravo prikaže ili sakrije (tj. prije nego što se dogodi događaj shown.bs.tooltipili ). hidden.bs.tooltipTo se smatra "ručnim" pokretanjem opisa alata.

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

.tooltip('destroy')

Skriva i uništava opis elementa. Opisi alata koji koriste delegiranje (koji se stvaraju 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…
})

Popover 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 duljine nikad se ne prikazuju.

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

Primjeri

Statički skok

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 smjera

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

Odbaci pri sljedećem kliku

Koristite focusokidač za odbacivanje skočnih prozora pri sljedećem korisnikovom kliku.

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

Korištenje

Omogući skočne prozore putem JavaScripta:

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

Mogućnosti

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

Metode

$().popover(options)

Inicijalizira skočne prozore za zbirku elemenata.

.popover('show')

Otkriva popover elementa. Vraća se pozivatelju prije nego što se popover stvarno prikaže (tj. prije nego što se shown.bs.popoverdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem popover-a. Skočni prozori čiji su i naslov i sadržaj nulte duljine nikad se ne prikazuju.

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

.popover('hide')

Skriva skočni prozor elementa. Vraća se pozivatelju prije nego što je popover zapravo skriven (tj. prije nego što se hidden.bs.popoverdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem popover-a.

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

.popover('toggle')

Isključuje skočni prozor elementa. Vraća se pozivatelju prije nego što se popover stvarno prikaže ili sakrije (tj. prije nego što se dogodi događaj shown.bs.popoverili ). hidden.bs.popoverOvo se smatra "ručnim" pokretanjem popover-a.

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

.popover('destroy')

Skriva i uništava popover elementa. Popoveri koji koriste delegiranje (koji se stvaraju pomoću opcije selector) ne mogu se pojedinačno uništiti na okidačkim elementima potomcima.

$('#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 .closegumb, on mora biti prvi podređeni gumb.alert-dismissible i nijedan tekstualni sadržaj ne smije biti prije njega u označavanju.

Korištenje

Samo dodajte data-dismiss="alert"gumbu za zatvaranje kako biste automatski dali funkciju zatvaranja upozorenja. 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 pri zatvaranju, provjerite imaju li .fadei.in na njih već primijenjene klase i

Metode

$().alert()

Osluškuje upozorenje za događaje klikova na elementima potomcima koji imaju data-dismiss="alert"atribut. (Nije potrebno kada se koristi auto-inicijalizacija data-api-ja.)

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

Bootstrapov dodatak za upozorenja otkriva nekoliko događaja za povezivanje s funkcijom upozorenja.

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

Gumbi button.js

Učinite više s gumbima. Stanja gumba za kontrolu ili stvaranje grupa gumba za više komponenti poput alatnih traka.

Državničko

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

Ova je značajka zastarjela od verzije 3.3.5 i uklonjena je u verziji 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>

Jednostruki prekidač

Dodajte data-toggle="button"za aktiviranje prebacivanja na jednom gumbu.

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

Potvrdni okvir / Radio

Dodajte potvrdni okvir data-toggle="buttons"koji .btn-groupsadrži ili radio ulaze kako biste omogućili prebacivanje u njihovim 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')

Prebacuje stanje guranja. Daje gumbu izgled da je aktiviran.

$().button('reset')

Ponovno postavlja stanje gumba - mijenja tekst u izvorni tekst. Ova metoda je asinkrona i vraća se prije nego što je resetiranje stvarno dovršeno.

$().button(string)

Mijenja tekst u bilo koje stanje teksta definiranog 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>

Sažmi kolaps.js

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

Primjer

Pritisnite donje gumbe za prikaz ili skrivanje drugog elementa putem promjena klase:

• .collapseskriva sadržaj
• .collapsingprimjenjuje se tijekom prijelaza
• .collapse.inprikazuje sadržaj

Možete koristiti vezu s hrefatributom ili gumb s data-targetatributom. U oba slučaja data-toggle="collapse"potrebno je.

<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 da biste stvorili harmoniku s komponentom 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>

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

Korištenje

Dodatak za kolapsiranje koristi nekoliko klasa za rukovanje teškim dizanjem:

• .collapseskriva sadržaj
• .collapse.inprikazuje sadržaj
• .collapsingdodaje se kada prijelaz započne, a uklanja kada završi

Ove se klase mogu pronaći u component-animations.less.

Preko atributa podataka

Samo dodajte data-toggle="collapse"i data-targetelementu da biste automatski dodijelili kontrolu nad sklopivim elementom. Atribut data-targetprihvaća CSS birač na koji se primjenjuje sažimanje. Obavezno dodajte klasu collapsesklopivom elementu. Ako želite da se prema zadanim postavkama otvori, dodajte dodatnu klasu in.

Da biste sklopivoj kontroli dodali grupno upravljanje poput harmonike, dodajte atribut podataka data-parent="#selector". Pogledajte demo kako biste vidjeli ovo na djelu.

Preko JavaScripta

Omogućite ručno pomoću:

$('.collapse').collapse()

Mogućnosti

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

Metode

.collapse(options)

Aktivira vaš sadržaj kao sklopivi element. Prihvaća izborne opcije object.

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

.collapse('toggle')

Prebacuje sklopivi element na prikazan ili skriven. Vraća se pozivatelju prije nego što se sklopivi element stvarno prikaže ili sakrije (tj. prije nego što se dogodi događaj shown.bs.collapseili ).hidden.bs.collapse

.collapse('show')

Prikazuje sklopivi element. Vraća se pozivatelju prije nego što se sklopivi element stvarno prikaže (tj. prije nego što se shown.bs.collapsedogađaj dogodi).

.collapse('hide')

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

Događaji

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

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

Vrtuljak carousel.js

Komponenta dijaprojekcije za kruženje kroz elemente, poput vrtuljka. Ugniježđeni karuseli 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>

Dodatni natpisi

Lako dodajte opise svojim slajdovima pomoću .carousel-captionelementa unutar bilo kojeg .item. Tamo stavite bilo koji izborni HTML i on će se automatski poravnati i formatirati.

Oznaka prvog slajda

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

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>

Korištenje

Više vrtuljaka

Vrtuljci zahtijevaju upotrebu idna krajnjem vanjskom spremniku ( .carousel) kako bi kontrole vrtuljka ispravno funkcionirale. Kada dodajete više karusela ili kada mijenjate karusele id, svakako ažurirajte relevantne kontrole.

Preko atributa podataka

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

Atribut data-ride="carousel"se koristi za označavanje vrtuljka kao animiranog koji počinje pri učitavanju stranice. Ne može se koristiti u kombinaciji sa (suvišnom i nepotrebnom) eksplicitnom JavaScript inicijalizacijom istog vrtuljka.

Preko JavaScripta

Pozovite karusel ručno pomoću:

$('.carousel').carousel()

Mogućnosti

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

Metode

.carousel(options)

Inicijalizira vrtuljak s neobaveznim opcijama objecti počinje kružiti kroz stavke.

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

.carousel('cycle')

Kruži kroz stavke vrtuljka slijeva nadesno.

.carousel('pause')

Zaustavlja vrtuljak da kruži kroz stavke.

.carousel(number)

Vrti vrtuljak na određeni okvir (na temelju 0, slično nizu).

.carousel('prev')

Ciklusi na prethodnu stavku.

.carousel('next')

Prelazak na sljedeću stavku.

Događaji

Bootstrapova klasa vrtuljka izlaže dva događaja za spajanje na funkciju vrtuljka.

Oba događaja imaju sljedeća dodatna svojstva:

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

Svi događaji na vrtuljku pokreću se na samom vrtuljku (tj. na <div class="carousel">).

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

Pričvrstite affix.js

Primjer

Dodatak za afiks uključuje position: fixed;se i isključuje, oponašajući učinak pronađen s position: sticky;. Podnavigacija s desne strane je demonstracija dodatka afiksa uživo.

Korištenje

Upotrijebite dodatak za afiks putem atributa podataka ili ručno s vlastitim JavaScriptom. U obje situacije morate navesti CSS za pozicioniranje i širinu vašeg pričvršćenog sadržaja.

Napomena: Nemojte koristiti dodatak za pričvršćivanje na elementu koji se nalazi u relativno pozicioniranom elementu, kao što je povučeni ili gurnuti stupac, zbog greške u prikazivanju Safarija .

Pozicioniranje putem CSS-a

Dodatak afiksa mijenja se između tri klase, od kojih svaka predstavlja određeno stanje: .affix, .affix-topi .affix-bottom. Morate sami osigurati stilove, s iznimkom position: fixed;na .affix, za te klase (neovisno o ovom dodatku) kako biste rukovali stvarnim pozicijama.

Evo kako radi dodatak afiksa:

1. Za početak, dodatak dodaje .affix-topkako bi označio da je element na svom najvišem položaju. U ovom trenutku nije potrebno CSS pozicioniranje.
2. Pomicanje pored elementa koji želite pričvrstiti trebalo bi pokrenuti stvarno pričvršćivanje. Ovo je mjesto gdje se .affixzamjenjuje .affix-topi postavlja position: fixed;(omogućuje Bootstrapov CSS).
3. Ako je definiran donji pomak, pomicanje iza njega treba zamijeniti .affixs .affix-bottom. Budući da su pomaci izborni, njihovo postavljanje zahtijeva da postavite odgovarajući CSS. U tom slučaju dodajte position: absolute;po potrebi. Dodatak koristi atribut podataka ili JavaScript opciju kako bi odredio gdje pozicionirati element od tamo.

Slijedite gore navedene korake kako biste postavili svoj CSS za bilo koju od opcija upotrebe u nastavku.

Preko atributa podataka

Da biste jednostavno dodali ponašanje pričvršćivanja bilo kojem elementu, samo dodajte data-spy="affix"elementu koji želite špijunirati. Upotrijebite pomake kako biste definirali kada promijeniti prikvačivanje elementa.

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

Preko JavaScripta

Pozovite affix dodatak putem JavaScripta:

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

Mogućnosti

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

Metode

.affix(options)

Aktivira vaš sadržaj kao pričvršćeni sadržaj. Prihvaća izborne opcije object.

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

.affix('checkPosition')

Ponovno izračunava stanje afiksa na temelju dimenzija, položaja i položaja pomicanja relevantnih elemenata. Klase .affix, .affix-top, i .affix-bottomdodaju se ili uklanjaju iz pričvršćenog sadržaja u skladu s novim stanjem. Ovu metodu treba pozvati kad god se promijene dimenzije pričvršćenog sadržaja ili ciljnog elementa, kako bi se osiguralo ispravno pozicioniranje pričvršćenog sadržaja.

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

Događaji

Bootstrapov dodatak za afiks otkriva nekoliko događaja za spajanje na funkciju afiksa.