Ülevaade

Individuaalne või koostatud

Pluginaid saab lisada eraldi (kasutades Bootstrapi üksikuid *.jsfaile) või kõik korraga (kasutades bootstrap.jsvõi minimeeritud bootstrap.min.js).

Kompileeritud JavaScripti kasutamine

Mõlemad bootstrap.jsja bootstrap.min.jssisaldavad kõiki pistikprogramme ühes failis. Kaasake ainult üks.

Pluginate sõltuvused

Mõned pistikprogrammid ja CSS-i komponendid sõltuvad teistest pistikprogrammidest. Kui lisate pistikprogrammid eraldi, kontrollige kindlasti nende sõltuvuste olemasolu dokumentidest. Pange tähele ka seda, et kõik pistikprogrammid sõltuvad jQueryst (see tähendab, et jQuery peab olema lisatud enne pluginafaile). Konsulteerige meiegabower.json , et näha, milliseid jQuery versioone toetatakse.

Andmete atribuudid

Saate kasutada kõiki Bootstrapi pistikprogramme puhtalt märgistus-API kaudu, kirjutamata ühtegi JavaScripti rida. See on Bootstrapi esmaklassiline API ja see peaks olema pistikprogrammi kasutamisel esimene kaalutlus.

Sellegipoolest võib mõnes olukorras olla soovitav see funktsioon välja lülitada. Seetõttu pakume ka võimalust keelata andmeatribuudi API, tühistades kõik sündmused dokumendis, mille nimeruumis on data-api. See näeb välja selline:

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

Teise võimalusena lisage konkreetse pistikprogrammi sihtimiseks lihtsalt pistikprogrammi nimi nimeruumina koos data-api nimeruumiga, näiteks järgmiselt:

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

Andmeatribuutide kaudu ainult üks pistikprogramm elemendi kohta

Ärge kasutage sama elemendi puhul mitme pistikprogrammi andmeatribuute. Näiteks ei saa nupul olla nii tööriistavihje kui ka modaali vahetamine. Selle saavutamiseks kasutage ümbriselementi.

Programmaatiline API

Samuti usume, et peaksite saama kasutada kõiki Bootstrapi pistikprogramme ainult JavaScripti API kaudu. Kõik avalikud API-d on üksikud, aheldatavad meetodid ja tagastavad kogu, mille alusel on tegu.

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

Kõik meetodid peaksid aktsepteerima valikuliste suvandite objekti, stringi, mis sihib konkreetset meetodit, või mitte midagi (mis käivitab vaikekäitumisega pistikprogrammi):

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

Iga pistikprogramm avaldab ka oma töötlemata konstruktori Constructoratribuudil: $.fn.popover.Constructor. Kui soovite hankida konkreetse pistikprogrammi eksemplari, hankige see otse elemendist: $('[rel="popover"]').data('popover').

Vaikeseaded

Saate muuta pistikprogrammi vaikesätteid, muutes pistikprogrammi Constructor.DEFAULTSobjekti.

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

Ei mingit konflikti

Mõnikord on vaja Bootstrapi pistikprogramme kasutada koos teiste kasutajaliidese raamistikega. Sellistel juhtudel võib aeg-ajalt tekkida nimeruumi kokkupõrkeid. Kui see juhtub, võite helistada .noConflictpistikprogrammile, mille väärtust soovite taastada.

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

Sündmused

Bootstrap pakub kohandatud sündmusi enamiku pistikprogrammide ainulaadsete toimingute jaoks. Tavaliselt esinevad need infinitiivi ja mineviku osastava vormina – kus infinitiiv (nt show) käivitatakse sündmuse alguses ja selle mineviku osastava vorm (nt shown) käivitatakse toimingu lõppedes.

Alates versioonist 3.0.0 on kõik Bootstrapi sündmused nimeruumid.

Kõik infinitiivsed sündmused pakuvad preventDefaultfunktsionaalsust. See annab võimaluse toimingu sooritamine enne selle algust peatada.

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

Versiooni numbrid

Iga Bootstrapi jQuery pistikprogrammi versioonile pääseb juurde VERSIONpistikprogrammi konstruktori atribuudi kaudu. Näiteks tööriistavihje pistikprogrammi jaoks:

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

Kui JavaScript on keelatud, pole mingeid erilisi tagavarasid

Bootstrapi pistikprogrammid ei lange eriti graatsiliselt tagasi, kui JavaScript on keelatud. Kui teile meeldib sel juhul kasutajakogemus, kasutage <noscript>olukorra selgitamiseks (ja JavaScripti uuesti lubamiseks) oma kasutajatele ja/või oma kohandatud varude lisamiseks.

Kolmandate osapoolte raamatukogud

Bootstrap ei toeta ametlikult kolmandate osapoolte JavaScripti teeke , nagu Prototype või jQuery kasutajaliides. Vaatamata .noConflictja nimeruumiga sündmustele võib esineda ühilduvusprobleeme, mille peate ise lahendama.

Üleminekud transfer.js

Üleminekute kohta

Lihtsate üleminekuefektide jaoks lisage transition.jsüks kord teiste JS-failide kõrvale. Kui kasutate kompileeritud (või minimeeritud) bootstrap.js, pole seda vaja lisada – see on juba olemas.

Mis on sees

Transition.js on transitionEndsündmuste põhiabiline ja ka CSS-i ülemineku emulaator. Teised pistikprogrammid kasutavad seda CSS-i ülemineku toe kontrollimiseks ja rippuvate üleminekute tabamiseks.

Üleminekute keelamine

Üleminekuid saab globaalselt keelata järgmise JavaScripti koodilõigu abil, mis peab tulema pärast transition.js(või bootstrap.jsvõi bootstrap.min.js, vastavalt olukorrale) laadimist:

$.support.transition = false

Modaalid modal.js

Modaalid on voolujoonelised, kuid paindlikud, minimaalse nõutava funktsionaalsuse ja nutikate vaikeseadetega dialoogiviibad.

Mitut avatud modaali ei toetata

Ärge avage modaali, kui teine ​​on veel nähtaval. Rohkem kui ühe modaali korraga kuvamiseks on vaja kohandatud koodi.

Modaalse märgistuse paigutus

Püüdke alati paigutada modaali HTML-kood oma dokumendis kõrgeima taseme positsioonile, et vältida muid komponente, mis modaali välimust ja/või funktsionaalsust mõjutavad.

Mobiilseadmete hoiatused

Mobiilseadmetes modaalide kasutamisel on mõned hoiatused. Vaadake üksikasju meie brauseri tugidokumentidest .

HTML5 semantika määratlemise tõttu autofocusei mõjuta HTML-i atribuut Bootstrapi modaalides. Sama efekti saavutamiseks kasutage mõnda kohandatud JavaScripti:

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

Näited

Staatiline näide

Renderdatud modaal koos päise, keha ja jaluses olevate toimingute komplektiga.

<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

Lülitage modaal JavaScripti kaudu sisse, klõpsates alloleval nupul. See libiseb alla ja tuhmub lehe ülaosast sisse.

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

Tee modaalid juurdepääsetavaks

Kindlasti lisage role="dialog"ja aria-labelledby="...", viidates modaalsele pealkirjale , .modalja role="document"iseendale .modal-dialog.

Lisaks võite anda oma modaalse dialoogi aria-describedbykirjelduse .modal.

YouTube'i videote manustamine

YouTube'i videote modaalidesse manustamiseks on vaja täiendavat JavaScripti, mis ei ole Bootstrapis, et taasesitus automaatselt peatada ja palju muud. Lisateabe saamiseks vaadake seda kasulikku Stack Overflow postitust .

Valikulised suurused

Modaalidel on kaks valikulist suurust, mis on saadaval modifikaatoriklasside kaudu, mis asetatakse .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>

Eemalda animatsioon

Modaalide puhul, mis lihtsalt ilmuvad, mitte ei tuhmu vaatamiseks, eemaldage .fadeklass oma modaalimärgistusest.

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

Võrgusüsteemi kasutamine

Modaalis Bootstrapi ruudustikusüsteemi eeliste kasutamiseks pesake .rows lihtsalt ruudustiku sisse .modal-bodyja seejärel kasutage tavalisi ruudustikusüsteemi klasse.

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

Kas teil on hunnik nuppe, mis kõik käivitavad sama modaali, kuid veidi erineva sisuga? Kasutage event.relatedTargetja HTML - data-*atribuute (võimalik , et jQuery kaudu ), et muuta modaali sisu sõltuvalt sellest, millisel nupul klõpsati. Vaadake üksikasju Modal Events'i dokumentidest relatedTarget,

...veel nuppe...
<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)
})

Kasutamine

Modaalne pistikprogramm lülitab teie peidetud sisu nõudmisel andmeatribuutide või JavaScripti kaudu sisse. Samuti lisab .modal-opensee <body>kerimise vaikekäitumise alistamise ja loob .modal-backdropklõpsuala kuvatavate modaalide kõrvalejätmiseks, kui klõpsate väljaspool modaali.

Andmeatribuutide kaudu

Aktiveerige modaal JavaScripti kirjutamata. Seadistage data-toggle="modal"kontrolleri element, nagu nupp, koos data-target="#foo"või href="#foo", et sihtida ümberlülitamiseks konkreetset modaali.

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

JavaScripti kaudu

Kutsuge modaali ID myModal-ga ühe JavaScripti reaga:

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

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-backdrop="".

Nimi tüüp vaikimisi kirjeldus
taustaks tõeväärtus või string'static' tõsi Sisaldab modaalset taustaelementi. Teise võimalusena määrake statictaust, mis ei sulge modaali klõpsamisel.
klaviatuur tõeväärtus tõsi Sulgeb modaali, kui vajutada paoklahvi
näidata tõeväärtus tõsi Initsialiseerimisel kuvatakse modaal.
kaugjuhtimispult tee vale

See suvand on alates versioonist 3.3.0 aegunud ja versioonis 4 on see eemaldatud. Soovitame selle asemel kasutada kliendipoolset malli või andmete sidumise raamistikku või helistada ise failile jQuery.load .

Kui antakse kaug-URL, laaditakse sisu üks kord jQuery loadmeetodi abil ja sisestatakse lahtrisse .modal-contentdiv. Kui kasutate andmeapi-d, võite kaugallika määramiseks kasutada ka hrefatribuuti. Selle näide on näidatud allpool:

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

meetodid

Aktiveerib teie sisu modaalina. Aktsepteerib valikulisi valikuid object.

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

Lülitab modaali käsitsi ümber. Naaseb helistaja juurde enne, kui modaal on tegelikult näidatud või peidetud (st enne shown.bs.modalvõi hidden.bs.modalsündmuse toimumist).

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

Avab modaali käsitsi. Naaseb helistaja juurde enne, kui modaali on tegelikult näidatud (st enne shown.bs.modalsündmuse toimumist).

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

Peidab modaali käsitsi. Naaseb helistaja juurde enne, kui modaal on tegelikult peidetud (st enne hidden.bs.modalsündmuse toimumist).

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

Reguleerib modaali positsioneerimist, et vältida kerimisriba, kui see peaks ilmuma, mis paneks modaali vasakule hüppama.

Vajalik ainult siis, kui modaali kõrgus muutub selle avatud ajal.

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

Sündmused

Bootstrapi modaalklass paljastab mõned sündmused modaalse funktsionaalsusega ühendamiseks.

Kõik modaalsündmused käivitatakse modaali enda (st <div class="modal">) suunas.

Sündmuse tüüp Kirjeldus
show.bs.modal See sündmus käivitub kohe, kui showeksemplari meetod kutsutakse. Kui selle põhjuseks on klõps, on klõpsatud element saadaval relatedTargetsündmuse atribuudina.
näidatud.bs.modal See sündmus käivitatakse, kui modaal on kasutajale nähtavaks tehtud (ootab CSS-i üleminekut). Kui selle põhjuseks on klõps, on klõpsatud element saadaval relatedTargetsündmuse atribuudina.
peida.bs.modal See sündmus käivitatakse kohe, kui hideeksemplari meetod on välja kutsutud.
peidetud.bs.modal See sündmus käivitatakse, kui modaal on kasutaja eest peitmise lõpetanud (ootab, kuni CSS-i üleminekud on lõpule viidud).
loaded.bs.modal See sündmus käivitatakse, kui modaal on remotesuvandit kasutades sisu laadinud.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Rippmenüüd dropdown.js

Lisage selle lihtsa pistikprogrammi abil rippmenüüd peaaegu kõigele, sealhulgas navigeerimisribale, vahelehtedele ja tablettidele.

Naviriba sees

Pillide sees

Andmeatribuutide või JavaScripti kaudu lülitab rippmenüü pistikprogramm peidetud sisu (rippmenüüd) sisse, lülitades .openklassi ülemloendi üksusel.

Mobiilseadmetes lisab rippmenüü avamine .dropdown-backdroppuudutusala rippmenüüde sulgemiseks, kui puudutate väljaspool menüüd, mis on iOS-i nõuetekohase toe nõue. See tähendab, et avatud rippmenüüst teisele rippmenüüle lülitumiseks on vaja mobiilis täiendavat puudutust.

Märkus. data-toggle="dropdown"Atribuuti kasutatakse rakenduse tasemel rippmenüüde sulgemisel, seega on hea mõte seda alati kasutada.

Andmeatribuutide kaudu

Lisage data-toggle="dropdown"lingile või nupule rippmenüü sisselülitamiseks.

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

URL-ide linginuppudega puutumatuna hoidmiseks kasutage data-targetatribuuti 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>

JavaScripti kaudu

Kutsuge rippmenüüd JavaScripti kaudu:

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

data-toggle="dropdown"ikka nõutud

Olenemata sellest, kas helistate rippmenüüsse JavaScripti kaudu või kasutate selle asemel andmeapi-d, data-toggle="dropdown"peab rippmenüü päästikuelemendil alati olema.

Mitte ühtegi

Lülitab antud navigeerimisriba või vahelehtedega navigeerimise rippmenüü sisse- ja väljalülitamiseks.

Kõik rippmenüü sündmused käivitatakse .dropdown-menuülemelemendis.

Kõigil rippmenüü sündmustel on relatedTargetatribuut, mille väärtus on lülitusankurelement.

Sündmuse tüüp Kirjeldus
näita.bs.rippmenüüd See sündmus käivitub kohe, kui kutsutakse näitamise eksemplari meetod.
kuvatud.bs.rippmenüü See sündmus käivitatakse, kui rippmenüü on kasutajale nähtavaks tehtud (ootab CSS-i üleminekuid, et lõpetada).
hide.bs.rippmenüü See sündmus käivitatakse kohe, kui peida eksemplari meetod on välja kutsutud.
peidetud.bs.rippmenüü See sündmus käivitatakse, kui rippmenüü on kasutaja eest peitmise lõpetanud (ootab CSS-i üleminekuid, et lõpetada).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Näide navigeerimisribal

ScrollSpy pistikprogramm on mõeldud navigeerimissihtmärkide automaatseks värskendamiseks kerimisasendi alusel. Kerige navigeerimisriba all olevat ala ja vaadake aktiivse klassi muutumist. Samuti tõstetakse esile rippmenüü alamüksused.

@paks

Kuulutus säärised keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi, enne kui need välja müüdi. Tumblr talust lauani jalgrattaõigused mis iganes. Anim keffiyeh carles kardigan. Velit seitan mcsweeney fotokabiin 3 hunt moon irure. Cosby kampsun lomo jean lühikesed püksid, williamsburgi hoodie minim qui te pole ilmselt neist kuulnud ja kardigan usaldusfond culpa biodiesel wes anderson esteetiline. Nihil tätoveeritud accusamus, cred iroonia biodiisel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa vuntsidega rula, imev fugiat velit pitchfork habe. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat neli loko nisi, ea helvetica nulla carles. Tätoveeritud cosby kampsun food truck, mcsweeney quis non-freegan vinüül. Lo-fi wes anderson +1 sartorial. Carles mitte esteetiline treening quis gentrify. Brooklyni maitsev käsitööõlu vicekeytar deserunt.

üks

Occaecat commodo aliqua delectus. Fap käsitööõlu deserunt rula ea. Lomo jalgrattaõigused adipisicing banh mi, velit ea sunt next level locavore ühe päritoluga kohv magna veniam. High life ID vinüül, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger kott. Cred ex in, jätkusuutlik delectus consectetur fanny pack iphone.

kaks

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 blogi, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id oletatav. Locavore sed helvetica klišee iroonia, äikesekassid, millest te ilmselt pole kuulnudki, consequat kapuutsiga gluteenivaba lo-fi fap aliquip. Labore elit placeat, enne kui need välja müüdi, Terry richardson proident brunch nesciunt quis cosby kampsun pariatur keffiyeh ut helvetica artisan. Cardigan käsitööõlu seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Kasutamine

Nõuab Bootstrap navi

Scrollspy nõuab praegu aktiivsete linkide õigeks esiletõstmiseks Bootstrapi navigeerimiskomponendi kasutamist.

Vajalikud on lahendatavad ID sihtmärgid

Navigeerimisriba linkidel peavad olema lahendatavad ID sihtmärgid. Näiteks <a href="#home">home</a>peab vastama millelegi DOM-is nagu <div id="home"></div>.

Sihtväliseid :visibleelemente eirati

Sihtelemente, mis ei vasta :visiblejQueryle , ignoreeritakse ja neile vastavaid navigeerimisüksusi ei tõsteta kunagi esile.

Nõuab suhtelist positsioneerimist

Olenemata rakendusmeetodist nõuab scrollspy kasutamist position: relative;elemendil, mille järele luurate. Enamikul juhtudel on see <body>. Kui sirvite muid elemente peale <body>, veenduge, et teil oleks heightkomplekt ja overflow-y: scroll;rakendatud.

Andmeatribuutide kaudu

Scrollspy käitumise hõlpsaks lisamiseks ülemise riba navigeerimisse lisage data-spy="scroll"element, mida soovite luurata (tavaliselt on see <body>). Seejärel lisage atribuut mis tahes Bootstrapi komponendi data-targetalgelemendi ID või klassiga ..nav

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>

JavaScripti kaudu

Pärast position: relative;CSS-i lisamist kutsuge JavaScripti kaudu scrollspy:

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

meetodid

.scrollspy('refresh')

Kui kasutate scrollspy-d koos DOM-i elementide lisamise või eemaldamisega, peate välja kutsuma värskendusmeetodi järgmiselt:

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

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-offset="".

Nimi tüüp vaikimisi kirjeldus
nihe number 10 Pikslid nihutamiseks ülevalt kerimise asukoha arvutamisel.

Sündmused

Sündmuse tüüp Kirjeldus
activate.bs.scrollspy See sündmus käivitub alati, kui scrollspy aktiveerib uue üksuse.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Vahetatavad vahelehed tab.js

Näidisvahekaardid

Lisage kiire ja dünaamilise vahekaardi funktsionaalsus, et liikuda läbi kohaliku sisu paanide, isegi rippmenüüde kaudu. Pesastatud vahelehti ei toetata.

Toores teksapüksid, Austin, te pole neist ilmselt kuulnud. Nesciunt tofu stumptown aliqua, retro süntekameistri puhastus. Vuntside kliše tempor, williamsburg carles vegan helvetica. Rerehenderit butcher retro keffiyeh Dreamcatcher sünt. Cosby kampsun eu banh mi, qui irure terry richardson ex squid. Aliquip placeat Salvia cillum iphone. Seitan aliquip quis kardigan Ameerika rõivad, lihunik 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.

Laiendab vahekaartidega navigeerimist

See pistikprogramm laiendab vahekaartidega navigeerimiskomponenti , et lisada vahekaartide alasid.

Kasutamine

Lubage vahekaartide vahekaardid JavaScripti kaudu (iga vahekaart tuleb eraldi aktiveerida):

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

Üksikuid vahekaarte saate aktiveerida mitmel viisil.

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

Märgistus

Saate aktiveerida vahelehe või pilli navigeerimise ilma JavaScripti kirjutamata, lihtsalt elemendi täpsustades data-toggle="tab"või peal. Klasside ja vahekaardile lisamisel rakendatakse vahekaardi Bootstrap data-toggle="pill"stiili , klasside ja lisamisel aga pilli stiili .navnav-tabsulnavnav-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>

tuhmumisefekt

Vahelehtede tuhmumiseks lisage .fadeigale .tab-pane. Esimene vahelehepaan peab ka .inesialgse sisu nähtavaks tegema.

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

meetodid

$().tab

Aktiveerib vahekaardi elemendi ja sisu konteineri. Vahekaardil peaks olema DOM-is kas konteineri sõlm data-targetvõi sihtimispunkt. hrefÜlaltoodud näidetes on vahekaardid atribuutidega <a>s .data-toggle="tab"

.tab('show')

Valib antud vahekaardi ja näitab sellega seotud sisu. Kõik muud varem valitud vahekaardid tühistatakse ja nendega seotud sisu peidetakse. Naaseb helistaja juurde enne vahekaardipaani tegelikku näitamist (st enne shown.bs.tabsündmuse toimumist).

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

Sündmused

Uue vahelehe kuvamisel käivituvad sündmused järgmises järjekorras.

  1. hide.bs.tab(praegusel aktiivsel vahekaardil)
  2. show.bs.tab(näitataval vahekaardil)
  3. hidden.bs.tab(eelmisel aktiivsel vahekaardil sama, mis hide.bs.tabsündmuse puhul)
  4. shown.bs.tab(äsja aktiivsel just kuvatud vahekaardil sama, mis show.bs.tabsündmuse puhul)

Kui ükski vahekaart ei olnud juba aktiivne, siis sündmusi hide.bs.tabja hidden.bs.tabei käivitata.

Sündmuse tüüp Kirjeldus
show.bs.tab See sündmus käivitub vahekaardi kuvamisel, kuid enne uue vahekaardi kuvamist. Kasutage event.targetja event.relatedTarget, et sihtida vastavalt aktiivset vahekaarti ja eelmist aktiivset vahekaarti (kui see on saadaval).
näidatud.bs.tab See sündmus käivitub vahekaardi kuvamisel pärast vahekaardi kuvamist. Kasutage event.targetja event.relatedTarget, et sihtida vastavalt aktiivset vahekaarti ja eelmist aktiivset vahekaarti (kui see on saadaval).
hide.bs.tab See sündmus käivitub, kui kuvatakse uus vahekaart (ja seega eelmine aktiivne vahekaart peidetakse). Kasutage event.targetja event.relatedTarget, et sihtida vastavalt praegust aktiivset vahekaarti ja uut peagi aktiivset vahekaarti.
peidetud.bs.tab See sündmus käivitub pärast uue vahekaardi kuvamist (ja seega on eelmine aktiivne vahekaart peidetud). Kasutage event.targetja event.relatedTarget, et sihtida vastavalt eelmist aktiivset vahekaarti ja uut aktiivset vahekaarti.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tööriistavihjed tooltip.js

Inspireeritud suurepärasest jQuery.tipsy pistikprogrammist, mille on kirjutanud Jason Frame; Tööriistavihjed on värskendatud versioon, mis ei tugine piltidele, kasutavad animatsioonide jaoks CSS3 ja kohaliku pealkirja salvestamiseks andmeatribuute.

Nullpikkusega pealkirjadega vihjeid ei kuvata kunagi.

Näited

Tööriistanäpunäidete nägemiseks hõljutage kursorit allolevate linkide kohal.

Kitsad püksid järgmise taseme keffiyeh , te pole neist ilmselt kuulnud. Fotokabiini habe toores teksast kõrgtrüki vegan messenger bag stumptown. Farmist lauale seitan, Mcsweeney fixie säästva kinoa 8-bitine Ameerika rõivas on frotee richardsoni vinüül chambray. Beard stumptown, kardiganid banh mi lomo thundercats. Tofu biodiisel williamsburg marfa, neli loko mcsweeney puhast vegan chambray. Tõeliselt irooniline käsitööline , olenemata klaviatuurist , farmist lauale, Austini Twitteri käepidemega freegan cred toores teksariidest ühe päritoluga kohviviirus.

Staatiline kohtspikker

Saadaval on neli valikut: ülemine, parem, alumine ja vasakule joondatud.

Neli suunda

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

Valimisfunktsioon

Toimivuse huvides on tööriistavihje ja Popoveri andmeapis lubatud, mis tähendab, et peate need ise lähtestama .

Üks viis lehe kõigi tööriistavihjete lähtestamiseks on valida need nende data-toggleatribuudi järgi:

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

Kasutamine

Tööriistavihje pistikprogramm loob nõudmisel sisu ja märgistuse ning asetab vaikimisi vihjed nende päästikuelemendi järele.

Käivitage kohtspikker JavaScripti kaudu:

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

Märgistus

Tööriistaspikri nõutav märgistus on ainult dataatribuut ja titleHTML-elemendil, mille kohta soovite vihjet, on. Tööriistaspikri loodud märgistus on üsna lihtne, kuigi see nõuab positsiooni (vaikimisi topon pistikprogrammi poolt määratud).

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

Mitmerealised lingid

Mõnikord soovite hüperlingile lisada kohtspikri, mis murrab mitut rida. Tööriistavihje pistikprogrammi vaikimisi käitumine on selle tsentreerimine horisontaalselt ja vertikaalselt. Selle vältimiseks lisage white-space: nowrap;oma ankrutele.

Nupurühmade, sisestusrühmade ja tabelite tööriistaspikrid nõuavad spetsiaalset seadistust

Kui kasutate tööriistavihjeid elementide a .btn-groupvõi elementide .input-groupvõi tabeliga seotud elementide ( <td>, <th>, <tr>, , , , , , , , , <thead>, <tbody>, <tfoot>) kohta, peate container: 'body'soovimatute kõrvalmõjude vältimiseks (nt elemendi laiemaks muutumine ja/ või ümarate nurkade kaotamine tööriistaspikri käivitamisel).

Ärge proovige näidata peidetud elementide kohta vihjeid

Sihtelemendi käivitamine $(...).tooltip('show')põhjustab display: none;tööriistaspikri vale paigutuse.

Juurdepääsetavad tööriistanäpunäited klaviatuuri ja abitehnoloogia kasutajatele

Klaviatuuriga navigeerivad kasutajad, eriti abitehnoloogiate kasutajad, peaksite lisama tööriistavihjeid ainult klaviatuurile keskenduvatele elementidele, nagu lingid, vormi juhtelemendid või mis tahes suvaline tabindex="0"atribuudiga element.

Keelatud elementide tööriistaspikrid nõuavad ümbriselemente

disabledElemendile või elemendile kohtspikri lisamiseks .disabledasetage element a sisse <div>ja rakendage selle <div>asemel kohtspikker.

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-animation="".

Nimi Tüüp Vaikimisi Kirjeldus
animatsioon tõeväärtus tõsi Rakendage kohtspikrile CSS-i tuhmumise üleminek
konteiner string | vale vale

Lisab kohtspikri konkreetsele elemendile. Näide: container: 'body'. See suvand on eriti kasulik, kuna see võimaldab teil asetada tööriistaspikri dokumendi voos käivitava elemendi lähedale – see takistab tööriistaspikril akna suuruse muutmise ajal käivitavast elemendist eemale hõljuma.

viivitus number | objektiks 0

Tööriistavihje kuvamise ja peitmise viivitus (ms) – ei kehti käsitsi käivitamise tüübi puhul

Kui number on esitatud, rakendatakse viivitust mõlemale peitmisele/näitamisele

Objekti struktuur on järgmine:delay: { "show": 500, "hide": 100 }

html tõeväärtus vale Sisestage kohtspikrisse HTML. Kui see on vale, textkasutatakse sisu DOM-i sisestamiseks jQuery meetodit. Kui olete XSS-i rünnakute pärast mures, kasutage teksti.
paigutus string | funktsiooni 'ülemine'

Kuidas asetada kohtspikker – top | alumine | vasakule | paremal | auto.
Kui on määratud "auto", suunab see kohtspikri dünaamiliselt ümber. Näiteks kui paigutus on "automaatne vasakule", kuvatakse kohtspikker võimaluse korral vasakule, vastasel juhul kuvatakse see paremale.

Kui funktsiooni kasutatakse paigutuse määramiseks, kutsutakse see välja, mille esimeseks argumendiks on tööriistavihje DOM-sõlm ja teiseks käivitava elemendi DOM-sõlm. Kontekst thismääratakse kohtspikri eksemplarile.

valija string vale Kui valija on ette nähtud, delegeeritakse tööriistavihje objektid määratud sihtmärkidele. Praktikas kasutatakse seda dünaamilise HTML-sisu tööriistavihjete lisamiseks. Vaadake seda ja informatiivset näidet .
malli string '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Algne HTML, mida kasutada kohtspikri loomisel.

Tööriistavihje titlesüstitakse .tooltip-inner.

.tooltip-arrowmuutub tööriistaspikri nooleks.

Kõige välimisel ümbriselemendil peaks olema .tooltipklass.

pealkiri string | funktsiooni ''

Pealkirja vaikeväärtus, kui titleatribuuti pole.

Kui funktsioon on antud, kutsutakse see välja koos thisviitega, mis on seatud elemendile, millele tööriistaspikker on lisatud.

päästik string 'hover fookus' Kuidas tööriistavihje käivitatakse – klõpsake | hõljuda | keskenduda | manuaal. Võite läbida mitu päästikut; eraldage need tühikuga. manualei saa kombineerida ühegi teise päästikuga.
vaateava string | objekt | funktsiooni { valija: 'keha', polster: 0 }

Hoiab kohtspikri selle elemendi piires. Näide: viewport: '#viewport'või{ "selector": "#viewport", "padding": 0 }

Kui funktsioon on antud, kutsutakse see välja, mille ainsaks argumendiks on käivitav element DOM-sõlm. Kontekst thismääratakse kohtspikri eksemplarile.

Andmete atribuudid üksikute kohtspikrite jaoks

Üksikute tööriistavihjete valikuid saab alternatiivselt määrata andmeatribuutide abil, nagu eespool selgitatud.

meetodid

$().tooltip(options)

Kinnitab elemendikogule tööriistaspikri töötleja.

.tooltip('show')

Näitab elemendi kohtspikri. Naaseb helistaja juurde enne, kui vihje on tegelikult näidatud (st enne shown.bs.tooltipsündmuse toimumist). Seda peetakse kohtspikri "käsitsi" käivitamiseks. Nullpikkusega pealkirjadega vihjeid ei kuvata kunagi.

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

.tooltip('hide')

Peidab elemendi kohtspikri. Naaseb helistaja juurde enne, kui kohtspikker on tegelikult peidetud (st enne hidden.bs.tooltipsündmuse toimumist). Seda peetakse kohtspikri "käsitsi" käivitamiseks.

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

.tooltip('toggle')

Lülitab elemendi kohtspikri. Naaseb helistaja juurde enne, kui kohtspikker on tegelikult näidatud või peidetud (st enne shown.bs.tooltipvõi hidden.bs.tooltipsündmuse toimumist). Seda peetakse kohtspikri "käsitsi" käivitamiseks.

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

.tooltip('destroy')

Peidab ja hävitab elemendi kohtspikri. Delegeerimist kasutavaid tööriistavihjeid (mis luuakse suvandiga selector) ei saa järeltulijate päästikuelementide puhul eraldi hävitada.

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

Sündmused

Sündmuse tüüp Kirjeldus
show.bs.tööriistavihje See sündmus käivitub kohe, kui showeksemplari meetod kutsutakse.
näidatud.bs.tööriistavihje See sündmus käivitatakse, kui kohtspikker on kasutajale nähtavaks tehtud (ootab, kuni CSS-i üleminekud on lõpule viidud).
peida.bs.tööriistavihje See sündmus käivitatakse kohe, kui hideeksemplari meetod on välja kutsutud.
peidetud.bs.tööriistavihje See sündmus käivitatakse, kui kohtspikker on kasutaja eest peitmise lõpetanud (ootab, kuni CSS-i üleminekud on lõpule viidud).
sisestatud.bs.tööriistavihje See sündmus käivitatakse pärast show.bs.tooltipsündmust, kui kohtspikri mall on DOM-i lisatud.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Lisage sekundaarse teabe paigutamiseks mis tahes elemendile väikesed sisu ülekatted, nagu iPadis.

Hüpikaknaid, mille pealkiri ja sisu on nullpikkused, ei kuvata kunagi.

Plugina sõltuvus

Hüpikaknad nõuavad, et teie Bootstrapi versioonile oleks kaasatud kohtspikker .

Valimisfunktsioon

Toimivuse huvides on tööriistavihje ja Popoveri andmeapis lubatud, mis tähendab, et peate need ise lähtestama .

Üks viis kõigi lehe hüpikaknate lähtestamiseks on valida need nende data-toggleatribuudi järgi:

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

Hüpikaknad nupurühmades, sisestusrühmades ja tabelites nõuavad spetsiaalset seadistust

Kui kasutate hüpikaknaid elementides a .btn-groupvõi elemendis .input-groupvõi tabeliga seotud elementides ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), peate container: 'body'soovimatute kõrvalmõjude vältimiseks (nt elemendi laiemaks muutumine ja/) määrama valiku (dokumenteeritud allpool). või hüpikakna käivitamisel ümarate nurkade kaotamine).

Ärge püüdke näidata hüpikaknaid peidetud elementidel

Sihtelemendi $(...).popover('show')käivitamine display: none;põhjustab hüpikakna vale paigutuse.

Keelatud elementide hüpikaknad nõuavad ümbriselemente

disabledElemendile või .disabledelemendile hüpikakna lisamiseks asetage element elemendi a sisse <div>ja rakendage selle <div>asemel hüpikakna.

Mitmerealised lingid

Mõnikord soovite lisada hüpikakna hüperlingile, mis murrab mitut rida. Popover-plugina vaikimisi käitumine on selle tsentreerimine horisontaalselt ja vertikaalselt. Selle vältimiseks lisage white-space: nowrap;oma ankrutele.

Näited

Staatiline hüpikakna

Saadaval on neli valikut: ülemine, parem, alumine ja vasakule joondatud.

Popover top

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

Popover õigus

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

Popover põhi

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

Popover lahkus

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>

Neli suunda

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

Loobu järgmisel klikil

Kasutage focuspäästikut hüpikaknate tühistamiseks järgmisel kasutaja klõpsul.

Järgmisel klõpsamisel loobumiseks on vajalik konkreetne märgistus

Õigeks brauseri- ja platvormiüleseks käitumiseks peate kasutama <a>märgendit, mitte<button> märgendit, ning lisama ka atribuute ja role="button".tabindex

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Kasutamine

Luba hüpikaknad JavaScripti kaudu:

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

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-animation="".

Nimi Tüüp Vaikimisi Kirjeldus
animatsioon tõeväärtus tõsi Rakendage hüpikaknale CSS-i tuhmumise üleminek
konteiner string | vale vale

Lisab hüpikakna konkreetsele elemendile. Näide: container: 'body'. See suvand on eriti kasulik, kuna see võimaldab teil positsioneerida hüpikakna dokumendi voogu käivitava elemendi lähedale – see hoiab ära hüpikakna hõljumise käivitavast elemendist akna suuruse muutmise ajal.

sisu string | funktsiooni ''

Sisu vaikeväärtus, kui data-contentatribuuti pole.

Kui funktsioon on antud, kutsutakse see välja nii, et selle thisviide on seatud elemendile, millele hüpikaken on lisatud.

viivitus number | objektiks 0

Hüpikakna kuvamise ja peitmise viivitus (ms) – ei kehti käsitsi käivitamise tüübi puhul

Kui number on esitatud, rakendatakse viivitust mõlemale peitmisele/näitamisele

Objekti struktuur on järgmine:delay: { "show": 500, "hide": 100 }

html tõeväärtus vale Sisestage hüpikaknasse HTML. Kui see on vale, textkasutatakse sisu DOM-i sisestamiseks jQuery meetodit. Kui olete XSS-i rünnakute pärast mures, kasutage teksti.
paigutus string | funktsiooni 'õige'

Kuidas positsioneerida hüpikakna - top | alumine | vasakule | paremal | auto.
Kui on määratud "auto", suunab see hüpikakna dünaamiliselt ümber. Näiteks kui paigutus on "automaatne vasakpoolne", kuvatakse hüpikaken võimaluse korral vasakule, vastasel juhul kuvatakse see paremal.

Kui paigutuse määramiseks kasutatakse funktsiooni, kutsutakse seda esile hüpikakna DOM-sõlme esimese argumendiga ja käivitava elemendi DOM-sõlm teise argumendiga. Kontekst thison seatud popover-eksemplarile.

valija string vale Kui valija on ette nähtud, delegeeritakse hüpikaknaobjektid määratud sihtmärkidele. Praktikas kasutatakse seda dünaamilise HTML-i sisu hüpikaknade lisamiseks. Vaadake seda ja informatiivset näidet .
malli string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Põhi-HTML, mida kasutada hüpikakna loomisel.

Popover'id titlesüstitakse .popover-title.

Popover'id contentsüstitakse .popover-content.

.arrowmuutub popoveri nooleks.

Kõige välimisel ümbriselemendil peaks olema .popoverklass.

pealkiri string | funktsiooni ''

Pealkirja vaikeväärtus, kui titleatribuuti pole.

Kui funktsioon on antud, kutsutakse see välja nii, et selle thisviide on seatud elemendile, millele hüpikaken on lisatud.

päästik string "klõps" Kuidas hüpikakna käivitatakse – klõpsake | hõljuda | keskenduda | manuaal. Võite läbida mitu päästikut; eraldage need tühikuga. manualei saa kombineerida ühegi teise päästikuga.
vaateava string | objekt | funktsiooni { valija: 'keha', polster: 0 }

Hoiab hüpikakna selle elemendi piirides. Näide: viewport: '#viewport'või{ "selector": "#viewport", "padding": 0 }

Kui funktsioon on antud, kutsutakse see välja, mille ainsaks argumendiks on käivitav element DOM-sõlm. Kontekst thison seatud popover-eksemplarile.

Andmete atribuudid üksikute hüpikaknate jaoks

Üksikute hüpikaknate valikuid saab alternatiivselt määrata andmeatribuutide abil, nagu eespool selgitatud.

meetodid

$().popover(options)

Initsialiseerib hüpikaknad elemendikogu jaoks.

.popover('show')

Näitab elemendi hüpikakna. Naaseb helistaja juurde enne hüpikakna tegelikku näitamist (st enne shown.bs.popoversündmuse toimumist). Seda peetakse hüpikakna "käsitsi" käivitamiseks. Hüpikaknaid, mille pealkiri ja sisu on nullpikkused, ei kuvata kunagi.

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

.popover('hide')

Peidab elemendi hüpikakna. Naaseb helistaja juurde enne, kui hüpikaken on tegelikult peidetud (st enne hidden.bs.popoversündmuse toimumist). Seda peetakse hüpikakna "käsitsi" käivitamiseks.

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

.popover('toggle')

Lülitab elemendi hüpikakna välja. Naaseb helistaja juurde enne, kui hüpikaknat on tegelikult näidatud või peidetud (st enne sündmuse shown.bs.popovervõi hidden.bs.popovertoimumist). Seda peetakse hüpikakna "käsitsi" käivitamiseks.

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

.popover('destroy')

Peidab ja hävitab elemendi hüpikakna. Delegeerimist kasutavaid hüpikaknaid (mis luuakse suvandiga selector) ei saa järeltulijate päästikuelementidel eraldi hävitada.

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

Sündmused

Sündmuse tüüp Kirjeldus
show.bs.popover See sündmus käivitub kohe, kui showeksemplari meetod kutsutakse.
näidatud.bs.popover See sündmus käivitatakse, kui hüpikaken on kasutajale nähtavaks tehtud (ootab CSS-i üleminekut).
peida.bs.popover See sündmus käivitatakse kohe, kui hideeksemplari meetod on välja kutsutud.
peidetud.bs.popover See sündmus käivitatakse, kui hüpikakna kasutaja eest peitmine on lõppenud (ootab, kuni CSS-i üleminekud on lõpule viidud).
sisestatud.bs.popover See sündmus käivitatakse pärast show.bs.popoversündmust, kui hüpikakende mall on DOM-i lisatud.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Hoiatusteated alert.js

Näidishoiatused

Lisage selle pistikprogrammiga kõikidele hoiatusteadetele loobumisfunktsioon.

Nupu kasutamisel .closepeab see olema nupu esimene alam ja selle ette .alert-dismissibleei tohi märgistuses tekstisisu tulla.

Kasutamine

Lihtsalt lisage data-dismiss="alert"oma sulgemisnupule, et anda automaatselt hoiatuse sulgemise funktsioon. Hoiatuse sulgemine eemaldab selle DOM-ist.

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

Kui soovite, et hoiatused kasutaksid sulgemisel animatsiooni, veenduge, et neile oleks juba rakendatud klassid .fadeja ..in

meetodid

$().alert()

Annab hoiatuse kuulama klõpsusündmusi data-dismiss="alert"atribuuti omavatel järglastel elementidel. (Pole vajalik, kui kasutate data-api automaatset initsialiseerimist.)

$().alert('close')

Sulgeb hoiatuse, eemaldades selle DOM-ist. Kui elemendil on klassid .fadeja .in, kaob hoiatus enne selle eemaldamist.

Sündmused

Bootstrapi hoiatusplugin paljastab mõned sündmused hoiatusfunktsiooniga ühendamiseks.

Sündmuse tüüp Kirjeldus
close.bs.alert See sündmus käivitub kohe, kui closeeksemplari meetod kutsutakse.
suletud.bs.hoiatus See sündmus käivitatakse, kui hoiatus on suletud (ootab, kuni CSS-i üleminekud on lõpule viidud).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Nupud button.js

Tehke nuppudega rohkem. Juhtnupu olekud või nupurühmade loomine rohkemate komponentide, näiteks tööriistaribade jaoks.

Brauseriülene ühilduvus

Firefox säilitab lehtede laadimise ajal vormikontrolli olekuid (puue ja kontrollitud olek) . Selle probleemi lahendamiseks on kasutada autocomplete="off". Vaadake Mozilla viga #654072 .

Riigitu

Lisa data-loading-text="Loading...", et kasutada nupul laadimisolekut.

See funktsioon on alates versioonist 3.3.5 aegunud ja versioonis 4 on see eemaldatud.

Kasutage seda olekut, mis teile meeldib!

Selle demonstratsiooni huvides kasutame data-loading-textja $().button('loading'), kuid see pole ainus olek, mida saate kasutada. Vaadake selle kohta lisateavet allpool olevast $().button(string)dokumentatsioonist .

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

Üks lüliti

Lisa data-toggle="button", et aktiveerida ühe nupu sisselülitamine.

Eellülitatud nupud vajavad .activejaaria-pressed="true"

Eellülitatud nuppude puhul peate lisama .activeklassi ja aria-pressed="true"atribuudi buttoniseendale.

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

Märkeruut / Raadio

Lisage data-toggle="buttons"neid .btn-groupsisaldavasse märkeruutu või raadiosisendeid, et võimaldada nende vastavate stiilide vahetamist.

Vaja on eelvalitud valikuid.active

Eelvalitud valikute puhul peate .activeklassi ise sisendisse lisama label.

Visuaalselt kontrollitud olekut värskendatakse ainult klõpsamisel

Kui märkeruudu nupu märgistatud olekut värskendatakse ilma nupul clicksündmust käivitamata (nt sisendi omaduse <input type="reset">määramise kaudu või kaudu checked), peate ise .activesisendil klassi sisse labellülitama.

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

meetodid

$().button('toggle')

Lülitab tõukeoleku sisse. Annab nupule välimuse, nagu see oleks aktiveeritud.

$().button('reset')

Lähtestab nupu oleku – vahetab teksti algteksti vastu. See meetod on asünkroonne ja naaseb enne lähtestamise lõppu.

$().button(string)

Vahetab teksti mis tahes andmetega määratletud tekstiolekusse.

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

Ahenda collapse.js

Paindlik pistikprogramm, mis kasutab lihtsaks ümberlülitamiseks käputäis klasse.

Plugina sõltuvus

Ahendamine nõuab üleminekute pistikprogrammi kaasamist teie Bootstrapi versiooni.

Näide

Klassimuudatuste kaudu mõne muu elemendi kuvamiseks ja peitmiseks klõpsake allolevatel nuppudel:

  • .collapsepeidab sisu
  • .collapsingrakendatakse üleminekute ajal
  • .collapse.innäitab sisu

Võite kasutada hrefatribuudiga linki või atribuudiga nuppu data-target. Mõlemal juhul data-toggle="collapse"on nõutav.

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>

Akordioni näide

Laiendage paneelikomponendiga akordioni loomiseks vaikekäitumist.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat rula dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 hundikuu tempor, sunt aliqua pani linnu peale kalmaar ühe päritoluga kohv nulla eeldanda shoreditch et. Nihil anim keffiyeh helvetica, käsitööõlu labore wes anderson cred nesciunt sapiente ea proident. Ad vegan, välja arvatud lihunik vice lomo. Retuusid occaecat käsitööõlu talust lauale, toores teksariidest esteetiline sünteetiline nesciunt te pole ilmselt kuulnud neist accusamus labore jätkusuutlik VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat rula dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 hundikuu tempor, sunt aliqua pani linnu peale kalmaar ühe päritoluga kohv nulla eeldanda shoreditch et. Nihil anim keffiyeh helvetica, käsitööõlu labore wes anderson cred nesciunt sapiente ea proident. Ad vegan, välja arvatud lihunik vice lomo. Retuusid occaecat käsitööõlu talust lauale, toores teksariidest esteetiline sünteetiline nesciunt te pole ilmselt kuulnud neist accusamus labore jätkusuutlik VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat rula dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 hundikuu tempor, sunt aliqua pani linnu peale kalmaar ühe päritoluga kohv nulla eeldanda shoreditch et. Nihil anim keffiyeh helvetica, käsitööõlu labore wes anderson cred nesciunt sapiente ea proident. Ad vegan, välja arvatud lihunik vice lomo. Retuusid occaecat käsitööõlu talust lauale, toores teksariidest esteetiline sünteetiline nesciunt te pole ilmselt kuulnud neist accusamus labore jätkusuutlik 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>

Samuti on võimalik s-i .panel-bodys -iga välja vahetada .list-group.

  • Bootply
  • Üks itmus ac facilin
  • Teine eros

Tee laiendamise/ahendamise juhtnupud juurdepääsetavaks

Lisage kindlasti aria-expandedjuhtelement. See atribuut määrab selgelt kokkupandava elemendi praeguse oleku ekraanilugejate ja sarnaste abitehnoloogiate jaoks. Kui kokkupandav element on vaikimisi suletud, peaks selle väärtus olema aria-expanded="false". Kui olete määranud inklassi kasutades kokkupandava elemendi vaikimisi avatuks, määrakearia-expanded="true" selle asemel juhtelement. Pistikprogramm lülitab selle atribuudi automaatselt ümber, sõltuvalt sellest, kas kokkupandav element on avatud või suletud.

Lisaks, kui teie juhtelement sihib ühte ahendatavat elementi – st data-targetatribuut osutab valijale –, saate juhtelemendile idlisada täiendava atribuudi, mis sisaldab ahendatavat elementi. Kaasaegsed ekraanilugejad ja sarnased abitehnoloogiad kasutavad seda atribuuti, et pakkuda kasutajatele täiendavaid otseteid, et navigeerida otse kokkupandava elemendi juurde.aria-controlsid

Kasutamine

Ahendamise pistikprogramm kasutab raskuste tõstmiseks mõnda klassi:

  • .collapsepeidab sisu
  • .collapse.innäitab sisu
  • .collapsinglisatakse ülemineku alguses ja eemaldatakse, kui see lõpeb

Need klassid on leitavad component-animations.less.

Andmeatribuutide kaudu

Lihtsalt lisage elemendile data-toggle="collapse"ja a data-target, et määrata kokkupandava elemendi juhtimine automaatselt. Atribuut data-targetaktsepteerib ahendamise rakendamiseks CSS-i valijat. Kindlasti lisage klass collapsekokkupandavale elemendile. Kui soovite, et see oleks vaikimisi avatud, lisage täiendav klass in.

Akordionilaadse rühmahalduse lisamiseks kokkupandavale juhtelemendile lisage andmete atribuut data-parent="#selector". Selle tegevuse nägemiseks vaadake demo.

JavaScripti kaudu

Luba käsitsi:

$('.collapse').collapse()

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-parent="".

Nimi tüüp vaikimisi kirjeldus
lapsevanem valija vale Kui valija on ette nähtud, suletakse selle kokkupandava üksuse kuvamisel kõik määratud vanema all olevad kokkupandavad elemendid. (sarnane traditsioonilise akordioni käitumisega - see sõltub panelklassist)
lüliti tõeväärtus tõsi Lülitab kutsumisel kokkupandava elemendi sisse

meetodid

.collapse(options)

Aktiveerib teie sisu kokkupandava elemendina. Aktsepteerib valikulisi valikuid object.

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

.collapse('toggle')

Lülitab kokkupandava elemendi kuvatud või peidetud olekuks. Naaseb helistaja juurde enne, kui kokkupandav element on tegelikult näidatud või peidetud (st enne sündmuse shown.bs.collapsevõi hidden.bs.collapsetoimumist).

.collapse('show')

Näitab kokkupandavat elementi. Naaseb helistaja juurde enne, kui kokkupandavat elementi on tegelikult näidatud (st enne shown.bs.collapsesündmuse toimumist).

.collapse('hide')

Peidab kokkupandava elemendi. Naaseb helistaja juurde enne, kui kokkupandav element on tegelikult peidetud (st enne hidden.bs.collapsesündmuse toimumist).

Sündmused

Bootstrapi ahendamisklass paljastab mõned sündmused, mis on seotud ahendamise funktsiooniga.

Sündmuse tüüp Kirjeldus
show.bs.collapse See sündmus käivitub kohe, kui showeksemplari meetod kutsutakse.
näidatud.bs.kokkuvarisemine See sündmus käivitatakse, kui ahendamise element on kasutajale nähtavaks tehtud (ootab, kuni CSS-i üleminekud on lõpule viidud).
peida.bs.kokkuvarisemine See sündmus käivitatakse kohe, kui hidemeetod on välja kutsutud.
peidetud.bs.kokkuvarisemine See sündmus käivitatakse, kui ahendamise element on kasutaja eest peidetud (ootab, kuni CSS-i üleminekud on lõpule viidud).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Karussell carousel.js

Slaidiseansi komponent elementide (nt karusselli) vahel liikumiseks. Pesastatud karusselle ei toetata.

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

Valikulised pealdised

Lisage oma slaididele hõlpsasti pealdisi .carousel-captionelemendiga mis tahes .item. Asetage sinna peaaegu kõik valikulised HTML-id ja see joondatakse ja vormindatakse automaatselt.

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

Mitu karusselli

Karussellide õigeks toimimiseks on vaja kasutada idkõige välimises anumas ( ). .carouselMitme karusselli lisamisel või karusselli muutmisel idvärskendage kindlasti asjakohaseid juhtelemente.

Andmeatribuutide kaudu

Kasutage karusselli asukoha hõlpsaks juhtimiseks andmeatribuute. data-slideaktsepteerib märksõnu prevvõi next, mis muudab slaidi asukohta selle praeguse asukoha suhtes. Teise võimalusena kasutage data-slide-totöötlemata slaidiindeksi edastamiseks karussellile data-slide-to="2", mis nihutab slaidi positsiooni konkreetsele registrile, mis algab tähega 0.

Atribuuti data-ride="carousel"kasutatakse karusselli märgistamiseks animeerivaks alates lehe laadimisest. Seda ei saa kasutada koos (liigse ja mittevajaliku) selgesõnalise JavaScripti lähtestamisega sama karusselli puhul.

JavaScripti kaudu

Helistage karusselli käsitsi, kasutades:

$('.carousel').carousel()

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-interval="".

Nimi tüüp vaikimisi kirjeldus
intervall number 5000 Aeg, mis kulub üksuse automaatse tsükli vahel. Kui see on vale, ei käivitu karussell automaatselt.
paus string | null "hõljuma" Kui see on seatud "hover", peatab karusselli mouseentertsükli ja jätkab karusselli tsüklit mouseleave. Kui see on seatud null, ei peata karusselli kohal kursori hõljutamine seda.
mähis tõeväärtus tõsi Kas karussell peaks pidevalt tiirlema ​​või peaks olema raskeid peatusi.
klaviatuur tõeväärtus tõsi Kas karussell peaks reageerima klaviatuurisündmustele.

Lähtestab karusselli valikuliste valikutega objectja hakkab üksuste vahel ringi liikuma.

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

Liigub läbi karusselli üksuste vasakult paremale.

Peatab karusselli esemete vahel liikumise.

Liigutab karusselli konkreetse kaadri juurde (0-põhine, sarnane massiiviga).

Liigub eelmise üksuse juurde.

Liigub järgmise üksuse juurde.

Bootstrapi karusselliklass paljastab kaks sündmust karusselli funktsioonidega liitumiseks.

Mõlemal sündmusel on järgmised lisaomadused:

  • direction: suund, milles karussell libiseb (kas "left"või "right").
  • relatedTarget: DOM-element, mis libistatakse aktiivse üksusena oma kohale.

Kõik karussellisündmused käivitatakse karusselli enda (st <div class="carousel">) suunas.

Sündmuse tüüp Kirjeldus
slide.bs.carousell See sündmus käivitub kohe, kui slideeksemplari meetod käivitatakse.
liug.bs.karussell See sündmus käivitatakse, kui karussell on slaidi ülemineku lõpetanud.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Kinnitage affix.js

Näide

Kinnituse pistikprogramm lülitub position: fixed;sisse ja välja, emuleerides klahviga leitud efekti position: sticky;. Parempoolne alamnavigeerimine on lisandmooduli reaalajas demo.


Kasutamine

Kasutage liidete pistikprogrammi andmeatribuutide kaudu või käsitsi oma JavaScriptiga. Mõlemal juhul peate lisama lisatud sisu asukoha ja laiuse jaoks CSS-i.

Märkus. Ärge kasutage liitepluginat elemendi puhul, mis sisaldub suhteliselt paigutatud elemendis, näiteks tõmmatud või lükatud veerus.Märkus. Safari renderdusvea .

Positsioneerimine CSS-i kaudu

Kinnituse pistikprogramm lülitub kolme klassi vahel, millest igaüks esindab teatud olekut: .affix, .affix-top, ja .affix-bottom. Peate esitama stiilid, välja arvatudposition: fixed;.affixTegelike positsioonide haldamiseks peate nende klasside jaoks ise (sõltumata sellest pistikprogrammist) .

Kinnituse pistikprogramm töötab järgmiselt.

  1. Alustuseks lisab pistikprogramm.affix-top , mis näitab, et element on kõige ülemises positsioonis. Sel hetkel pole CSS-i positsioneerimist vaja.
  2. Kinnitatavast elemendist mööda kerimine peaks käivitama tegeliku kinnitamise. See on koht, kus .affixasendab .affix-topja seabposition: fixed; (pakkub Bootstrapi CSS).
  3. Kui põhjanihe on määratletud, peaks sellest mööda kerimine asendama .affix. .affix-bottomKuna nihked on valikulised, tuleb ühe määramiseks määrata sobiv CSS. Sel juhul lisage position: absolute;vajadusel. Plugin kasutab andmeatribuuti või JavaScripti, et määrata, kuhu element sealt positsioneerida.

Järgige ülaltoodud samme, et määrata oma CSS-i mõne alloleva kasutusvaliku jaoks.

Andmeatribuutide kaudu

Mis tahes elemendile afiksi käitumise hõlpsaks lisamiseks lisage lihtsalt data-spy="affix"element, mida soovite luurata. Kasutage nihkeid, et määrata, millal elemendi kinnitamist sisse lülitada.

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

JavaScripti kaudu

Kutsuge afiksi pistikprogrammi JavaScripti kaudu:

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

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-offset-top="200".

Nimi tüüp vaikimisi kirjeldus
nihe number | funktsioon | objektiks 10 Pikslid, mida kerimise asukoha arvutamisel ekraanist nihutada. Kui antakse üks number, rakendatakse nihet nii ülemises kui ka alumises suunas. Ainulaadsuse pakkumiseks sisestage alumine ja ülemine nihe lihtsalt objekt offset: { top: 10 }või offset: { top: 10, bottom: 5 }. Kasutage funktsiooni, kui peate nihke dünaamiliselt arvutama.
sihtmärk valija | sõlm | jQuery element windowobjekti _ Määrab afiksi sihtelemendi.

meetodid

.affix(options)

Aktiveerib teie sisu lisatud sisuna. Aktsepteerib valikulisi valikuid object.

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

.affix('checkPosition')

Arvutab ümber kinnituse oleku asjakohaste elementide mõõtmete, asukoha ja kerimisasendi põhjal. .affixKlassid , .affix-topja klassid lisatakse .affix-bottomlisatud sisule või eemaldatakse sellest vastavalt uuele olekule. Seda meetodit tuleb välja kutsuda alati, kui muudetakse kinnitatud sisu või sihtelemendi mõõtmeid, et tagada kinnitatud sisu õige paigutus.

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

Sündmused

Bootstrapi afiksi plugin paljastab mõned sündmused, mis on seotud kinnitusfunktsiooniga.

Sündmuse tüüp Kirjeldus
affix.bs.affix See sündmus käivitub vahetult enne elemendi kinnitamist.
kinnitatud.bs.afiks See sündmus käivitatakse pärast elemendi kinnitamist.
affix-top.bs.affix See sündmus käivitub vahetult enne elemendi ülaosa kinnitamist.
affixed-top.bs.affix See sündmus käivitatakse pärast elemendi ülaosa kinnitamist.
affix-bottom.bs.affix See sündmus käivitub vahetult enne, kui element on alla kinnitatud.
affixed-bottom.bs.affix See sündmus käivitatakse pärast seda, kui element on alla kinnitatud.