Oersicht

Yndividueel of gearstald

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

Data attributen

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

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

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

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

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

Programmatyske API

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

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

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

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

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

Standertynstellings

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

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

Gjin konflikt

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

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

Eveneminten

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

Fanôf 3.0.0 binne alle Bootstrap-eveneminten nammespaced.

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

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

Sanitizer

Tooltips en Popovers brûke ús ynboude sanitizer om opsjes te sanearjen dy't HTML akseptearje.

De standertwearde whiteListis de folgjende:

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

As jo ​​nije wearden taheakje wolle oan dizze standert whiteListkinne jo it folgjende dwaan:

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)

As jo ​​​​ús sanitizer wolle omgean om't jo leaver in tawijd bibleteek brûke, bygelyks DOMPurify , moatte jo it folgjende dwaan:

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

Ferzje nûmers

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

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

Gjin spesjale fallbacks as JavaScript is útskeakele

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

Transysjes transition.js

Oer transysjes

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

Wat is der binnen

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

Transysjes útskeakelje

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

$.support.transition = false

Modals modal.js

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

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

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

Foarbylden

Statyske foarbyld

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

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Live demo

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Opsjonele maten

Modals hawwe twa opsjoneel maten, beskikber fia modifier klassen wurde pleatst op in .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade" 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>

Fuortsmite animaasje

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

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

Mei help fan it grid systeem

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

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Ferskillende modale ynhâld basearre op triggerknop

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

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Gebrûk

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

Fia data attributen

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

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

Fia JavaScript

Rop in modaal mei id myModalmei ien line fan JavaScript:

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

Opsjes

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

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

Metoaden

.modal(options)

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

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

.modal('toggle')

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

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

.modal('show')

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

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

.modal('hide')

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

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

.modal('handleUpdate')

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

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

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

Eveneminten

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

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

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

Dropdowns dropdown.js

Foarbylden

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

Binnen in navigaasjebalke

Binnen pillen

Gebrûk

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

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

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

Fia data attributen

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

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Om URL's yntakt te hâlden mei keppelingsknoppen, brûk it data-targetattribút ynstee fan href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Fia JavaScript

Rop de dropdowns fia JavaScript:

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

Opsjes

Gjin

Metoaden

$().dropdown('toggle')

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

Eveneminten

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

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

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

ScrollSpy scrollspy.js

Foarbyld yn navbar

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

Gebrûk

Fereasket relative posisjonearring

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

Fia data attributen

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

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Fia JavaScript

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

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

Metoaden

.scrollspy('refresh')

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

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

Opsjes

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

Eveneminten

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

Togglable ljeppers tab.js

Foarbyld ljeppers

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

Gebrûk

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

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

Jo kinne yndividuele ljeppers op ferskate manieren aktivearje:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Markup

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

<div>

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

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

</div>

Fade effekt

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

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

Metoaden

$().tab

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

.tab('show')

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

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

Eveneminten

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

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

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

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

Tooltips tooltip.js

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

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

Foarbylden

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

Statyske tooltip

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

Fjouwer rjochtingen

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

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

Gebrûk

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

Trigger de tooltip fia JavaScript:

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

Markup

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

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Opsjes

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

Metoaden

$().tooltip(options)

Hechtet in tooltip handler oan in elemint kolleksje.

.tooltip('show')

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

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

.tooltip('hide')

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

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

.tooltip('toggle')

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

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

.tooltip('destroy')

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

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

Eveneminten

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

Popovers popover.js

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

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

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

Foarbylden

Statyske popover

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

Live demo

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Fjouwer rjochtingen

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

Ferwiderje by folgjende klik

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

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

Gebrûk

Popovers ynskeakelje fia JavaScript:

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

Opsjes

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

Metoaden

$().popover(options)

Inisjalisearje popovers foar in elemint kolleksje.

.popover('show')

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

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

.popover('hide')

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

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

.popover('toggle')

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

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

.popover('destroy')

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

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

Eveneminten

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

Alert berjochten alert.js

Foarbyld alerts

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

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

Gebrûk

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

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

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

Metoaden

$().alert()

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

$().alert('close')

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

Eveneminten

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

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

Knoppen button.js

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

Stateful

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

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

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

Single skeakel

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

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

Checkbox / Radio

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

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

Metoaden

$().button('toggle')

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

$().button('reset')

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

$().button(string)

Ruilet tekst nei alle gegevens definieare teksttastân.

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

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

Collapse collapse.js

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

Foarbyld

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

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

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

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Foarbyld fan Akkordeon

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

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

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

Gebrûk

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

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

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

Fia data attributen

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

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

Fia JavaScript

Ynskeakelje manuell mei:

$('.collapse').collapse()

Opsjes

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

Metoaden

.collapse(options)

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

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

.collapse('toggle')

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

.collapse('show')

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

.collapse('hide')

Ferberget in ynklapber elemint. Keart werom nei de beller foardat it ynklapbere elemint eins ferburgen is (dus foar dehidden.bs.collapse barren bart).

Eveneminten

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

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

Carousel carousel.js

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

Foarbylden

Foarige Folgjende

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Opsjonele ûndertitels

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

Earste slide label

Nulla vitae elit libero, in pharetra augue mollis interdum.

Twadde slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tredde slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Foarige Folgjende

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

Gebrûk

Meardere karrousels

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

Fia data attributen

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

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

Fia JavaScript

Rop karrousel manuell mei:

$('.carousel').carousel()

Opsjes

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

Metoaden

.carousel(options)

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

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

.carousel('cycle')

Cycles troch de karrousel items fan links nei rjochts.

.carousel('pause')

Stopt de karrousel fan it fytsen troch items.

.carousel(number)

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

.carousel('prev')

Cycles nei it foarige item.

.carousel('next')

Cycles nei it folgjende item.

Eveneminten

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

Beide eveneminten hawwe de folgjende ekstra eigenskippen:

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

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

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

Affix affix.js

Foarbyld

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

Gebrûk

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

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

Posysje fia CSS

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

Hjir is hoe't de affix-plugin wurket:

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

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

Fia data attributen

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

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

Fia JavaScript

Rop de affix-plugin fia JavaScript:

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

Opsjes

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

Metoaden

.affix(options)

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

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

.affix('checkPosition')

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

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

Eveneminten

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