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

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

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. Üldjuhul on need infinitiivi ja mineviku osastava vormina – kus infinitiiv (nt show) käivitatakse sündmuse alguses ja selle mineviku osastava vorm (nt shown) käivitatakse tegevuse 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
})

Puhastusvahend

Tööriistavihjed ja hüpikaknad kasutavad HTML-i aktsepteerivate valikute puhastamiseks meie sisseehitatud puhastusvahendit.

Vaikeväärtus whiteListon järgmine:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Kui soovite sellele vaikeväärtusele lisada uusi väärtusi, whiteListsaate teha järgmist.

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Kui soovite meie desinfitseerimisvahendist mööda minna, kuna eelistate kasutada spetsiaalset teeki, näiteks DOMpurify , peaksite tegema järgmist.

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

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

Kui JavaScript on keelatud, pole mingeid erilisi tagavarasid

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

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

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>

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

Modaalse sisu muutmine päästikunupu alusel

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,

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

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

meetodid

.modal(options)

Aktiveerib teie sisu modaalina. Aktsepteerib valikulisi valikuid object.

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

.modal('toggle')

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

.modal('show')

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

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

.modal('hide')

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

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

.modal('handleUpdate')

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.

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

Rippmenüüd dropdown.js

Näited

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

Naviriba sees

Pillide sees

Kasutamine

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

Mobiilseadmetes lisab rippmenüü avamine .dropdown-backdroppuudutusalaks 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()

Valikud

Mitte ühtegi

meetodid

$().dropdown('toggle')

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

Sündmused

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

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

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

Kasutamine

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

Sündmused

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

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>

Fade efekt

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

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

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>

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

Valikud

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

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 sisse/välja. 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

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

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

Näited

Staatiline hüpikakna

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

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.

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

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

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

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

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.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
  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.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  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.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> 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">
  ...
</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.

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.

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

<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 vahetada .list-group.

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

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.

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

Karussell carousel.js

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

Näited

Eelmine Edasi

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

Esimese slaidi silt

Nulla vitae elit libero, a pharetra augue mollis interdum.

Teise slaidi silt

Lorem ipsum dolor sit amet, consectetur adipiscing eliit.

Kolmas slaidi silt

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Eelmine Edasi

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

Kasutamine

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

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

meetodid

.carousel(options)

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

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

.carousel('cycle')

Liigub läbi karusselli üksuste vasakult paremale.

.carousel('pause')

Peatab karusselli esemete vahel liikumise.

.carousel(number)

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

.carousel('prev')

Liigub eelmise üksuse juurde.

.carousel('next')

Liigub järgmise üksuse juurde.

Sündmused

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.

$('#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. Safari renderdusvea tõttu ärge kasutage liidete pistikprogrammi elemendi puhul, mis sisaldub suhteliselt paigutatud elemendis (nt tõmmatud või lükatud veerus) .

Positsioneerimine CSS-i kaudu

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

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 .affixasendatakse .affix-topja seatakse position: 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".

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 kinnitatud sisu või sihtelemendi mõõtmeid muudetakse, et tagada kinnitatud sisu õige paigutus.

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

Sündmused

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