Oorsig

Individueel of saamgestel

Inproppe kan individueel ingesluit word (met Bootstrap se individuele *.jslêers), of alles op een slag (met bootstrap.jsof die verkleinde bootstrap.min.js).

Gebruik die saamgestelde JavaScript

Beide bootstrap.jsen bootstrap.min.jsbevat alle plugins in 'n enkele lêer. Sluit slegs een in.

Inprop afhanklikhede

Sommige inproppe en CSS-komponente is afhanklik van ander inproppe. As jy plugins individueel insluit, maak seker dat jy vir hierdie afhanklikhede in die dokumente kyk. Let ook daarop dat alle inproppe afhanklik is van jQuery (dit beteken jQuery moet voor die inproplêers ingesluit word). Raadpleeg onsbower.json om te sien watter weergawes van jQuery ondersteun word.

Data eienskappe

U kan alle Bootstrap-inproppe suiwer deur die markup API gebruik sonder om 'n enkele reël JavaScript te skryf. Dit is Bootstrap se eersteklas API en behoort u eerste oorweging te wees wanneer u 'n inprop gebruik.

Dit gesê, in sommige situasies kan dit wenslik wees om hierdie funksionaliteit af te skakel. Daarom bied ons ook die vermoë om die data-kenmerk API te deaktiveer deur alle gebeurtenisse op die dokument wat met 'n naamspasie is, te ontbind data-api. Dit lyk so:

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

Alternatiewelik, om 'n spesifieke inprop te teiken, sluit net die inprop se naam as 'n naamspasie saam met die data-api naamspasie soos volg in:

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

Slegs een inprop per element via data-kenmerke

Moenie data-kenmerke van veelvuldige inproppe op dieselfde element gebruik nie. Byvoorbeeld, 'n knoppie kan nie beide 'n nutswenk hê en 'n modaal wissel nie. Om dit te bereik, gebruik 'n wikkelelement.

Programmatiese API

Ons glo ook dat u alle Bootstrap-inproppe bloot deur die JavaScript API moet kan gebruik. Alle publieke API's is enkelvoudige, kettingbare metodes, en gee die versameling waarop gereageer is, terug.

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

Alle metodes moet 'n opsionele opsie-objek aanvaar, 'n string wat 'n spesifieke metode teiken, of niks (wat 'n inprop met verstekgedrag inisieer):

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

Elke inprop stel ook sy rou konstruktor bloot op 'n Constructoreiendom: $.fn.popover.Constructor. As jy 'n spesifieke inprop-instansie wil kry, haal dit direk van 'n element af: $('[rel="popover"]').data('popover').

Oorspronklike stellings

Jy kan die verstekinstellings vir 'n inprop verander deur die inprop se Constructor.DEFAULTSvoorwerp te wysig:

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

Geen konflik nie

Soms is dit nodig om Bootstrap-inproppe met ander UI-raamwerke te gebruik. In hierdie omstandighede kan naamruimtebotsings soms voorkom. As dit gebeur, kan jy .noConflictdie inprop gebruik waarvan jy die waarde wil terugdraai.

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

Gebeurtenisse

Bootstrap bied pasgemaakte gebeurtenisse vir die meeste inproppe se unieke aksies. Oor die algemeen kom dit in 'n infinitief en verlede deelwoordvorm - waar die infinitief (bv. show) geaktiveer word aan die begin van 'n gebeurtenis, en sy verlede deelwoordvorm (bv. shown) geaktiveer word by die voltooiing van 'n aksie.

Vanaf 3.0.0 is alle Bootstrap-geleenthede met name gespasieer.

Alle infinitiewe gebeurtenisse bied preventDefaultfunksionaliteit. Dit bied die vermoë om die uitvoering van 'n aksie te stop voordat dit begin.

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

Weergawe nommers

Die weergawe van elk van Bootstrap se jQuery-inproppe kan verkry word via die VERSIONeiendom van die inprop se konstruktor. Byvoorbeeld, vir die tooltip-inprop:

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

Geen spesiale terugvalle wanneer JavaScript gedeaktiveer is nie

Bootstrap se inproppe val nie besonder grasieus terug wanneer JavaScript gedeaktiveer is nie. As jy omgee vir die gebruikerservaring in hierdie geval, gebruik <noscript>om die situasie (en hoe om JavaScript te heraktiveer) aan jou gebruikers te verduidelik, en/of voeg jou eie gepasmaakte terugval by.

Derdeparty biblioteke

Bootstrap ondersteun nie amptelik JavaScript-biblioteke van derdepartye soos Prototype of jQuery UI nie. Ten spyte .noConflictvan gebeurtenisse wat deur die naam gespasieer is, kan daar versoenbaarheidsprobleme wees wat u op u eie moet regstel.

Oorgange transition.js

Oor oorgange

Vir eenvoudige oorgangseffekte, sluit transition.jseen keer langs die ander JS-lêers in. As jy die saamgestelde (of verkleinde) bootstrap.jsgebruik, hoef jy dit nie in te sluit nie – dit is reeds daar.

Wat is binne

Transition.js is 'n basiese helper vir transitionEndgeleenthede sowel as 'n CSS-oorgangemulator. Dit word deur die ander inproppe gebruik om te kyk vir CSS-oorgangondersteuning en om hangende oorgange op te vang.

Deaktiveer oorgange

Oorgange kan wêreldwyd gedeaktiveer word deur die volgende JavaScript-brokkie te gebruik, wat moet kom nadat transition.js(of bootstrap.jsof bootstrap.min.js, na gelang van die geval) gelaai is:

$.support.transition = false

Modale modal.js

Modale is vaartbelynde, maar buigsame, dialoogopdragte met die minimum vereiste funksionaliteit en slim verstekke.

Veelvuldige oop modale word nie ondersteun nie

Maak seker dat jy nie 'n modaal oopmaak terwyl 'n ander nog sigbaar is nie. Om meer as een modaal op 'n slag te wys, vereis gepasmaakte kode.

Modale opmerkplasing

Probeer altyd om 'n modaal se HTML-kode op 'n topvlakposisie in jou dokument te plaas om te verhoed dat ander komponente die modaal se voorkoms en/of funksionaliteit beïnvloed.

Waarskuwings vir mobiele toestelle

Daar is 'n paar waarskuwings oor die gebruik van modale op mobiele toestelle. Sien ons blaaierondersteuningsdokumente vir besonderhede.

As gevolg van hoe HTML5 sy semantiek definieer, het die autofocusHTML-kenmerk geen effek in Bootstrap-modale nie. Om dieselfde effek te bereik, gebruik 'n paar persoonlike JavaScript:

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

Voorbeelde

Statiese voorbeeld

'n Weergegee modaal met kopskrif, liggaam en stel aksies in die voetskrif.

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

Regstreekse demo

Wissel 'n modaal via JavaScript deur op die knoppie hieronder te klik. Dit sal afgly en vervaag vanaf die bokant van die bladsy.

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

Maak modale toeganklik

Maak seker dat jy role="dialog"en aria-labelledby="...", met verwysing na die modale titel, by .modal, en role="document"na die .modal-dialogself byvoeg.

Daarbenewens kan jy 'n beskrywing van jou modale dialoog gee met aria-describedbyop .modal.

Inbedding van YouTube-video's

Om YouTube-video's in modale in te sluit, vereis bykomende JavaScript wat nie in Bootstrap is nie om outomaties afspeel te stop en meer. Sien hierdie nuttige Stack Overflow-plasing vir meer inligting.

Opsionele groottes

Modale het twee opsionele groottes, beskikbaar via wysigerklasse om op 'n .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>

Verwyder animasie

Vir modale wat bloot verskyn eerder as om in te vervaag om te sien, verwyder die .fadeklas van jou modale opmaak.

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

Gebruik die roosterstelsel

Om voordeel te trek uit die Bootstrap-roosterstelsel binne 'n modale, maak net .rows binne die .modal-bodyen gebruik dan die normale roosterstelselklasse.

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

Het jy 'n klomp knoppies wat almal dieselfde modaal aktiveer, net met effens verskillende inhoud? Gebruik event.relatedTargeten HTML- data-*kenmerke (moontlik via jQuery ) om die inhoud van die modaal te verander na gelang van watter knoppie geklik is. Sien die Modal Events-dokumente vir besonderhede oor relatedTarget,

...meer knoppies...
<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)
})

Gebruik

Die modale inprop skakel jou verborge inhoud op aanvraag, via data-kenmerke of JavaScript. Dit dra ook by .modal-opentot die <body>om verstek blaai-gedrag te ignoreer en genereer 'n .modal-backdropom 'n klikarea te verskaf om gewysde modale te verwyder wanneer daar buite die modaal geklik word.

Via data-kenmerke

Aktiveer 'n modaal sonder om JavaScript te skryf. Stel data-toggle="modal"op 'n beheerderelement, soos 'n knoppie, saam met 'n data-target="#foo"of href="#foo"om 'n spesifieke modaal te rig om te wissel.

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

Via JavaScript

Roep 'n modaal met ID myModalmet 'n enkele reël JavaScript:

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-backdrop="".

Naam tipe verstek beskrywing
agtergrond boolean of die snaar'static' waar Sluit 'n modale agtergrondelement in. Alternatiewelik, spesifiseer staticvir 'n agtergrond wat nie die modaal toemaak met klik nie.
sleutelbord boolean waar Maak die modaal toe wanneer escape-sleutel gedruk word
Wys boolean waar Toon die modaal wanneer geïnisialiseer.
afgeleë pad onwaar

Hierdie opsie is opgeskort sedert v3.3.0 en is verwyder in v4. Ons beveel aan om eerder kliënt-kant-sjablone of 'n databindingsraamwerk te gebruik, of om self jQuery.load te bel .

As 'n afgeleë URL verskaf word, sal inhoud een keer via jQuery se metode gelaai word en in die div loadingespuit word . .modal-contentAs jy die data-api gebruik, kan jy alternatiewelik die hrefkenmerk gebruik om die afgeleë bron te spesifiseer. 'n Voorbeeld hiervan word hieronder getoon:

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

Metodes

Aktiveer jou inhoud as 'n modaal. Aanvaar 'n opsionele opsie object.

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

Wissel 'n modaal handmatig. Keer terug na die oproeper voordat die modaal werklik gewys of versteek is (dws voordat die shown.bs.modalof hidden.bs.modalgebeurtenis plaasvind).

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

Maak 'n modaal handmatig oop. Keer terug na die oproeper voordat die modaal werklik gewys is (dws voor die shown.bs.modalgebeurtenis plaasvind).

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

Versteek 'n modaal handmatig. Keer terug na die oproeper voordat die modaal eintlik versteek is (dws voor die hidden.bs.modalgebeurtenis plaasvind).

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

Herstel die modaal se posisionering om 'n skuifbalk teen te werk indien een sou verskyn, wat die modaal na links sou laat spring.

Slegs nodig wanneer die hoogte van die modaal verander terwyl dit oop is.

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

Gebeurtenisse

Bootstrap se modale klas stel 'n paar gebeurtenisse bloot om by modale funksionaliteit in te skakel.

Alle modale gebeurtenisse word op die modaal self afgevuur (dws by die <div class="modal">).

Soort gebeurtenis Beskrywing
wys.bs.modaal Hierdie gebeurtenis begin onmiddellik wanneer die showinstansiemetode geroep word. As dit deur 'n klik veroorsaak word, is die geklikte element beskikbaar as die relatedTargeteienskap van die gebeurtenis.
getoon.bs.modaal Hierdie gebeurtenis word afgevuur wanneer die modaal vir die gebruiker sigbaar gemaak is (sal wag vir CSS-oorgange om te voltooi). As dit deur 'n klik veroorsaak word, is die geklikte element beskikbaar as die relatedTargeteienskap van die gebeurtenis.
verberg.bs.modaal Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hideinstansiemetode geroep is.
verborge.bs.modale Hierdie gebeurtenis word afgevuur wanneer die modaal klaar vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi).
gelaai.bs.modaal Hierdie gebeurtenis word afgevuur wanneer die modaal inhoud gelaai het deur die remoteopsie te gebruik.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

Voeg aftrekkieslys by byna enigiets met hierdie eenvoudige inprop, insluitend die navigasiebalk, oortjies en pille.

Binne 'n navigasiebalk

Binne pille

.openVia data-kenmerke of JavaScript skakel die aftrek-inprop verborge inhoud (aftrekkieslyste) deur die klas op die ouerlysitem te wissel .

Op mobiele toestelle, die opening van 'n aftreklys voeg 'n .dropdown-backdropas 'n tikarea by om aftrekkieslyste toe te maak wanneer buite die spyskaart getik word, 'n vereiste vir behoorlike iOS-ondersteuning. Dit beteken dat die oorskakeling van 'n oop aftreklys na 'n ander aftreklys 'n ekstra tik op die selfoon vereis.

Let wel: Daar data-toggle="dropdown"word op die kenmerk staatgemaak vir die sluiting van aftrekkieslys op 'n toepassingsvlak, so dit is 'n goeie idee om dit altyd te gebruik.

Via data-kenmerke

Voeg data-toggle="dropdown"by 'n skakel of knoppie om 'n aftreklys te wissel.

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

Om URL's ongeskonde te hou met skakelknoppies, gebruik die data-targetkenmerk in plaas van 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>

Via JavaScript

Bel die aftrekkies via JavaScript:

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

data-toggle="dropdown"steeds benodig

Ongeag of jy jou aftreklys via JavaScript oproep of eerder die data-api gebruik, data-toggle="dropdown"moet altyd teenwoordig wees op die aftreklys se sneller-element.

Geen

Wissel die aftreklys van 'n gegewe navigasiebalk of navigasie met oortjies.

Alle aftrek-gebeurtenisse word afgevuur by die .dropdown-menuse ouerelement.

Alle aftrek-gebeurtenisse het 'n relatedTargeteienskap waarvan die waarde die wissel-ankerelement is.

Soort gebeurtenis Beskrywing
wys.bs.aftreklys Hierdie gebeurtenis begin onmiddellik wanneer die wys-instansie-metode geroep word.
gewys.bs.aftreklys Hierdie gebeurtenis word afgevuur wanneer die aftreklys vir die gebruiker sigbaar gemaak is (sal wag vir CSS-oorgange om te voltooi).
versteek.bs.aftreklys Hierdie gebeurtenis word onmiddellik afgevuur wanneer die versteek instansie metode geroep is.
versteekte.bs.aftreklys Hierdie gebeurtenis word afgevuur wanneer die aftreklys klaar vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Voorbeeld in navbar

Die ScrollSpy-inprop is vir die outomatiese opdatering van navigasieteikens gebaseer op rolposisie. Blaai deur die area onder die navigasiebalk en kyk hoe die aktiewe klas verander. Die aftrek-subitems sal ook uitgelig word.

@vet

Advertensie leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi voor hulle uitverkoop qui. Tumblr plaas-tot-tafel fiets regte wat ook al. Anim keffiyeh carles cardigan. Velit seitan mcsweeney se fotohokkie 3 wolf maan irure. Cosby trui lomo jean kortbroek, williamsburg hoodie minim qui jy het seker nog nie van hulle gehoor nie en cardigan trust fund culpa biodiesel Wes anderson estetiese. Nihil getatoeëer accusamus, cred ironie biodiesel keffiyeh ambagsman ullamco consequat.

@mdo

Veniam Marfa snorskaatsplank, vetterige fugiat velit hooi-baard. Freegan baard aliqua cupidatat mcsweeney se vero. Cupidatat vier loko nisi, ea helvetica nulla carles. Getatoeëerde cosby-trui-kosvragmotor, Mcsweeney's quis non-freegan-viniel. Lo-fi wes anderson +1 sartorial. Carles nie-estetiese oefening quis gentrify. Brooklyn adipiserende handwerkbier vise keytar deserunt.

een

Occaecat commodo aliqua delectus. Fap handwerk bier deserunt skaatsplank ea. Lomo fiets regte adipisicing banh mi, velit ea sunt next level locavore enkeloorsprong koffie in magna veniam. High life id vinyl, eggo park consequat quis aliquip banh mi pitchfork. Vero VHS is adipisicing. Consectetur nisi DIY mini boodskapper sak. Cred ex in, volhoubare delectus consectetur fanny pack iphone.

twee

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 assumenda. Locavore sed helvetica cliche ironie, thundercats wat jy waarskynlik nie van hulle gehoor het nie consequat hoodie glutenvrye lo-fi fap aliquip. Labore elit placeat voordat hulle uitverkoop het, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan handwerk bier seitan klaargemaakte velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Gebruik

Vereis Bootstrap nav

Scrollspy vereis tans die gebruik van 'n Bootstrap nav-komponent vir behoorlike uitlig van aktiewe skakels.

Oplosbare ID-teikens word vereis

Navbar-skakels moet oplosbare ID-teikens hê. Byvoorbeeld, 'n <a href="#home">home</a>moet ooreenstem met iets in die DOM soos <div id="home"></div>.

Nie :visible-teikenelemente geïgnoreer

Teikenelemente wat nie :visiblevolgens jQuery is nie , sal geïgnoreer word en hul ooreenstemmende navigasie-items sal nooit uitgelig word nie.

Vereis relatiewe posisionering

Ongeag die implementeringsmetode, scrollspy vereis die gebruik van position: relative;op die element waarop jy spioeneer. In die meeste gevalle is dit die <body>. Wanneer u op ander elemente as die blaai <body>, maak seker dat u 'n heightstel het en overflow-y: scroll;toegepas het.

Via data-kenmerke

Om maklik scrollspy-gedrag by jou bobalknavigasie te voeg, voeg data-spy="scroll"by die element waarop jy wil spioeneer (meestal sal dit die <body>). Voeg dan die data-targetkenmerk by met die ID of klas van die ouerelement van enige Bootstrap- .navkomponent.

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>

Via JavaScript

Nadat jy position: relative;jou CSS bygevoeg het, bel die scrollspy via JavaScript:

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

Metodes

.scrollspy('refresh')

Wanneer jy scrollspy gebruik in samewerking met die byvoeging of verwydering van elemente uit die DOM, moet jy die herlaaimetode soos volg noem:

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-offset="".

Naam tipe verstek beskrywing
verreken nommer 10 Pixels om van bo af te verreken wanneer die posisie van rolberekening bereken word.

Gebeurtenisse

Soort gebeurtenis Beskrywing
aktiveer.bs.scrollspy Hierdie gebeurtenis brand wanneer 'n nuwe item deur die scrollspy geaktiveer word.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Wisselbare oortjies tab.js

Voorbeeld oortjies

Voeg vinnige, dinamiese oortjie-funksionaliteit by om deur vensters van plaaslike inhoud oor te skakel, selfs via aftrekkieslyste. Geneste oortjies word nie ondersteun nie.

Rou denim jy het seker nog nie van daardie jean kortbroek Austin gehoor nie. Nesciunt tofu stumptown aliqua, retro synth meester skoonmaak. Snor cliche tempor, williamsburg carles vegan helvetica. Reprehenderit slagter retro keffiyeh dreamcatcher synth. Cosby-trui eu banh mi, qui irure terry richardson ex inkvis. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan Amerikaanse klere, slagter 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.

Brei oortjienavigasie uit

Hierdie inprop brei die navigasiekomponent met oortjies uit om tabbare areas by te voeg.

Gebruik

Aktiveer tabbare oortjies via JavaScript (elke oortjie moet individueel geaktiveer word):

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

Jy kan individuele oortjies op verskeie maniere aktiveer:

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

Opmerk

Jy kan 'n oortjie- of pilnavigasie aktiveer sonder om enige JavaScript te skryf deur bloot 'n element te spesifiseer data-toggle="tab"of data-toggle="pill"op 'n element. Die byvoeging van die naven nav-tabsklasse by die oortjie ulsal die Bootstrap-oortjiestilering toepas , terwyl die byvoeging van die naven nav-pillsklasse pilstilering sal toepas .

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

Vervaag effek

Om oortjies te laat vervaag, voeg .fadeby elke .tab-pane. Die eerste oortjiepaneel moet ook .indie aanvanklike inhoud sigbaar maak.

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

Metodes

$().tab

Aktiveer 'n oortjie-element en inhoudhouer. Tab moet óf 'n data-targetóf 'n hrefteiken 'n houer nodus in die DOM hê. In die bogenoemde voorbeelde is die oortjies die <a>s met data-toggle="tab"eienskappe.

.tab('show')

Kies die gegewe oortjie en wys die verwante inhoud daarvan. Enige ander oortjie wat voorheen gekies is, word ongekies en die geassosieerde inhoud daarvan word versteek. Keer terug na die beller voordat die oortjie-venster werklik gewys is (dws voor die shown.bs.tabgebeurtenis plaasvind).

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

Gebeurtenisse

Wanneer 'n nuwe oortjie gewys word, begin die gebeure in die volgende volgorde:

  1. hide.bs.tab(op die huidige aktiewe oortjie)
  2. show.bs.tab(op die om te wys-oortjie)
  3. hidden.bs.tab(op die vorige aktiewe oortjie, dieselfde een as vir die hide.bs.tabgeleentheid)
  4. shown.bs.tab(op die nuut-aktiewe oortjie wat pas gewys is, dieselfde een as vir die show.bs.tabgeleentheid)

As geen oortjie reeds aktief was nie, sal die hide.bs.taben hidden.bs.tabgebeure nie geaktiveer word nie.

Soort gebeurtenis Beskrywing
show.bs.tab Hierdie gebeurtenis begin op oortjievertoning, maar voordat die nuwe oortjie gewys is. Gebruik event.targeten event.relatedTargetom onderskeidelik die aktiewe oortjie en die vorige aktiewe oortjie (indien beskikbaar) te teiken.
getoon.bs.tab Hierdie gebeurtenis begin op oortjievertoning nadat 'n oortjie gewys is. Gebruik event.targeten event.relatedTargetom onderskeidelik die aktiewe oortjie en die vorige aktiewe oortjie (indien beskikbaar) te teiken.
versteek.bs.tab Hierdie gebeurtenis begin wanneer 'n nuwe oortjie gewys moet word (en dus moet die vorige aktiewe oortjie versteek word). Gebruik event.targeten event.relatedTargetom onderskeidelik die huidige aktiewe oortjie en die nuwe wat binnekort aktief sal wees te teiken.
verborge.bs.tab Hierdie gebeurtenis begin nadat 'n nuwe oortjie gewys is (en dus word die vorige aktiewe oortjie versteek). Gebruik event.targeten event.relatedTargetom onderskeidelik die vorige aktiewe oortjie en die nuwe aktiewe oortjie te teiken.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Geïnspireer deur die uitstekende jQuery.tipsy-inprop geskryf deur Jason Frame; Tooltips is 'n opgedateerde weergawe wat nie op beelde staatmaak nie, gebruik CSS3 vir animasies en data-kenmerke vir plaaslike titelberging.

Gereedskapwenke met titels van geen lengte word nooit vertoon nie.

Voorbeelde

Beweeg oor die skakels hieronder om nutswenke te sien:

Styf broek volgende vlak keffiyeh jy het seker nog nie van hulle gehoor nie. Fotohokkie baard rou denim boekdruk vegan messenger bag stumptown. Plaas-tot-tafel seitan, mcsweeney's fixie volhoubare quinoa 8-bis Amerikaanse klere het 'n terry richardson viniel chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, vier loko mcsweeney's reinig vegan chambray. 'n Werklik ironiese ambagsman wat ook al keytar , scenester plaas-tot-tafel banksy Austin twitter handvat freegan cred rou denim enkel-oorsprong koffie virale.

Statiese nutswenk

Vier opsies is beskikbaar: bo-, regs-, onder- en linksbelyn.

Vier rigtings

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

Opt-in funksionaliteit

Vir prestasieredes is die Tooltip en Popover-data-api's ingeskryf, wat beteken dat jy dit self moet inisialiseer .

Een manier om alle gereedskapwenke op 'n bladsy te inisialiseer, is om hulle volgens hul data-togglekenmerk te kies:

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

Gebruik

Die tooltip-inprop genereer inhoud en opmaak op aanvraag, en plaas by verstek gereedskapwenke na hul snellerelement.

Aktiveer die nutswenk via JavaScript:

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

Opmerk

Die vereiste opmaak vir 'n nutswenk is slegs 'n datakenmerk en titleop die HTML-element wil jy 'n nutswenk hê. Die gegenereerde opmaak van 'n nutswenk is redelik eenvoudig, alhoewel dit 'n posisie vereis (by verstek gestel topdeur die inprop).

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

Meervoudige lynskakels

Soms wil jy 'n nutswenk by 'n hiperskakel voeg wat verskeie reëls omvou. Die standaardgedrag van die tooltip-inprop is om dit horisontaal en vertikaal te sentreer. Voeg white-space: nowrap;by jou ankers om dit te vermy.

Gereedskapwenke in knoppiegroepe, invoergroepe en tabelle vereis spesiale instellings

Wanneer u gereedskapwenke op elemente binne 'n .btn-groupof 'n .input-group, of op tabelverwante elemente ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>) gebruik, sal u die opsie (hieronder gedokumenteer) moet spesifiseer container: 'body'om ongewenste newe-effekte te vermy (soos die element wat wyer word en/ of sy afgeronde hoeke verloor wanneer die nutswenk geaktiveer word).

Moenie probeer om nutswenke op verborge elemente te wys nie

$(...).tooltip('show')Deur aan te roep wanneer die teikenelement is , display: none;sal die nutswenk verkeerd geposisioneer word.

Toeganklike nutswenke vir sleutelbord- en hulptegnologiegebruikers

Vir gebruikers wat met 'n sleutelbord navigeer, en in die besonder gebruikers van ondersteunende tegnologieë, moet jy slegs gereedskapwenke by sleutelbordfokusbare elemente soos skakels, vormkontroles of enige arbitrêre element met 'n tabindex="0"kenmerk voeg.

Gereedskapwenke oor gedeaktiveerde elemente vereis omhulelemente

Om 'n nutswenk by 'n disabledof .disabledelement te voeg, plaas die element binne-in 'n <div>en pas die nutswenk <div>eerder daarop toe.

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-animation="".

Naam Tik Verstek Beskrywing
animasie boolean waar Pas 'n CSS-vervaag-oorgang toe op die nutswenk
houer tou | onwaar onwaar

Voeg die nutswenk by 'n spesifieke element. Voorbeeld: container: 'body'. Hierdie opsie is veral nuttig omdat dit jou in staat stel om die nutspunt in die vloei van die dokument naby die snellerelement te plaas - wat sal verhoed dat die nutswenk van die snellerelement wegdryf tydens 'n venstergrootte.

vertraging nommer | voorwerp 0

Vertraag om die nutswenk (ms) te wys en weg te steek - is nie van toepassing op handmatige snellertipe nie

As 'n nommer verskaf word, word vertraging toegepas op beide versteek/wys

Voorwerpstruktuur is:delay: { "show": 500, "hide": 100 }

html boolean onwaar Voeg HTML in die nutswenk in. Indien onwaar, sal jQuery se textmetode gebruik word om inhoud in die DOM in te voeg. Gebruik teks as jy bekommerd is oor XSS-aanvalle.
plasing tou | funksie 'Top'

Hoe om die nutswenk te posisioneer - bo | onderste | links | regs | outo.
Wanneer "outo" gespesifiseer word, sal dit die nutswenk dinamies heroriënteer. Byvoorbeeld, as plasing "outo links" is, sal die nutswenk aan die linkerkant vertoon wanneer moontlik, anders sal dit regs vertoon.

Wanneer 'n funksie gebruik word om die plasing te bepaal, word dit genoem met die tooltip DOM node as sy eerste argument en die sneller element DOM node as sy tweede. Die thiskonteks is ingestel op die tooltip-instansie.

keurder string onwaar As 'n kieser verskaf word, sal tooltip-objekte na die gespesifiseerde teikens gedelegeer word. In die praktyk word dit gebruik om dinamiese HTML-inhoud in staat te stel om nutswenke by te voeg. Sien hierdie en 'n insiggewende voorbeeld .
sjabloon string '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Baseer HTML om te gebruik wanneer die nutswenk geskep word.

Die tooltip's titlesal in die .tooltip-inner.

.tooltip-arrowsal die nutspunt se pyl word.

Die buitenste omhulselelement moet die .tooltipklas hê.

titel tou | funksie ''

Verstek titelwaarde as titlekenmerk nie teenwoordig is nie.

As 'n funksie gegee word, sal dit opgeroep word met sy thisverwysingsstel na die element waaraan die nutswenk gekoppel is.

sneller string 'sweef fokus' Hoe tooltip geaktiveer word - klik | beweeg | fokus | handleiding. Jy kan verskeie snellers slaag; skei hulle met 'n spasie. manualkan nie met enige ander sneller gekombineer word nie.
uitsigpoort tou | voorwerp | funksie { selector: 'liggaam', opvulling: 0 }

Hou die nutswenk binne die grense van hierdie element. Voorbeeld: viewport: '#viewport'of{ "selector": "#viewport", "padding": 0 }

As 'n funksie gegee word, word dit opgeroep met die snellerelement DOM-node as sy enigste argument. Die thiskonteks is ingestel op die tooltip-instansie.

Data-kenmerke vir individuele gereedskapwenke

Opsies vir individuele gereedskapwenke kan alternatiewelik gespesifiseer word deur die gebruik van data-kenmerke, soos hierbo verduidelik.

Metodes

$().tooltip(options)

Heg 'n nutswenk-hanteerder aan 'n elementversameling.

.tooltip('show')

Onthul 'n element se nutswenk. Keer terug na die oproeper voordat die nutswenk werklik gewys is (dws voor die shown.bs.tooltipgebeurtenis plaasvind). Dit word beskou as 'n "handmatige" aktiveer van die nutswenk. Gereedskapwenke met titels van geen lengte word nooit vertoon nie.

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

.tooltip('hide')

Versteek 'n element se nutswenk. Keer terug na die oproeper voordat die nutswenk eintlik versteek is (dws voor die hidden.bs.tooltipgebeurtenis plaasvind). Dit word beskou as 'n "handmatige" aktiveer van die nutswenk.

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

.tooltip('toggle')

Wissel 'n element se nutswenk. Keer terug na die oproeper voordat die nutswenk werklik gewys of versteek is (dws voordat die shown.bs.tooltipof hidden.bs.tooltipgebeurtenis plaasvind). Dit word beskou as 'n "handmatige" aktiveer van die nutswenk.

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

.tooltip('destroy')

Versteek en vernietig 'n element se nutswenk. Gereedskapwenke wat delegering gebruik (wat met die selectoropsie geskep word ) kan nie individueel op afstammelinge-snellerelemente vernietig word nie.

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

Gebeurtenisse

Soort gebeurtenis Beskrywing
wys.bs.nutspunt Hierdie gebeurtenis begin onmiddellik wanneer die showinstansiemetode geroep word.
gewys.bs.nutspunt Hierdie gebeurtenis word afgevuur wanneer die nutswenk vir die gebruiker sigbaar gemaak is (sal wag vir CSS-oorgange om te voltooi).
versteek.bs.nutspunt Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hideinstansiemetode geroep is.
versteekte.bs.nutspunt Hierdie gebeurtenis word afgevuur wanneer die nutswenk klaar vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi).
ingevoeg.bs.nutstip Hierdie gebeurtenis word afgevuur na die show.bs.tooltipgebeurtenis wanneer die nutswenk-sjabloon by die DOM gevoeg is.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Voeg klein oorlegsels van inhoud, soos dié op die iPad, by enige element om sekondêre inligting te huisves.

Popovers waarvan beide titel en inhoud geen lengte het nie, word nooit vertoon nie.

Inprop-afhanklikheid

Popovers vereis dat die tooltip-inprop by jou weergawe van Bootstrap ingesluit moet word.

Opt-in funksionaliteit

Vir prestasieredes is die Tooltip en Popover-data-api's ingeskryf, wat beteken dat jy dit self moet inisialiseer .

Een manier om alle opspringers op 'n bladsy te inisialiseer, is om hulle volgens hul data-togglekenmerk te kies:

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

Popovers in knoppiegroepe, invoergroepe en tabelle vereis spesiale instellings

Wanneer u opspringers op elemente binne 'n .btn-groupof 'n .input-group, of op tabelverwante elemente ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>) gebruik, moet u die opsie container: 'body'(hieronder gedokumenteer) spesifiseer om ongewenste newe-effekte te vermy (soos die element wat wyer word en/ of sy afgeronde hoeke verloor wanneer die popover geaktiveer word).

Moenie probeer om popovers op verborge elemente te wys nie

$(...).popover('show')Deur aan te roep wanneer die teikenelement is , display: none;sal die opspringer verkeerd geposisioneer word.

Popovers op gedeaktiveerde elemente vereis omhulelemente

Om 'n pop-over by 'n disabledof .disabledelement te voeg, plaas die element binne-in 'n <div>en pas die popover daarop toe <div>.

Meervoudige lynskakels

Soms wil jy 'n popover by 'n hiperskakel voeg wat verskeie reëls omvou. Die standaardgedrag van die popover-inprop is om dit horisontaal en vertikaal te sentreer. Voeg white-space: nowrap;by jou ankers om dit te vermy.

Voorbeelde

Statiese popover

Vier opsies is beskikbaar: bo-, regs-, onder- en linksbelyn.

Popover top

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

Popover regs

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

Popover onderkant

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

Popover links

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

Regstreekse demo

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

Vier rigtings

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

Maak toe met die volgende klik

Gebruik die focussneller om popovers af te maak met die volgende klik wat die gebruiker maak.

Spesifieke opmaak word vereis vir wegmaak-met-volgende-klik

Vir behoorlike kruisblaaier- en kruisplatformgedrag, moet jy die <a>merker gebruik, nie die <button>merker nie, en jy moet ook die role="button"en - tabindexkenmerke insluit.

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

Gebruik

Aktiveer popovers via JavaScript:

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-animation="".

Naam Tik Verstek Beskrywing
animasie boolean waar Pas 'n CSS-vervaag-oorgang toe op die popover
houer tou | onwaar onwaar

Voeg die popover by 'n spesifieke element. Voorbeeld: container: 'body'. Hierdie opsie is veral nuttig omdat dit jou in staat stel om die opspringer in die vloei van die dokument naby die snellerelement te plaas - wat sal verhoed dat die opspringer wegdryf van die snellerelement tydens 'n venstergrootteverandering.

inhoud tou | funksie ''

Verstek inhoudwaarde as data-contentkenmerk nie teenwoordig is nie.

As 'n funksie gegee word, sal dit genoem word met sy thisverwysing ingestel na die element waaraan die popover gekoppel is.

vertraging nommer | voorwerp 0

Vertraag wys en verberg die popover (ms) - is nie van toepassing op handmatige snellertipe nie

As 'n nommer verskaf word, word vertraging toegepas op beide versteek/wys

Voorwerpstruktuur is:delay: { "show": 500, "hide": 100 }

html boolean onwaar Voeg HTML in die popover. Indien onwaar, sal jQuery se textmetode gebruik word om inhoud in die DOM in te voeg. Gebruik teks as jy bekommerd is oor XSS-aanvalle.
plasing tou | funksie 'reg'

Hoe om die popover te plaas - bo | onderste | links | regs | outo.
Wanneer "outo" gespesifiseer word, sal dit die popover dinamies heroriënteer. Byvoorbeeld, as plasing "outo-links" is, sal die opspringer aan die linkerkant vertoon wanneer moontlik, anders sal dit regs vertoon.

Wanneer 'n funksie gebruik word om die plasing te bepaal, word dit opgeroep met die popover DOM-nodus as sy eerste argument en die snellerelement DOM-nodus as sy tweede. Die thiskonteks is ingestel op die popover-instansie.

keurder string onwaar As 'n kieser verskaf word, sal opspring-objekte na die gespesifiseerde teikens gedelegeer word. In die praktyk word dit gebruik om dinamiese HTML-inhoud in staat te stel om popovers by te voeg. Sien hierdie en 'n insiggewende voorbeeld .
sjabloon string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Baseer HTML om te gebruik wanneer die popover geskep word.

Die popover's titlesal in die .popover-title.

Die popover's contentsal in die .popover-content.

.arrowsal die popover se pyl word.

Die buitenste omhulselelement moet die .popoverklas hê.

titel tou | funksie ''

Verstek titelwaarde as titlekenmerk nie teenwoordig is nie.

As 'n funksie gegee word, sal dit genoem word met sy thisverwysing ingestel na die element waaraan die popover gekoppel is.

sneller string 'klik' Hoe popover geaktiveer word - klik | beweeg | fokus | handleiding. Jy kan verskeie snellers slaag; skei hulle met 'n spasie. manualkan nie met enige ander sneller gekombineer word nie.
uitsigpoort tou | voorwerp | funksie { selector: 'liggaam', opvulling: 0 }

Hou die popover binne die grense van hierdie element. Voorbeeld: viewport: '#viewport'of{ "selector": "#viewport", "padding": 0 }

As 'n funksie gegee word, word dit opgeroep met die snellerelement DOM-node as sy enigste argument. Die thiskonteks is ingestel op die popover-instansie.

Data-kenmerke vir individuele popovers

Opsies vir individuele popovers kan alternatiewelik gespesifiseer word deur die gebruik van data-kenmerke, soos hierbo verduidelik.

Metodes

$().popover(options)

Inisialiseer popovers vir 'n elementversameling.

.popover('show')

Onthul 'n element se popover. Keer terug na die oproeper voordat die popover werklik gewys is (dws voor die shown.bs.popovergebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die popover. Popovers waarvan beide titel en inhoud geen lengte het nie, word nooit vertoon nie.

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

.popover('hide')

Versteek 'n element se popover. Keer terug na die beller voordat die popover eintlik versteek is (dws voor die hidden.bs.popovergebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die popover.

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

.popover('toggle')

Wissel 'n element se popover. Keer terug na die beller voordat die popover werklik gewys of versteek is (dws voordat die shown.bs.popoverof hidden.bs.popovergebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die popover.

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

.popover('destroy')

Versteek en vernietig 'n element se popover. Popovers wat delegering gebruik (wat met die selectoropsie geskep word ) kan nie individueel op afstammelinge-snellerelemente vernietig word nie.

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

Gebeurtenisse

Soort gebeurtenis Beskrywing
show.bs.popover Hierdie gebeurtenis begin onmiddellik wanneer die showinstansiemetode geroep word.
gewys.bs.popover Hierdie gebeurtenis word afgevuur wanneer die opspringer sigbaar gemaak is vir die gebruiker (sal wag vir CSS-oorgange om te voltooi).
versteek.bs.popover Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hideinstansiemetode geroep is.
versteekte.bs.popover Hierdie gebeurtenis word afgevuur wanneer die popover klaar vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi).
ingevoeg.bs.popover Hierdie gebeurtenis word afgevuur na die show.bs.popovergebeurtenis wanneer die popover-sjabloon by die DOM gevoeg is.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Waarskuwingsboodskappe alert.js

Voorbeeld waarskuwings

Voeg afwysfunksionaliteit by alle waarskuwingsboodskappe met hierdie inprop.

Wanneer 'n .closeknoppie gebruik word, moet dit die eerste kind van die wees .alert-dismissibleen geen teksinhoud mag daarvoor in die opmaak kom nie.

Gebruik

Voeg net data-dismiss="alert"by jou toemaakknoppie om outomaties 'n waarskuwingssluitingfunksie te gee. Die sluiting van 'n waarskuwing verwyder dit uit die DOM.

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

Om jou waarskuwings animasie te laat gebruik wanneer hulle toemaak, maak seker dat die .fadeen .inklasse reeds op hulle toegepas is.

Metodes

$().alert()

Laat 'n waarskuwing luister vir klikgebeurtenisse op afstammelinge elemente wat die data-dismiss="alert"kenmerk het. (Nie nodig wanneer die data-api se outo-initialisasie gebruik word nie.)

$().alert('close')

Maak 'n waarskuwing toe deur dit uit die DOM te verwyder. As die .fadeen .inklasse op die element teenwoordig is, sal die waarskuwing vervaag voordat dit verwyder word.

Gebeurtenisse

Bootstrap se waarskuwing-inprop stel 'n paar gebeurtenisse bloot om by waarskuwingsfunksies in te skakel.

Soort gebeurtenis Beskrywing
sluit.bs.waarskuwing Hierdie gebeurtenis begin onmiddellik wanneer die closeinstansiemetode geroep word.
gesluit.bs.waarskuwing Hierdie gebeurtenis word afgevuur wanneer die waarskuwing gesluit is (sal wag vir CSS-oorgange om te voltooi).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Knoppies button.js

Doen meer met knoppies. Beheer knoppie state of skep groepe knoppies vir meer komponente soos nutsbalke.

Kruisblaaierversoenbaarheid

Firefox bly in beheertoestande (gestremdheid en kontrolering) oor bladsyvragte . 'n Oplossing hiervoor is om te gebruik autocomplete="off". Sien Mozilla fout #654072 .

Statig

Voeg data-loading-text="Loading..."by om 'n laaitoestand op 'n knoppie te gebruik.

Hierdie kenmerk is opgeskort sedert v3.3.5 en is in v4 verwyder.

Gebruik watter toestand jy ook al wil!

Ter wille van hierdie demonstrasie gebruik ons data-loading-text​​en $().button('loading'), maar dit is nie die enigste toestand wat jy kan gebruik nie. Sien meer hieroor hieronder in die $().button(string)dokumentasie .

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

Enkelwissel

Voeg data-toggle="button"by om skakeling op 'n enkele knoppie te aktiveer.

Vooraf geskakelde knoppies benodig .activeenaria-pressed="true"

Vir vooraf-geskakelde knoppies moet jy die .activeklas en die aria-pressed="true"kenmerk by die buttonjouself voeg.

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

Merkblokkie / Radio

Voeg data-toggle="buttons"by 'n .btn-groupbevat-merkblokkie of radio-insette om skakeling in hul onderskeie style moontlik te maak.

Vooraf geselekteerde opsies benodig.active

Vir voorafgeselekteerde opsies moet jy self die .activeklas by die insette voeg label.

Visuele gekontroleerde toestand word slegs opgedateer met klik

As die gemerkte toestand van 'n merkblokkie-knoppie opgedateer word sonder om 'n clickgebeurtenis op die knoppie af te vuur (bv. via <input type="reset">of deur die checkedeienskap van die invoer te stel), sal jy self die .activeklas op die invoer's moet skakel 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>

Metodes

$().button('toggle')

Wissel stootstatus. Gee die knoppie die voorkoms dat dit geaktiveer is.

$().button('reset')

Stel knoppiestatus terug - ruil teks na oorspronklike teks. Hierdie metode is asynchronies en keer terug voordat die terugstelling werklik voltooi is.

$().button(string)

Ruil teks om na enige data-gedefinieerde tekstoestand.

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

Vou collapse.js in

Buigsame inprop wat 'n handvol klasse gebruik vir maklike wisselgedrag.

Inprop-afhanklikheid

Invou vereis dat die oorgang-inprop by jou weergawe van Bootstrap ingesluit moet word.

Voorbeeld

Klik op die knoppies hieronder om 'n ander element te wys en te versteek via klasveranderinge:

  • .collapseverberg inhoud
  • .collapsingword tydens oorgange toegepas
  • .collapse.ininhoud toon

Jy kan 'n skakel met die hrefkenmerk gebruik, of 'n knoppie met die data-targetkenmerk. In beide gevalle word die data-toggle="collapse"vereis.

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>

Trekklavier voorbeeld

Brei die verstek invougedrag uit om 'n trekklavier met die paneelkomponent te skep.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad inkvis. 3 wolf maan officia aute, nie cupidatat skaatsplank dolor brunch. Kos vragmotor quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sit 'n voël daarop inkvis enkeloorsprong koffie 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 handwerk bier plaas-tot-tafel, rou denim estetiese sinth nesciunt jy het waarskynlik nog nie gehoor van hulle accusamus labore volhoubare VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad inkvis. 3 wolf maan officia aute, nie cupidatat skaatsplank dolor brunch. Kos vragmotor quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sit 'n voël daarop inkvis enkeloorsprong koffie 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 handwerk bier plaas-tot-tafel, rou denim estetiese sinth nesciunt jy het waarskynlik nog nie gehoor van hulle accusamus labore volhoubare VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad inkvis. 3 wolf maan officia aute, nie cupidatat skaatsplank dolor brunch. Kos vragmotor quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sit 'n voël daarop inkvis enkeloorsprong koffie 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 handwerk bier plaas-tot-tafel, rou denim estetiese sinth nesciunt jy het waarskynlik nog nie gehoor van hulle accusamus labore volhoubare 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>

Dit is ook moontlik om s uit te ruil .panel-bodymet .list-groups.

  • Bootply
  • Een itmus ac facilin
  • Tweede eros

Maak uitvou/vou kontroles toeganklik

Maak seker dat jy aria-expandedby die kontrole-element voeg. Hierdie kenmerk definieer eksplisiet die huidige toestand van die opvoubare element aan skermlesers en soortgelyke hulptegnologieë. As die opvoubare element by verstek gesluit is, moet dit 'n waarde van aria-expanded="false". As jy die opvoubare element gestel het om by verstek oop te wees deur die inklas te gebruik, stel aria-expanded="true"eerder op die kontrole. Die inprop sal hierdie kenmerk outomaties wissel op grond van of die opvoubare element oop of toegemaak is of nie.

Verder, as jou beheerelement 'n enkele opvoubare element teiken – dws die data-targetkenmerk wys na 'n idkeurder - kan jy 'n bykomende aria-controlskenmerk by die beheerelement voeg, wat die idvan die opvoubare element bevat. Moderne skermlesers en soortgelyke ondersteunende tegnologieë maak gebruik van hierdie kenmerk om gebruikers van bykomende kortpaaie te voorsien om direk na die opvoubare element self te navigeer.

Gebruik

Die ineenstorting-inprop gebruik 'n paar klasse om die swaar opheffing te hanteer:

  • .collapseverberg die inhoud
  • .collapse.inwys die inhoud
  • .collapsingword bygevoeg wanneer die oorgang begin, en verwyder wanneer dit klaar is

Hierdie klasse kan gevind word in component-animations.less.

Via data-kenmerke

Voeg net data-toggle="collapse"en a data-targetby die element om outomaties beheer van 'n opvoubare element toe te ken. Die data-targetkenmerk aanvaar 'n CSS-kieser om die ineenstorting op toe te pas. Maak seker dat jy die klas collapseby die opvoubare element voeg. As jy wil hê dit moet verstek oopmaak, voeg die bykomende klas by in.

Om trekklavieragtige groepbestuur by 'n opvoubare kontrole te voeg, voeg die data-kenmerk by data-parent="#selector". Verwys na die demo om dit in aksie te sien.

Via JavaScript

Aktiveer handmatig met:

$('.collapse').collapse()

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-parent="".

Naam tipe verstek beskrywing
ouer keurder onwaar As 'n kieser verskaf word, sal alle opvoubare elemente onder die gespesifiseerde ouer gesluit word wanneer hierdie opvoubare item gewys word. (soortgelyk aan tradisionele trekklaviergedrag - dit hang af van die panelklas)
wissel boolean waar Wissel die opvoubare element by aanroep

Metodes

.collapse(options)

Aktiveer jou inhoud as 'n opvoubare element. Aanvaar 'n opsionele opsie object.

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

.collapse('toggle')

Wissel 'n opvoubare element na gewys of versteek. Keer terug na die oproeper voordat die opvoubare element werklik gewys of versteek is (dws voordat die shown.bs.collapseof hidden.bs.collapsegebeurtenis plaasvind).

.collapse('show')

Toon 'n opvoubare element. Keer terug na die oproeper voordat die opvoubare element werklik gewys is (dws voor die shown.bs.collapsegebeurtenis plaasvind).

.collapse('hide')

Versteek 'n opvoubare element. Keer terug na die oproeper voordat die opvoubare element werklik versteek is (dws voor die hidden.bs.collapsegebeurtenis plaasvind).

Gebeurtenisse

Bootstrap se ineenstortingsklas ontbloot 'n paar gebeurtenisse vir inskakeling by ineenstortingsfunksionaliteit.

Soort gebeurtenis Beskrywing
show.bs.ineenstorting Hierdie gebeurtenis begin onmiddellik wanneer die showinstansiemetode geroep word.
gewys.bs.ineenstorting Hierdie gebeurtenis word afgevuur wanneer 'n invou-element vir die gebruiker sigbaar gemaak is (sal wag vir CSS-oorgange om te voltooi).
versteek.bs.ineenstort Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hidemetode geroep is.
verborge.bs.ineenstorting Hierdie gebeurtenis word afgevuur wanneer 'n invou-element vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carrousel carousel.js

'n Skyfievertoning-komponent vir fietsry deur elemente, soos 'n karrousel. Geneste karrousels word nie ondersteun nie.

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

Opsionele onderskrifte

Voeg byskrifte maklik by jou skyfies met die .carousel-captionelement binne enige .item. Plaas omtrent enige opsionele HTML daarin en dit sal outomaties in lyn gebring en geformateer word.

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

Veelvuldige karrousels

Karrousels vereis die gebruik van 'n idop die buitenste houer (die .carousel) vir karrouselkontroles om behoorlik te funksioneer. Wanneer u veelvuldige karrousels byvoeg, of wanneer u 'n karrousel se verander id, moet u die relevante kontroles opdateer.

Via data-kenmerke

Gebruik data-kenmerke om die posisie van die karrousel maklik te beheer. data-slideaanvaar die sleutelwoorde prevof next, wat die skuifposisie relatief tot sy huidige posisie verander. Alternatiewelik, gebruik data-slide-toom 'n rou skyfie-indeks na die karrousel deur te data-slide-to="2"gee, wat die skyfieposisie verskuif na 'n spesifieke indeks wat begin met 0.

Die data-ride="carousel"kenmerk word gebruik om 'n karrousel as animasie te merk vanaf bladsy laai. Dit kan nie in kombinasie met (oortollige en onnodige) eksplisiete JavaScript-inisialisering van dieselfde karrousel gebruik word nie.

Via JavaScript

Bel karrousel handmatig met:

$('.carousel').carousel()

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-interval="".

Naam tipe verstek beskrywing
interval nommer 5000 Die tyd om te vertraag tussen die outomatiese fietsry van 'n item. As dit vals is, sal die karrousel nie outomaties loop nie.
pouse tou | nul "sweef" As dit op gestel is "hover", onderbreek die fietsry van die karrousel aan mouseenteren hervat die fietsry van die karrousel aan mouseleave. As dit op gestel is null, sal dit nie onderbreek word deur oor die karrousel te beweeg nie.
toevou boolean waar Of die karrousel aanhoudend moet fietsry of harde stops moet hê.
sleutelbord boolean waar Of die karrousel op sleutelbordgebeure moet reageer.

Inisialiseer die karrousel met 'n opsionele opsies objecten begin deur items ry.

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

Blaai deur die karrousel-items van links na regs.

Stop die karrousel om deur items te fiets.

Sit die karrousel na 'n spesifieke raam (0 gebaseer, soortgelyk aan 'n skikking).

Blaai na die vorige item.

Blaai na die volgende item.

Bootstrap se karrouselklas stel twee gebeurtenisse bloot vir inhaak by karrouselfunksionaliteit.

Albei geleenthede het die volgende bykomende eienskappe:

  • direction: Die rigting waarin die karrousel gly (óf "left"óf "right").
  • relatedTarget: Die DOM-element wat in plek geskuif word as die aktiewe item.

Alle karrouselgebeurtenisse word op die karrousel self afgevuur (dws by die <div class="carousel">).

Soort gebeurtenis Beskrywing
slide.bs.karrousel Hierdie gebeurtenis brand onmiddellik wanneer die slideinstansiemetode aangeroep word.
gly.bs.karrousel Hierdie gebeurtenis word afgevuur wanneer die karrousel sy skyfie-oorgang voltooi het.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Plak affix.js

Voorbeeld

Die affix-inprop position: fixed;skakel aan en af, wat die effek wat met position: sticky;. Die subnavigasie aan die regterkant is 'n lewendige demonstrasie van die affix-inprop.


Gebruik

Gebruik die affix-inprop via data-kenmerke of handmatig met jou eie JavaScript. In beide situasies moet jy CSS verskaf vir die posisionering en breedte van jou aangehegte inhoud.

Let wel: Moenie die aanbring-inprop gebruik op 'n element wat in 'n relatief geposisioneerde element voorkom nie, soos 'n getrekte of gedrukte kolom, as gevolg van 'n Safari-weergawe fout .

Posisionering via CSS

Die affix-inprop wissel tussen drie klasse, wat elkeen 'n spesifieke toestand verteenwoordig: .affix, .affix-top, en .affix-bottom. Jy moet self die style verskaf, met die uitsondering van position: fixed;op .affix, vir hierdie klasse (onafhanklik van hierdie inprop) om die werklike posisies te hanteer.

Hier is hoe die affix-inprop werk:

  1. Om te begin, voeg die inprop by .affix-topom aan te dui dat die element in sy boonste posisie is. Op hierdie stadium is geen CSS-posisionering nodig nie.
  2. As jy verby die element blaai wat jy wil aanbring, behoort die werklike aanhegting te aktiveer. Dit is waar .affixvervang .affix-topen stel position: fixed;(verskaf deur Bootstrap se CSS).
  3. As 'n onderste verskuiwing gedefinieer is, moet jy verby dit vervang .affixmet .affix-bottom. Aangesien afwykings opsioneel is, vereis die instelling van een dat u die toepaslike CSS instel. In hierdie geval, voeg by position: absolute;wanneer nodig. Die inprop gebruik die data-kenmerk of JavaScript-opsie om te bepaal waar die element van daar af geplaas moet word.

Volg die stappe hierbo om jou CSS vir enige van die gebruiksopsies hieronder te stel.

Via data-kenmerke

Om maklik aanbringgedrag by enige element te voeg, voeg net by data-spy="affix"die element waarna jy wil spioeneer. Gebruik afwykings om te definieer wanneer om die vaspen van 'n element te wissel.

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

Via JavaScript

Bel die affix-inprop via JavaScript:

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-offset-top="200".

Naam tipe verstek beskrywing
verreken nommer | funksie | voorwerp 10 Pixels om van die skerm af te verreken wanneer die posisie van rolberekening bereken word. As 'n enkele nommer verskaf word, sal die verrekening in beide bo- en onderrigtings toegepas word. Om 'n unieke, onderste en boonste offset te verskaf, verskaf net 'n voorwerp offset: { top: 10 }of offset: { top: 10, bottom: 5 }. Gebruik 'n funksie wanneer jy 'n offset dinamies moet bereken.
teiken kieser | node | jQuery element die windowvoorwerp Spesifiseer die teikenelement van die aanhegsel.

Metodes

.affix(options)

Aktiveer jou inhoud as aangehegte inhoud. Aanvaar 'n opsionele opsie object.

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

.affix('checkPosition')

Herbereken die toestand van die aanhegting gebaseer op die afmetings, posisie en rolposisie van die relevante elemente. Die .affix, .affix-top, en .affix-bottomklasse word bygevoeg by of verwyder van die aangehegte inhoud volgens die nuwe toestand. Hierdie metode moet aangeroep word wanneer die afmetings van die aangehegte inhoud of die teikenelement verander word, om die korrekte posisionering van die aangehegte inhoud te verseker.

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

Gebeurtenisse

Bootstrap se affix-inprop stel 'n paar gebeurtenisse bloot om by affix-funksionaliteit in te skakel.

Soort gebeurtenis Beskrywing
aanbring.bs.aanbring Hierdie gebeurtenis brand onmiddellik voordat die element aangebring is.
aangebring.bs.aanbring Hierdie gebeurtenis word afgevuur nadat die element aangebring is.
aanbring-top.bs.affix Hierdie gebeurtenis brand onmiddellik voordat die element bo-aan aangebring is.
aangebring-top.bs.affix Hierdie gebeurtenis word afgevuur nadat die element bo-aan aangebring is.
aanbring-bottom.bs.affix Hierdie gebeurtenis brand onmiddellik voordat die element aangebring is-onder.
aangebring-bottom.bs.affix Hierdie gebeurtenis word afgevuur nadat die element onderaan aangebring is.