Oersicht

Yndividueel of gearstald

Plugins kinne yndividueel opnommen wurde (mei de yndividuele *.jsbestannen fan Bootstrap), of allegear tagelyk (brûkend bootstrap.jsof de minifisearre bootstrap.min.js).

Mei help fan it kompilearre JavaScript

Beide bootstrap.jsen bootstrap.min.jsbefetsje alle plugins yn ien bestân. Meitsje mar ien yn.

Plugin-ôfhinklikens

Guon plugins en CSS-komponinten binne ôfhinklik fan oare plugins. As jo ​​​​plugins yndividueel opnimme, soargje derfoar dat jo dizze ôfhinklikens kontrolearje yn 'e dokuminten. Tink derom ek dat alle plugins ôfhinklik binne fan jQuery (dit betsjut dat jQuery moat wurde opnommen foar de plugin-bestannen). Rieplachtsje úsbower.json om te sjen hokker ferzjes fan jQuery wurde stipe.

Data attributen

Jo kinne alle Bootstrap-plugins suver brûke fia de markup API sûnder ien inkelde line fan JavaScript te skriuwen. Dit is de earste-klasse API fan Bootstrap en soe jo earste konsideraasje wêze moatte by it brûken fan in plugin.

Dat sei, yn guon situaasjes kin it winsklik wêze om dizze funksjonaliteit út te skeakeljen. Dêrom jouwe wy ek de mooglikheid om it data-attribút API út te skeakeljen troch alle eveneminten op it dokumint mei nammespaasje te ûntbinen data-api. Dit sjocht der sa út:

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

As alternatyf, om in spesifyk plugin te rjochtsjen, befetsje gewoan de namme fan 'e plugin as in nammeromte tegearre mei de data-api nammeromte sa:

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

Allinich ien plugin per elemint fia gegevensattributen

Brûk gjin gegevensattributen fan meardere plugins op itselde elemint. Bygelyks, in knop kin net beide in tooltip hawwe en in modaal wikselje. Om dit te berikken, brûk in wrapping elemint.

Programmatyske API

Wy leauwe ek dat jo alle Bootstrap-plugins moatte kinne brûke suver fia de JavaScript API. Alle iepenbiere APIs binne single, chainable metoaden, en werom de kolleksje hannele op.

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

Alle metoaden moatte in opsjoneel opsjeobjekt akseptearje, in tekenrige dy't in bepaalde metoade rjochtet, of neat (wat in plugin inisjearret mei standertgedrach):

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

Elke plugin bleatstelt ek syn rauwe konstruktor op in Constructoreigendom $.fn.popover.Constructor:. As jo ​​​​in bepaalde plugin-eksimplaar wolle krije, helje it dan direkt fan in elemint op: $('[rel="popover"]').data('popover').

Standertynstellings

Jo kinne de standertynstellingen foar in plugin feroarje troch it Constructor.DEFAULTSobjekt fan 'e plugin te feroarjen:

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

Gjin konflikt

Soms is it nedich om Bootstrap-plugins te brûken mei oare UI-kaders. Yn dizze omstannichheden kinne nammeromte botsingen soms foarkomme. As dit bart, kinne jo .noConflictde plugin oanroppe wêrfan jo de wearde weromsette wolle.

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

Eveneminten

Bootstrap leveret oanpaste eveneminten foar de unike aksjes fan de measte plugins. Yn 't algemien komme dizze yn in ynfinityf en doedestiidsfoarm - wêrby't de ynfinityf (bgl. show) oan it begjin fan in barren ynskeakele wurdt, en syn doetiidsfoarm (bgl. shown) wurdt aktivearre by it foltôgjen fan in aksje.

Fanôf 3.0.0 binne alle Bootstrap-eveneminten mei nammenamme.

Alle infinitive eveneminten jouwe preventDefaultfunksjonaliteit. Dit jout de mooglikheid om de útfiering fan in aksje te stopjen foardat it begjint.

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

Ferzje nûmers

De ferzje fan elk fan Bootstrap's jQuery-plugins kin tagonklik wurde fia it VERSIONeigendom fan 'e plugin's konstruktor. Bygelyks foar de tooltip-plugin:

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

Gjin spesjale fallbacks as JavaScript is útskeakele

De plugins fan Bootstrap falle net bysûnder sierlik werom as JavaScript is útskeakele. As jo ​​yn dit gefal soarch hawwe oer de brûkersûnderfining, brûk <noscript>dan om de situaasje (en hoe't jo JavaScript opnij ynskeakelje kinne) oan jo brûkers út te lizzen, en/of jo eigen oanpaste fallbacks ta te foegjen.

Tredde bibleteken

Bootstrap stipet gjin offisjeel JavaScript-biblioteken fan tredden lykas Prototype of jQuery UI. Nettsjinsteande .noConflictbarrens mei nammen, kinne d'r kompatibiliteitsproblemen wêze dy't jo sels moatte reparearje.

Transysjes transition.js

Oer transysjes

Foar ienfâldige oergongseffekten, befetsje transition.jsien kear njonken de oare JS-bestannen. As jo ​​​​de kompilearre (of minifisearre) brûke bootstrap.js, is it net nedich om dit op te nimmen - it is der al.

Wat is der binnen

Transition.js is in basishelper foar transitionEndeveneminten en ek in CSS-oergongemulator. It wurdt brûkt troch de oare plugins om te kontrolearjen op CSS-oergongsstipe en om hingjende oergongen te fangen.

Transysjes útskeakelje

Transysjes kinne globaal útskeakele wurde mei it folgjende JavaScript-snippet, dat moat komme neidat transition.js(of bootstrap.jsof bootstrap.min.js, sa't it gefal kin wêze) is laden:

$.support.transition = false

Modals modal.js

Modalen binne streamlined, mar fleksibel, dialoochprompts mei de minimale fereaske funksjonaliteit en tûke standerts.

Meardere iepen modalen net stipe

Wês wis dat jo gjin modal iepenje wylst in oare noch sichtber is. It sjen litte fan mear as ien modal tagelyk fereasket oanpaste koade.

Modale markup pleatsing

Besykje altyd de HTML-koade fan in modale op in topnivo-posysje yn jo dokumint te pleatsen om te foarkommen dat oare komponinten it uterlik en/of funksjonaliteit fan 'e modal beynfloedzje.

Bewaringen foar mobyl apparaat

D'r binne wat warskôgingen oangeande it brûken fan modalen op mobile apparaten. Sjoch ús browser-stipedokuminten foar details.

Troch hoe't HTML5 syn semantyk definiearret, hat it autofocusHTML-attribút gjin effekt yn Bootstrap-modalen. Om itselde effekt te berikken, brûk wat oanpast JavaScript:

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

Foarbylden

Statyske foarbyld

In werjûn modaal mei koptekst, lichem en set aksjes yn 'e fuottekst.

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

Live demo

Skeakelje in modaal fia JavaScript troch op de knop hjirûnder te klikken. It sil nei ûnderen glide en ferdwine fan 'e boppekant fan' e side.

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

Meitsje modals tagonklik

Wês wis dat jo tafoegje role="dialog"en aria-labelledby="...", ferwizend nei de modale titel, nei .modal, en role="document"nei it .modal-dialogsels.

Derneist kinne jo in beskriuwing jaan fan jo modale dialooch mei aria-describedbyop .modal.

Ynbêde YouTube-fideo's

Ynbêde fan YouTube-fideo's yn modalen fereasket ekstra JavaScript net yn Bootstrap om automatysk ôfspieljen en mear te stopjen. Sjoch dizze nuttige Stack Overflow-post foar mear ynformaasje.

Opsjonele maten

Modals hawwe twa opsjoneel maten, beskikber fia modifier klassen wurde pleatst op in .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>

Fuortsmite animaasje

Foar modalen dy't gewoan ferskine ynstee fan ferdwine om te besjen, ferwiderje de .fadeklasse fan jo modale markup.

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

Mei help fan it grid systeem

Foar in profitearje fan de Bootstrap grid systeem binnen in modale, krekt nêst .rows binnen de .modal-bodyen dan brûk de normale grid systeem klassen.

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

Hawwe jo in boskje knoppen dy't allegear deselde modaal triggerje, gewoan mei wat oare ynhâld? Brûk event.relatedTargeten HTML data-*attributen (mooglik fia jQuery ) foar in fariearje de ynhâld fan de modale ôfhinklik fan hokker knop waard oanklikt. Sjoch de Modal Events-dokuminten foar details oer relatedTarget,

... mear knoppen ...
<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)
})

Gebrûk

De modale plugin skeakelet jo ferburgen ynhâld op oanfraach, fia gegevensattributen of JavaScript. It foeget ek ta .modal-openoan it <body>te oerskriuwen standert rôlje gedrach en genereart in .modal-backdropfoar in foarsjen in klik gebiet foar it ôfwizen fan sjen litten modals as jo klikke bûten de modale.

Fia data attributen

Aktivearje in modaal sûnder JavaScript te skriuwen. Set data-toggle="modal"op in controller-elemint, lykas in knop, tegearre mei in data-target="#foo"of href="#foo"om in spesifike modaal te rjochtsjen om te wikseljen.

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

Fia JavaScript

Rop in modaal mei id myModalmei ien line fan JavaScript:

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

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-backdrop="".

Namme type standert beskriuwing
eftergrûn boolean of de snaar'static' wier Omfettet in modale eftergrûnelemint. As alternatyf, spesifisearje staticfoar in eftergrûn dy't de modaal net slút by klik.
toetseboerd boolean wier Slút de modale as escape-toets wurdt yndrukt
sjen litte boolean wier Toant de modal as inisjalisearre.
ôfstân paad falsk

Dizze opsje is ôfret sûnt v3.3.0 en is fuortsmiten yn v4. Wy riede ynstee in gebrûk client-side sjabloanen of in gegevens binende ramt, of calling jQuery.load sels.

As in URL op ôfstân wurdt levere, sil ynhâld ien kear laden wurde fia jQuery's loadmetoade en ynjeksje yn 'e .modal-contentdiv. As jo ​​​​de data-api brûke, kinne jo as alternatyf it hrefattribút brûke om de boarne op ôfstân op te jaan. In foarbyld hjirfan wurdt hjirûnder werjûn:

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

Metoaden

Aktivearret jo ynhâld as modaal. Akseptearret in opsjonele opsjes object.

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

Wizigje manuell in modaal. Keart werom nei de beller foardat de modal feitlik werjûn of ferburgen is (dat wol sizze foardat it shown.bs.modalof hidden.bs.modalbarren bart).

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

Iepenet in modaal mei de hân. Keart werom nei de beller foardat de modal wirklik werjûn is (dus foardat it shown.bs.modalevenemint bart).

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

Ferberget in modaal mei de hân. Keart werom nei de beller foardat de modal eins ferburgen is (dus foardat it hidden.bs.modalbarren bart).

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

Past de posysjonearring fan 'e modale op 'e nij oan om in skúfbalke tsjin te gean yn gefal dat ien soe ferskine, wat de modale nei lofts soe meitsje.

Allinnich nedich as de hichte fan 'e modale feroaret wylst it iepen is.

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

Eveneminten

De modale klasse fan Bootstrap bleatsteld in pear eveneminten foar heakjen oan modale funksjonaliteit.

Alle modale eveneminten wurde ûntslein op 'e modal sels (dus by de <div class="modal">).

Event Type Beskriuwing
show.bs.modal Dit evenemint fjoer fuortendaliks as de showeksimplaar metoade wurdt oanroppen. As feroarsake troch in klik, is it oanklikte elemint beskikber as relatedTargeteigendom fan it evenemint.
shown.bs.modal Dit evenemint wurdt ûntslein as de modal sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). As feroarsake troch in klik, is it oanklikte elemint beskikber as relatedTargeteigendom fan it evenemint.
hide.bs.modal Dit barren wurdt fuortendaliks ûntslein as de hideeksimplaarmetoade oanroppen is.
hidden.bs.modal Dit evenemint wurdt ûntslein as de modal klear is mei ferburgen te wurden foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen).
loaded.bs.modal Dit evenemint wurdt ûntslein as de modal ynhâld hat laden mei de remoteopsje.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

Foegje dropdown-menu's ta oan hast alles mei dizze ienfâldige plugin, ynklusyf de navbar, ljeppers en pillen.

Binnen in navigaasjebalke

Binnen pillen

Fia gegevensattributen of JavaSkript skeakelt de dropdown-plugin ferburgen ynhâld (útklapmenu's) troch de .openklasse te wikseljen op it item fan 'e âlderlist.

Op mobile apparaten, it iepenjen fan in dropdown foeget in .dropdown-backdropas tapgebiet ta foar it sluten fan dropdown-menu's as jo bûten it menu tikje, in eask foar juste iOS-stipe. Dit betsjut dat it wikseljen fan in iepen útklapmenu nei in oar útklapmenu in ekstra tap op mobyl fereasket.

Opmerking: it data-toggle="dropdown"attribút wurdt fertroud foar it sluten fan dropdown-menu's op in applikaasjenivo, dus it is in goed idee om it altyd te brûken.

Fia data attributen

Taheakje data-toggle="dropdown"oan in keppeling of knop om in dropdown te wikseljen.

<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 yntakt te hâlden mei keppelingsknoppen, brûk it data-targetattribút ynstee fan 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>

Fia JavaScript

Rop de dropdowns fia JavaScript:

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

data-toggle="dropdown"noch nedich

Nettsjinsteande of jo jo dropdown fia JavaScript neame of ynstee de data-api brûke, data-toggle="dropdown"is altyd fereaske om oanwêzich te wêzen op it trigger-elemint fan 'e dropdown.

Gjin

Skeakelt it dellûkmenu fan in opjûne navigaasjebalke of navigaasje mei ljeppers.

Alle dropdown-eveneminten wurde ûntslein op it âlderelemint fan .dropdown-menu'e.

Alle dropdown-eveneminten hawwe in relatedTargeteigenskip, waans wearde it wikseljende anker-elemint is.

Event Type Beskriuwing
show.bs.dropdown Dit evenemint fjoer fuortendaliks as de show eksimplaar metoade wurdt oanroppen.
shown.bs.dropdown Dit evenemint wurdt ûntslein as de dellûk sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen, om te foltôgjen).
hide.bs.dropdown Dit barren wurdt fuortendaliks ûntslein as de hide-eksimplaarmetoade oanroppen is.
hidden.bs.dropdown Dit barren wurdt ûntslein as it útklapmenu klear is ferburgen foar de brûker (sil wachtsje op CSS-oergongen, om te foltôgjen).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Foarbyld yn navbar

De ScrollSpy-plugin is foar it automatysk bywurkjen fan nav-doelen basearre op scrollposysje. Rôlje it gebiet ûnder de navigaasjebalke en besjoch de aktive klasse feroarje. De dellûk-subitems sille ek markearre wurde.

@fet

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi foardat se útferkocht qui. Tumblr pleats-tot-tafel fyts rjochten wat dan ek. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui jo hawwe wierskynlik net heard fan harren en cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa snor skateboard, adipisicing fugiat velit pitchfork baard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat fjouwer loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles net estetyske oefening quis gentrify. Brooklyn adipisicing craft bier vice keytar deserunt.

ien

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger tas. Cred ex in, duorsume delectus consectetur fanny pack iphone.

twa

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 irony, thundercats jo nei alle gedachten hawwe net heard fan harren consequat hoodie glutenfrije lo-fi fap aliquip. Labore elit placeat foardat se útferkocht binne, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft bier seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Gebrûk

Fereasket Bootstrap nav

Scrollspy fereasket op it stuit it gebrûk fan in Bootstrap-nav-komponint foar goede markearring fan aktive keppelings.

Oplosbere ID-doelen nedich

Navbar-keppelings moatte oplossbere id-doelen hawwe. Bygelyks, in <a href="#home">home</a>moat oerienkomme mei wat yn 'e DOM lykas <div id="home"></div>.

Net- doeleleminten :visiblenegearre

Doel eleminten dy't net :visibleneffens jQuery sille wurde negearre en harren byhearrende nav items sille nea wurde markearre.

Fereasket relative posisjonearring

Nettsjinsteande de ymplemintaasjemetoade, scrollspy fereasket it gebrûk fan position: relative;op it elemint wêrop jo bespionearje. Yn 'e measte gefallen is dit de <body>. As scrollspying op oare eleminten as de <body>, wês wis dat jo in heightset hawwe en overflow-y: scroll;tapast.

Fia data attributen

Om maklik scrollspy-gedrach ta te foegjen oan jo topbalke-navigaasje, foegje data-spy="scroll"jo ta oan it elemint wêrop jo wolle bispiede (meast typysk soe dit de <body>). Foegje dan it data-targetattribút ta mei de ID of klasse fan it âlderelemint fan elke Bootstrap .nav-komponint.

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>

Fia JavaScript

Nei it tafoegjen position: relative;fan jo CSS, skilje de scrollspy fia JavaScript:

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

Metoaden

.scrollspy('refresh')

By it brûken fan scrollspy yn kombinaasje mei it tafoegjen of ferwiderjen fan eleminten út 'e DOM, moatte jo de ferfarskingsmetoade sa neame:

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

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-offset="".

Namme type standert beskriuwing
offset nûmer 10 Pixels om fan boppen ôf te kompensearjen by it berekkenjen fan posysje fan scroll.

Eveneminten

Event Type Beskriuwing
activate.bs.scrollspy Dit evenemint ûntspringt as in nij item wurdt aktivearre troch de scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Togglable ljeppers tab.js

Foarbyld ljeppers

Foegje rappe, dynamyske ljepperfunksjes ta oan oergong troch ruten fan lokale ynhâld, sels fia dellûkmenu's. Neste ljeppers wurde net stipe.

Raw denim jo nei alle gedachten hawwe net heard fan harren jeans shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip plak foar salvia cillum iphone. Seitan aliquip quis cardigan american apparel, slachter 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.

Wreidet ljeppernavigaasje út

Dizze plugin wreidet de ljepblêdnavigaasjekomponint út om ljepperbere gebieten ta te foegjen.

Gebrûk

Ljepblêden ynskeakelje fia JavaScript (elke ljepper moat yndividueel aktivearre wurde):

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

Jo kinne yndividuele ljeppers op ferskate manieren aktivearje:

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

Jo kinne in ljepper of pilnavigaasje aktivearje sûnder JavaScript te skriuwen troch gewoan oan te jaan data-toggle="tab"of data-toggle="pill"op in elemint. It tafoegjen fan de klassen naven nav-tabsoan it ljepblêd sil de stylingul fan it ljepblêd Bootstrap tapasse , wylst it tafoegjen fan de en klassen sil pilstyling tapasse .navnav-pills

<div>

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

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

</div>

Fade effekt

Om ljeppers yn te ferdwinen, foegje .fadejo ta oan elk .tab-pane. It earste ljepblêd moat ek .inde earste ynhâld sichtber meitsje moatte.

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

Metoaden

$().tab

Aktivearret in ljepper elemint en ynhâld container. De ljepper moat in data-targetof in hrefrjochte op in kontenerknooppunt hawwe yn 'e DOM. Yn 'e boppesteande foarbylden binne de ljeppers de <a>s mei data-toggle="tab"attributen.

.tab('show')

Selekteart de opjûne ljepper en lit de byhearrende ynhâld sjen. Elke oare ljepper dy't earder selektearre is wurdt net selektearre en de byhearrende ynhâld wurdt ferburgen. Keart werom nei de beller foardat it ljepblêd wirklik werjûn is (dus foardat it shown.bs.tabbarren bart).

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

Eveneminten

By it werjaan fan in nije ljepper, de barrens fjoer yn 'e folgjende folchoarder:

  1. hide.bs.tab(op it aktive ljepblêd)
  2. show.bs.tab(op it te sjen ljepblêd)
  3. hidden.bs.tab(op 'e foarige aktive ljepper, deselde as foar it hide.bs.tabevenemint)
  4. shown.bs.tab(op it krekt-aktive ljepblêd, deselde as foar it show.bs.tabevenemint)

As der gjin ljepper wie al aktyf, dan sil de hide.bs.taben hidden.bs.tabeveneminten net ûntslein wurde.

Event Type Beskriuwing
show.bs.tab Dit evenemint ûntspringt op ljeppershow, mar foardat de nije ljepper is werjûn. Brûk event.targeten event.relatedTargetom respektivelik de aktive ljepper en de foarige aktive ljepper (as beskikber) te rjochtsjen.
shown.bs.tab Dit evenemint ûntspringt op ljepper sjen nei in ljepper is werjûn. Brûk event.targeten event.relatedTargetom respektivelik de aktive ljepper en de foarige aktive ljepper (as beskikber) te rjochtsjen.
hide.bs.tab Dit barren ûntspringt as in nije ljepper werjûn wurde moat (en dus moat de foarige aktive ljepper ferburgen wurde). Brûk event.targeten event.relatedTargetom respektivelik de aktive ljepper te rjochtsjen en de nije ljepper dy't gau aktyf is.
hidden.bs.tab Dit barren ûntspringt neidat in nije ljepper wurdt werjûn (en dus is de foarige aktive ljepper ferburgen). Brûk event.targeten event.relatedTargetom respektivelik de foarige aktive ljepper en de nije aktive ljepper te rjochtsjen.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Ynspirearre troch de treflike jQuery.tipsy plugin skreaun troch Jason Frame; Tooltips binne in bywurke ferzje, dy't net fertrouwe op ôfbyldings, CSS3 brûke foar animaasjes, en data-attributen foar lokale titelopslach.

Tooltips mei titels fan nul lingte wurde nea werjûn.

Foarbylden

Hoverje oer de keppelings hjirûnder om tooltips te sjen:

Strakke broek folgjende nivo keffiyeh jo hawwe wierskynlik net heard fan harren. Photo booth baard rau denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie duorsume quinoa 8-bit Amerikaanske klean hawwe in terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fjouwer loko mcsweeney's reinigje vegan chambray. In echt iroanysk ambachtsman wat keytar , scenester farm-to-table banksy Austin twitter handle freegan cred rauwe denim single-origin kofje virale.

Statyske tooltip

Fjouwer opsjes binne beskikber: boppe, rjochts, ûnder, en lofts rjochte.

Fjouwer rjochtingen

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

Foar prestaasjesredenen binne de Tooltip en Popover data-apis opt-in, wat betsjut dat jo se sels moatte inisjalisearje .

Ien manier om alle tooltips op in side te inisjalisearjen soe wêze om se te selektearjen troch har data-toggleattribút:

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

Gebrûk

De tooltip-plugin genereart ynhâld en markearring op fraach, en pleatst standert tooltips nei har trigger-elemint.

Trigger de tooltip fia JavaScript:

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

Markup

De fereaske markup foar in tooltip is allinich in dataattribút en titleop it HTML-elemint wolle jo in tooltip hawwe. De generearre markup fan in tooltip is frij ienfâldich, hoewol it in posysje fereasket (standert, ynsteld toptroch de plugin).

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

Meardere line keppelings

Soms wolle jo in tooltip tafoegje oan in hyperlink dy't meardere rigels omslacht. It standertgedrach fan 'e tooltip-plugin is om it horizontaal en fertikaal te sintrum. Foegje white-space: nowrap;oan jo ankers om dit te foarkommen.

Tooltips yn knopgroepen, ynfiergroepen en tabellen fereaskje spesjale ynstelling

By it brûken fan tooltips op eleminten binnen in .btn-groupof in .input-group, of op tabel-relatearre eleminten ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>), moatte jo de opsje spesifisearje container: 'body'(dokumintearre hjirûnder) om net winske side-effekten te foarkommen (lykas it elemint dat breder groeit en/ of syn rûne hoeken ferlieze as de tooltip wurdt aktivearre).

Besykje net tooltips te sjen op ferburgen eleminten

Oproppe $(...).tooltip('show')as it doelelemint is display: none;, sil de tooltip ferkeard pleatst wurde.

Tagonklike tooltips foar brûkers fan toetseboerd en assistinte technology

Foar brûkers dy't navigearje mei in toetseboerd, en yn it bysûnder brûkers fan assistinte technologyen, moatte jo allinich tooltips tafoegje oan toetseboerd-fokusbere eleminten lykas keppelings, formulierkontrôles, of in willekeurige elemint mei in tabindex="0"attribút.

Tooltips op útskeakele eleminten fereaskje wrapper eleminten

Om in tooltip ta te foegjen oan in disabledof .disabledelemint, set it elemint yn in <div>en tapasse de tooltip dêrop yn <div>plak.

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-animation="".

Namme Type Standert Beskriuwing
animaasje boolean wier Tapasse in CSS-fade-oergong op de tooltip
kontener string | falsk falsk

Foegje de tooltip ta oan in spesifyk elemint. Foarbyld container: 'body':. Dizze opsje is benammen nuttich om't jo de tooltip yn 'e stream fan it dokumint kinne pleatse yn' e buert fan it aktivearjende elemint - wat sil foarkomme dat de tooltip fuortsweefd wurdt fan it triggerelemint by in finstergrutte feroarje.

fertraging nûmer | objekt 0

Fertrage it sjen en ferbergjen fan de tooltip (ms) - jildt net foar manuele triggertype

As in nûmer wurdt levere, wurdt fertraging tapast op sawol hide / show

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

html boolean falsk Foegje HTML yn 'e tooltip. As it falsk is, textsil de metoade fan jQuery brûkt wurde om ynhâld yn 'e DOM yn te foegjen. Brûk tekst as jo soargen meitsje oer XSS-oanfallen.
pleatsing string | funksje 'top'

Hoe kinne jo de tooltip pleatse - top | ûnderen | lofts | rjochts | auto.
As "auto" is oantsjutte, sil it de tooltip dynamysk reorientearje. Bygelyks, as pleatsing "auto lofts" is, sil de tooltip as it mooglik is nei lofts werjaan, oars sil it rjochts werjaan.

As in funksje brûkt wurdt om de pleatsing te bepalen, wurdt it neamd mei de tooltip DOM-knooppunt as syn earste argumint en it triggerelemint DOM-knooppunt as syn twadde. De thiskontekst is ynsteld op de tooltip-eksimplaar.

selector string falsk As in selector wurdt foarsjoen, sil tooltip objekten wurde delegearre oan de oantsjutte doelen. Yn 'e praktyk wurdt dit brûkt om dynamyske HTML-ynhâld yn te skeakeljen om tooltips tafoege te hawwen. Sjoch dit en in ynformatyf foarbyld .
sjabloan string '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Basis HTML om te brûken by it meitsjen fan de tooltip.

De tooltip's titlesille yn 'e .tooltip-inner.

.tooltip-arrowsil de pylk fan de tooltip wurde.

De bûtenste wrapper elemint moat hawwe de .tooltipklasse.

titel string | funksje ''

Standert titelwearde as titleattribút net oanwêzich is.

As in funksje wurdt jûn, wurdt it neamd mei syn thisferwizing set nei it elemint dat de tooltip is hechte oan.

trekker string 'fokus fokus' Hoe tooltip wurdt aktivearre - klik | sweef | fokus | hantlieding. Jo kinne meardere triggers trochjaan; skiede se mei in romte. manualkin net wurde kombinearre mei in oare trigger.
viewport string | objekt | funksje { selector: 'body', padding: 0 }

Hâldt de tooltip binnen de grinzen fan dit elemint. Foarbyld: viewport: '#viewport'of{ "selector": "#viewport", "padding": 0 }

As in funksje wurdt jûn, wurdt it neamd mei it triggerelemint DOM-knooppunt as syn ienige argumint. De thiskontekst is ynsteld op de tooltip-eksimplaar.

Data attributen foar yndividuele tooltips

Opsjes foar yndividuele tooltips kinne alternatyf wurde oantsjutte troch it brûken fan gegevensattributen, lykas hjirboppe útlein.

Metoaden

$().tooltip(options)

Hechtet in tooltip handler oan in elemint kolleksje.

.tooltip('show')

Iepenet de tooltip fan in elemint. Keart werom nei de beller foardat de tooltip wirklik werjûn is (dus foardat it shown.bs.tooltipbarren bart). Dit wurdt beskôge as in "hânlieding" triggering fan de tooltip. Tooltips mei titels fan nul lingte wurde nea werjûn.

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

.tooltip('hide')

Ferberget de tooltip fan in elemint. Keart werom nei de beller foardat de tooltip eins ferburgen is (dus foardat it hidden.bs.tooltipbarren bart). Dit wurdt beskôge as in "hânlieding" triggering fan de tooltip.

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

.tooltip('toggle')

Skeakelt de tooltip fan in elemint. Keart werom nei de beller foardat de tooltip wirklik werjûn of ferburgen is (dus foardat it barren shown.bs.tooltipof hidden.bs.tooltipbart). Dit wurdt beskôge as in "hânlieding" triggering fan de tooltip.

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

.tooltip('destroy')

Ferberget en ferneatiget de tooltip fan in elemint. Tooltips dy't delegaasje brûke (dy't makke binne mei de selectoropsje ) kinne net yndividueel ferneatige wurde op ôfstammende trigger-eleminten.

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

Eveneminten

Event Type Beskriuwing
show.bs.tooltip Dit evenemint fjoer fuortendaliks as de showeksimplaar metoade wurdt oanroppen.
shown.bs.tooltip Dit evenemint wurdt ûntslein as de tooltip sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen).
hide.bs.tooltip Dit barren wurdt fuortendaliks ûntslein as de hideeksimplaarmetoade oanroppen is.
hidden.bs.tooltip Dit evenemint wurdt ûntslein as de tooltip klear is ferburgen foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen).
ynfoege.bs.tooltip Dit evenemint wurdt ûntslein nei it show.bs.tooltipbarren as de tooltip-sjabloan is tafoege oan de DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Foegje lytse overlays fan ynhâld ta, lykas dy op 'e iPad, oan elk elemint foar húsfesting fan sekundêre ynformaasje.

Popovers wêrfan sawol de titel as de ynhâld gjin lingte hawwe, wurde nea werjûn.

Plugin ôfhinklikens

Popovers fereaskje dat de tooltip-plugin opnommen is yn jo ferzje fan Bootstrap.

Opt-in funksjonaliteit

Foar prestaasjesredenen binne de Tooltip en Popover data-apis opt-in, wat betsjut dat jo se sels moatte inisjalisearje .

Ien manier om alle popovers op in side te initialisearjen soe wêze om se te selektearjen troch har data-toggleattribút:

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

Popovers yn knopgroepen, ynfiergroepen en tabellen fereaskje spesjale ynstelling

By it brûken fan popovers op eleminten binnen in .btn-groupof in .input-group, of op tabel-relatearre eleminten ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>), moatte jo de opsje spesifisearje container: 'body'(dokumintearre hjirûnder) om net winske side-effekten te foarkommen (lykas it elemint dat breder groeit en/ of syn rûne hoeken ferlieze as de popover wurdt trigger).

Besykje net popovers te sjen op ferburgen eleminten

Oproppe $(...).popover('show')as it doelelemint is display: none;, sil de popover ferkeard pleatst wurde.

Popovers op útskeakele eleminten fereaskje wrapper eleminten

Om in popover ta te foegjen oan in disabledof .disabledelemint, set it elemint yn in <div>en tapasse de popover dêr yn <div>plak.

Meardere line keppelings

Soms wolle jo in popover tafoegje oan in hyperlink dy't meardere rigels wraps. It standertgedrach fan 'e popover-plugin is om it horizontaal en fertikaal te sintrum. Foegje white-space: nowrap;oan jo ankers om dit te foarkommen.

Foarbylden

Statyske popover

Fjouwer opsjes binne beskikber: boppe, rjochts, ûnder, en lofts rjochte.

Popover top

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

Popover rjochts

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

Popover ûnderkant

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.

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

Fjouwer rjochtingen

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

Ferwiderje by folgjende klik

Brûk de focustrigger om popovers te ferwiderjen by de folgjende klik dy't de brûker makket.

Spesifike opmaak nedich foar ôfwizen-op-folgjende-klik

Foar goed cross-browser en cross-platform gedrach moatte jo de <a>tag brûke, net de <button>tag, en jo moatte ek de role="button"en tabindexattributen opnimme.

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

Gebrûk

Popovers ynskeakelje fia JavaScript:

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

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-animation="".

Namme Type Standert Beskriuwing
animaasje boolean wier Tapasse in CSS-fade-oergong op 'e popover
kontener string | falsk falsk

Foegje de popover ta oan in spesifyk elemint. Foarbyld container: 'body':. Dizze opsje is benammen nuttich om't it jo de popover yn 'e stream fan it dokumint yn' e buert fan it aktivearjende elemint kinne pleatse - wat foarkomt dat de popover fan it aktivearjende elemint wei sweeft by in finstergrutte feroarje.

ynhâld string | funksje ''

Standert ynhâldwearde as data-contentattribút net oanwêzich is.

As in funksje wurdt jûn, wurdt it neamd mei syn thisferwizing set nei it elemint dat de popover is hechte oan.

fertraging nûmer | objekt 0

Fertraging fan it sjen en ferbergjen fan de popover (ms) - jildt net foar manuele triggertype

As in nûmer wurdt levere, wurdt fertraging tapast op sawol hide / show

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

html boolean falsk Foegje HTML yn 'e popover. As it falsk is, textsil de metoade fan jQuery brûkt wurde om ynhâld yn 'e DOM yn te foegjen. Brûk tekst as jo soargen meitsje oer XSS-oanfallen.
pleatsing string | funksje 'rjochts'

Hoe te pleatsen de popover - top | ûnderen | lofts | rjochts | auto.
As "auto" is oantsjutte, sil it de popover dynamysk reorientearje. Bygelyks, as pleatsing "auto lofts" is, sil de popover as it mooglik is nei lofts werjaan, oars sil it rjochts werjaan.

As in funksje brûkt wurdt om de pleatsing te bepalen, wurdt it neamd mei de popover DOM-knooppunt as earste argumint en it triggerelemint DOM-knooppunt as twadde. De thiskontekst is ynsteld op it popover-eksimplaar.

selector string falsk As in selector wurdt foarsjoen, sil popover objekten wurde delegearre oan de oantsjutte doelen. Yn 'e praktyk wurdt dit brûkt om dynamyske HTML-ynhâld yn te skeakeljen om popovers tafoege te hawwen. Sjoch dit en in ynformatyf foarbyld .
sjabloan string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Basis HTML om te brûken by it meitsjen fan de popover.

De popover's titlesille yn 'e .popover-title.

De popover's contentsille yn 'e .popover-content.

.arrowsil de pylk fan 'e popover wurde.

De bûtenste wrapper elemint moat hawwe de .popoverklasse.

titel string | funksje ''

Standert titelwearde as titleattribút net oanwêzich is.

As in funksje wurdt jûn, wurdt it neamd mei syn thisferwizing set nei it elemint dat de popover is hechte oan.

trekker string 'klik' Hoe popover wurdt aktivearre - klik | sweef | fokus | hantlieding. Jo kinne meardere triggers trochjaan; skiede se mei in romte. manualkin net wurde kombinearre mei in oare trigger.
viewport string | objekt | funksje { selector: 'body', padding: 0 }

Hâldt de popover binnen de grinzen fan dit elemint. Foarbyld: viewport: '#viewport'of{ "selector": "#viewport", "padding": 0 }

As in funksje wurdt jûn, wurdt it neamd mei it triggerelemint DOM-knooppunt as syn ienige argumint. De thiskontekst is ynsteld op it popover-eksimplaar.

Gegevensattributen foar yndividuele popovers

Opsjes foar yndividuele popovers kinne alternatyf wurde oantsjutte troch it brûken fan gegevensattributen, lykas hjirboppe útlein.

Metoaden

$().popover(options)

Inisjalisearje popovers foar in elemint kolleksje.

.popover('show')

Bliuwt in popover fan in elemint. Keart werom nei de beller foardat de popover wirklik werjûn is (dus foardat it shown.bs.popoverevenemint bart). Dit wurdt beskôge as in "hânlieding" triggering fan 'e popover. Popovers wêrfan sawol de titel as de ynhâld gjin lingte hawwe, wurde nea werjûn.

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

.popover('hide')

Ferberget de popover fan in elemint. Keart werom nei de beller foardat de popover eins ferburgen is (dus foardat it hidden.bs.popoverbarren plakfynt). Dit wurdt beskôge as in "hânlieding" triggering fan 'e popover.

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

.popover('toggle')

Skeakelt de popover fan in elemint. Keart werom nei de beller foardat de popover feitlik werjûn of ferburgen is (dus foardat it barren shown.bs.popoverof hidden.bs.popoverbart). Dit wurdt beskôge as in "hânlieding" triggering fan 'e popover.

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

.popover('destroy')

Ferberget en ferneatiget popover fan in elemint. Popovers dy't delegaasje brûke (dy't makke binne mei de selectoropsje ) kinne net yndividueel ferneatige wurde op neikommende trigger-eleminten.

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

Eveneminten

Event Type Beskriuwing
show.bs.popover Dit evenemint fjoer fuortendaliks as de showeksimplaar metoade wurdt oanroppen.
shown.bs.popover Dit evenemint wurdt ûntslein as de popover sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen).
hide.bs.popover Dit barren wurdt fuortendaliks ûntslein as de hideeksimplaarmetoade oanroppen is.
hidden.bs.popover Dit evenemint wurdt ûntslein as de popover klear is ferburgen foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen).
ynfoege.bs.popover Dit evenemint wurdt ûntslein nei it show.bs.popoverevenemint as it popover-sjabloan is tafoege oan de DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Alert berjochten alert.js

Foarbyld alerts

Foegje ûntslachfunksjonaliteit ta oan alle warskôgingsberjochten mei dizze plugin.

By it brûken fan in .closeknop, it moat wêze it earste bern fan de .alert-dismissibleen gjin tekst ynhâld meie komme foar it yn de markup.

Gebrûk

Foegje gewoan ta data-dismiss="alert"oan jo slute knop om automatysk in warskôging slute funksjonaliteit te jaan. It sluten fan in warskôging ferwideret it út de DOM.

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

Om jo warskôgings animaasje te brûken by it sluten, soargje derfoar dat se de .fadeen .inklassen al op har tapast hawwe.

Metoaden

$().alert()

Makket in warskôging te harkjen nei klik-eveneminten op ôfstammende eleminten dy't it data-dismiss="alert"attribút hawwe. (Net nedich by it brûken fan de automatyske inisjalisaasje fan de data-api.)

$().alert('close')

Slút in warskôging troch it te ferwiderjen fan 'e DOM. As de .fadeen .inklassen binne oanwêzich op it elemint, de warskôging sil fade út foardat it wurdt fuortsmiten.

Eveneminten

De warskôgingsplugin fan Bootstrap bleatstelt in pear eveneminten foar heakjen oan warskôgingsfunksjonaliteit.

Event Type Beskriuwing
close.bs.alert Dit evenemint fjoer fuortendaliks as de closeeksimplaar metoade wurdt oanroppen.
closed.bs.alert Dit evenemint wurdt ûntslein as de warskôging is sletten (sil wachtsje op CSS-oergongen om te foltôgjen).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Knoppen button.js

Doch mear mei knoppen. Kontrolearje knop steaten of meitsje groepen fan knoppen foar mear komponinten lykas arkbalken.

Cross-browser kompatibiliteit

Firefox bliuwt formulier kontrôle steaten (útskeakele en kontrolearre) oer sideladen . In oplossing foar dit is te brûken autocomplete="off". Sjoch Mozilla bug #654072 .

Stateful

Taheakje data-loading-text="Loading..."om in laden steat te brûken op in knop.

Dizze funksje is ôfret sûnt v3.3.5 en is fuortsmiten yn v4.

Brûk hokker steat jo wolle!

Om 'e wille fan dizze demonstraasje brûke wy data-loading-texten $().button('loading'), mar dat is net de ienige steat dy't jo brûke kinne. Sjoch mear hjiroer hjirûnder yn de $().button(string)dokumintaasje .

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

Single skeakel

Foegje data-toggle="button"ta om wikseljen op ien knop te aktivearjen.

Pre-toggled knoppen nedich .activeenaria-pressed="true"

Foar foarôf wiksele knoppen moatte jo de .activeklasse en it aria-pressed="true"attribút tafoegje oan buttonjosels.

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

Checkbox / Radio

Foegje ta data-toggle="buttons"oan in .btn-groupkarfakje of radio-ynputs om te wikseljen yn har respektive stilen.

Foarselekteare opsjes nedich.active

Foar foarselekteare opsjes moatte jo de .activeklasse sels tafoegje oan 'e ynfier label.

Visuele kontrolearre steat allinich bywurke by klik

As de kontrolearre steat fan in karfakje knop wurdt bywurke sûnder sjitten in clickevenemint op de knop (bgl. fia <input type="reset">of fia it ynstellen fan it checkedeigendom fan de ynfier), Jo moatte wikselje de .activeklasse op de ynfier labelsels.

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

Metoaden

$().button('toggle')

Wizigje push-status. Jout de knop it uterlik dat it is aktivearre.

$().button('reset')

Reset knopstatus - wikselt tekst nei orizjinele tekst. Dizze metoade is asynchronous en komt werom foardat de weromsette eins foltôge is.

$().button(string)

Ruilet tekst nei alle gegevens definieare teksttastân.

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

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

Collapse collapse.js

Fleksibele plugin dy't in hânfol klassen brûkt foar maklik wikselgedrach.

Plugin ôfhinklikens

Ynstoarten fereasket dat de transysje-plugin opnommen is yn jo ferzje fan Bootstrap.

Foarbyld

Klikje op de knoppen hjirûnder om in oar elemint te sjen en te ferbergjen fia klassewizigingen:

  • .collapseferberget ynhâld
  • .collapsingwurdt tapast by oergongen
  • .collapse.intoant ynhâld

Jo kinne in keppeling brûke mei it hrefattribút, of in knop mei it data-targetattribút. Yn beide gefallen data-toggle="collapse"is it nedich.

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>

Foarbyld fan Akkordeon

Wreidzje it standert ynstoartgedrach út om in akkordeon te meitsjen mei it panielkomponint.

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 sette in fûgel op it inktvis single-origin kofje 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 ambachtlike bier pleats-tot-tafel, rau denim estetyske synth nesciunt jo nei alle gedachten hawwe net heard fan harren accusamus labore duorsume 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 sette in fûgel op it inktvis single-origin kofje 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 ambachtlike bier pleats-tot-tafel, rau denim estetyske synth nesciunt jo nei alle gedachten hawwe net heard fan harren accusamus labore duorsume 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 sette in fûgel op it inktvis single-origin kofje 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 ambachtlike bier pleats-tot-tafel, rau denim estetyske synth nesciunt jo nei alle gedachten hawwe net heard fan harren accusamus labore duorsume 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>

It is ek mooglik om s te wikseljen .panel-bodymei .list-groups.

  • Bootply
  • Ien itmus ac facilin
  • Twadde eros

Meitsje kontrôles útwreidzje / ynklappe tagonklik

Wês wis dat jo tafoegje aria-expandedoan it kontrôle elemint. Dit attribút definiearret eksplisyt de hjoeddeistige tastân fan it ynklapbere elemint oan skermlêzers en ferlykbere assistintetechnologyen. As it ynklapbere elemint standert sletten is, moat it in wearde hawwe fan aria-expanded="false". As jo ​​​​it ynklapbere elemint ynsteld hawwe om standert iepen te wêzen mei de inklasse, set aria-expanded="true"dan op 'e kontrôle ynstee. De plugin sil dit attribút automatysk wikselje op basis fan oft it ynklapbere elemint al of net iepene of sluten is.

Derneist, as jo kontrôleelemint op in inkeld ynklapber elemint rjochtet - dws it data-targetattribút wiist nei in idselektor - kinne jo in ekstra aria-controlsattribút tafoegje oan it kontrôleelemint, mei de idfan it ynklapbere elemint. Moderne skermlêzers en ferlykbere assistinte technologyen meitsje gebrûk fan dit attribút om brûkers ekstra fluchtoetsen te jaan om direkt nei it ynklapbere elemint sels te navigearjen.

Gebrûk

It ynstoartplugin brûkt in pear klassen om it swiere opheffing te behanneljen:

  • .collapseferberget de ynhâld
  • .collapse.intoant de ynhâld
  • .collapsingwurdt tafoege as de oergong begjint, en fuortsmiten as it klear is

Dizze klassen kinne fûn wurde yn component-animations.less.

Fia data attributen

Foegje gewoan data-toggle="collapse"en in data-targetoan it elemint ta om automatysk kontrôle fan in ynklapber elemint ta te jaan. It data-targetattribút akseptearret in CSS-selektor om de ynstoarting oan te passen. Wês wis dat jo de klasse tafoegje collapseoan it ynklapbere elemint. As jo ​​​​wolle dat it standert iepen is, foegje dan de ekstra klasse tain .

Om akkordeon-like groepbehear ta te foegjen oan in ynklapbere kontrôle, foegje it data-attribút ta data-parent="#selector". Ferwize nei de demo om dit yn aksje te sjen.

Fia JavaScript

Ynskeakelje manuell mei:

$('.collapse').collapse()

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-parent="".

Namme type standert beskriuwing
âlder selector falsk As in selector wurdt levere, dan sille alle ynklapbere eleminten ûnder de oantsjutte âlder wurde sletten as dit ynklapbere item wurdt werjûn. (fergelykber mei tradisjoneel akkordeongedrach - dit is ôfhinklik fan 'e panelklasse)
wikselje boolean wier Skeakelt it ynklapbere elemint by oprop

Metoaden

.collapse(options)

Aktivearret jo ynhâld as in ynklapber elemint. Akseptearret in opsjonele opsjes object.

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

.collapse('toggle')

Skeakelt in ynklapber elemint nei werjûn of ferburgen. Keart werom nei de beller foardat it ynklapbere elemint feitlik werjûn of ferburgen is (dus foardat it barren shown.bs.collapseof hidden.bs.collapsebart).

.collapse('show')

Toant in ynklapber elemint. Keart werom nei de beller foardat it ynklapbere elemint feitlik werjûn is (dus foardat it shown.bs.collapseevenemint bart).

.collapse('hide')

Ferberget in ynklapber elemint. Keart werom nei de beller foardat it ynklapbere elemint eins ferburgen is (dus foardat it hidden.bs.collapsebarren bart).

Eveneminten

De ynstoartingsklasse fan Bootstrap bleatstelt in pear eveneminten foar heakjen oan ynstoartingsfunksjonaliteit.

Event Type Beskriuwing
show.bs.collapse Dit evenemint fjoer fuortendaliks as de showeksimplaar metoade wurdt oanroppen.
shown.bs.collapse Dit barren wurdt ûntslein as in ynstoartelemint sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen).
hide.bs.collapse Dit evenemint wurdt ûntslein fuortendaliks as de hidemetoade is oanroppen.
hidden.bs.collapse Dit barren wurdt ûntslein as in ynstoartelemint is ferburgen foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

In slideshow-komponint foar it fytsen troch eleminten, lykas in karrousel. Neste carrousels wurde net stipe.

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

Opsjonele titels

Foegje maklik titels ta oan jo dia's mei it .carousel-captionelemint yn elke .item. Plak sawat elke opsjonele HTML dêryn en it sil automatysk ôfstimd en opmakke wurde.

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

Meardere karrousels

Carousels fereaskje it brûken fan in idop 'e bûtenste kontener (de .carousel) foar carousel kontrôles in funksjonearje goed. As jo ​​​​meardere carrousels tafoegje, of as jo in karrousel feroarje id, wês wis dat jo de relevante kontrôles bywurkje.

Fia data attributen

Brûk gegevensattributen om de posysje fan 'e karrousel maklik te kontrolearjen. data-slideakseptearret de kaaiwurden prevof next, dy't de slideposysje feroaret relatyf oan syn hjoeddeistige posysje. As alternatyf, brûk data-slide-toom in rûge dia-yndeks troch te jaan oan de karrousel data-slide-to="2", dy't de dia-posysje ferpleatst nei in bepaalde yndeks dy't begjint mei0 .

It data-ride="carousel"attribút wurdt brûkt om in karrousel te markearjen as animaasje te begjinnen by it laden fan siden. It kin net brûkt wurde yn kombinaasje mei (oerstallige en net nedich) eksplisite JavaSkript inisjalisaasje fan deselde carousel.

Fia JavaScript

Rop karrousel manuell mei:

$('.carousel').carousel()

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-interval="".

Namme type standert beskriuwing
tuskenskoft nûmer 5000 De hoemannichte tiid om te fertrage tusken it automatysk fytsen fan in item. As falsk, sil carousel net automatysk fytse.
skoft string | null "sweve" As ynsteld op "hover", stopet it fytsen fan 'e karrousel oan mouseenteren ferfetsje it fytsen fan' e karrousel op mouseleave. As ynsteld op null, sil it hoverjen oer de karrousel it net ûnderbrekke.
wrap boolean wier Oft de karrousel kontinu fytse moat of hurde stops hawwe.
toetseboerd boolean wier Oft de karrousel moat reagearje op toetseboerdeveneminten.

Inisjalisearret de karrousel mei in opsjonele opsjes objecten begjint te fytsen troch items.

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

Cycles troch de karrousel items fan links nei rjochts.

Stopt de karrousel fan it fytsen troch items.

Sylt de karrousel nei in bepaald frame (0 basearre, fergelykber mei in array).

Cycles nei it foarige item.

Cycles nei it folgjende item.

De karrouselklasse fan Bootstrap bleatstelt twa eveneminten foar heakjen oan karrouselfunksjonaliteit.

Beide eveneminten hawwe de folgjende ekstra eigenskippen:

  • direction: De rjochting wêryn't de karrousel glydt (of "left"of "right").
  • relatedTarget: It DOM-elemint dat op syn plak wurdt glide as it aktive item.

Alle karrouseleveneminten wurde op de karrousel sels ûntslein (dus by de <div class="carousel">).

Event Type Beskriuwing
slide.bs.carousel Dit evenemint ûntspringt fuortendaliks as de slideeksimplaarmetoade wurdt oproppen.
slid.bs.carrousel Dit evenemint wurdt ûntslein as de karrousel syn slide-oergong foltôge hat.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix affix.js

Foarbyld

De affix-plugin skeakelt position: fixed;oan en út, emulearret it effekt fûn mei position: sticky;. De subnavigaasje oan de rjochterkant is in live demo fan de affix plugin.


Gebrûk

Brûk de affix-plugin fia gegevensattributen of manuell mei jo eigen JavaScript. Yn beide situaasjes moatte jo CSS leverje foar de posysje en breedte fan jo oanbrochte ynhâld.

Opmerking: Brûk de affix-plugin net op in elemint befette yn in relatyf gepositioneerd elemint, lykas in lutsen of triuwe kolom, fanwegen in Safari-rendering-bug .

Posysje fia CSS

De affix-plugin wikselt tusken trije klassen, elk foar in bepaalde steat: .affix, .affix-top, en .affix-bottom. Jo moatte de stilen leverje, mei útsûndering fan position: fixed;op .affix, foar dizze klassen sels (ûnôfhinklik fan dizze plugin) om de eigentlike posysjes te behanneljen.

Hjir is hoe't de affix-plugin wurket:

  1. Om te begjinnen, foeget de plugin ta.affix-top om oan te jaan dat it elemint yn syn boppeste posysje is. Op dit punt is gjin CSS-posisjonearring fereaske.
  2. Scrollen foarby it elemint dat jo wolle befestigje, soe de eigentlike befestiging trigger. Dit is wêr't .affixferfangt .affix-topen sets position: fixed;(fersoarge troch Bootstrap's CSS).
  3. As in boaiem offset wurdt definiearre, scrolling foarby it moat ferfange .affixmei .affix-bottom. Sûnt offsets binne opsjoneel, it ynstellen fan ien fereasket dat jo de passende CSS ynstelle. Yn dit gefal, foegje position: absolute;as it nedich is. De plugin brûkt it data-attribút as JavaScript-opsje om te bepalen wêr't it elemint fan dêrút pleatst wurdt.

Folgje de boppesteande stappen om jo CSS yn te stellen foar ien fan 'e gebrûksopsjes hjirûnder.

Fia data attributen

Om maklik affixgedrach ta te foegjen oan elk elemint, foegje gewoan ta data-spy="affix"oan it elemint wêrop jo wolle bispiede. Brûk offsets om te definiearjen wannear't de pinning fan in elemint wikselje moat.

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

Fia JavaScript

Rop de affix-plugin fia JavaScript:

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

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-offset-top="200".

Namme type standert beskriuwing
offset nûmer | funksje | objekt 10 Pixels om te kompensearjen fan it skerm by it berekkenjen fan posysje fan scroll. As in inkeld nûmer wurdt levere, sil de offset tapast wurde yn sawol boppe- as ûnderrjochtings. Om foarsjen in unyk, ûnder- en top offset gewoan in foarwerp offset: { top: 10 }of offset: { top: 10, bottom: 5 }. Brûk in funksje as jo moatte dynamysk berekkenje in offset.
doel kiezer | noat | jQuery elemint it windowobjekt Spesifiseart it doelelemint fan 'e affix.

Metoaden

.affix(options)

Aktivearret jo ynhâld as taheakke ynhâld. Akseptearret in opsjonele opsjes object.

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

.affix('checkPosition')

Berekkenet de tastân fan 'e affix op' e nij op basis fan 'e dimensjes, posysje en rôljeposysje fan' e oanbelangjende eleminten. De .affix, .affix-top, en .affix-bottomklassen wurde tafoege oan of fuortsmiten fan de oanbrochte ynhâld neffens de nije steat. Dizze metoade moat wurde oanroppen as de ôfmjittings fan 'e befestige ynhâld as it doelelemint wurde feroare, om de juste posysje fan 'e befestige ynhâld te garandearjen.

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

Eveneminten

Bootstrap's affix-plugin bleatsteld in pear eveneminten foar heakjen oan affix-funksjonaliteit.

Event Type Beskriuwing
affix.bs.affix Dit evenemint fjoer fuortendaliks foardat it elemint is oanbrocht.
affixed.bs.affix Dit evenemint wurdt ûntslein neidat it elemint is oanbrocht.
affix-top.bs.affix Dit evenemint ûntspringt fuortendaliks foardat it elemint is oanbrocht-top.
affixed-top.bs.affix Dit evenemint wurdt ûntslein neidat it elemint is oanbrocht-top.
affix-bottom.bs.affix Dit barren fjoer fuort foardat it elemint is oanbrocht-ûnder.
affixed-bottom.bs.affix Dit evenemint wurdt ûntslein neidat it elemint is oanbrocht-ûnder.