Áttekintés

Egyéni vagy összeállított

A beépülő modulok beépíthetők egyenként (a Bootstrap egyes *.jsfájljaival), vagy egyszerre (a bootstrap.jsvagy a kicsinyített fájl használatával bootstrap.min.js).

Adatattribútumok

Az összes Bootstrap beépülő modult kizárólag a jelölő API-n keresztül használhatja anélkül, hogy egyetlen sornyi JavaScriptet is írna. Ez a Bootstrap első osztályú API-ja, és a beépülő modul használatakor ez az első szempont.

Ennek ellenére bizonyos helyzetekben kívánatos lehet ezt a funkciót kikapcsolni. Ezért lehetőséget biztosítunk az adatattribútum API letiltására is úgy, hogy megszüntetjük a névterű dokumentum összes eseményét data-api. Ez így néz ki:

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

Alternatív megoldásként egy adott beépülő modul megcélzásához egyszerűen adja meg a beépülő modul nevét névtérként a data-api névtér mellett, így:

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

Programozott API

Úgy gondoljuk, hogy az összes Bootstrap beépülő modult tisztán a JavaScript API-n keresztül használhatja. Minden nyilvános API egyetlen, láncolható metódus, és visszaadja a gyűjteményt.

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

Minden metódusnak el kell fogadnia egy opcionális opciós objektumot, egy karakterláncot, amely egy adott metódust céloz, vagy semmit (amely alapértelmezett viselkedésű beépülő modult indít):

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

Minden beépülő modul a nyers konstruktorát is megjeleníti egy Constructortulajdonságon: $.fn.popover.Constructor. Ha egy adott bővítménypéldányt szeretne lekérni, kérje le közvetlenül egy elemből: $('[rel="popover"]').data('popover').

Alapbeállítások

A beépülő modul alapértelmezett beállításait módosíthatja a bővítmény Constructor.DEFAULTSobjektumának módosításával:

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

Nincs konfliktus

Néha szükséges a Bootstrap beépülő modulok használata más UI keretrendszerekkel. Ilyen körülmények között időnként előfordulhatnak névtér-ütközések. Ha ez megtörténik, hívhatja azt .noConflicta beépülő modult, amelynek az értékét vissza szeretné állítani.

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

Események

A Bootstrap egyéni eseményeket biztosít a legtöbb plugin egyedi műveletéhez. Ezek általában főnévi igenév és múlttag alakban fordulnak elő – ahol az infinitivus (pl. show) egy esemény elején, múltbeli igenév alakja (pl. shown) pedig egy cselekvés befejezésekor aktiválódik.

A 3.0.0-s verziótól kezdve minden Bootstrap esemény névtérben van.

Minden infinitiv esemény preventDefaultfunkcionalitást biztosít. Ez lehetővé teszi egy művelet végrehajtásának leállítását, mielőtt az elindulna.

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

Fertőtlenítő

Az eszköztippek és az előugró ablakok a beépített fertőtlenítőnket használják a HTML-t elfogadó opciók tisztítására.

Az alapértelmezett whiteListérték a következő:

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: []
}

Ha új értékeket szeretne hozzáadni ehhez az alapértelmezett értékhez, whiteListtegye a következőket:

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)

Ha szeretné megkerülni a fertőtlenítőnket, mert inkább egy dedikált könyvtárat szeretne használni, például a DOMPurify , akkor tegye a következőket:

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

Verziószámok

VERSIONA Bootstrap jQuery beépülő moduljainak verziója a beépülő modul konstruktorának tulajdonságán keresztül érhető el . Például az eszköztipp beépülő modulhoz:

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

Nincsenek különleges tartalékok, ha a JavaScript le van tiltva

A Bootstrap beépülő moduljai nem esnek vissza különösen kecsesen, ha a JavaScript le van tiltva. Ha ebben az esetben érdekli a felhasználói élmény, használja <noscript>a helyzet elmagyarázásához (és a JavaScript újraengedélyezéséhez) a felhasználóknak, és/vagy adja hozzá saját egyéni tartalékait.

Átmenetek átmeneti.js

Az átmenetekről

Az egyszerű átmeneti effektusok érdekében transition.jsegyszer szerepeljen a többi JS-fájl mellett. Ha a lefordított (vagy kicsinyített) fájlt használod bootstrap.js, akkor ezt nem kell belefoglalnod – már ott van.

Mi van benne

A Transition.js egy alapvető segédeszköz az transitionEndeseményekhez, valamint egy CSS átmeneti emulátor. A többi beépülő modul a CSS átmenet támogatásának ellenőrzésére és a függő átmenetek elkapására használja.

Átmenetek letiltása

Az átmenetek globálisan letilthatók a következő JavaScript-kódrészlet használatával, amelynek a betöltés után kell megjelennie transition.js(vagy bootstrap.js, bootstrap.min.jsaz esettől függően):

$.support.transition = false

Modals modal.js

A modálok egyszerűsített, de rugalmas párbeszédpanelek a minimálisan szükséges funkcionalitással és intelligens alapértelmezésekkel.

A HTML5 szemantikája meghatározása miatt a autofocusHTML attribútumnak nincs hatása a Bootstrap modálisra. Ugyanezen hatás eléréséhez használjon néhány egyéni JavaScriptet:

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

Példák

Statikus példa

Renderelt modális fejléccel, törzstel és a láblécben található műveletek halmazával.

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

Élő demó

Az alábbi gombra kattintva válthat át egy modált JavaScript segítségével. Lecsúszik, és elhalványul az oldal tetejétől.

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

Választható méretek

A modáloknak két választható mérete van, amelyek módosító osztályokon keresztül érhetők el, amelyeket egy .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>

Animáció eltávolítása

Az olyan modálisok esetében, amelyek egyszerűen megjelennek, nem pedig elhalványulnak, távolítsa el az .fadeosztályt a modális jelölésből.

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

A rácsrendszer használata

A Bootstrap rácsrendszer előnyeinek kihasználásához egy modálison belül csak helyezze .rowbe az s -t a .modal-bodyrendszerbe, majd használja a normál grid rendszerosztályokat.

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

Változó modális tartalom az indítógomb alapján

Van egy csomó gombja, amelyek mindegyike ugyanazt a módot indítja el, csak kissé eltérő tartalommal? Használja a event.relatedTargetés HTML - data-*attribútumokat (esetleg a jQuery segítségével ) a modál tartalmának megváltoztatásához attól függően, hogy melyik gombra kattintott. Tekintse meg a Modal Events dokumentumait a részletekért 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)
})

Használat

A modális beépülő modul igény szerint átkapcsolja a rejtett tartalmat adatattribútumok vagy JavaScript segítségével. Ezenkívül hozzáadja .modal-openaz <body>alapértelmezett görgetési viselkedés felülbírálásához, és létrehoz .modal-backdropegy kattintási területet a megjelenített modálok elvetéséhez, ha a modálison kívül kattintanak.

Adatattribútumokon keresztül

Aktiválja a modált JavaScript írása nélkül. Állítsa data-toggle="modal"be a vezérlőelemet, például egy gombot, a data-target="#foo"vagy a gombbal együtt, href="#foo"hogy egy adott módot célozzon a váltáshoz.

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

JavaScripten keresztül

Hívjon egy modált azonosítóval myModalegyetlen soros JavaScripttel:

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

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-backdrop="".

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

Mód

.modal(options)

Aktiválja a tartalmat modálisként. Elfogad egy opcionális opciót object.

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

.modal('toggle')

Manuálisan vált egy módot. Visszatér a hívóhoz, mielőtt a modális ténylegesen megjelenne vagy elrejtve (azaz a shown.bs.modalvagy hidden.bs.modalesemény bekövetkezte előtt).

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

.modal('show')

Manuálisan megnyit egy modált. Visszatér a hívóhoz, mielőtt a modális ténylegesen megjelenne (azaz az shown.bs.modalesemény bekövetkezte előtt).

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

.modal('hide')

Manuálisan elrejti a modált. Visszatér a hívóhoz, mielőtt a modális ténylegesen el lett volna rejtve (azaz az hidden.bs.modalesemény bekövetkezte előtt).

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

.modal('handleUpdate')

Újra beállítja a modális helyzetét, hogy ellensúlyozza a görgetősávot, ha megjelenne, amitől a modális balra ugrik.

Csak akkor szükséges, ha a modális magassága nyitva van.

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

Események

A Bootstrap modális osztálya felfed néhány eseményt a modális funkciókhoz való kapcsolódáshoz.

Minden modális esemény magára a modálisra (azaz a <div class="modal">)-ra kerül.

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

Legördülő menük dropdown.js

Példák

Ezzel az egyszerű bővítménnyel szinte bármihez hozzáadhat legördülő menüket, beleértve a navigációs sávot, a lapokat és a tablettákat.

Egy navigációs sávon belül

Tablettákon belül

Használat

Adatattribútumokon vagy JavaScripten keresztül a legördülő beépülő modul átkapcsolja a rejtett tartalmat (legördülő menük) az .openosztály átváltásával a szülőlistaelemen.

Mobileszközökön a legördülő menü megnyitása egy .dropdown-backdropkoppintási területet ad a legördülő menük bezárásához, amikor a menün kívül koppint, ami a megfelelő iOS-támogatás feltétele. Ez azt jelenti, hogy a nyitott legördülő menüről egy másik legördülő menüre váltáshoz extra koppintás szükséges a mobilon.

Megjegyzés: Az data-toggle="dropdown"attribútumra támaszkodik a legördülő menük alkalmazásszintű bezárásához, ezért célszerű mindig használni.

Adatattribútumokon keresztül

Hozzáadás data-toggle="dropdown"hivatkozáshoz vagy gombhoz a legördülő menü váltásához.

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

Ha az URL-eket érintetlenül szeretné megőrizni a linkgombokkal, használja az data-targetattribútumot a helyett 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>

JavaScripten keresztül

A legördülő menük meghívása JavaScripten keresztül:

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

Lehetőségek

Egyik sem

Mód

$().dropdown('toggle')

Bekapcsolja az adott navigációs sáv vagy lapos navigáció legördülő menüjét.

Események

Minden legördülő esemény a .dropdown-menuszülőelemnél aktiválódik.

Minden legördülő eseménynek van egy relatedTargettulajdonsága, amelynek értéke a kapcsoló horgonyelem.

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

ScrollSpy scrollspy.js

Példa a navigációs sávban

A ScrollSpy beépülő modul a navigációs célok automatikus frissítésére szolgál a görgetés pozíciója alapján. Görgessen a navigációs sáv alatti területen, és figyelje az aktív osztály változását. A legördülő alelemek is kiemelve lesznek.

Használat

Relatív pozicionálást igényel

A megvalósítási módtól függetlenül a scrollspy használatához szükséges a position: relative;kémkedni kívánt elem használata. A legtöbb esetben ez a <body>. Amikor a -tól eltérő elemeket görget <body>, ügyeljen arra, hogy legyen heightbeállítva és overflow-y: scroll;alkalmazva.

Adatattribútumokon keresztül

A scrollspy viselkedés egyszerű hozzáadásához a felső sáv navigációjához adja hozzá data-spy="scroll"azt az elemet, amely után kémkedni szeretne (leggyakrabban ez a <body>). Ezután adja hozzá az attribútumot bármely Bootstrap összetevő data-targetszülőelemének azonosítójával vagy osztályával ..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>

JavaScripten keresztül

Miután hozzáadta position: relative;a CSS-t, hívja meg a scrollspy-t JavaScripten keresztül:

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

Mód

.scrollspy('refresh')

Ha a scrollspy-t a DOM-elemek hozzáadásával vagy eltávolításával együtt használja, meg kell hívnia a frissítési metódust, például:

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

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-offset="".

Események

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

Váltható lapok tab.js

Példalapok

Adjon hozzá gyors, dinamikus lapfunkciókat a helyi tartalom paneljei közötti váltáshoz, akár legördülő menük segítségével is. A beágyazott lapok nem támogatottak.

Használat

Lapozható lapok engedélyezése JavaScript segítségével (minden lapot külön kell aktiválni):

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

Az egyes lapokat többféleképpen is aktiválhatja:

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

Jelölés

Aktiválhat egy fület vagy tabletta navigációt anélkül, hogy JavaScriptet írna, egyszerűen megadva data-toggle="tab"vagy data-toggle="pill"egy elemen. Ha hozzáadja a navés nav-tabsosztályokat a laphoz ul, akkor a Bootstrap lapstílus érvényesül , míg a navés nav-pillsosztályok hozzáadásával a tabletta stílust alkalmazza .

<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 hatás

A lapok elhalványulásához adja hozzá .fademindegyikhez a .tab-pane. Az első lappanelnek is .inláthatóvá kell tennie a kezdeti tartalmat.

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

Mód

$().tab

Aktivál egy tabulátor elemet és tartalomtárolót. A lapon egy data-targetvagy egy tárolócsomópontot kell hrefcélozni a DOM-ban. A fenti példákban a tabulátorok az attribútumokkal <a>rendelkező s-ek .data-toggle="tab"

.tab('show')

Kiválasztja az adott lapot, és megjeleníti a hozzá tartozó tartalmat. Minden más korábban kiválasztott lap kijelölése megszűnik, és a hozzá tartozó tartalom elrejtésre kerül. Visszatér a hívóhoz, mielőtt a lappanel ténylegesen megjelenne (azaz az shown.bs.tabesemény bekövetkezte előtt).

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

Események

Új lap megjelenítésekor az események a következő sorrendben aktiválódnak:

1. hide.bs.tab(az aktuális aktív lapon)
2. show.bs.tab(a megjelenítendő lapon)
3. hidden.bs.tab(az előző aktív lapon ugyanaz, mint az hide.bs.tabeseménynél)
4. shown.bs.tab(az újonnan aktív, most megjelenő lapon ugyanaz, mint az show.bs.tabeseménynél)

Ha még nem volt aktív lap, akkor a hide.bs.tabés hidden.bs.tabesemények nem aktiválódnak.

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

Eszköztippek tooltip.js

A Jason Frame által írt kiváló jQuery.tipsy plugin ihlette; Az eszköztippek egy frissített verzió, amely nem támaszkodik képekre, CSS3-at használ az animációkhoz, és adatattribútumokat a helyi címtároláshoz.

A nulla hosszúságú címekkel rendelkező eszköztippek soha nem jelennek meg.

Példák

Az eszköztippek megtekintéséhez vigye az egérmutatót az alábbi linkekre:

Statikus elemleírás

Négy lehetőség áll rendelkezésre: felül, jobb, alsó és balra igazítva.

Négy irány

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

Használat

Az eszköztipp-bővítmény igény szerint létrehozza a tartalmat és a jelöléseket, és alapértelmezés szerint az eszköztippeket a triggerelem után helyezi el.

Az elemleírás aktiválása JavaScripten keresztül:

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

Jelölés

Az eszköztipphez szükséges jelölés csak egy dataattribútum, és titleazon a HTML-elemen, amelyen elemleírást szeretne kapni. Az eszköztippek generált jelölése meglehetősen egyszerű, bár megköveteli a pozíciót (alapértelmezés topszerint a bővítmény állítja be).

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

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-animation="".

Mód

$().tooltip(options)

Eszköztipp-kezelőt csatol egy elemgyűjteményhez.

.tooltip('show')

Megjeleníti egy elem elemleírását. Visszatér a hívóhoz, mielőtt az eszköztipp ténylegesen megjelenne (azaz az shown.bs.tooltipesemény bekövetkezte előtt). Ez az eszköztipp "kézi" aktiválásának tekinthető. A nulla hosszúságú címekkel rendelkező eszköztippek soha nem jelennek meg.

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

.tooltip('hide')

Elrejti az elem elemleírását. Visszatér a hívóhoz, mielőtt az eszköztipp ténylegesen el lett volna rejtve (azaz az hidden.bs.tooltipesemény bekövetkezte előtt). Ez az eszköztipp "kézi" aktiválásának tekinthető.

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

.tooltip('toggle')

Bekapcsolja az elem elemleírását. Visszatér a hívóhoz, mielőtt az eszköztipp ténylegesen megjelent vagy elrejtett volna (azaz a shown.bs.tooltipvagy hidden.bs.tooltipesemény bekövetkezte előtt). Ez az eszköztipp "kézi" aktiválásának tekinthető.

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

.tooltip('destroy')

Elrejti és megsemmisíti egy elem elemleírását. A delegálást használó eszköztippek (amelyek a selectorbeállítással jönnek létre ) nem semmisíthetők meg egyenként a leszármazott triggerelemeken.

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

Események

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

Popovers popover.js

Adjon hozzá kis tartalomfedvényeket, például az iPaden lévőket, bármely másodlagos információ tárolására szolgáló elemhez.

A nulla hosszúságú felugró ablakok soha nem jelennek meg.

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

Példák

Statikus popover

Négy lehetőség áll rendelkezésre: felül, jobb, alsó és balra igazítva.

Élő demó

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

Négy irány

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

Elvetés a következő kattintással

Az focuseseményindító segítségével elvetheti a felugró ablakokat a felhasználó következő kattintásakor.

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

Használat

Előugró ablakok engedélyezése JavaScripten keresztül:

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

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-animation="".

Mód

$().popover(options)

Inicializálja az elemgyűjtemény popovereit.

.popover('show')

Felfedi egy elem felbukkanását. Visszatér a hívóhoz, mielőtt a popover ténylegesen megjelenne (azaz az shown.bs.popoveresemény bekövetkezte előtt). Ez a popover "kézi" kiváltásának tekinthető. A nulla hosszúságú felugró ablakok soha nem jelennek meg.

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

.popover('hide')

Elrejti egy elem felbukkanását. Visszatér a hívóhoz, mielőtt a popover ténylegesen el lett volna rejtve (azaz az hidden.bs.popoveresemény bekövetkezte előtt). Ez a popover "kézi" kiváltásának tekinthető.

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

.popover('toggle')

Bekapcsolja az elem felbukkanását. Visszatér a hívóhoz, mielőtt a popover ténylegesen megjelenne vagy elrejtésre kerülne (azaz a shown.bs.popovervagy hidden.bs.popoveresemény bekövetkezése előtt). Ez a popover "kézi" kiváltásának tekinthető.

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

.popover('destroy')

Elrejti és megsemmisíti egy elem felbukkanását. A delegálást használó felugró ablakok (amelyek a selectorbeállítással jönnek létre ) nem semmisíthetők meg egyenként a leszármazott triggerelemeken.

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

Események

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

Figyelmeztető üzenetek alert.js

Példa figyelmeztetések

Adja hozzá az elvetés funkciót az összes figyelmeztető üzenethez ezzel a bővítménnyel.

A .closegomb használatakor annak az első gyermeknek kell lennie, .alert-dismissibleés nem kerülhet szöveges tartalom elé a jelölésben.

Használat

Csak adja hozzá data-dismiss="alert"a bezárás gombot, hogy automatikusan riasztási bezárási funkciót adjon. A riasztás bezárása eltávolítja a DOM-ból.

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

Ha azt szeretné, hogy a riasztások bezáráskor animációt használjanak, győződjön meg arról, hogy a .fadeés .inosztályok már vonatkoznak rájuk.

Mód

$().alert()

data-dismiss="alert"Figyelmeztetést tesz az attribútummal rendelkező leszármazott elemek kattintási eseményeire . (Nem szükséges a data-api automatikus inicializálása esetén.)

$().alert('close')

Bezár egy riasztást a DOM-ból való eltávolításával. Ha a .fadeés .inosztályok jelen vannak az elemen, a riasztás elhalványul, mielőtt eltávolítaná.

Események

A Bootstrap riasztási beépülő modulja felfed néhány eseményt a riasztási funkciókhoz való csatlakozáshoz.

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

Gombok button.js

Többet tehet a gombokkal. Vezérlő gombállapotokat vagy gombcsoportokat hozhat létre több összetevőhöz, például eszköztárhoz.

Állítólagos

Hozzáadás data-loading-text="Loading..."a gomb betöltési állapotának használatához.

Ez a funkció a v3.3.5 óta elavult, és a 4-es verzióban eltávolították.

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

Egyetlen kapcsoló

Hozzáadás data-toggle="button"az egyetlen gombon történő váltás aktiválásához.

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

Jelölőnégyzet / Rádió

Adjon data-toggle="buttons"hozzá egy .btn-groupjelölőnégyzetet vagy rádióbemeneteket a megfelelő stílusok közötti váltáshoz.

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

Mód

$().button('toggle')

Bekapcsolja a push állapotot. Azt a látszatot kölcsönzi a gombnak, mintha aktiválva lett volna.

$().button('reset')

Visszaállítja a gomb állapotát – a szöveget eredeti szövegre cseréli. Ez a módszer aszinkron, és a visszaállítás tényleges befejezése előtt tér vissza.

$().button(string)

Lecseréli a szöveget bármely adatban meghatározott szövegállapotra.

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

Collapse collapse.js

Rugalmas bővítmény, amely maroknyi osztályt használ az egyszerű váltási viselkedés érdekében.

Példa

Kattintson az alábbi gombokra egy másik elem megjelenítéséhez és elrejtéséhez osztálymódosításokon keresztül:

• .collapsetartalmat rejt
• .collapsingátmenetek során alkalmazzák
• .collapse.intartalmat mutat

Használhat hivatkozást az hrefattribútumhoz, vagy gombot az data-targetattribútumhoz. Mindkét esetben data-toggle="collapse"kötelező.

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

Példa harmonika

Az alapértelmezett összecsukási viselkedés kiterjesztése harmonika létrehozásához a panel összetevővel.

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

Lehetőség van az .panel-bodys-t .list-groups-re cserélni.

Használat

A collapse plugin néhány osztályt használ a nehéz emelés kezelésére:

• .collapseelrejti a tartalmat
• .collapse.inmutatja a tartalmat
• .collapsinghozzáadódik az átmenet megkezdésekor, és eltávolítja, amikor befejeződik

Ezek az osztályok itt találhatók component-animations.less.

Adatattribútumokon keresztül

Csak adja hozzá az elemhez data-toggle="collapse"és az data-targeta-t, hogy automatikusan hozzárendelje az összecsukható elem vezérlését. Az data-targetattribútum elfogad egy CSS-választót az összecsukás alkalmazásához. Feltétlenül adja hozzá az osztályt collapseaz összecsukható elemhez. Ha azt szeretné, hogy alapértelmezetten megnyíljon, adja hozzá a további osztályt in.

Ha harmonikaszerű csoportkezelést szeretne hozzáadni egy összecsukható vezérlőhöz, adja hozzá a data attribútumot data-parent="#selector". Tekintse meg a bemutatót, hogy megtekinthesse ezt működés közben.

JavaScripten keresztül

Manuális engedélyezés a következőkkel:

$('.collapse').collapse()

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-parent="".

Mód

.collapse(options)

A tartalmat összecsukható elemként aktiválja. Elfogad egy opcionális opciót object.

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

.collapse('toggle')

Az összecsukható elemet megjelenített vagy rejtett állapotba kapcsolja. Visszatér a hívóhoz, mielőtt az összecsukható elem ténylegesen megjelenne vagy elrejtődne (azaz mielőtt a shown.bs.collapsevagy hidden.bs.collapseesemény bekövetkezne).

.collapse('show')

Összecsukható elemet jelenít meg. Visszatér a hívóhoz, mielőtt az összecsukható elem ténylegesen megjelenne (azaz az shown.bs.collapseesemény bekövetkezte előtt).

.collapse('hide')

Elrejti az összecsukható elemet. Visszatér a hívóhoz, mielőtt az összecsukható elem ténylegesen el lett volna rejtve (azaz az hidden.bs.collapseesemény bekövetkezte előtt).

Események

A Bootstrap összecsukási osztálya felfed néhány eseményt az összecsukási funkcióhoz való kapcsolódáshoz.

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

Carousel carousel.js

Diavetítés-összetevő az elemek közötti kerékpározáshoz, például egy körhinta. A beágyazott körhinta nem támogatott.

Példák

Előző Következő

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

Választható feliratok

Egyszerűen adhat feliratokat diákjaihoz a .carousel-captiontetszőleges elemen belül .item. Helyezzen el szinte bármilyen opcionális HTML-t, és a rendszer automatikusan igazítja és formázza.

Az első dia címke

Nulla vitae elit libero, a pharetra augue mollis interdum.

Második diacímke

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Harmadik dia címke

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Előző Következő

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

Használat

Több körhinta

A körhinta vezérlőinek megfelelő működéséhez ida legkülső tartályon (a ) kell használni . .carouselHa több körhintat ad hozzá, vagy ha módosít egy körhintat id, ne felejtse el frissíteni a megfelelő vezérlőket.

Adatattribútumokon keresztül

Használjon adatattribútumokat a körhinta helyzetének egyszerű szabályozásához. data-slideelfogadja a prevvagy kulcsszavakat next, amely megváltoztatja a dia helyzetét az aktuális pozícióhoz képest. Alternatív megoldásként használjadata-slide-to a nyers diaindexet a körhintahoz data-slide-to="2", amely eltolja a dia pozícióját egy adott indexre, kezdve a -val 0.

Az data-ride="carousel"attribútum a körhinta animációsként való megjelölésére szolgál az oldal betöltésével kezdődően.Nem használható ugyanazon körhinta (redundáns és szükségtelen) explicit JavaScript inicializálásával együtt.

JavaScripten keresztül

Körhinta kézi hívása a következőkkel:

$('.carousel').carousel()

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-interval="".

Mód

.carousel(options)

Inicializálja a körhinta egy opcionális opcióval object, és elkezdi az elemek közötti kerékpározást.

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

.carousel('cycle')

Balról jobbra körbejárja a körhinta elemeit.

.carousel('pause')

Megakadályozza, hogy a körhinta az elemek között mozogjon.

.carousel(number)

A körhinta egy adott kerethez kapcsolja (0 alapú, hasonlóan egy tömbhöz).

.carousel('prev')

Az előző elemre vált.

.carousel('next')

Ugrás a következő elemre.

Események

A Bootstrap körhinta osztálya két eseményt tesz közzé a körhinta funkcióihoz való kapcsolódáshoz.

Mindkét esemény a következő további tulajdonságokkal rendelkezik:

• direction: A körhinta csúszási iránya ( "left"vagy "right").
• relatedTarget: Az aktív elemként a helyére csúsztatott DOM-elem.

Minden körhinta esemény magára a körhintara (azaz a <div class="carousel">) indul.

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

Affix affix.js

Példa

Az affix beépülő modul position: fixed;be- és kikapcsol, emulálja a -val talált effektust position: sticky;. A jobb oldali alnavigáció az affix plugin élő bemutatója.

Használat

Használja az affix beépülő modult adatattribútumokon keresztül vagy manuálisan a saját JavaScript használatával.Mindkét esetben meg kell adnia a CSS-t a csatolt tartalom elhelyezéséhez és szélességéhez.

Megjegyzés: A Safari renderelési hibája miatt ne használja az affix beépülő modult olyan elemen, amely viszonylag elhelyezett elemben található, például egy húzott vagy tolt oszlopban .

Pozicionálás CSS-en keresztül

Az affix plugin három osztály között vált, amelyek mindegyike egy adott állapotot képvisel: .affix, .affix-top, és .affix-bottom. Meg kell adnia a stílusokat, az position: fixed;on kivételével.affix kivételével – saját magának kell megadnia ezekhez az osztályokhoz (a beépülő modultól függetlenül), hogy kezelje a tényleges pozíciókat.

Az affix beépülő modul a következőképpen működik:

1. Az indításhoz a bővítmény hozzáadja.affix-top , jelezve, hogy az elem a legfelső pozícióban van. Ezen a ponton nincs szükség CSS pozicionálásra.
2. A rögzíteni kívánt elem melletti görgetésnek ki kell váltania a tényleges rögzítést. Ez az a hely, ahol .affixlecseréli .affix-topés beállítja position: fixed;(a Bootstrap CSS-je biztosítja).
3. Ha alsó eltolás van definiálva, akkor annak mögé görgetve helyére kell .affixlépnie .affix-bottom. Mivel az eltolások nem kötelezőek, az egyik beállításához be kell állítani a megfelelő CSS-t. Ebben az esetben adjon hozzá, position: absolute;amikor szükséges. A beépülő modul a data attribútumot vagy a JavaScript beállítást használja annak meghatározására, hogy honnan helyezze el az elemet.

Kövesse a fenti lépéseket a CSS beállításához az alábbi használati lehetőségek bármelyikéhez.

Adatattribútumokon keresztül

A toldalékolási viselkedés egyszerű hozzáadásához bármely elemhez egyszerűen adja hozzádata-spy="affix" azt az elemet, amely után kémkedni szeretne. Használja az eltolásokat annak meghatározására, hogy mikor kell átkapcsolni egy elem rögzítését.

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

JavaScripten keresztül

Hívja meg az affix beépülő modult JavaScripten keresztül:

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

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-offset-top="200".

Mód

.affix(options)

A tartalmat csatolt tartalomként aktiválja. Elfogad egy opcionális opciót object.

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

.affix('checkPosition')

Újraszámítja a toldalék állapotát a vonatkozó elemek méretei, helyzete és görgetési pozíciója alapján. A .affix, .affix-top, és .affix-bottomosztályok az új állapotnak megfelelően kerülnek hozzáadásra vagy eltávolításra a hozzáfűzött tartalomhoz. Ezt a módszert minden alkalommal meg kell hívni, amikor a csatolt tartalom vagy a célelem mérete megváltozik, hogy biztosítsuk a csatolt tartalom helyes elhelyezését.

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

Események

A Bootstrap affix beépülő modulja felfed néhány eseményt az affix funkcióhoz való csatlakozáshoz.