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

Korištenje prevedenog JavaScripta

Oba bootstrap.jsi bootstrap.min.jssadrže sve dodatke u jednoj datoteci. Uključi samo jedan.

Ovisnosti dodataka

Neki dodaci i CSS komponente ovise o drugim dodacima. Ako dodate dodatke pojedinačno, svakako provjerite te ovisnosti u dokumentima. Također imajte na umu da svi dodaci ovise o jQueryju (to znači da jQuery mora biti uključen prije datoteka dodataka). Posavjetujte se s našimbower.json da biste vidjeli koje su verzije jQueryja podržane.

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

Samo jedan dodatak po elementu putem atributa podataka

Nemojte koristiti atribute podataka iz više dodataka na istom elementu. Na primjer, gumb ne može istovremeno imati opis alata i mijenjati modal. Da biste to postigli, upotrijebite element za omatanje.

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.

Knjižnice trećih strana

Bootstrap službeno ne podržava JavaScript biblioteke trećih strana kao što su Prototype ili jQuery UI. Unatoč .noConflictdogađajima u prostoru imena, može doći do problema s kompatibilnošću koje morate sami riješiti.

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.

Više otvorenih modala nije podržano

Pazite da ne otvorite modal dok je drugi još vidljiv. Prikazivanje više od jednog modala istovremeno zahtijeva prilagođeni kod.

Položaj modalne oznake

Uvijek pokušajte postaviti HTML kod modala na poziciju najviše razine u svom dokumentu kako biste izbjegli da druge komponente utječu na izgled i/ili funkcionalnost modala.

Upozorenja za mobilne uređaje

Postoje neka upozorenja u vezi s korištenjem modala na mobilnim uređajima. Pogledajte našu dokumentaciju za podršku preglednika za detalje.

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>

Učinite modale pristupačnima

Obavezno dodajte role="dialog"i aria-labelledby="...", pozivajući se na modalni naslov, na .modali role="document"na samoga .modal-dialogsebe.

Osim toga, možete dati opis svog modalnog dijaloga s aria-describedbyna .modal.

Ugradnja YouTube videa

Ugrađivanje YouTube videozapisa u modale zahtijeva dodatni JavaScript koji nije u Bootstrapu za automatsko zaustavljanje reprodukcije i više. Za više informacija pogledajte ovaj korisni post Stack Overflowa .

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

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

...više gumba...
<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="".

Ime tip zadano opis
pozadina booleov ili niz'static' pravi Uključuje element modalne pozadine. Alternativno, navedite staticza pozadinu koja ne zatvara modal na klik.
tipkovnica Booleov pravi Zatvara modal kada se pritisne tipka za izlaz
pokazati Booleov pravi Prikazuje modal kada se inicijalizira.
daljinski staza lažno

Ova je opcija zastarjela od verzije 3.3.0 i uklonjena je u verziji 4. Umjesto toga preporučamo korištenje predložaka na strani klijenta ili okvir za vezanje podataka ili sami pozovite jQuery.load .

Ako je naveden udaljeni URL, sadržaj će se učitati jednom putem jQuery loadmetode i umetnuti u .modal-contentdiv. Ako koristite data-api, alternativno možete koristiti hrefatribut za navođenje udaljenog izvora. Primjer ovoga prikazan je u nastavku:

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

Metode

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

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

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

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

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

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

Vrsta događaja Opis
pokazati.bs.modalni Ovaj događaj aktivira se odmah kada showse pozove metoda instance. Ako je uzrokovan klikom, kliknuti element dostupan je kao relatedTargetsvojstvo događaja.
prikazano.bs.modalno Ovaj se događaj pokreće kada je modal postao vidljiv korisniku (pričekat će da se CSS prijelazi završe). Ako je uzrokovan klikom, kliknuti element dostupan je kao relatedTargetsvojstvo događaja.
sakriti.bs.modalan Ovaj događaj se aktivira odmah nakon hidepozivanja metode instance.
skriven.bs.modalan Ovaj se događaj pokreće kada se modal više ne skriva od korisnika (pričekat će se da se CSS prijelazi završe).
učitano.bs.modalno Ovaj se događaj aktivira kada modal učita sadržaj pomoću remoteopcije.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Padajući meni dropdown.js

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

Unutar navigacijske trake

Unutar tableta

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

data-toggle="dropdown"još uvijek potrebno

Bez obzira na to pozivate li svoj padajući izbornik putem JavaScripta ili umjesto toga koristite data-api, data-toggle="dropdown"uvijek je potrebno biti prisutan na elementu okidača padajućeg izbornika.

Nijedan

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

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.

Vrsta događaja Opis
show.bs.dropdown Ovaj događaj aktivira se odmah kada se pozove metoda show instance.
prikazano.bs.padajući izbornik Ovaj se događaj pokreće kada je padajući izbornik učinjen vidljivim korisniku (pričekat će CSS prijelaze da dovrše).
hide.bs.dropdown Ovaj se događaj aktivira odmah nakon pozivanja metode hide instance.
skriven.bs.padajući Ovaj se događaj pokreće kada se padajući izbornik više ne skriva od korisnika (pričekat će se da CSS prijelazi dovrše).
$('#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.

@mast

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi prije nego što su rasprodali qui. Tumblr prava za bicikle od farme do stola. Anim keffiyeh carles kardigan. Velit seitan mcsweeney's photo booth 3 vuk mjesec irure. Cosby pulover lomo jean kratke hlače, williamsburg hoodie minim qui vjerojatno niste čuli za njih i kardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tetovirani akuzamus, cred ironija biodizel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa brkovi skateboard, adipisicing fugiat velit vile brada. Freeganova brada aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tetovirani cosby pulover s hranom, mcsweeneyjev quis non freegan vinil. Lo-fi wes anderson +1 krojački. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

jedan

Occaecat commodo aliqua delectus. Fap craft pivo deserunt skateboard ea. Lomo biciklistička prava adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinil, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minimalna kurirska torba. Cred ex in, održivi delectus consectetur fanny pack iphone.

dva

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id pretpostavlja se. Locavore sed helvetica kliše ironija, thundercats vjerojatno niste čuli za njih consequat hoodie bez glutena lo-fi fap aliquip. Labore elit placeat prije nego što su rasprodani, terry richardson proident brunch nesciunt quis cosby džemper pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan gotovi velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Korištenje

Zahtijeva Bootstrap nav

Scrollspy trenutačno zahtijeva korištenje Bootstrap navigacijske komponente za pravilno isticanje aktivnih veza.

Potrebni su razrješivi ID ciljevi

Veze na navigacijskoj traci moraju imati razrješive ID ciljeve. Na primjer, <a href="#home">home</a>mora odgovarati nečemu u DOM-u kao što je <div id="home"></div>.

Elementi koji nisu :visibleciljani zanemareni

Ciljani elementi koji nisu :visibleu skladu s jQueryjem bit će zanemareni i njihove odgovarajuće navigacijske stavke nikada neće biti istaknute.

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

Ime tip zadano opis
pomaknuti broj 10 Pikseli za pomak od vrha pri izračunavanju položaja pomicanja.

Događaji

Vrsta događaja Opis
aktivirati.bs.scrollspy Ovaj događaj se aktivira kad god se nova stavka aktivira od strane ScrollSpy.
$('#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.

Sirovi traper za koji vjerojatno niste čuli za jeans kratke hlače Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Moustache cliche tempor, williamsburg carles veganska helvetica. Reprehenderit mesar retro keffiyeh dreamcatcher synth. Cosby pulover eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis kardigan američka odjeća, mesar voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Proširuje navigaciju pomoću kartica

Ovaj dodatak proširuje komponentu navigacije s karticama za dodavanje područja s karticama.

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.

Vrsta događaja Opis
pokazati.bs.tab Ovaj se događaj aktivira prilikom prikaza kartice, ali prije nego što se prikaže nova kartica. Koristite event.targeti event.relatedTargetza ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).
prikazano.bs.tab Ovaj se događaj pokreće na prikazu kartice nakon što je kartica prikazana. Koristite event.targeti event.relatedTargetza ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).
sakriti.bs.tab Ovaj se događaj pokreće kada se treba prikazati nova kartica (i stoga se prethodna aktivna kartica treba sakriti). Koristite event.targeti event.relatedTargetza ciljanje trenutno aktivne kartice i nove kartice koja će uskoro biti aktivna.
skriven.bs.tab Ovaj se događaj pokreće nakon što se prikaže nova kartica (i stoga je prethodna aktivna kartica skrivena). Koristite event.targeti event.relatedTargetza ciljanje prethodne aktivne kartice odnosno nove aktivne kartice.
$('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:

Uske hlače sljedeće razine keffiyeh za koje vjerojatno niste čuli. Photo booth beard raw denim letterpress veganska kurirska torba stumptown. Seitan od farme do stola, mcsweeneyjeva fiksna održiva quinoa 8-bitna američka odjeća ima frotir richardson vinil chambray. Beard stumptown, kardigani banh mi lomo thundercats. Tofu biodizel williamsburg marfa, four loko mcsweeney's cleanse veganski chambray. A stvarno ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

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>

Funkcionalnost uključivanja

Zbog performansi, Tooltip i Popover data-apis su opt-in, što znači da ih morate sami inicijalizirati .

Jedan od načina da inicijalizirate sve opise alata na stranici bio bi da ih odaberete prema njihovim data-toggleatributima:

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

Veze s više redaka

Ponekad želite dodati opis alata hipervezi koja prelama više redaka. Zadano ponašanje dodatka za opis alata je njegovo centriranje vodoravno i okomito. Dodajte white-space: nowrap;svojim sidrima kako biste to izbjegli.

Opisi alata u grupama gumba, grupama unosa i tablicama zahtijevaju posebne postavke

Kada koristite opise alata na elementima unutar .btn-groupili .input-group, ili na elementima povezanim s tablicom ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), morat ćete navesti opciju container: 'body'(dokumentirano u nastavku) kako biste izbjegli neželjene nuspojave (kao što je širenje elementa i/ ili gubitak zaobljenih kutova kada se aktivira opis alata).

Ne pokušavajte prikazati opise alata na skrivenim elementima

Pozivanje $(...).tooltip('show')kada je ciljni element display: none;uzrokovat će neispravno pozicioniranje opisa alata.

Pristupačni opisi za korisnike tipkovnice i pomoćne tehnologije

Za korisnike koji se kreću pomoću tipkovnice, a posebno za korisnike pomoćnih tehnologija, savjete alata trebali biste dodati samo elementima koji se mogu fokusirati na tipkovnici kao što su veze, kontrole obrazaca ili bilo koji proizvoljni element s tabindex="0"atributom.

Opisi alata na onemogućenim elementima zahtijevaju elemente omotača

Da biste dodali opis alata elementu disabledili .disabled, stavite element unutar a i umjesto toga <div>na njega primijenite opis alata .<div>

Mogućnosti

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

Ime Tip Zadano Opis
animacija Booleov pravi Primijenite CSS fade prijelaz na tooltip
spremnik niz | lažno lažno

Dodaje opis alata određenom elementu. Primjer: container: 'body'. Ova je opcija posebno korisna jer vam omogućuje da pozicionirate opis alata u toku dokumenta blizu elementa koji pokreće - što će spriječiti da opis odleti od elementa koji pokreće tijekom promjene veličine prozora.

odgoditi broj | objekt 0

Odgoda prikazivanja i skrivanja opisa alata (ms) - ne odnosi se na vrstu ručnog okidača

Ako je naveden broj, odgoda se primjenjuje na skrivanje/prikazivanje

Struktura objekta je:delay: { "show": 500, "hide": 100 }

html Booleov lažno Umetnite HTML u opis alata. Ako je false, jQueryjeva textmetoda koristit će se za umetanje sadržaja u DOM. Upotrijebite tekst ako ste zabrinuti zbog XSS napada.
plasman niz | funkcija 'vrh'

Kako postaviti opis alata - vrh | dno | lijevo | desno | auto.
Kada je naveden "auto", dinamički će preusmjeriti opis alata. Na primjer, ako je položaj "automatski lijevo", opis alata će se prikazati lijevo kada je to moguće, inače će se prikazati desno.

Kada se funkcija koristi za određivanje položaja, poziva se s DOM čvorom alata kao prvim argumentom i DOM čvorom pokretačkog elementa kao drugim. Kontekst thisje postavljen na instancu opisa alata.

selektor niz lažno Ako je selektor naveden, objekti opisa alata bit će delegirani navedenim ciljevima. U praksi se ovo koristi kako bi se omogućilo dodavanje opisa alata za dinamički HTML sadržaj. Pogledajte ovo i informativan primjer .
šablona niz '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Osnovni HTML za korištenje pri izradi opisa alata.

Opis alata titlebit će umetnut u .tooltip-inner.

.tooltip-arrowpostat će strelica opisa alata.

Najudaljeniji element omotača trebao bi imati .tooltipklasu.

titula niz | funkcija ''

Zadana vrijednost naslova ako titleatribut nije prisutan.

Ako je dana funkcija, bit će pozvana s thisreferencom postavljenom na element na koji je priložen opis alata.

okidač niz 'hover focus' Kako se aktivira opis alata - kliknite | lebdjeti | fokus | priručnik. Možete proći više okidača; odvojite ih razmakom. manualne može se kombinirati ni s jednim drugim okidačem.
prozor za prikaz niz | objekt | funkcija { selektor: 'body', padding: 0 }

Zadržava opis alata unutar granica ovog elementa. Primjer: viewport: '#viewport'ili{ "selector": "#viewport", "padding": 0 }

Ako je funkcija dana, ona se poziva s elementom pokretanja DOM čvorom kao jedinim argumentom. Kontekst thisje postavljen na instancu opisa alata.

Atributi podataka za pojedinačne opise alata

Opcije za pojedinačne opise alata mogu se alternativno odrediti korištenjem atributa podataka, kao što je gore objašnjeno.

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

Vrsta događaja Opis
show.bs.tooltip Ovaj događaj aktivira se odmah kada showse pozove metoda instance.
prikazano.bs.tooltip Ovaj se događaj pokreće kada je opis alata vidljiv korisniku (pričekat će se da se CSS prijelazi završe).
hide.bs.tooltip Ovaj događaj se aktivira odmah nakon hidepozivanja metode instance.
skriven.bs.tooltip Ovaj se događaj pokreće kada se opis alata više ne skriva od korisnika (pričekat će se da se CSS prijelazi završe).
umetnuto.bs.tooltip Ovaj se događaj pokreće nakon show.bs.tooltipdogađaja kada je predložak opisa alata dodan u DOM.
$('#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.

Ovisnost o dodacima

Popovers zahtijevaju da plugin tooltip bude uključen u vašu verziju Bootstrapa.

Funkcionalnost uključivanja

Zbog performansi, Tooltip i Popover data-apis su opt-in, što znači da ih morate sami inicijalizirati .

Jedan od načina da inicijalizirate sve skočne prozore na stranici bio bi da ih odaberete prema njihovom data-toggleatributu:

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

Skočni prozori u grupama gumba, grupama unosa i tablicama zahtijevaju posebne postavke

Kada koristite skočne prozore na elementima unutar .btn-groupili .input-group, ili na elementima povezanim s tablicom ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), morat ćete navesti opciju container: 'body'(dokumentirano u nastavku) kako biste izbjegli neželjene nuspojave (kao što je širenje elementa i/ ili gubitak zaobljenih uglova kada se aktivira popover).

Ne pokušavajte prikazati skočne prozore na skrivenim elementima

Pozivanje $(...).popover('show')kada je ciljni element display: none;uzrokovat će netočan položaj skočnog prozora.

Skočni prozori na onemogućenim elementima zahtijevaju elemente omotača

Da biste dodali popover elementu disabledili .disabled, stavite element unutar a <div>i primijenite popover na to <div>umjesto toga.

Veze s više redaka

Ponekad želite dodati skočni prozor hipervezi koja prelama više redaka. Zadano ponašanje popover dodatka je njegovo centriranje vodoravno i okomito. Dodajte white-space: nowrap;svojim sidrima kako biste to izbjegli.

Primjeri

Statički skok

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

Popover top

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

Popover desno

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

Popover dno

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

Popover lijevo

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

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.

Posebna oznaka potrebna za odbacivanje pri sljedećem kliku

Za ispravno ponašanje između preglednika i platformi, morate koristiti <a>oznaku, a ne oznaku <button>, a također morate uključiti atribute role="button"i .tabindex

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

Ime Tip Zadano Opis
animacija Booleov pravi Primijenite CSS fade prijelaz na skočni prozor
spremnik niz | lažno lažno

Dodaje skočni prozor određenom elementu. Primjer: container: 'body'. Ova je opcija posebno korisna jer vam omogućuje postavljanje skočnog prozora u tok dokumenta blizu elementa koji pokreće - što će spriječiti da skočni prozor odlebdi od elementa koji pokreće tijekom promjene veličine prozora.

sadržaj niz | funkcija ''

Zadana vrijednost sadržaja ifdata-content atribut nije prisutan.

Ako je dana funkcija, bit će pozvana s thisreferencom postavljenom na element na koji je popover priložen.

odgoditi broj | objekt 0

Odgoda prikazivanja i skrivanja skočnog prozora (ms) - ne odnosi se na vrstu ručnog okidača

Ako je naveden broj, odgoda se primjenjuje na skrivanje/prikazivanje

Struktura objekta je:delay: { "show": 500, "hide": 100 }

html Booleov lažno Umetnite HTML u skočni prozor. Ako je false, jQueryjeva textmetoda koristit će se za umetanje sadržaja u DOM. Upotrijebite tekst ako ste zabrinuti zbog XSS napada.
plasman niz | funkcija 'pravo'

Kako postaviti popover - vrh | dno | lijevo | desno | auto.
Kada je naveden "auto", dinamički će preusmjeriti skočni prozor. Na primjer, ako je položaj "automatski lijevo", skočni prozor će se prikazati lijevo kada je to moguće, inače će se prikazati desno.

Kada se funkcija koristi za određivanje položaja, poziva se s skočnim DOM čvorom kao prvim argumentom i DOM čvorom pokretačkog elementa kao drugim. Kontekst thisje postavljen na skočnu instancu.

selektor niz lažno Ako je selektor osiguran, skočni objekti bit će delegirani navedenim ciljevima. U praksi se to koristi za omogućavanje dodavanja skočnih prozora za dinamički HTML sadržaj. Pogledajte ovo i informativan primjer .
šablona niz '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Osnovni HTML za korištenje pri stvaranju skočnog prozora.

Popover titleće se ubrizgati u .popover-title.

Popover contentće se ubrizgati u .popover-content.

.arrowpostat će popoverova strijela.

Najudaljeniji element omotača trebao bi imati .popoverklasu.

titula niz | funkcija ''

Zadana vrijednost naslova ako titleatribut nije prisutan.

Ako je dana funkcija, bit će pozvana s thisreferencom postavljenom na element na koji je popover priložen.

okidač niz 'klik' Kako se pokreće popover - kliknite | lebdjeti | fokus | priručnik. Možete proći više okidača; odvojite ih razmakom. manualne može se kombinirati ni s jednim drugim okidačem.
prozor za prikaz niz | objekt | funkcija { selektor: 'body', padding: 0 }

Zadržava popover unutar granica ovog elementa. Primjer: viewport: '#viewport'ili{ "selector": "#viewport", "padding": 0 }

Ako je funkcija dana, ona se poziva s elementom pokretanja DOM čvorom kao jedinim argumentom. Kontekst thisje postavljen na skočnu instancu.

Atributi podataka za pojedinačne skočne prozore

Opcije za pojedinačne skočne prozore mogu se alternativno specificirati upotrebom atributa podataka, kao što je gore objašnjeno.

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

Vrsta događaja Opis
pokazati.bs.popover Ovaj događaj aktivira se odmah kada showse pozove metoda instance.
prikazano.bs.popover Ovaj se događaj pokreće kada je popover vidljiv korisniku (pričekat će se da se CSS prijelazi završe).
sakriti.bs.popover Ovaj događaj se aktivira odmah nakon hidepozivanja metode instance.
skriven.bs.popover Ovaj se događaj pokreće kada popover više nije skriven od korisnika (pričekat će se da se dovrše CSS prijelazi).
umetnuto.bs.popover Ovaj se događaj pokreće nakon show.bs.popoverdogađaja kada je skočni predložak dodan u DOM.
$('#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.

Vrsta događaja Opis
zatvoriti.bs.upozorenje Ovaj događaj aktivira se odmah kada closese pozove metoda instance.
zatvoreno.bs.upozorenje Ovaj se događaj pokreće kada se upozorenje zatvori (pričekat će se da se CSS prijelazi završe).
$('#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.

Kompatibilnost s različitim preglednicima

Firefox održava stanja kontrole obrasca (onemogućenost i provjerenost) tijekom učitavanja stranice . Zaobilazno rješenje za ovo je korištenje autocomplete="off". Pogledajte Mozilla bug #654072 .

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.

Koristite ono stanje koje želite!

Za potrebe ove demonstracije koristimo data-loading-texti $().button('loading'), ali to nije jedino stanje koje možete koristiti. Više o tome pogledajte u nastavku u $().button(string)dokumentaciji .

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

Potrebni su prethodno uključeni gumbi.active iaria-pressed="true"

Za unaprijed uključene gumbe, morate dodati .activeklasu i aria-pressed="true"atribut buttonsebi.

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

Potrebne su prethodno odabrane opcije.active

Za unaprijed odabrane opcije morate sami dodati .activeklasu u unos label.

Vizualno označeno stanje ažurira se samo na klik

Ako se označeno stanje gumba okvira za potvrdu ažurira bez pokretanja clickdogađaja na gumbu (npr. putem <input type="reset">ili putem postavljanja checkedsvojstva unosa), morat ćete sami promijeniti .activeklasu na unosu label.

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

Ovisnost o dodacima

Sažimanje zahtijeva da dodatak za prijelaze bude uključen u vašu verziju Bootstrapa.

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.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<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.

Anim pariatur cliche reprehenderit, nim eiusmod high life optužbe 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 lignje single-origin kava nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad veganski osim mesar vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt vjerojatno niste čuli za njih acusamus labore sustainable VHS.
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.
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 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.

  • Bootply
  • One itmus ac facilin
  • Second eros

Omogućite pristup kontrolama proširivanja/sažimanja

Obavezno dodajte aria-expandedu kontrolni element. Ovaj atribut eksplicitno definira trenutačno stanje sklopivog elementa za čitače zaslona i slične pomoćne tehnologije. Ako je sklopivi element zatvoren prema zadanim postavkama, trebao bi imati vrijednost aria-expanded="false". Ako ste sklopivi element postavili da bude otvoren prema zadanim postavkama pomoću inklase, aria-expanded="true"umjesto toga postavite na kontrolu. Dodatak će automatski promijeniti ovaj atribut ovisno o tome je li sklopivi element otvoren ili zatvoren.

Osim toga, ako vaš kontrolni element cilja jedan sklopivi element – ​​tj. data-targetatribut pokazuje na idselektor – možete dodati dodatni aria-controlsatribut kontrolnom elementu koji sadrži idsklopivi element. Moderni čitači zaslona i slične pomoćne tehnologije koriste ovaj atribut kako bi korisnicima pružili dodatne prečace za izravnu navigaciju do samog sklopivog elementa.

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

Ime tip zadano opis
roditelj selektor lažno Ako je selektor naveden, tada će svi sklopivi elementi pod navedenim roditeljem biti zatvoreni kada se prikaže ova sklopiva stavka. (slično tradicionalnom ponašanju harmonike - ovo ovisi o panelklasi)
prebaciti Booleov pravi Prebacuje sklopivi element na poziv

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.

Vrsta događaja Opis
pokazati.bs.srušiti Ovaj događaj aktivira se odmah kada showse pozove metoda instance.
prikazano.bs.srušiti Ovaj se događaj pokreće kada se element sažimanja učini vidljivim korisniku (pričekat će da se CSS prijelazi završe).
sakriti.bs.srušiti Ovaj događaj se pokreće odmah nakon hidepoziva metode.
skriven.bs.srušiti Ovaj se događaj pokreće kada je element sažimanja skriven od korisnika (pričekat će da se CSS prijelazi završe).
$('#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.

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

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

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

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

Ime tip zadano opis
interval broj 5000 Količina vremena za odgodu između automatskog mijenjanja stavke. Ako je netočno, vrtuljak se neće automatski kretati.
pauza niz | ništavan "lebdjeti" Ako je postavljeno na "hover", pauzira kruženje vrtuljka na mouseenteri nastavlja kruženje vrtuljka na mouseleave. Ako je postavljeno na null, lebdeći pokazivač iznad vrtuljka neće ga pauzirati.
omotati Booleov pravi Treba li vrtuljak kružiti kontinuirano ili se oštro zaustavljati.
tipkovnica Booleov pravi Treba li vrtuljak reagirati na događaje tipkovnice.

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

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

Kruži kroz stavke vrtuljka slijeva nadesno.

Zaustavlja vrtuljak da kruži kroz stavke.

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

Ciklusi na prethodnu stavku.

Prelazak na sljedeću stavku.

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

Vrsta događaja Opis
tobogan.bs.vrtuljak Ovaj događaj aktivira se odmah kada slidese pozove metoda instance.
slid.bs.vrtuljak Ovaj događaj se pokreće kada vrtuljak završi prijelaz slajdova.
$('#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".

Ime tip zadano opis
pomaknuti broj | funkcija | objekt 10 Pikseli za odmak od zaslona pri izračunavanju položaja pomicanja. Ako je naveden jedan broj, pomak će se primijeniti u smjeru vrha i dna. Da biste osigurali jedinstveni, donji i gornji pomak samo navedite objekt offset: { top: 10 }ili offset: { top: 10, bottom: 5 }. Koristite funkciju kada trebate dinamički izračunati pomak.
cilj selektor | čvor | jQuery element windowobjekt _ Određuje ciljni element afiksa.

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.

Vrsta događaja Opis
pričvrstiti.bs.pričvrstiti Ovaj se događaj aktivira neposredno prije nego što je element pričvršćen.
pričvršćen.bs.pričvrstiti Ovaj događaj se pokreće nakon što je element pričvršćen.
affix-top.bs.affix Ovaj se događaj aktivira neposredno prije nego što je element pričvršćen na vrh.
pričvršćen-vrh.bs.pričvrstiti Ovaj događaj se pokreće nakon što je element pričvršćen na vrh.
afiks-donji dio.bs.afiks Ovaj se događaj aktivira neposredno prije nego što je element pričvršćen na dno.
pričvršćeno-dno.bs.pričvrstiti Ovaj se događaj pokreće nakon što je element pričvršćen na dno.