Yleiskatsaus

Yksittäinen tai koottu

Plugins voidaan sisällyttää yksitellen (käyttäen Bootstrapin yksittäisiä *.jstiedostoja) tai kaikki kerralla (käyttäen bootstrap.jstai minimoitua bootstrap.min.js).

Tietojen attribuutit

Voit käyttää kaikkia Bootstrap-laajennuksia puhtaasti merkintäsovellusliittymän kautta kirjoittamatta yhtään JavaScript-riviä. Tämä on Bootstrapin ensiluokkainen API, ja sen pitäisi olla ensimmäinen huomiosi, kun käytät laajennusta.

Joissain tilanteissa voi kuitenkin olla toivottavaa poistaa tämä toiminto käytöstä. Siksi tarjoamme myös mahdollisuuden poistaa dataattribuutin API käytöstä poistamalla kaikki tapahtumat asiakirjassa, jonka nimiavaruus on data-api. Tämä näyttää tältä:

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

Vaihtoehtoisesti voit kohdistaa tiettyyn laajennukseen lisäämällä vain laajennuksen nimen nimiavaruudeksi data-api-nimiavaruuden ohella seuraavasti:

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

Ohjelmallinen sovellusliittymä

Uskomme myös, että sinun pitäisi pystyä käyttämään kaikkia Bootstrap-laajennuksia puhtaasti JavaScript-sovellusliittymän kautta. Kaikki julkiset sovellusliittymät ovat yksittäisiä, ketjutettavia menetelmiä, ja ne palauttavat kokoelman toimineen.

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

Kaikkien menetelmien tulee hyväksyä valinnainen optioobjekti, tiettyyn menetelmään kohdistettu merkkijono tai ei mitään (joka käynnistää laajennuksen oletuskäyttäytymisellä):

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

Jokainen laajennus paljastaa myös raakakonstruktorinsa Constructorominaisuudessa: $.fn.popover.Constructor. Jos haluat saada tietyn laajennuksen ilmentymän, nouta se suoraan elementistä: $('[rel="popover"]').data('popover').

Oletusasetukset

Voit muuttaa laajennuksen oletusasetuksia muokkaamalla laajennuksen Constructor.DEFAULTSobjektia:

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

Ei konfliktia

Joskus on tarpeen käyttää Bootstrap-laajennuksia muiden käyttöliittymäkehysten kanssa. Näissä olosuhteissa nimitilan törmäyksiä voi toisinaan tapahtua. Jos näin tapahtuu, voit kutsua .noConflictlaajennusta, jonka arvon haluat palauttaa.

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

Tapahtumat

Bootstrap tarjoaa mukautettuja tapahtumia useimpien laajennusten ainutlaatuisia toimintoja varten. Yleensä nämä tulevat infinitiivi- ja menneisyyden partisiipin muodossa - missä infinitiivi (esim. show) laukeaa tapahtuman alussa ja sen mennyt partisiippimuoto (esim. shown) käynnistetään toiminnon päätyttyä.

3.0.0:sta lähtien kaikki Bootstrap-tapahtumat ovat nimivälillä.

Kaikki infinitiiviset tapahtumat tarjoavat preventDefaulttoimivuutta. Tämä tarjoaa mahdollisuuden pysäyttää toiminnon suorittaminen ennen sen alkamista.

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

Versionumerot

Jokaisen Bootstrapin jQuery-laajennuksen versiota voi käyttää VERSIONlaajennuksen rakentajan ominaisuuden kautta. Esimerkiksi työkaluvihje-laajennus:

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

Ei erityisiä varatoimia, kun JavaScript on poistettu käytöstä

Bootstrapin lisäosat eivät palaa erityisen kauniisti, kun JavaScript on poistettu käytöstä. Jos välität käyttökokemuksesta tässä tapauksessa, käytä <noscript>selittääksesi tilanteen (ja kuinka JavaScript otetaan uudelleen käyttöön) käyttäjillesi ja/tai lisää omia mukautettuja varavaihtoehtoja.

Siirtymät transfer.js

Tietoja siirtymyksistä

Yksinkertaisia ​​siirtymätehosteita varten sisällytä transition.jskerran muiden JS-tiedostojen rinnalle. Jos käytät käännettyä (tai minimoitua) bootstrap.js, tätä ei tarvitse sisällyttää - se on jo olemassa.

Mitä on sisällä

Transition.js on transitionEndtapahtumien perusapuohjelma sekä CSS-siirtymäemulaattori. Muut laajennukset käyttävät sitä CSS-siirtymän tuen tarkistamiseen ja riippuvien siirtymien kiinnittämiseen.

Siirtymien poistaminen käytöstä

Siirtymät voidaan poistaa maailmanlaajuisesti käytöstä seuraavalla JavaScript-koodinpätkällä, jonka on tultava sen jälkeen, kun transition.js(tai bootstrap.jstapauksen bootstrap.min.jsmukaan ) on ladattu:

$.support.transition = false

Modaalit modal.js

Modaalit ovat virtaviivaisia, mutta joustavia, dialogikehotteita, joissa on vähimmäisvaatimukset ja älykkäät oletusasetukset.

Koska HTML5 määrittelee semantiikkansa, autofocusHTML-attribuutilla ei ole vaikutusta Bootstrap-modaaleihin. Saat saman vaikutuksen käyttämällä mukautettua JavaScriptiä:

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

Esimerkkejä

Staattinen esimerkki

Renderöity modaali, jonka alatunnisteessa on otsikko, runko ja toimintosarja.

<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

Vaihda modaali JavaScriptin kautta napsauttamalla alla olevaa painiketta. Se liukuu alas ja häivyttää sivun yläreunasta.

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

Valinnaiset koot

Modaaleilla on kaksi valinnaista kokoa, jotka ovat saatavilla modifiointiluokkien kautta sijoitettaviksi .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>

Poista animaatio

Jos modaalit vain näkyvät sen sijaan, että ne katoavat näkyvistä, poista .fadeluokka modaalimerkinnöistäsi.

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

Verkkojärjestelmän käyttö

Hyödynnä Bootstrap-grid-järjestelmää modaalissa vain sijoittamalla .rows sisään .modal-bodyja käyttämällä sitten normaaleja ruudukkojärjestelmäluokkia.

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

Vaihteleva modaalisisältö liipaisinpainikkeen perusteella

Onko sinulla joukko painikkeita, jotka kaikki laukaisevat saman modaalin, vain hieman erilaisella sisällöllä? Käytä event.relatedTargetja HTML - data-*attribuutteja (mahdollisesti jQueryn kautta ) muuttaaksesi modaalin sisältöä sen mukaan, mitä painiketta napsautettiin. Katso Modal Events -asiakirjat saadaksesi lisätietoja 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)
})

Käyttö

Modaalilaajennus vaihtaa piilotetun sisällön tarpeen mukaan tietomääritteiden tai JavaScriptin avulla. Se myös lisää .modal-openoletusarvoisen <body>vierityskäyttäytymisen ohittamiseen ja luo .modal-backdropnapsautusalueen, joka hylkää näytetyt modaalit, kun klikkaat modaalin ulkopuolella.

Tietomääritteiden kautta

Aktivoi modaali kirjoittamatta JavaScriptiä. Aseta data-toggle="modal"ohjainelementille, kuten painikkeelle, yhdessä data-target="#foo"tai href="#foo"kohdistaaksesi tiettyyn modaaliin vaihtaaksesi.

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

JavaScriptin kautta

Kutsu modaali tunnuksella myModalyhdellä JavaScript-rivillä:

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

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-backdrop="".

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

menetelmät

.modal(options)

Aktivoi sisältösi modaalina. Hyväksyy valinnaiset vaihtoehdot object.

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

.modal('toggle')

Vaihtaa modaalin manuaalisesti. Palaa soittajalle ennen kuin modaali on todellisuudessa näytetty tai piilotettu (eli ennen kuin tapahtuma shown.bs.modaltai hidden.bs.modaltapahtuu).

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

.modal('show')

Avaa modaalin manuaalisesti. Palaa soittajalle ennen kuin modaali on todellisuudessa esitetty (eli ennen shown.bs.modaltapahtumaa).

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

.modal('hide')

Piilottaa modaalin manuaalisesti. Palaa soittajalle ennen kuin modaali on todella piilotettu (eli ennen kuin hidden.bs.modaltapahtuma tapahtuu).

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

.modal('handleUpdate')

Säätää modaalin asennon vastaamaan vierityspalkkia siltä varalta, että sellainen ilmestyy, mikä saa modaalin hyppäämään vasemmalle.

Tarvitaan vain, kun modaalin korkeus muuttuu sen ollessa auki.

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

Tapahtumat

Bootstrapin modaaliluokka paljastaa muutamia tapahtumia modaalitoimintoihin kytkeytymistä varten.

Kaikki modaalitapahtumat laukaistaan ​​itse modaaliin (eli kohtaan <div class="modal">).

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

Pudotusvalikosta dropdown.js

Esimerkkejä

Lisää avattavia valikoita lähes mihin tahansa tällä yksinkertaisella laajennuksella, mukaan lukien navigointipalkki, välilehdet ja pillerit.

Navigointipalkin sisällä

Pillereiden sisällä

Käyttö

Tietomääritteiden tai JavaScriptin avulla avattava laajennus vaihtaa piilotetun sisällön (pudotusvalikot) vaihtamalla .openluokkaa ylätason luettelokohteessa.

Mobiililaitteissa avattavan valikon avaaminen lisää napautusalueena avattavien .dropdown-backdropvalikkojen sulkemiseen, kun napautat valikon ulkopuolella, mikä on vaatimus asianmukaiselle iOS-tuelle. Tämä tarkoittaa, että vaihtaminen avoimesta avattavasta valikosta toiseen avattavaan valikkoon vaatii ylimääräisen napautuksen mobiililaitteella.

Huomautus: data-toggle="dropdown"Attribuuttia käytetään avattavien valikoiden sulkemiseen sovellustasolla, joten on hyvä idea käyttää sitä aina.

Tietomääritteiden kautta

Lisää data-toggle="dropdown"linkkiin tai painikkeeseen avataksesi avattavan valikon.

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

Jos haluat pitää URL-osoitteet ennallaan linkkipainikkeilla, käytä data-targetmääritettä 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>

JavaScriptin kautta

Kutsu avattavat valikot JavaScriptin kautta:

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

Vaihtoehdot

Ei mitään

menetelmät

$().dropdown('toggle')

Vaihtaa tietyn navigointipalkin tai välilehdellä varustetun navigoinnin avattavan valikon.

Tapahtumat

Kaikki pudotusvalikon tapahtumat käynnistetään .dropdown-menupääelementissä.

Kaikilla pudotusvalikon tapahtumilla on relatedTargetominaisuus, jonka arvo on vaihtoankkurielementti.

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Esimerkki navigointipalkissa

ScrollSpy-laajennus on tarkoitettu navigointikohteiden automaattiseen päivittämiseen vierityksen sijainnin perusteella. Vieritä navigointipalkin alla olevaa aluetta ja seuraa aktiivisen luokan muutosta. Myös pudotusvalikon alakohdat korostetaan.

Käyttö

Edellyttää suhteellista sijoittelua

Toteutustavasta riippumatta scrollspy edellyttää position: relative;vakoilemasi elementin käyttöä. Useimmissa tapauksissa tämä on <body>. Kun rullaat muita elementtejä kuin <body>, varmista, että heightmäärität ja käytät overflow-y: scroll;sitä.

Tietomääritteiden kautta

Voit helposti lisätä scrollspy-käyttäytymistä yläpalkin navigointiin lisäämällä data-spy="scroll"elementtiin, jota haluat vakoilla (yleensä tämä on <body>). Lisää sitten attribuutti minkä tahansa Bootstrap- komponentin data-targetpääelementin tunnuksella tai luokalla ..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>

JavaScriptin kautta

Kun olet lisännyt position: relative;CSS:n, kutsu scrollspylle JavaScriptin kautta:

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

menetelmät

.scrollspy('refresh')

Kun käytät scrollspyä yhdessä elementtien lisäämisen tai poistamisen kanssa DOM:sta, sinun on kutsuttava päivitysmenetelmä seuraavasti:

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

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-offset="".

Tapahtumat

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Vaihtelevat välilehdet tab.js

Esimerkki välilehdistä

Lisää nopea, dynaaminen välilehtitoiminto siirtyäksesi paikallisen sisällön ruutuihin, jopa pudotusvalikoiden kautta. Sisäkkäisiä välilehtiä ei tueta.

Käyttö

Ota välilehdet käyttöön JavaScriptin kautta (jokainen välilehti on aktivoitava erikseen):

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

Voit aktivoida yksittäisiä välilehtiä useilla tavoilla:

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

Merkintä

Voit aktivoida välilehden tai pillerinavigoinnin kirjoittamatta JavaScriptiä yksinkertaisesti määrittämällä data-toggle="tab"tai data-toggle="pill"elementin päälle. Luokkien ja lisääminen välilehdelle navkäyttää Bootstrap - välilehden tyyliä , kun taas luokkien ja lisääminen käyttää pillerityyliä .nav-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>

Häivytysefekti

Saat välilehdet häivyttää lisäämällä .fadekuhunkin .tab-pane. Ensimmäisen välilehtiruudun on myös .intehtävä alkuperäinen sisältö näkyväksi.

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

menetelmät

$().tab

Aktivoi välilehtielementin ja sisältösäiliön. Välilehdellä tulee olla joko a data-targettai hrefkohdistava säilön solmu DOM:ssa. Yllä olevissa esimerkeissä välilehdet ovat <a>s data-toggle="tab"attribuuteineen.

.tab('show')

Valitsee välilehden ja näyttää siihen liittyvän sisällön. Kaikki muut aiemmin valitut välilehdet jäävät valitsemattomiksi ja niihin liittyvä sisältö piilotetaan. Palaa soittajalle ennen kuin välilehtiruutu on todella näytetty (eli ennen shown.bs.tabtapahtumaa).

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

Tapahtumat

Kun uusi välilehti näytetään, tapahtumat käynnistyvät seuraavassa järjestyksessä:

1. hide.bs.tab(nykyisellä aktiivisella välilehdellä)
2. show.bs.tab(näytettävissä välilehdellä)
3. hidden.bs.tab(edellisellä aktiivisella välilehdellä sama kuin hide.bs.tabtapahtumalla)
4. shown.bs.tab(äskettäin aktiivisella juuri näytetyllä välilehdellä, sama kuin show.bs.tabtapahtumassa)

Jos mikään välilehti ei ollut jo aktiivinen, hide.bs.tabja hidden.bs.tabtapahtumia ei käynnistetä.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Työkaluvinkit tooltip.js

Inspiroitunut erinomaisesta jQuery.tipsy-laajennuksesta, jonka on kirjoittanut Jason Frame; Työkaluvihjeet ovat päivitetty versio, joka ei ole riippuvainen kuvista, käyttää CSS3:a animaatioihin ja data-attribuutteja paikalliseen otsikon tallentamiseen.

Työkaluvihjeitä, joiden otsikot ovat nollapituisia, ei koskaan näytetä.

Esimerkkejä

Vie hiiri alla olevien linkkien päälle nähdäksesi työkaluvinkit:

Staattinen työkaluvihje

Käytettävissä on neljä vaihtoehtoa: ylä-, oikea-, ala- ja vasemmalle tasattuna.

Neljä suuntaa

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

Käyttö

Työkaluvihje-laajennus luo sisältöä ja merkintöjä pyynnöstä ja sijoittaa työkaluvihjeet oletuksena niiden triggerelementin perään.

Käynnistä työkaluvihje JavaScriptin kautta:

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

Merkint��

Työkaluvihjeen vaadittava merkintä on vain dataattribuutti ja titleHTML-elementissä, johon haluat työkaluvihjeen. Työkaluvihjeen luotu merkintä on melko yksinkertaista, vaikka se vaatii sijainnin (oletusarvoisesti toplaajennuksen asettama).

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

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-animation="".

menetelmät

$().tooltip(options)

Kiinnittää työkaluvihjeiden käsittelijän elementtikokoelmaan.

.tooltip('show')

Näyttää elementin työkaluvihjeen. Palaa soittajalle ennen kuin työkaluvihje on todellisuudessa näytetty (eli ennen shown.bs.tooltiptapahtumaa). Tätä pidetään työkaluvihjeen "manuaalisena" käynnistämisenä. Työkaluvihjeitä, joiden otsikot ovat nollapituisia, ei koskaan näytetä.

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

.tooltip('hide')

Piilottaa elementin työkaluvihjeen. Palaa soittajalle ennen kuin työkaluvihje on todella piilotettu (eli ennen hidden.bs.tooltiptapahtumaa). Tätä pidetään työkaluvihjeen "manuaalisena" käynnistämisenä.

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

.tooltip('toggle')

Vaihtaa elementin työkaluvihjeen päälle/pois. Palaa soittajalle ennen kuin työkaluvihje on tosiasiallisesti näytetty tai piilotettu (ts. ennen shown.bs.tooltiptai hidden.bs.tooltiptapahtumaa). Tätä pidetään työkaluvihjeen "manuaalisena" käynnistämisenä.

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

.tooltip('destroy')

Piilottaa ja tuhoaa elementin työkaluvihjeen. Delegointia käyttäviä työkaluvihjeitä (jotka luodaan vaihtoehdolla selector) ei voida tuhota yksitellen jälkeläisissä triggerelementeissä.

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

Tapahtumat

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

Popovers popover.js

Lisää pieniä peittokuvia sisällöstä, kuten iPadissa, mihin tahansa elementtiin toissijaisten tietojen tallentamiseksi.

Ponnahdusikkunoita, joiden otsikko ja sisältö ovat nollapituisia, ei koskaan näytetä.

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

Esimerkkejä

Staattinen popover

Käytettävissä on neljä vaihtoehtoa: ylä-, oikea-, ala- ja vasemmalle tasattuna.

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>

Neljä suuntaa

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

Hylkää seuraavalla klikkauksella

Käytä focusliipaisinta hylätäksesi ponnahdusikkunat käyttäjän seuraavan napsautuksen yhteydessä.

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

Käyttö

Ota ponnahdusikkunat käyttöön JavaScriptin kautta:

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

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-animation="".

menetelmät

$().popover(options)

Alustaa elementtikokoelman ponnahdusikkunat.

.popover('show')

Paljastaa elementin ponnahdusikkunan. Palaa soittajalle ennen kuin ponnahdusikkuna on todella näytetty (eli ennen shown.bs.popovertapahtumaa). Tätä pidetään ponnahdusikkunan "manuaalisena" laukaisuna. Ponnahdusikkunoita, joiden otsikko ja sisältö ovat nollapituisia, ei koskaan näytetä.

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

.popover('hide')

Piilottaa elementin ponnahdusikkunan. Palaa soittajalle ennen kuin ponnahdusikkuna on todella piilotettu (eli ennen hidden.bs.popovertapahtumaa). Tätä pidetään ponnahdusikkunan "manuaalisena" laukaisuna.

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

.popover('toggle')

Vaihtaa elementin ponnahdusikkunan. Palaa soittajalle ennen kuin ponnahdusikkuna on todella näkynyt tai piilotettu (ts. ennen shown.bs.popovertai hidden.bs.popovertapahtumaa). Tätä pidetään ponnahdusikkunan "manuaalisena" laukaisuna.

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

.popover('destroy')

Piilottaa ja tuhoaa elementin ponnahdusikkunan. Ponnahdusikkunoita, jotka käyttävät delegointia (jotka luodaan vaihtoehdolla ) selector, ei voida tuhota yksitellen jälkeläisissä triggerelementeissä.

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

Tapahtumat

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

Varoitusviestit alert.js

Esimerkki hälytyksistä

Lisää hylkäystoiminto kaikkiin hälytysviesteihin tällä laajennuksella.

Painiketta käytettäessä .closesen on oltava merkin ensimmäinen lapsi, .alert-dismissibleeikä sen edelle saa tulla tekstisisältöä merkinnässä.

Käyttö

Lisää data-dismiss="alert"vain sulkemispainike, niin saat automaattisesti hälytyssulkemistoiminnon. Hälytyksen sulkeminen poistaa sen DOM:sta.

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

Jos haluat, että hälytykset käyttävät animaatiota sulkeutuessaan, varmista, että niissä on .fadeja.in - luokat ovat jo käytössä.

menetelmät

$().alert()

Saa hälytyksen kuuntelemaan napsautustapahtumia jälkeläisissä elementeissä, joilla on data-dismiss="alert"attribuutti. (Ei välttämätöntä data-api:n automaattista alustusta käytettäessä.)

$().alert('close')

Sulkee hälytyksen poistamalla sen DOM:sta. Jos elementissä on luokat .fadeja .in, hälytys häviää ennen kuin se poistetaan.

Tapahtumat

Bootstrapin hälytyslaajennus paljastaa muutamia tapahtumia, jotka liittyvät hälytystoimintoihin.

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Painikkeet button.js

Tee enemmän painikkeilla. Ohjaa painikkeen tiloja tai luo painikeryhmiä muita osia, kuten työkalurivejä, varten.

valtiollinen

Lisää data-loading-text="Loading...", jos haluat käyttää painikkeen lataustilaa.

Tämä ominaisuus on poistettu käytöstä versiosta 3.3.5 lähtien, ja se on poistettu versiosta 4.

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

Yksi kytkin

Lisää data-toggle="button"aktivoidaksesi vaihtamisen yhdellä painikkeella.

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

Valintaruutu / Radio

Lisää data-toggle="buttons"sisältävään .btn-groupvalintaruutuun tai radiotuloihin, jotta voit vaihtaa niiden vastaaviin tyyleihin.

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

menetelmät

$().button('toggle')

Vaihtaa push-tilan. Antaa painikkeelle vaikutelman, että se on aktivoitu.

$().button('reset')

Palauttaa painikkeen tilan - vaihtaa tekstin alkuperäiseksi. Tämä menetelmä on asynkroninen ja palaa ennen kuin nollaus on tosiasiallisesti valmis.

$().button(string)

Vaihtaa tekstin mihin tahansa datamääritelmään tekstitilaan.

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

Kutista collapse.js

Joustava laajennus, joka käyttää kourallista luokkia helppoon vaihtokäyttäytymiseen.

Esimerkki

Napsauta alla olevia painikkeita näyttääksesi ja piilottaaksesi toisen elementin luokkamuutosten kautta:

• .collapsepiilottaa sisällön
• .collapsingkäytetään siirtymien aikana
• .collapse.innäyttää sisältöä

Voit käyttää linkkiä hrefmääritteen kanssa tai painiketta data-targetmääritteen kanssa. Molemmissa tapauksissa data-toggle="collapse"vaaditaan.

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

Haitari esimerkki

Laajenna oletusarvoista tiivistystoimintaa luodaksesi harmonikka paneelikomponentin kanssa.

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

On myös mahdollista vaihtaa .panel-bodys .list-groups:lle.

Käyttö

Collapse-laajennus käyttää muutamia luokkia raskaiden nostojen käsittelemiseen:

• .collapsepiilottaa sisällön
• .collapse.innäyttää sisällön
• .collapsinglisätään, kun siirtymä alkaa, ja poistetaan, kun se päättyy

Nämä luokat löytyvät component-animations.less.

Tietomääritteiden kautta

Lisää vain data-toggle="collapse"ja a data-targetelementtiin määrittääksesi automaattisesti kokoontaitettavan elementin hallinnan. Attribuutti data-targethyväksyy CSS-valitsimen, johon tiivistys sovelletaan. Muista lisätä luokka collapsekokoontaitettavaan elementtiin. Jos haluat sen avautuvan oletusarvoisesti, lisää ylimääräinen luokka in.

Lisää haitarimainen ryhmähallinta kokoontaitettavaan ohjausobjektiin lisäämällä data-attribuutti data-parent="#selector". Katso demo nähdäksesi tämän toiminnassa.

JavaScriptin kautta

Ota käyttöön manuaalisesti:

$('.collapse').collapse()

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-parent="".

menetelmät

.collapse(options)

Aktivoi sisältösi kokoontaitettavana elementtinä. Hyväksyy valinnaiset vaihtoehdot object.

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

.collapse('toggle')

Vaihtaa kokoontaitettavan elementin näytettäväksi tai piilotetuksi. Palaa soittajalle ennen kuin kokoontaitettava elementti on todella näkyvissä tai piilotettu (ts. ennen shown.bs.collapsetai hidden.bs.collapsetapahtumaa).

.collapse('show')

Näyttää kokoontaitettavan elementin. Palaa soittajalle ennen kuin kokoontaitettava elementti on todella näytetty (eli ennen shown.bs.collapsetapahtumaa).

.collapse('hide')

Piilottaa kokoontaitettavan elementin. Palaa soittajalle ennen kuin kokoontaitettava elementti on todella piilotettu (eli ennen hidden.bs.collapsetapahtuman tapahtumista).

Tapahtumat

Bootstrapin tiivistysluokka paljastaa muutamia tapahtumia, jotka liittyvät tiivistystoimintoon.

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

Carousel carousel.js

Diaesityskomponentti elementtien, kuten karusellin, läpi pyöräilyyn.Sisäkkäisiä karuselleja ei tueta.

Esimerkkejä

Edellinen Seuraava

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

Valinnaiset kuvatekstit

Lisää kuvatekstejä dioihisi helposti minkä .carousel-captiontahansa elementin avulla .item. Sijoita siihen melkein mikä tahansa valinnainen HTML-koodi, niin se tasataan ja muotoillaan automaattisesti.

Ensimmäinen dian etiketti

Nulla vitae elit libero, pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Edellinen Seuraava

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

Käyttö

Useita karuselleja

Karusellit vaativat iduloimmassa säiliössä ( .carousel), jotta karusellin säätimet toimivat oikein. Kun lisäät useita karuselleja tai vaihdat karuselliaid , muista päivittää tarvittavat säätimet.

Tietomääritteiden kautta

Käytä tietoattribuutteja karusellin sijainnin hallintaan. data-slidehyväksyy avainsanat prevtai next, joka muuttaa dian sijaintia suhteessa sen nykyiseen sijaintiin. Vaihtoehtoisesti data-slide-tovoit siirtää raakadiaindeksin karuselliin data-slide-to="2", joka siirtää dian aseman tiettyyn hakemistoon, joka alkaa merkillä 0.

Attribuuttia data-ride="carousel"käytetään merkitsemään karuselli animaatioksi sivun latauksesta alkaen. Sitä ei voi käyttää yhdessä (redundantin ja tarpeettoman) eksplisiittisen JavaScript-alustuksen kanssa samassa karusellissa.

JavaScriptin kautta

Soita karuselliin manuaalisesti:

$('.carousel').carousel()

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-interval="".

menetelmät

.carousel(options)

Alustaa karusellin valinnaisilla vaihtoehdoilla objectja alkaa selata kohteita.

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

.carousel('cycle')

Kiertelee karusellikohteita vasemmalta oikealle.

.carousel('pause')

Estää karusellia pyöräilemästä esineiden läpi.

.carousel(number)

Kierrättää karusellin tiettyyn kehykseen (0-pohjainen, samanlainen kuin taulukko).

.carousel('prev')

Siirtyy edelliseen kohtaan.

.carousel('next')

Siirtyy seuraavaan kohteeseen.

Tapahtumat

Bootstrapin karuselliluokka paljastaa kaksi tapahtumaa, jotka liittyvät karusellitoimintoihin.

Molemmilla tapahtumilla on seuraavat lisäominaisuudet:

• direction: Suunta, johon karuselli liukuu (joko "left"tai "right").
• relatedTarget: DOM-elementti, joka liu'utetaan paikalleen aktiivisena kohteena.

Kaikki karusellitapahtumat laukaistaan ​​itse karuselliin (eli kohtaan <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Kiinnitä affix.js

Esimerkki

Affix -laajennus position: fixed;kytkeytyy päälle ja pois päältä emuloimalla tehostetta, joka löytyy position: sticky;. Oikealla oleva subnavigaatio on affiksilaajennuksen live-demo.

Käyttö

Käytä liitelaajennusta tietomääritteiden kautta tai manuaalisesti omalla JavaScriptilläsi. Molemmissa tilanteissa sinun on annettava CSS liitetyn sisällön sijoittelua ja leveyttä varten.

Huomautus: Älä käytä affiksilaajennusta elementissä, joka on suhteellisen sijoitettuun elementtiin, kuten vedettyyn tai työnnettyyn sarakkeeseen Safarin renderöintivirheen vuoksi .

Paikannus CSS:n kautta

Liitelaajennus vaihtaa kolmen luokan välillä, joista jokainen edustaa tiettyä tilaa: .affix, .affix-top, ja .affix-bottom. position: fixed;Sinun on annettava näiden luokkien tyylit .affixitse (tästä laajennuksesta riippumatta) todellisten paikkojen käsittelyä varten.

Näin affiksilaajennus toimii:

1. Aluksi laajennus lisää.affix-top osoittaakseen, että elementti on ylimmässä asemassaan. Tässä vaiheessa ei vaadita CSS-paikannusta.
2. Kiinnitettävän elementin ohi vierittäminen käynnistää varsinaisen kiinnityksen. Tämä on paikka .affixkorvaa .affix-topja asettaa position: fixed;(Bootstrapin CSS:n tarjoama).
3. Jos alapoikkeama on määritetty, sen ohi vierityksen tulisi korvata .affixmerkillä .affix-bottom. Koska offsetit ovat valinnaisia, niiden määrittäminen edellyttää oikean CSS:n määrittämistä. Lisää tässä tapauksessa position: absolute;tarvittaessa. Plugin käyttää dataattribuuttia tai JavaScript-vaihtoehtoa määrittääkseen, mihin elementti sijoitetaan sieltä.

Noudata yllä olevia ohjeita määrittääksesi CSS:si jommallakummalla alla olevista käyttövaihtoehdoista.

Tietomääritteiden kautta

Voit helposti lisätä liitetoimintoa mihin tahansa elementtiin lisäämällä vain data-spy="affix"elementtiin, jota haluat vakoilla. Käytä siirtymiä määrittääksesi, milloin elementin kiinnitys on vaihdettava.

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

JavaScriptin kautta

Kutsu liitelaajennus JavaScriptin kautta:

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

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-offset-top="200".

menetelmät

.affix(options)

Aktivoi sisältösi liitettynä sisältönä. Hyväksyy valinnaiset vaihtoehdot object.

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

.affix('checkPosition')

Laskee uudelleen liitteen tilan asiaankuuluvien elementtien mittojen, sijainnin ja vierityspaikan perusteella. Luokat .affix, .affix-top, ja .affix-bottomlisätään liitettyyn sisältöön tai poistetaan siitä uuden tilan mukaan. Tämä menetelmä on kutsuttava aina, kun liitetyn sisällön tai kohdeelementin mittoja muutetaan, jotta varmistetaan liitetyn sisällön oikea sijainti.

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

Tapahtumat

Bootstrapin affix-laajennus paljastaa muutamia tapahtumia, jotka liittyvät liitetoimintoon.