Oorsig

Individueel of saamgestel

Inproppe kan individueel ingesluit word (met Bootstrap se individuele *.jslêers), of alles op een slag (met bootstrap.jsof die verkleinde bootstrap.min.js).

Data eienskappe

U kan alle Bootstrap-inproppe suiwer deur die markup API gebruik sonder om 'n enkele reël JavaScript te skryf. Dit is Bootstrap se eersteklas API en behoort u eerste oorweging te wees wanneer u 'n inprop gebruik.

Dit gesê, in sommige situasies kan dit wenslik wees om hierdie funksionaliteit af te skakel. Daarom bied ons ook die vermoë om die data-kenmerk API te deaktiveer deur alle gebeurtenisse op die dokument wat met 'n naamspasie is, te ontbind data-api. Dit lyk so:

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

Alternatiewelik, om 'n spesifieke inprop te teiken, sluit net die inprop se naam as 'n naamspasie saam met die data-api naamspasie soos volg in:

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

Programmatiese API

Ons glo ook dat u alle Bootstrap-inproppe bloot deur die JavaScript API moet kan gebruik. Alle publieke API's is enkelvoudige, kettingbare metodes, en gee die versameling waarop gereageer is, terug.

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

Alle metodes moet 'n opsionele opsie-objek aanvaar, 'n string wat 'n spesifieke metode teiken, of niks (wat 'n inprop met verstekgedrag inisieer):

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

Elke inprop stel ook sy rou konstruktor bloot op 'n Constructoreiendom: $.fn.popover.Constructor. As jy 'n spesifieke inprop-instansie wil kry, haal dit direk van 'n element af: $('[rel="popover"]').data('popover').

Oorspronklike stellings

Jy kan die verstekinstellings vir 'n inprop verander deur die inprop se Constructor.DEFAULTSvoorwerp te wysig:

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

Geen konflik nie

Soms is dit nodig om Bootstrap-inproppe met ander UI-raamwerke te gebruik. In hierdie omstandighede kan naamruimtebotsings soms voorkom. As dit gebeur, kan jy .noConflictdie inprop gebruik waarvan jy die waarde wil terugdraai.

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

Gebeurtenisse

Bootstrap bied pasgemaakte gebeurtenisse vir die meeste inproppe se unieke aksies. Oor die algemeen kom dit in 'n infinitief en verlede deelwoordvorm - waar die infinitief (bv. show) aan die begin van 'n gebeurtenis geaktiveer word, en sy verlede deelwoordvorm (bv. shown) word geaktiveer by die voltooiing van 'n aksie.

Vanaf 3.0.0 is alle Bootstrap-geleenthede met name gespasieer.

Alle infinitiewe gebeurtenisse bied preventDefaultfunksionaliteit. Dit bied die vermoë om die uitvoering van 'n aksie te stop voordat dit begin.

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

Sanitizer

Tooltips en Popovers gebruik ons ​​ingeboude ontsmettingsmiddel om opsies wat HTML aanvaar, te ontsmet.

Die verstekwaarde whiteListis die volgende:

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 jy nuwe waardes by hierdie verstek wil voeg whiteList, kan jy die volgende doen:

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 jy ons ontsmettingsmiddel wil omseil omdat jy verkies om 'n toegewyde biblioteek te gebruik, byvoorbeeld DOMPurify , moet jy die volgende doen:

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

Weergawe nommers

Die weergawe van elk van Bootstrap se jQuery-inproppe kan verkry word via die VERSIONeiendom van die inprop se konstruktor. Byvoorbeeld, vir die tooltip-inprop:

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

Geen spesiale terugvalle wanneer JavaScript gedeaktiveer is nie

Bootstrap se inproppe val nie besonder grasieus terug wanneer JavaScript gedeaktiveer is nie. As jy omgee vir die gebruikerservaring in hierdie geval, gebruik <noscript>om die situasie (en hoe om JavaScript te heraktiveer) aan jou gebruikers te verduidelik, en/of voeg jou eie gepasmaakte terugval by.

Oorgange transition.js

Oor oorgange

Vir eenvoudige oorgangseffekte, sluit transition.jseen keer langs die ander JS-lêers in. As jy die saamgestelde (of verkleineerde) bootstrap.jsgebruik, is dit nie nodig om dit in te sluit nie - dit is reeds daar.

Wat is binne

Transition.js is 'n basiese helper vir transitionEndgeleenthede sowel as 'n CSS-oorgangemulator. Dit word deur die ander inproppe gebruik om te kyk vir CSS-oorgangondersteuning en om hangende oorgange op te vang.

Deaktiveer oorgange

Oorgange kan wêreldwyd gedeaktiveer word deur die volgende JavaScript-brokkie te gebruik, wat moet kom nadat transition.js(of bootstrap.jsof bootstrap.min.js, na gelang van die geval) gelaai is:

$.support.transition = false

Modale modal.js

Modale is vaartbelynde, maar buigsame, dialoogopdragte met die minimum vereiste funksionaliteit en slim verstekke.

As gevolg van hoe HTML5 sy semantiek definieer, het die autofocusHTML-kenmerk geen effek in Bootstrap-modale nie. Om dieselfde effek te bereik, gebruik 'n paar persoonlike JavaScript:

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

Voorbeelde

Statiese voorbeeld

'n Weergegee modaal met kopskrif, liggaam en stel aksies in die voetskrif.

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

Regstreekse demo

Wissel 'n modaal via JavaScript deur op die knoppie hieronder te klik. Dit sal afgly en vervaag vanaf die bokant van die bladsy.

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

Opsionele groottes

Modale het twee opsionele groottes, beskikbaar via wysigerklasse om op 'n .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>

Verwyder animasie

Vir modale wat bloot verskyn eerder as om in te vervaag om te sien, verwyder die .fadeklas van jou modale opmaak.

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

Gebruik die roosterstelsel

Om voordeel te trek uit die Bootstrap-roosterstelsel binne 'n modale, maak net .rows binne die .modal-bodyen gebruik dan die normale roosterstelselklasse.

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

Wisselende modale inhoud gebaseer op snellerknoppie

Het jy 'n klomp knoppies wat almal dieselfde modaal aktiveer, net met effens verskillende inhoud? Gebruik event.relatedTargeten HTML- data-*kenmerke (moontlik via jQuery ) om die inhoud van die modaal te verander na gelang van watter knoppie geklik is. Sien die Modal Events-dokumente vir besonderhede oor 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)
})

Gebruik

Die modale inprop skakel jou verborge inhoud op aanvraag, via data-kenmerke of JavaScript. Dit dra ook by .modal-opentot die <body>om verstek blaai-gedrag te ignoreer en genereer 'n .modal-backdropom 'n klikarea te verskaf om gewysde modale te verwyder wanneer daar buite die modaal geklik word.

Via data-eienskappe

Aktiveer 'n modaal sonder om JavaScript te skryf. Stel data-toggle="modal"op 'n beheerderelement, soos 'n knoppie, saam met 'n data-target="#foo"of href="#foo"om 'n spesifieke modaal te rig om te wissel.

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

Via JavaScript

Roep 'n modaal met ID myModalmet 'n enkele reël JavaScript:

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-backdrop="".

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

Metodes

.modal(options)

Aktiveer jou inhoud as 'n modaal. Aanvaar 'n opsionele opsie object.

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

.modal('toggle')

Wissel 'n modaal handmatig. Keer terug na die oproeper voordat die modaal werklik gewys of versteek is (dws voordat die shown.bs.modalof hidden.bs.modalgebeurtenis plaasvind).

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

.modal('show')

Maak 'n modaal handmatig oop. Keer terug na die oproeper voordat die modaal werklik gewys is (dws voor die shown.bs.modalgebeurtenis plaasvind).

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

.modal('hide')

Versteek 'n modaal handmatig. Keer terug na die oproeper voordat die modaal eintlik versteek is (dws voor die hidden.bs.modalgebeurtenis plaasvind).

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

.modal('handleUpdate')

Herstel die modaal se posisionering om 'n skuifbalk teen te werk indien een sou verskyn, wat die modaal na links sou laat spring.

Slegs nodig wanneer die hoogte van die modaal verander terwyl dit oop is.

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

Gebeurtenisse

Bootstrap se modale klas stel 'n paar gebeurtenisse bloot om by modale funksionaliteit in te skakel.

Alle modale gebeurtenisse word op die modaal self afgevuur (dws by die <div class="modal">).

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

Dropdowns dropdown.js

Voorbeelde

Voeg aftrekkieslys by byna enigiets met hierdie eenvoudige inprop, insluitend die navigasiebalk, oortjies en pille.

Binne 'n navigasiebalk

Binne pille

Gebruik

.openVia data-kenmerke of JavaScript skakel die aftrek-inprop verborge inhoud (aftrekkieslyste) deur die klas op die ouerlysitem te wissel .

Op mobiele toestelle, die opening van 'n aftreklys voeg 'n .dropdown-backdropas 'n tikarea by om aftrekkieslyste toe te maak wanneer buite die spyskaart getik word, 'n vereiste vir behoorlike iOS-ondersteuning. Dit beteken dat die oorskakeling van 'n oop aftreklys na 'n ander aftreklys 'n ekstra tik op die selfoon vereis.

Let wel: Daar data-toggle="dropdown"word op die kenmerk staatgemaak vir die sluiting van aftrekkieslys op 'n toepassingsvlak, so dit is 'n goeie idee om dit altyd te gebruik.

Via data-eienskappe

Voeg data-toggle="dropdown"by 'n skakel of knoppie om 'n aftreklys te wissel.

<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 ongeskonde te hou met skakelknoppies, gebruik die data-targetkenmerk in plaas van 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>

Via JavaScript

Bel die aftreklys via JavaScript:

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

Opsies

Geen

Metodes

$().dropdown('toggle')

Wissel die aftreklys van 'n gegewe navigasiebalk of navigasie met oortjies.

Gebeurtenisse

Alle aftrek-gebeurtenisse word afgevuur by die .dropdown-menuse ouerelement.

Alle aftrek-gebeurtenisse het 'n relatedTargeteienskap waarvan die waarde die wissel-ankerelement is.

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

ScrollSpy scrollspy.js

Voorbeeld in navbar

Die ScrollSpy-inprop is vir die outomatiese opdatering van navigasieteikens gebaseer op rolposisie. Blaai deur die area onder die navigasiebalk en kyk hoe die aktiewe klas verander. Die aftrek-subitems sal ook uitgelig word.

Gebruik

Vereis relatiewe posisionering

Ongeag die implementeringsmetode, scrollspy vereis die gebruik van position: relative;op die element waarop jy spioeneer. In die meeste gevalle is dit die <body>. Wanneer u op ander elemente as die blaai <body>, maak seker dat u 'n heightstel het en overflow-y: scroll;toegepas het.

Via data-eienskappe

Om maklik scrollspy-gedrag by jou bobalknavigasie te voeg, voeg data-spy="scroll"by die element waarop jy wil spioeneer (meestal sal dit die <body>). Voeg dan die data-targetkenmerk by met die ID of klas van die ouerelement van enige Bootstrap- .navkomponent.

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>

Via JavaScript

Nadat u position: relative;u CSS bygevoeg het, skakel die scrollspy via JavaScript:

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

Metodes

.scrollspy('refresh')

Wanneer jy scrollspy gebruik in samewerking met die byvoeging of verwydering van elemente uit die DOM, moet jy die herlaaimetode soos volg noem:

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-offset="".

Gebeurtenisse

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

Wisselbare oortjies tab.js

Voorbeeld oortjies

Voeg vinnige, dinamiese oortjie-funksionaliteit by om deur vensters van plaaslike inhoud oor te skakel, selfs via aftrekkieslyste. Geneste oortjies word nie ondersteun nie.

Gebruik

Aktiveer tabbare oortjies via JavaScript (elke oortjie moet individueel geaktiveer word):

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

Jy kan individuele oortjies op verskeie maniere aktiveer:

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

Opmerk

Jy kan 'n oortjie- of pilnavigasie aktiveer sonder om enige JavaScript te skryf deur bloot 'n element te spesifiseer data-toggle="tab"of data-toggle="pill"op 'n element. Die byvoeging van die naven nav-tabsklasse by die oortjie ulsal die Bootstrap-oortjiestilering toepas , terwyl die byvoeging van die naven nav-pillsklasse pilstilering sal toepas .

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

Vervaag effek

Om oortjies te laat vervaag, voeg .fadeby elke .tab-pane. Die eerste oortjie-venster moet ook .indie aanvanklike inhoud sigbaar maak.

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

Metodes

$().tab

Aktiveer 'n oortjie-element en inhoudhouer. Tab moet óf 'n data-targetóf 'n hrefteiken 'n houer nodus in die DOM hê. In die bogenoemde voorbeelde is die oortjies die <a>s met data-toggle="tab"eienskappe.

.tab('show')

Kies die gegewe oortjie en wys die verwante inhoud daarvan. Enige ander oortjie wat voorheen gekies is, word ongekies en die verwante inhoud daarvan word versteek. Keer terug na die beller voordat die oortjie-venster werklik gewys is (dws voor die shown.bs.tabgebeurtenis plaasvind).

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

Gebeurtenisse

Wanneer 'n nuwe oortjie gewys word, begin die gebeure in die volgende volgorde:

1. hide.bs.tab(op die huidige aktiewe oortjie)
2. show.bs.tab(op die om te wys-oortjie)
3. hidden.bs.tab(op die vorige aktiewe oortjie, dieselfde een as vir die hide.bs.tabgeleentheid)
4. shown.bs.tab(op die nuut-aktiewe oortjie wat pas gewys is, dieselfde een as vir die show.bs.tabgeleentheid)

As geen oortjie reeds aktief was nie, sal die hide.bs.taben hidden.bs.tabgebeure nie geaktiveer word nie.

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

Tooltips tooltip.js

Geïnspireer deur die uitstekende jQuery.tipsy-inprop geskryf deur Jason Frame; Tooltips is 'n opgedateerde weergawe wat nie op beelde staatmaak nie, gebruik CSS3 vir animasies en data-kenmerke vir plaaslike titelberging.

Gereedskapwenke met titels van geen lengte word nooit vertoon nie.

Voorbeelde

Beweeg oor die skakels hieronder om nutswenke te sien:

Statiese nutswenk

Vier opsies is beskikbaar: bo-, regs-, onder- en linksbelyn.

Vier rigtings

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

Gebruik

Die tooltip-inprop genereer inhoud en opmaak op aanvraag, en plaas by verstek gereedskapwenke na hul snellerelement.

Aktiveer die nutswenk via JavaScript:

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

Opmerk

Die vereiste opmaak vir 'n nutswenk is slegs 'n datakenmerk en titleop die HTML-element wil jy 'n nutswenk hê. Die gegenereerde opmaak van 'n nutswenk is redelik eenvoudig, alhoewel dit 'n posisie vereis (by verstek gestel topdeur die inprop).

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-animation="".

Metodes

$().tooltip(options)

Heg 'n nutswenk-hanteerder aan 'n elementversameling.

.tooltip('show')

Onthul 'n element se nutswenk. Keer terug na die oproeper voordat die nutswenk werklik gewys is (dws voor die shown.bs.tooltipgebeurtenis plaasvind). Dit word beskou as 'n "handmatige" aktiveer van die nutswenk. Gereedskapwenke met titels van geen lengte word nooit vertoon nie.

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

.tooltip('hide')

Versteek 'n element se nutswenk. Keer terug na die beller voordat die nutswenk eintlik versteek is (dws voor diehidden.bs.tooltip gebeurtenis plaasvind). Dit word beskou as 'n "handmatige" aktiveer van die nutswenk.

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

.tooltip('toggle')

Wissel 'n element se nutswenk. Keer terug na die oproeper voordat die nutswenk werklik gewys of versteek is (dws voordat die shown.bs.tooltipof hidden.bs.tooltipgebeurtenis plaasvind). Dit word beskou as 'n "handmatige" aktiveer van die nutswenk.

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

.tooltip('destroy')

Versteek en vernietig 'n element se nutswenk. Gereedskapwenke wat delegering gebruik (wat met die selectoropsie geskep word ) kan nie individueel op afstammelinge-snellerelemente vernietig word nie.

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

Gebeurtenisse

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

Popovers popover.js

Voeg klein oorlegsels van inhoud, soos dié op die iPad, by enige element om sekondêre inligting te huisves.

Popovers waarvan beide titel en inhoud geen lengte het nie, word nooit vertoon nie.

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

Voorbeelde

Statiese popover

Vier opsies is beskikbaar: bo-, regs-, onder- en linksbelyn.

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

Vier rigtings

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

Maak toe met die volgende klik

Gebruik die focussneller om popovers af te maak met die volgende klik wat die gebruiker maak.

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

Gebruik

Aktiveer popovers via JavaScript:

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-animation="".

Metodes

$().popover(options)

Inisialiseer popovers vir 'n elementversameling.

.popover('show')

Onthul 'n element se popover. Keer terug na die oproeper voordat die popover werklik gewys is (dws voor die shown.bs.popovergebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die popover. Popovers waarvan beide titel en inhoud geen lengte het nie, word nooit vertoon nie.

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

.popover('hide')

Versteek 'n element se popover. Keer terug na die beller voordat die popover eintlik versteek is (dws voor diehidden.bs.popover gebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die popover.

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

.popover('toggle')

Wissel 'n element se popover. Keer terug na die beller voordat die popover werklik gewys of versteek is (dws voordat die shown.bs.popoverof hidden.bs.popovergebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die popover.

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

.popover('destroy')

Versteek en vernietig 'n element se popover. Popovers wat delegering gebruik (wat met die selectoropsie geskep word ) kan nie individueel op afstammelinge-snellerelemente vernietig word nie.

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

Gebeurtenisse

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

Waarskuwingsboodskappe alert.js

Voorbeeld waarskuwings

Voeg afwysfunksionaliteit by alle waarskuwingsboodskappe met hierdie inprop.

Wanneer 'n .closeknoppie gebruik word, moet dit die eerste kind van die wees .alert-dismissibleen geen teksinhoud mag daarvoor in die opmaak kom nie.

Gebruik

Voeg net data-dismiss="alert"by jou toemaakknoppie om outomaties 'n waarskuwingssluitingfunksie te gee. Die sluiting van 'n waarskuwing verwyder dit uit die DOM.

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

Om jou waarskuwings animasie te laat gebruik wanneer hulle toemaak, maak seker dat die .fadeen .inklasse reeds op hulle toegepas is.

Metodes

$().alert()

Laat 'n waarskuwing luister vir klikgebeurtenisse op afstammelinge elemente wat die data-dismiss="alert"kenmerk het. (Nie nodig wanneer die data-api se outo-initialisasie gebruik word nie.)

$().alert('close')

Maak 'n waarskuwing toe deur dit uit die DOM te verwyder. As die .fadeen .inklasse op die element teenwoordig is, sal die waarskuwing vervaag voordat dit verwyder word.

Gebeurtenisse

Bootstrap se waarskuwing-inprop stel 'n paar gebeurtenisse bloot om by waarskuwingsfunksies in te skakel.

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

Knoppies button.js

Doen meer met knoppies. Beheer knoppie state of skep groepe knoppies vir meer komponente soos nutsbalke.

Statig

Voeg data-loading-text="Loading..."by om 'n laaitoestand op 'n knoppie te gebruik.

Hierdie kenmerk is opgeskort sedert v3.3.5 en is in v4 verwyder.

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

Enkelwissel

Voeg data-toggle="button"by om skakeling op 'n enkele knoppie te aktiveer.

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

Merkblokkie / Radio

Voeg data-toggle="buttons"by 'n .btn-groupbevat-merkblokkie of radio-insette om te skakel in hul onderskeie style.

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

Metodes

$().button('toggle')

Wissel stootstatus. Gee die knoppie die voorkoms dat dit geaktiveer is.

$().button('reset')

Stel knoppiestatus terug - ruil teks na oorspronklike teks. Hierdie metode is asynchronies en keer terug voordat die terugstelling werklik voltooi is.

$().button(string)

Ruil teks om na enige data-gedefinieerde tekstoestand.

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

Vou collapse.js in

Buigsame inprop wat 'n handvol klasse gebruik vir maklike wisselgedrag.

Voorbeeld

Klik op die knoppies hieronder om 'n ander element te wys en te versteek via klasveranderinge:

• .collapseverberg inhoud
• .collapsingword tydens oorgange toegepas
• .collapse.ininhoud toon

Jy kan 'n skakel met die hrefkenmerk gebruik, of 'n knoppie met die data-targetkenmerk. In beide gevalle word die data-toggle="collapse"vereis.

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

Trekklavier voorbeeld

Brei die verstek invougedrag uit om 'n trekklavier met die paneelkomponent te skep.

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

Dit is ook moontlik om s uit te ruil .panel-bodymet .list-groups.

Gebruik

Die ineenstorting-inprop gebruik 'n paar klasse om die swaar opheffing te hanteer:

• .collapseverberg die inhoud
• .collapse.inwys die inhoud
• .collapsingword bygevoeg wanneer die oorgang begin, en verwyder wanneer dit klaar is

Hierdie klasse kan gevind word in component-animations.less.

Via data-eienskappe

Voeg net data-toggle="collapse"en 'n data-targetby die element om outomaties beheer van 'n opvoubare element toe te ken. Die data-targetkenmerk aanvaar 'n CSS-kieser om die ineenstorting op toe te pas. Maak seker dat jy die klas collapseby die opvoubare element voeg. As jy wil hê dit moet verstek oopmaak, voeg die bykomende klas by in.

Om trekklavieragtige groepbestuur by 'n opvoubare kontrole te voeg, voeg die data-kenmerk by data-parent="#selector". Verwys na die demo om dit in aksie te sien.

Via JavaScript

Aktiveer handmatig met:

$('.collapse').collapse()

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-parent="".

Metodes

.collapse(options)

Aktiveer jou inhoud as 'n opvoubare element. Aanvaar 'n opsionele opsie object.

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

.collapse('toggle')

Wissel 'n opvoubare element na gewys of versteek. Keer terug na die oproeper voordat die opvoubare element werklik gewys of versteek is (dws voordat die shown.bs.collapseof hidden.bs.collapsegebeurtenis plaasvind).

.collapse('show')

Toon 'n opvoubare element. Keer terug na die oproeper voordat die opvoubare element werklik gewys is (dws voor die shown.bs.collapsegebeurtenis plaasvind).

.collapse('hide')

Versteek 'n opvoubare element. Keer terug na die oproeper voordat die opvoubare element werklik versteek is (dws voor die hidden.bs.collapsegebeurtenis plaasvind).

Gebeurtenisse

Bootstrap se ineenstortingsklas ontbloot 'n paar gebeurtenisse vir inskakeling by ineenstortingsfunksionaliteit.

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

Carrousel carousel.js

'n Skyfievertoning-komponent vir fietsry deur elemente, soos 'n karrousel. Geneste karrousels word nie ondersteun nie.

Voorbeelde

Vorige Volgende

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

Opsionele onderskrifte

Voeg byskrifte maklik by jou skyfies met die .carousel-captionelement binne enige .item. Plaas omtrent enige opsionele HTML daarin en dit sal outomaties in lyn gebring en geformateer word.

Eerste skyfie etiket

Nulla vitae elit libero, 'n pharetra augue mollis interdum.

Tweede skyfie-etiket

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Derde skyfie-etiket

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Vorige Volgende

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

Gebruik

Veelvuldige karrousels

Karrousels vereis die gebruik van 'n idop die buitenste houer (die .carousel) vir karrouselkontroles om behoorlik te funksioneer. Wanneer u veelvuldige karrousels byvoeg, of wanneer u 'n karrousel se verander id, moet u die relevante kontroles opdateer.

Via data-eienskappe

Gebruik data-kenmerke om die posisie van die karrousel maklik te beheer. data-slideaanvaar die sleutelwoorde prevof next, wat die skuifposisie relatief tot sy huidige posisie verander. Alternatiewelik, gebruik data-slide-toom 'n rou skyfie-indeks na die karrousel deur te data-slide-to="2"gee, wat die skyfieposisie verskuif na 'n spesifieke indeks wat begin met 0.

Die data-ride="carousel"kenmerk word gebruik om 'n karrousel as animasie te merk vanaf bladsy laai. Dit kan nie in kombinasie met (oortollige en onnodige) eksplisiete JavaScript-inisialisering van dieselfde karrousel gebruik word nie.

Via JavaScript

Bel karrousel handmatig met:

$('.carousel').carousel()

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-interval="".

Metodes

.carousel(options)

Inisialiseer die karrousel met 'n opsionele opsies objecten begin deur items ry.

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

.carousel('cycle')

Blaai deur die karrousel-items van links na regs.

.carousel('pause')

Stop die karrousel om deur items te fiets.

.carousel(number)

Sit die karrousel na 'n spesifieke raam (0 gebaseer, soortgelyk aan 'n skikking).

.carousel('prev')

Blaai na die vorige item.

.carousel('next')

Blaai na die volgende item.

Gebeurtenisse

Bootstrap se karrouselklas stel twee gebeurtenisse bloot vir inhaak by karrouselfunksionaliteit.

Albei geleenthede het die volgende bykomende eienskappe:

• direction: Die rigting waarin die karrousel gly (óf "left"óf "right").
• relatedTarget: Die DOM-element wat in plek geskuif word as die aktiewe item.

Alle karrouselgebeurtenisse word op die karrousel self afgevuur (dws by die <div class="carousel">).

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

Plak affix.js

Voorbeeld

Die affix-inprop position: fixed;skakel aan en af, wat die effek wat met position: sticky;. Die subnavigasie aan die regterkant is 'n lewendige demonstrasie van die affix-inprop.

Gebruik

Gebruik die affix-inprop via data-kenmerke of handmatig met jou eie JavaScript. In beide situasies moet jy CSS verskaf vir die posisionering en breedte van jou aangehegte inhoud.

Let wel: Moenie die aanbring-inprop gebruik op 'n element wat in 'n relatief geposisioneerde element voorkom nie, soos 'n getrekte of gedrukte kolom, as gevolg van 'n Safari-weergawe fout .

Posisionering via CSS

Die affix-inprop wissel tussen drie klasse, wat elkeen 'n spesifieke toestand verteenwoordig: .affix, .affix-top, en .affix-bottom. Jy moet self die style verskaf, met die uitsondering van position: fixed;op .affix, vir hierdie klasse (onafhanklik van hierdie inprop) om die werklike posisies te hanteer.

Hier is hoe die affix-inprop werk:

1. Om te begin, voeg die inprop by .affix-topom aan te dui dat die element in sy boonste posisie is. Op hierdie stadium is geen CSS-posisionering nodig nie.
2. As jy verby die element blaai wat jy wil aanbring, behoort die werklike aanhegting te aktiveer. Dit is waar .affixvervang .affix-topen stel position: fixed;(verskaf deur Bootstrap se CSS).
3. As 'n onderste verskuiwing gedefinieer is, moet jy verby dit vervang .affixmet .affix-bottom. Aangesien afwykings opsioneel is, vereis die instelling van een dat u die toepaslike CSS instel. In hierdie geval, voeg by position: absolute;wanneer nodig. Die inprop gebruik die data-kenmerk of JavaScript-opsie om te bepaal waar die element van daar af geplaas moet word.

Volg die stappe hierbo om jou CSS vir enige van die gebruiksopsies hieronder te stel.

Via data-eienskappe

Om maklik aanbringgedrag by enige element te voeg, voeg net by data-spy="affix"die element waarna jy wil spioeneer. Gebruik afwykings om te definieer wanneer om die vaspen van 'n element te wissel.

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

Via JavaScript

Bel die affix-inprop via JavaScript:

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-offset-top="200".

Metodes

.affix(options)

Aktiveer jou inhoud as aangehegte inhoud. Aanvaar 'n opsionele opsie object.

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

.affix('checkPosition')

Herbereken die toestand van die aanhegting gebaseer op die afmetings, posisie en rolposisie van die relevante elemente. Die .affix, .affix-top, en .affix-bottomklasse word bygevoeg by of verwyder van die aangehegte inhoud volgens die nuwe toestand. Hierdie metode moet aangeroep word wanneer die afmetings van die aangehegte inhoud of die teikenelement verander word, om die korrekte posisionering van die aangehegte inhoud te verseker.

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

Gebeurtenisse

Bootstrap se affix-inprop stel 'n paar gebeurtenisse bloot om by affix-funksionaliteit in te skakel.