Översikt

Individuell eller sammanställd

Plugins kan inkluderas individuellt (med Bootstraps individuella *.jsfiler), eller alla på en gång (med bootstrap.jseller den minifierade bootstrap.min.js).

Använder det kompilerade JavaScriptet

Både bootstrap.jsoch bootstrap.min.jsinnehåller alla plugins i en enda fil. Inkludera endast en.

Plugin-beroenden

Vissa plugins och CSS-komponenter är beroende av andra plugins. Om du inkluderar insticksprogram individuellt, se till att kontrollera dessa beroenden i dokumenten. Observera också att alla plugins är beroende av jQuery (det betyder att jQuery måste inkluderas före plugin-filerna). Konsultera vårbower.json för att se vilka versioner av jQuery som stöds.

Dataattribut

Du kan använda alla Bootstrap-plugins enbart genom markup-API:et utan att skriva en enda rad JavaScript. Detta är Bootstraps förstklassiga API och bör vara ditt första övervägande när du använder ett plugin.

Som sagt, i vissa situationer kan det vara önskvärt att stänga av den här funktionen. Därför tillhandahåller vi också möjligheten att inaktivera dataattributet API genom att avbinda alla händelser i dokumentet med namnintervall data-api. Det här ser ut så här:

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

Alternativt, för att rikta in sig på ett specifikt plugin, inkludera bara pluginens namn som ett namnområde tillsammans med data-api-namnområdet så här:

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

Endast en plugin per element via dataattribut

Använd inte dataattribut från flera plugins på samma element. Till exempel kan en knapp inte både ha ett verktygstips och växla en modal. För att åstadkomma detta, använd ett omslagselement.

Programmatisk API

Vi tror också att du bör kunna använda alla Bootstrap-plugins enbart genom JavaScript API. Alla offentliga API:er är enkla, kedjabara metoder och returnerar den samling som åtgärdats.

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

Alla metoder bör acceptera ett valfritt alternativobjekt, en sträng som riktar sig mot en viss metod, eller ingenting (som initierar en plugin med standardbeteende):

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

Varje plugin exponerar också sin råkonstruktör på en Constructoregenskap: $.fn.popover.Constructor. Om du vill skaffa en viss plugin-instans, hämta den direkt från ett element: $('[rel="popover"]').data('popover').

Standardinställningar

Du kan ändra standardinställningarna för en plugin genom att ändra pluginens Constructor.DEFAULTSobjekt:

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

Ingen konflikt

Ibland är det nödvändigt att använda Bootstrap-plugins med andra UI-ramverk. Under dessa omständigheter kan namnutrymmeskollisioner ibland inträffa. Om detta händer kan du anropa .noConflictplugin-programmet du vill återställa värdet på.

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

evenemang

Bootstrap tillhandahåller anpassade händelser för de flesta plugins unika åtgärder. Generellt kommer dessa i en infinitiv och participform - där infinitiv (ex. show) utlöses i början av en händelse, och dess participform (ex. shown) utlöses vid fullbordandet av en handling.

Från och med 3.0.0 är alla Bootstrap-händelser med namn.

Alla infinitiva händelser ger preventDefaultfunktionalitet. Detta ger möjlighet att stoppa utförandet av en åtgärd innan den startar.

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

Versionsnummer

Versionen av var och en av Bootstraps jQuery-plugin-program kan nås via VERSIONegendomen hos plugin-konstruktören. Till exempel för verktygstipsplugin:

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

Inga speciella fallbacks när JavaScript är inaktiverat

Bootstraps plugins faller inte tillbaka särskilt graciöst när JavaScript är inaktiverat. Om du bryr dig om användarupplevelsen i det här fallet, använd <noscript>för att förklara situationen (och hur du återaktiverar JavaScript) för dina användare och/eller lägg till dina egna anpassade reservalternativ.

Tredjepartsbibliotek

Bootstrap stöder inte officiellt JavaScript-bibliotek från tredje part som Prototype eller jQuery UI. Trots .noConflictoch namnavgränsade händelser kan det finnas kompatibilitetsproblem som du måste åtgärda på egen hand.

Övergångar transition.js

Om övergångar

För enkla övergångseffekter, inkludera transition.jsen gång tillsammans med de andra JS-filerna. Om du använder det kompilerade (eller minifierade) bootstrap.jsbehöver du inte inkludera detta – det finns redan där.

Vad finns inuti

Transition.js är en grundläggande hjälpare för transitionEndevenemang såväl som en CSS-övergångsemulator. Det används av andra plugins för att söka efter CSS-övergångsstöd och för att fånga hängande övergångar.

Inaktiverar övergångar

Övergångar kan inaktiveras globalt med hjälp av följande JavaScript-kodavsnitt, som måste komma efter att transition.js(eller bootstrap.jseller bootstrap.min.js, i förekommande fall) har laddats:

$.support.transition = false

Modals modal.js

Modalerna är strömlinjeformade men flexibla dialogrutiner med minsta möjliga funktionalitet och smarta standardinställningar.

Flera öppna modaler stöds inte

Se till att inte öppna en modal medan en annan fortfarande är synlig. Att visa mer än en modal åt gången kräver anpassad kod.

Modal markup placering

Försök alltid att placera en modals HTML-kod på en översta nivå i ditt dokument för att undvika att andra komponenter påverkar modalens utseende och/eller funktionalitet.

Varningar för mobila enheter

Det finns några varningar när det gäller att använda modaler på mobila enheter. Se våra webbläsarsupportdokument för detaljer.

På grund av hur HTML5 definierar sin semantik har autofocusHTML-attributet ingen effekt i Bootstrap-modaler. För att uppnå samma effekt, använd lite anpassat JavaScript:

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

Exempel

Statiskt exempel

En renderad modal med sidhuvud, brödtext och uppsättning åtgärder i sidfoten.

<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

Växla en modal via JavaScript genom att klicka på knappen nedan. Den kommer att glida ned och tona in från toppen av sidan.

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

Gör modalerna tillgängliga

Var noga med att lägga till role="dialog"och aria-labelledby="...", med hänvisning till den modala titeln, till .modaloch role="document"till sig .modal-dialogsjälv.

Dessutom kan du ge en beskrivning av din modala dialogruta med aria-describedby.modal.

Bädda in YouTube-videor

Att bädda in YouTube-videor i modals kräver ytterligare JavaScript som inte finns i Bootstrap för att automatiskt stoppa uppspelningen och mer. Se detta användbara Stack Overflow-inlägg för mer information.

Valfria storlekar

Modalerna har två valfria storlekar, tillgängliga via modifieringsklasser för att placeras på en .modal-dialog.

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

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

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

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Ta bort animation

För modaler som helt enkelt visas istället för att tona in för att visa, ta bort .fadeklassen från din modala uppmärkning.

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

Använda rutsystemet

För att dra fördel av Bootstrap-rutnätssystemet inom en modal, kapslar du bara .rows inom .modal-bodyoch använder sedan de normala rutsystemklasserna.

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

Har du ett gäng knappar som alla utlöser samma modal, bara med lite olika innehåll? Använd event.relatedTargetoch HTML- data-*attribut (eventuellt via jQuery ) för att variera innehållet i modalen beroende på vilken knapp som klickades på. Se dokumentationen för Modal Events för detaljer om relatedTarget,

...fler knappar...
<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)
})

Användande

Modal plugin växlar ditt dolda innehåll på begäran, via dataattribut eller JavaScript. Det lägger också .modal-opentill <body>att åsidosätta standardrullningsbeteendet och genererar ett .modal-backdropför att tillhandahålla ett klickområde för att avvisa visade modaler när du klickar utanför modalen.

Via dataattribut

Aktivera en modal utan att skriva JavaScript. Ställ in data-toggle="modal"på ett kontrollelement, som en knapp, tillsammans med en data-target="#foo"eller href="#foo"för att rikta in en specifik modal att växla.

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

Via JavaScript

Anropa en modal med id myModalmed en enda rad JavaScript:

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

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-backdrop="".

namn typ standard beskrivning
bakgrund boolesk eller strängen'static' Sann Inkluderar ett modal-bakgrundselement. Alternativt, ange staticför en bakgrund som inte stänger modalen vid klick.
tangentbord booleskt Sann Stänger modalen när escape-tangenten trycks ned
show booleskt Sann Visar modalen när den initieras.
avlägsen väg falsk

Detta alternativ är utfasat sedan v3.3.0 och har tagits bort i v4. Vi rekommenderar istället att använda mallar på klientsidan eller ett databindningsramverk, eller att själv anropa jQuery.load .

Om en fjärr-URL tillhandahålls kommer innehållet att laddas en gång via jQuerys loadmetod och injiceras i .modal-contentdiv. Om du använder data-api kan du alternativt använda hrefattributet för att ange fjärrkällan. Ett exempel på detta visas nedan:

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

Metoder

Aktiverar ditt innehåll som en modal. Accepterar ett valfritt alternativ object.

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

Växlar manuellt en modal. Återgår till den som ringer innan modalen faktiskt har visats eller dolt (dvs innan händelsen shown.bs.modaleller hidden.bs.modalinträffar).

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

Öppnar en modal manuellt. Återgår till den som ringer innan modalen faktiskt har visats (dvs innan shown.bs.modalhändelsen inträffar).

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

Döljer en modal manuellt. Återgår till den som ringer innan modalen faktiskt har dolts (dvs innan hidden.bs.modalhändelsen inträffar).

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

Justerar om modalens positionering för att motverka en rullningslist i fall en skulle dyka upp, vilket skulle få modalen att hoppa till vänster.

Behövs endast när höjden på modalen ändras medan den är öppen.

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

evenemang

Bootstraps modalklass avslöjar några händelser för att koppla in modal funktionalitet.

Alla modala händelser avfyras mot själva modalen (dvs. på <div class="modal">).

Event typ Beskrivning
show.bs.modal Denna händelse aktiveras omedelbart när showinstansmetoden anropas. Om det orsakas av ett klick är det klickade elementet tillgängligt som relatedTargetegenskapen för händelsen.
visad.bs.modal Denna händelse utlöses när modalen har gjorts synlig för användaren (väntar på att CSS-övergångar ska slutföras). Om det orsakas av ett klick är det klickade elementet tillgängligt som relatedTargetegenskapen för händelsen.
hide.bs.modal Denna händelse aktiveras omedelbart när hideinstansmetoden har anropats.
hidden.bs.modal Denna händelse utlöses när modalen har döljts för användaren (väntar på att CSS-övergångar ska slutföras).
laddad.bs.modal Den här händelsen aktiveras när modalen har laddat innehåll med remotealternativet.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

Lägg till rullgardinsmenyer till nästan vad som helst med detta enkla plugin, inklusive navigeringsfältet, flikar och piller.

Inom ett navigeringsfält

Inom piller

Via dataattribut eller JavaScript växlar rullgardinspluginen dolt innehåll (rullgardinsmenyer) genom att växla .openklassen på det överordnade listobjektet.

På mobila enheter lägger du till en rullgardinsmeny .dropdown-backdropsom ett tryckområde för att stänga rullgardinsmenyer när du trycker utanför menyn, ett krav för korrekt iOS-stöd. Det betyder att byte från en öppen rullgardinsmeny till en annan rullgardinsmeny kräver ett extra tryck på mobilen.

Obs: data-toggle="dropdown"Attributet används för att stänga rullgardinsmenyer på applikationsnivå, så det är en bra idé att alltid använda det.

Via dataattribut

Lägg data-toggle="dropdown"till en länk eller knapp för att växla en rullgardinsmeny.

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

För att hålla webbadresser intakta med länkknappar, använd data-targetattributet istället för 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

Ring rullgardinsmenyn via JavaScript:

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

data-toggle="dropdown"fortfarande krävs

Oavsett om du anropar din dropdown via JavaScript eller istället använder data-api, data-toggle="dropdown"måste alltid finnas på dropdownens triggerelement.

Ingen

Växlar rullgardinsmenyn för ett givet navigeringsfält eller navigering med flikar.

Alla rullgardinshändelser aktiveras på .dropdown-menu's överordnade element.

Alla rullgardinshändelser har en relatedTargetegenskap vars värde är det växlande ankarelementet.

Event typ Beskrivning
visa.bs.rullgardinsmeny Den här händelsen aktiveras omedelbart när metoden show-instans anropas.
visas.bs.rullgardinsmenyn Den här händelsen aktiveras när rullgardinsmenyn har gjorts synlig för användaren (väntar på att CSS-övergångar ska slutföras).
dölj.bs.rullgardinsmenyn Denna händelse utlöses omedelbart när metoden hide instans har anropats.
gömd.bs.rullgardinsmeny Den här händelsen aktiveras när rullgardinsmenyn har döljts för användaren (väntar på att CSS-övergångar ska slutföras).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Exempel i navbar

ScrollSpy-pluginen är till för att automatiskt uppdatera navigeringsmål baserat på rullningsposition. Bläddra i området under navigeringsfältet och se hur den aktiva klassen ändras. Underposterna i rullgardinsmenyn kommer också att markeras.

@fett

Annonsleggings keytar, brunch-id art party dolor labore. Pitchfork yr enim lo-fi innan de sålde slut qui. Tumblr cykelrättigheter från jord till bord oavsett. Anim keffiyeh carles kofta. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jeans shorts, williamsburg hoodie minim qui du förmodligen inte har hört talas om dem et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tatuerade accusamus, cred ironi biodiesel keffiyeh hantverkare ullamco consequat.

@mdo

Veniam marfa mustasch skateboard, adipisicing fugiat velit höggaffelskägg. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat fyra loko nisi, ea helvetica nulla carles. Tatuerad cosbytröja food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles icke-estetisk övning quis gentrify. Brooklyn adipisicing hantverksöl vice keytar deserunt.

ett

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS är adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, hållbar delectus consectetur fanny pack iphone.

två

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blogg, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche ironi, thundercats du förmodligen inte har hört talas om dem consequat hoodie glutenfri lo-fi fap aliquip. Labore elit placeat innan de sålde slut, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan hantverksöl seitan färdiggjord velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Användande

Kräver Bootstrap nav

Scrollspy kräver för närvarande användning av en Bootstrap nav-komponent för korrekt markering av aktiva länkar.

Lösbara ID-mål krävs

Navbar-länkar måste ha lösbara id-mål. Till exempel måste ett <a href="#home">home</a>måste motsvara något i DOM som <div id="home"></div>.

Icke- målelement :visibleignoreras

Målelement som inte är :visibleenligt jQuery kommer att ignoreras och deras motsvarande nav-objekt kommer aldrig att markeras.

Kräver relativ positionering

Oavsett implementeringsmetod kräver scrollspy användning av position: relative;elementet du spionerar på. I de flesta fall är detta <body>. När du scrollspionerar på andra element än <body>, se till att ha en heightuppsättning och overflow-y: scroll;tillämpad.

Via dataattribut

För att enkelt lägga till scrollspy-beteende till din toppfältsnavigering, lägg data-spy="scroll"till elementet du vill spionera på (vanligtvis skulle detta vara <body>). Lägg sedan till data-targetattributet med ID eller klass för det överordnade elementet för någon 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

Efter att ha lagt position: relative;till din CSS, ring scrollspy via JavaScript:

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

Metoder

.scrollspy('refresh')

När du använder scrollspy i kombination med att lägga till eller ta bort element från DOM, måste du anropa uppdateringsmetoden så här:

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

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-offset="".

namn typ standard beskrivning
offset siffra 10 Pixlar att förskjuta från toppen vid beräkning av rullningsposition.

evenemang

Event typ Beskrivning
activate.bs.scrollspy Denna händelse utlöses när ett nytt objekt aktiveras av scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Växlingsbara flikar tab.js

Exempel flikar

Lägg till snabb, dynamisk flikfunktion för övergång genom paneler med lokalt innehåll, även via rullgardinsmenyer. Kapslade flikar stöds inte.

Raw denim du förmodligen inte har hört talas om dem jeans shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustasch cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby tröja eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan amerikanska kläder, slaktare voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Utökar navigering med flikar

Denna plugin utökar navigeringskomponenten med flikar för att lägga till flikbara områden.

Användande

Aktivera flikar via JavaScript (varje flik måste aktiveras individuellt):

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

Du kan aktivera enskilda flikar på flera sätt:

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

Pålägg

Du kan aktivera en navigering med flikar eller piller utan att skriva något JavaScript genom att helt enkelt ange data-toggle="tab"eller data-toggle="pill"på ett element. Om du lägger till navklasserna nav-tabsoch på fliken ultillämpas Bootstrap- flikens stil , medan om du lägger till navklasserna nav-pillsoch tillämpas pillerstilen .

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

Tona effekt

För att få flikar att tona in, lägg .fadetill varje .tab-pane. Den första flikrutan måste också .ingöra det ursprungliga innehållet synligt.

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

Metoder

$().tab

Aktiverar ett flikelement och innehållsbehållare. Tab ska ha antingen en data-targeteller en hrefinriktning på en containernod i DOM. I exemplen ovan är flikarna <a>s med data-toggle="tab"attribut.

.tab('show')

Väljer den givna fliken och visar dess associerade innehåll. Alla andra flikar som tidigare valts avmarkeras och dess associerade innehåll döljs. Återgår till den som ringer innan flikrutan faktiskt har visats (dvs innan shown.bs.tabhändelsen inträffar).

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

evenemang

När en ny flik visas aktiveras händelserna i följande ordning:

  1. hide.bs.tab(på den aktuella aktiva fliken)
  2. show.bs.tab(på fliken som ska visas)
  3. hidden.bs.tab(på föregående aktiva flik, samma som för hide.bs.tabhändelsen)
  4. shown.bs.tab(på den nyligen aktiva fliken som just visades, samma som för show.bs.tabevenemanget)

Om ingen flik redan var aktiv kommer händelserna hide.bs.taboch hidden.bs.tabinte att aktiveras.

Event typ Beskrivning
visa.bs.tab Den här händelsen aktiveras vid flikvisning, men innan den nya fliken har visats. Använd event.targetoch event.relatedTargetför att rikta in den aktiva fliken respektive den föregående aktiva fliken (om tillgänglig).
visad.bs.tab Den här händelsen aktiveras vid flikvisning efter att en flik har visats. Använd event.targetoch event.relatedTargetför att rikta in den aktiva fliken respektive den föregående aktiva fliken (om tillgänglig).
hide.bs.tab Den här händelsen aktiveras när en ny flik ska visas (och därmed den tidigare aktiva fliken ska döljas). Använd event.targetoch event.relatedTargetför att rikta in den aktuella aktiva fliken respektive den nya snart-aktiva fliken.
hidden.bs.tab Den här händelsen aktiveras efter att en ny flik har visats (och den tidigare aktiva fliken döljs därför). Använd event.targetoch event.relatedTargetför att rikta in den tidigare aktiva fliken respektive den nya aktiva fliken.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Verktygstips tooltip.js

Inspirerad av det utmärkta plugin-programmet jQuery.tipsy skrivet av Jason Frame; Verktygstips är en uppdaterad version som inte förlitar sig på bilder, använder CSS3 för animationer och dataattribut för lokal titellagring.

Verktygstips med noll-längd titlar visas aldrig.

Exempel

Håll muspekaren över länkarna nedan för att se verktygstips:

Tighta byxor nästa nivå keffiyeh du har förmodligen inte hört talas om dem. Photo booth skägg rå denim boktryck vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie hållbara quinoa 8-bitars amerikanska kläder har en frotté richardson vinyl chambray. Beard stumptown, koftor banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fyra loko mcsweeney's cleanse vegan chambray. En riktigt ironisk hantverkare oavsett keytar , scenester farm-to-table banksy Austin twitter handtag freegan cred raw denim enkaffe viral.

Statiskt verktygstips

Fyra alternativ är tillgängliga: topp-, höger-, botten- och vänsterjusterad.

Fyra riktningar

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

Opt-in funktionalitet

Av prestandaskäl är verktygstips och Popover-data-apis opt-in, vilket innebär att du måste initiera dem själv .

Ett sätt att initiera alla verktygstips på en sida är att välja dem efter deras data-toggleattribut:

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

Användande

Verktygstipspluginen genererar innehåll och uppmärkning på begäran och placerar som standard verktygstips efter deras utlösarelement.

Aktivera verktygstipset via JavaScript:

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

Pålägg

Den nödvändiga markeringen för ett verktygstips är bara ett dataattribut och titlepå HTML-elementet vill du ha ett verktygstips. Den genererade markeringen av ett verktygstips är ganska enkel, även om den kräver en position (som standard inställd på topav 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>

Länkar med flera rader

Ibland vill du lägga till ett verktygstips till en hyperlänk som omsluter flera rader. Standardbeteendet för verktygstipsplugin är att centrera den horisontellt och vertikalt. Lägg white-space: nowrap;till dina ankare för att undvika detta.

Verktygstips i knappgrupper, inmatningsgrupper och tabeller kräver speciella inställningar

När du använder verktygstips på element inom ett .btn-groupeller ett .input-group, eller på tabellrelaterade element ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), måste du ange alternativet container: 'body'(dokumenterat nedan) för att undvika oönskade biverkningar (som att elementet växer sig bredare och/ eller tappar sina rundade hörn när verktygstipset utlöses).

Försök inte visa verktygstips på dolda element

Att anropa $(...).tooltip('show')när målelementet är display: none;kommer att göra att verktygstipset är felaktigt placerat.

Tillgängliga verktygstips för användare av tangentbord och hjälpmedel

För användare som navigerar med ett tangentbord, och i synnerhet användare av hjälpmedel, bör du bara lägga till verktygstips till tangentbordsfokuserbara element som länkar, formulärkontroller eller något godtyckligt element med ett tabindex="0"attribut.

Verktygstips på inaktiverade element kräver omslagselement

För att lägga till ett verktygstips till ett disabledeller .disabledelement, placera elementet inuti ett <div>och tillämpa verktygstipset på det <div>istället.

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-animation="".

namn Typ Standard Beskrivning
animation booleskt Sann Använd en CSS-tonningsövergång på verktygstipset
behållare sträng | falsk falsk

Lägger till verktygstipset till ett specifikt element. Exempel: container: 'body'. Det här alternativet är särskilt användbart eftersom det låter dig placera verktygstipset i dokumentflödet nära det utlösande elementet - vilket kommer att förhindra verktygstipset från att flyta bort från det utlösande elementet under en fönsterstorleksändring.

dröjsmål nummer | objekt 0

Fördröjning av att visa och dölja verktygstipset (ms) - gäller inte manuell triggertyp

Om ett nummer tillhandahålls tillämpas fördröjning på både hide/show

Objektstrukturen är:delay: { "show": 500, "hide": 100 }

html booleskt falsk Infoga HTML i verktygstipset. Om det är falskt kommer jQuerys textmetod att användas för att infoga innehåll i DOM. Använd text om du är orolig för XSS-attacker.
placering sträng | fungera 'topp'

Så här placerar du verktygstipset - topp | botten | vänster | höger | bil.
När "auto" är angivet, kommer det dynamiskt att omorientera verktygstipset. Till exempel, om placeringen är "auto vänster", kommer verktygstipset att visas till vänster när det är möjligt, annars visas det till höger.

När en funktion används för att bestämma placeringen anropas den med verktygstipset DOM-nod som sitt första argument och det utlösande elementet DOM-nod som sin andra. Kontexten thisär inställd på verktygstipsinstansen.

väljare sträng falsk Om en väljare tillhandahålls kommer verktygstipsobjekt att delegeras till de angivna målen. I praktiken används detta för att tillåta verktygstips för dynamiskt HTML-innehåll. Se detta och ett informativt exempel .
mall sträng '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Basera HTML för att använda när du skapar verktygstipset.

Verktygstipsen titlekommer att injiceras i .tooltip-inner.

.tooltip-arrowkommer att bli verktygstipsets pil.

Det yttersta omslagselementet ska ha .tooltipklassen.

titel sträng | fungera ''

Standardtitelvärde om titleattributet inte finns.

Om en funktion ges kommer den att anropas med dess thisreferensuppsättning till elementet som verktygstipset är kopplat till.

utlösare sträng "sväva fokus" Hur verktygstips utlöses - klicka på | sväva | fokus | manuell. Du kan passera flera triggers; separera dem med ett mellanslag. manualkan inte kombineras med någon annan trigger.
utsiktsplats sträng | objekt | fungera { selector: 'body', padding: 0 }

Håller verktygstipset inom gränserna för detta element. Exempel: viewport: '#viewport'eller{ "selector": "#viewport", "padding": 0 }

Om en funktion ges anropas den med det utlösande elementet DOM-nod som enda argument. Kontexten thisär inställd på verktygstipsinstansen.

Dataattribut för enskilda verktygstips

Alternativ för individuella verktygstips kan alternativt specificeras genom användning av dataattribut, som förklarats ovan.

Metoder

$().tooltip(options)

Bifogar en verktygstipshanterare till en elementsamling.

.tooltip('show')

Visar ett elements verktygstips. Återgår till den som ringer innan verktygstipset faktiskt har visats (dvs innan shown.bs.tooltiphändelsen inträffar). Detta anses vara en "manuell" triggning av verktygstipset. Verktygstips med noll-längd titlar visas aldrig.

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

.tooltip('hide')

Döljer ett elements verktygstips. Återgår till den som ringer innan verktygstipset faktiskt har dolts (dvs innan hidden.bs.tooltiphändelsen inträffar). Detta anses vara en "manuell" triggning av verktygstipset.

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

.tooltip('toggle')

Växlar ett elements verktygstips. Återgår till den som ringer innan verktygstipset faktiskt har visats eller dolt (dvs innan händelsen shown.bs.tooltipeller hidden.bs.tooltipinträffar). Detta anses vara en "manuell" triggning av verktygstipset.

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

.tooltip('destroy')

Döljer och förstör ett elements verktygstips. Verktygstips som använder delegering (som skapas med alternativet selector) kan inte förstöras individuellt på underliggande triggerelement.

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

evenemang

Event typ Beskrivning
visa.bs.verktygstips Denna händelse aktiveras omedelbart när showinstansmetoden anropas.
visat.bs.verktygstips Denna händelse utlöses när verktygstipset har gjorts synligt för användaren (väntar på att CSS-övergångar ska slutföras).
hide.bs.tooltip Denna händelse aktiveras omedelbart när hideinstansmetoden har anropats.
dolt.bs.verktygstips Den här händelsen utlöses när verktygstipset har döljts för användaren (väntar på att CSS-övergångar ska slutföras).
insatt.bs.verktygstips Denna händelse aktiveras efter show.bs.tooltiphändelsen när verktygstipsmallen har lagts till i DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Lägg till små överlagringar av innehåll, som de på iPad, till valfritt element för att hysa sekundär information.

Popovers vars både titel och innehåll är noll-längd visas aldrig.

Plugin-beroende

Popovers kräver att verktygstipspluginen ingår i din version av Bootstrap.

Opt-in funktionalitet

Av prestandaskäl är verktygstips och Popover-data-apis opt-in, vilket innebär att du måste initiera dem själv .

Ett sätt att initiera alla popovers på en sida är att välja dem efter deras data-toggleattribut:

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

Popovers i knappgrupper, inmatningsgrupper och tabeller kräver speciella inställningar

När du använder popovers på element inom ett .btn-groupeller ett .input-group, eller på tabellrelaterade element ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), måste du ange alternativet container: 'body'(dokumenteras nedan) för att undvika oönskade biverkningar (som att elementet växer sig bredare och/ eller förlorar sina rundade hörn när popover utlöses).

Försök inte visa popovers på dolda element

Att anropa $(...).popover('show')när målelementet är display: none;kommer att göra att popover blir felaktigt placerad.

Popovers på inaktiverade element kräver omslagselement

För att lägga till en popover till ett disabledeller .disabledelement, placera elementet inuti ett <div>och applicera popover på det <div>istället.

Länkar med flera rader

Ibland vill du lägga till en popover till en hyperlänk som omsluter flera rader. Standardbeteendet för popover-pluginet är att centrera det horisontellt och vertikalt. Lägg white-space: nowrap;till dina ankare för att undvika detta.

Exempel

Statisk popover

Fyra alternativ är tillgängliga: topp-, höger-, botten- och vänsterjusterad.

Popover-topp

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover höger

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover botten

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover vänster

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

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>

Fyra riktningar

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

Stäng vid nästa klick

Använd focusutlösaren för att ta bort popovers vid nästa klick som användaren gör.

Specifik uppmärkning krävs för att ta bort-vid-nästa-klick

För korrekt beteende över webbläsare och plattformar måste du använda <a>taggen, inte<button> taggen, och du måste också inkludera attributen role="button"och .tabindex

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

Användande

Aktivera popovers via JavaScript:

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

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-animation="".

namn Typ Standard Beskrivning
animation booleskt Sann Tillämpa en CSS-tonningsövergång på popover-fönstret
behållare sträng | falsk falsk

Lägger till popover till ett specifikt element. Exempel: container: 'body'. Det här alternativet är särskilt användbart eftersom det låter dig placera popover i dokumentflödet nära det utlösande elementet - vilket kommer att förhindra popover från att flyta bort från det utlösande elementet under en fönsterstorleksändring.

innehåll sträng | fungera ''

Standardvärde för innehåll om data-contentattributet inte finns.

Om en funktion ges kommer den att anropas med dess thisreferens inställd på elementet som popoveren är kopplad till.

dröjsmål nummer | objekt 0

Fördröjning av att visa och dölja popover (ms) - gäller inte manuell triggertyp

Om ett nummer tillhandahålls tillämpas fördröjning på både hide/show

Objektstrukturen är:delay: { "show": 500, "hide": 100 }

html booleskt falsk Infoga HTML i popover-fönstret. Om det är falskt kommer jQuerys textmetod att användas för att infoga innehåll i DOM. Använd text om du är orolig för XSS-attacker.
placering sträng | fungera 'höger'

Så här placerar du popover - toppen | botten | vänster | höger | bil.
När "auto" har angetts kommer den dynamiskt att omorientera popover-fönstret. Till exempel, om placeringen är "auto vänster", kommer popover-fönstret att visas till vänster när det är möjligt, annars visas det till höger.

När en funktion används för att bestämma placeringen anropas den med popover-DOM-noden som sitt första argument och det utlösande elementet DOM-noden som sin andra. Kontexten thisär inställd på popover-instansen.

väljare sträng falsk Om en väljare tillhandahålls kommer popover-objekt att delegeras till de angivna målen. I praktiken används detta för att dynamiskt HTML-innehåll ska kunna läggas till popovers. Se detta och ett informativt exempel .
mall sträng '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Basera HTML att använda när du skapar popover.

Popover titlekommer att injiceras i .popover-title.

Popover contentkommer att injiceras i .popover-content.

.arrowkommer att bli popoverens pil.

Det yttersta omslagselementet ska ha .popoverklassen.

titel sträng | fungera ''

Standardtitelvärde om titleattributet inte finns.

Om en funktion ges kommer den att anropas med dess thisreferens inställd på elementet som popoveren är kopplad till.

utlösare sträng 'klick' Hur popover utlöses - klicka på | sväva | fokus | manuell. Du kan passera flera triggers; separera dem med ett mellanslag. manualkan inte kombineras med någon annan trigger.
utsiktsplats sträng | objekt | fungera { selector: 'body', padding: 0 }

Håller popover inom gränserna för detta element. Exempel: viewport: '#viewport'eller{ "selector": "#viewport", "padding": 0 }

Om en funktion ges anropas den med det utlösande elementet DOM-nod som enda argument. Kontexten thisär inställd på popover-instansen.

Dataattribut för enskilda popovers

Alternativ för individuella popovers kan alternativt specificeras genom användning av dataattribut, som förklarats ovan.

Metoder

$().popover(options)

Initierar popovers för en elementsamling.

.popover('show')

Avslöjar ett elements popover. Återgår till den som ringer innan popover faktiskt har visats (dvs innan shown.bs.popoverhändelsen inträffar). Detta anses vara en "manuell" utlösning av popover. Popovers vars både titel och innehåll är noll-längd visas aldrig.

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

.popover('hide')

Döljer ett elements popover. Återgår till den som ringer innan popover faktiskt har dolts (dvs innan hidden.bs.popoverhändelsen inträffar). Detta anses vara en "manuell" utlösning av popover.

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

.popover('toggle')

Växlar ett elements popover. Återgår till den som ringer innan popover faktiskt har visats eller dolt (dvs innan händelsen shown.bs.popovereller hidden.bs.popoverinträffar). Detta anses vara en "manuell" utlösning av popover.

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

.popover('destroy')

Döljer och förstör ett elements popover. Popovers som använder delegering (som skapas med alternativet selector) kan inte förstöras individuellt på underliggande triggerelement.

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

evenemang

Event typ Beskrivning
show.bs.popover Denna händelse aktiveras omedelbart när showinstansmetoden anropas.
visas.bs.popover Den här händelsen aktiveras när popoveren har gjorts synlig för användaren (väntar på att CSS-övergångar ska slutföras).
hide.bs.popover Denna händelse aktiveras omedelbart när hideinstansmetoden har anropats.
hidden.bs.popover Den här händelsen aktiveras när popover-fönstret har döljts för användaren (väntar på att CSS-övergångar ska slutföras).
insatt.bs.popover Denna händelse aktiveras efter show.bs.popoverhändelsen när popover-mallen har lagts till i DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Varningsmeddelanden alert.js

Exempel på varningar

Lägg till avvisningsfunktion i alla varningsmeddelanden med detta plugin.

När du använder en .closeknapp måste den vara det första underordnade av den .alert-dismissibleoch inget textinnehåll får komma före den i markeringen.

Användande

Lägg bara data-dismiss="alert"till i din stängningsknapp för att automatiskt ge en varningsfunktionalitet för stängning. När du stänger en varning tas den bort från DOM.

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

För att dina varningar ska använda animering när de stänger, se till att de har klasserna .fadeoch .inredan tillämpade på dem.

Metoder

$().alert()

Får en varning att lyssna efter klickhändelser på underordnade element som har data-dismiss="alert"attributet. (Inte nödvändigt när du använder data-API:s automatiska initiering.)

$().alert('close')

Stänger en varning genom att ta bort den från DOM. Om klasserna .fadeoch .infinns på elementet kommer varningen att tona ut innan den tas bort.

evenemang

Bootstraps varningsplugin avslöjar några händelser för att koppla in varningsfunktioner.

Event typ Beskrivning
stäng.bs.varning Denna händelse aktiveras omedelbart när closeinstansmetoden anropas.
stängd.bs.varning Den här händelsen utlöses när varningen har stängts (väntar på att CSS-övergångar ska slutföras).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Knappar button.js

Gör mer med knappar. Kontrollera knapptillstånd eller skapa grupper av knappar för fler komponenter som verktygsfält.

Kompatibilitet över webbläsare

Firefox kvarstår från kontrolltillstånd (inaktiverad och kontrollerad) över sidladdningar . En lösning för detta är att använda autocomplete="off". Se Mozilla-fel #654072 .

Statlig

Lägg data-loading-text="Loading..."till för att använda ett laddningstillstånd på en knapp.

Den här funktionen är utfasad sedan v3.3.5 och har tagits bort i v4.

Använd vilket tillstånd du vill!

För den här demonstrationens skull använder vi data-loading-textoch $().button('loading'), men det är inte det enda tillståndet du kan använda. Se mer om detta nedan i $().button(string)dokumentationen .

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Enkel växling

Lägg data-toggle="button"till för att aktivera växling på en enda knapp.

Förinställda knappar behöver .activeocharia-pressed="true"

För förinställda knappar måste du lägga till .activeklassen och aria-pressed="true"attributet till buttondig själv.

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

Kryssruta / Radio

Lägg data-toggle="buttons"till i en .btn-groupinnehållande kryssruta eller radioingångar för att aktivera växling i deras respektive stilar.

Förvalda alternativ behöver.active

För förvalda alternativ måste du själv lägga till .activeklassen i ingången label.

Visuellt kontrollerat tillstånd uppdateras endast vid klick

Om det markerade tillståndet för en kryssrutaknapp uppdateras utan att en clickhändelse avfyras på knappen (t.ex. via <input type="reset">eller via inställning av checkedegenskapen för ingången), måste du själv växla .activeklassen på ingången label.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Metoder

$().button('toggle')

Växlar push-tillstånd. Ger knappen intrycket att den har aktiverats.

$().button('reset')

Återställer knappstatus - byter text till originaltext. Denna metod är asynkron och återkommer innan återställningen faktiskt har slutförts.

$().button(string)

Byter text till valfritt datadefinierat textläge.

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

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

Collapse collapse.js

Flexibelt plugin som använder en handfull klasser för enkelt växlingsbeteende.

Plugin-beroende

Collapse kräver att transitions-pluginen ingår i din version av Bootstrap.

Exempel

Klicka på knapparna nedan för att visa och dölja ett annat element via klassändringar:

  • .collapsedöljer innehåll
  • .collapsingtillämpas under övergångar
  • .collapse.invisar innehåll

Du kan använda en länk med hrefattributet eller en knapp med data-targetattributet. I båda fallen data-toggle="collapse"krävs.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<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>

Exempel på dragspel

Utöka standardfunktionen för kollaps för att skapa ett dragspel med panelkomponenten.

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 sätta en fågel på det bläckfisk enkaffe kaffe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, hantverksöl labore wes anderson cred nesciunt sapiente ea proident. Annons vegan excepteur butcher vice lomo. Leggings occaecat hantverksöl från jord till bord, rå denim estetisk synth nesciunt du förmodligen inte har hört talas om dem accusamus labore hållbar VHS.
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.
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 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>

Det är också möjligt att byta ut .panel-bodys med .list-groups.

  • Bootply
  • One itmus ac facilin
  • Second eros

Gör expandera/komprimera kontroller tillgängliga

Var noga med att lägga aria-expandedtill kontrollelementet. Det här attributet definierar explicit det hopfällbara elementets nuvarande tillstånd för skärmläsare och liknande hjälpmedelstekniker. Om det hopfällbara elementet är stängt som standard bör det ha värdet aria-expanded="false". Om du har angett att det hopfällbara elementet ska vara öppet som standard med inklassen, ställ in aria-expanded="true"på kontrollen istället. Insticksprogrammet växlar automatiskt detta attribut baserat på om det hopfällbara elementet har öppnats eller stängts.

Dessutom, om ditt kontrollelement är inriktat på ett enstaka hopfällbart element – ​​dvs data-targetattributet pekar på en idväljare – kan du lägga till ett ytterligare aria-controlsattribut till kontrollelementet som innehåller iddet hopfällbara elementet. Moderna skärmläsare och liknande hjälpmedel använder detta attribut för att ge användarna ytterligare genvägar för att navigera direkt till själva det hopfällbara elementet.

Användande

Kollapspluginen använder några klasser för att hantera tunga lyft:

  • .collapsedöljer innehållet
  • .collapse.invisar innehållet
  • .collapsingläggs till när övergången startar och tas bort när den är klar

Dessa klasser finns i component-animations.less.

Via dataattribut

Lägg bara till data-toggle="collapse"och ett data-targettill elementet för att automatiskt tilldela kontroll över ett hopfällbart element. Attributet data-targetaccepterar en CSS-väljare att tillämpa komprimeringen på. Se till att lägga till klassen collapsei det hopfällbara elementet. Om du vill att den ska öppnas som standard lägger du till den extra klassen in.

Lägg till dataattributet för att lägga till dragspelsliknande grupphantering till en hopfällbar kontroll data-parent="#selector". Se demon för att se detta i aktion.

Via JavaScript

Aktivera manuellt med:

$('.collapse').collapse()

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-parent="".

namn typ standard beskrivning
förälder väljare falsk Om en väljare tillhandahålls kommer alla hopfällbara element under den angivna överordnade att stängas när detta hopfällbara objekt visas. (liknar traditionellt dragspelsbeteende - detta beror på panelklassen)
växla booleskt Sann Växlar det hopfällbara elementet vid anrop

Metoder

.collapse(options)

Aktiverar ditt innehåll som ett hopfällbart element. Accepterar ett valfritt alternativ object.

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

.collapse('toggle')

Växlar ett hopfällbart element till att visas eller döljas. Återgår till den som ringer innan det hopfällbara elementet faktiskt har visats eller dolt (dvs innan händelsen shown.bs.collapseeller hidden.bs.collapseinträffar).

.collapse('show')

Visar ett hopfällbart element. Återgår till den som ringer innan det hopfällbara elementet faktiskt har visats (dvs innan shown.bs.collapsehändelsen inträffar).

.collapse('hide')

Döljer ett hopfällbart element. Återgår till den som ringer innan det hopfällbara elementet faktiskt har dolts (dvs innan hidden.bs.collapsehändelsen inträffar).

evenemang

Bootstraps kollapsklass avslöjar några händelser för att koppla in kollapsfunktionalitet.

Event typ Beskrivning
visa.bs.kollaps Denna händelse aktiveras omedelbart när showinstansmetoden anropas.
visas.bs.kollaps Den här händelsen utlöses när ett kollapselement har gjorts synligt för användaren (väntar på att CSS-övergångar ska slutföras).
hide.bs.kollaps Denna händelse aktiveras omedelbart när hidemetoden har anropats.
hidden.bs.kollaps Den här händelsen utlöses när ett kollapselement har dolts för användaren (väntar på att CSS-övergångar ska slutföras).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

En bildspelskomponent för att cykla genom element, som en karusell. Kapslade karuseller stöds inte.

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

Valfria bildtexter

Lägg enkelt till bildtexter till dina bilder med .carousel-captionelementet i valfri .item. Placera nästan vilken valfri HTML som helst där så kommer den att justeras och formateras automatiskt.

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

Flera karuseller

Karuseller kräver användning av en idpå den yttersta behållaren (den .carousel) för att karusellreglagen ska fungera korrekt. När du lägger till flera karuseller, eller när du byter en karusells id, se till att uppdatera de relevanta kontrollerna.

Via dataattribut

Använd dataattribut för att enkelt kontrollera karusellens position. data-slideaccepterar nyckelorden preveller next, vilket ändrar bildens position i förhållande till dess nuvarande position. Alternativt kan du använda data-slide-toför att skicka ett obearbetat diabildsindex till karusellen data-slide-to="2", vilket skiftar objektglaspositionen till ett visst index som börjar med 0.

Attributet data-ride="carousel"används för att markera en karusell som animering med början vid sidladdning. Den kan inte användas i kombination med (redundant och onödig) explicit JavaScript-initiering av samma karusell.

Via JavaScript

Ring karusellen manuellt med:

$('.carousel').carousel()

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-interval="".

namn typ standard beskrivning
intervall siffra 5 000 Hur lång tid det tar mellan att automatiskt cykla ett objekt. Om det är falskt, kommer karusellen inte att cykla automatiskt.
paus sträng | null "sväva" Om inställt på "hover", pausar cyklingen av karusellen på mouseenteroch återupptar cyklingen av karusellen på mouseleave. Om inställt på null, pausas den inte om du håller muspekaren över karusellen.
slå in booleskt Sann Om karusellen ska cykla kontinuerligt eller ha hårda stopp.
tangentbord booleskt Sann Om karusellen ska reagera på tangentbordshändelser.

Initierar karusellen med ett valfritt alternativ objectoch börjar cykla igenom föremål.

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

Cyklar genom karusellföremålen från vänster till höger.

Stoppar karusellen från att cykla genom föremål.

Cyklar karusellen till en viss bildruta (0-baserad, liknande en array).

Går till föregående post.

Går till nästa objekt.

Bootstraps karusellklass avslöjar två händelser för att koppla in karusellfunktionalitet.

Båda händelserna har följande ytterligare egenskaper:

  • direction: Den riktning i vilken karusellen glider (antingen "left"eller "right").
  • relatedTarget: DOM-elementet som skjuts på plats som det aktiva objektet.

Alla karusellhändelser avfyras mot själva karusellen (dvs. vid <div class="carousel">).

Event typ Beskrivning
slide.bs.carousel Denna händelse aktiveras omedelbart när slideinstansmetoden anropas.
slid.bs.karusell Denna händelse aktiveras när karusellen har slutfört sin bildövergång.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Fäst affix.js

Exempel

Affix-pluginet växlar position: fixed;på och av och emulerar effekten som hittas med position: sticky;. Undernavigeringen till höger är en livedemo av affix-plugin.


Användande

Använd affix-plugin via dataattribut eller manuellt med ditt eget JavaScript. I båda situationerna måste du tillhandahålla CSS för placering och bredd på ditt anbringade innehåll.

Obs: Använd inte affix-plugin på ett element som finns i ett relativt placerat element, till exempel en dragen eller tryckt kolumn, på grund av en Safari-renderingsbugg .

Positionering via CSS

Affix-pluginen växlar mellan tre klasser, som var och en representerar ett visst tillstånd: .affix, .affix-top, och .affix-bottom. Du måste tillhandahålla stilarna, med undantag för position: fixed;.affix, för dessa klasser själv (oberoende av detta plugin) för att hantera de faktiska positionerna.

Så här fungerar affix-pluginet:

  1. Till att börja med lägger plugin till .affix-topför att indikera att elementet är i sin översta position. Vid denna tidpunkt krävs ingen CSS-positionering.
  2. Om du rullar förbi elementet du vill anbringa bör den faktiska anbringningen utlösas. Det är här .affixsom ersätter.affix-top och ställer in position: fixed;(tillhandahålls av Bootstraps CSS).
  3. Om en bottenförskjutning är definierad, bör rullning förbi den ersättas .affixmed .affix-bottom. Eftersom förskjutningar är valfria, måste du ställa in en lämplig CSS. I det här fallet, lägg tillposition: absolute; vid behov. Insticksprogrammet använder dataattributet eller JavaScript-alternativet för att bestämma var elementet ska placeras därifrån.

Följ stegen ovan för att ställa in din CSS för något av användningsalternativen nedan.

Via dataattribut

För att enkelt lägga till affixbeteende till ett element, lägg bara data-spy="affix"till elementet du vill spionera på. Använd förskjutningar för att definiera när du ska växla mellan att fästa ett element.

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

Via JavaScript

Ring tillägget affix via JavaScript:

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

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-offset-top="200".

namn typ standard beskrivning
offset nummer | funktion | objekt 10 Pixlar att förskjuta från skärmen vid beräkning av rullningsposition. Om ett enda nummer tillhandahålls kommer offset att tillämpas i både övre och nedre riktningar. För att ge en unik, botten- och toppförskjutning, tillhandahåll bara ett objekt offset: { top: 10 }eller offset: { top: 10, bottom: 5 }. Använd en funktion när du dynamiskt behöver beräkna en offset.
mål väljare | nod | jQuery-element windowobjektet _ Anger målelementet för affixet.

Metoder

.affix(options)

Aktiverar ditt innehåll som anbringat innehåll. Accepterar ett valfritt alternativ object.

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

.affix('checkPosition')

Beräknar om tillståndet för fästet baserat på dimensionerna, positionen och rullningspositionen för de relevanta elementen. Klasserna .affix, .affix-top, och .affix-bottomläggs till eller tas bort från det anbringade innehållet enligt det nya tillståndet. Denna metod måste anropas när måtten på det anbringade innehållet eller målelementet ändras, för att säkerställa korrekt placering av det anbringade innehållet.

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

evenemang

Bootstraps affix-plugin avslöjar några händelser för att koppla in affix-funktionalitet.

Event typ Beskrivning
affix.bs.affix Denna händelse utlöses omedelbart innan elementet har fästs.
avfixed.bs.affix Denna händelse aktiveras efter att elementet har fästs.
anbringa-top.bs.affix Denna händelse utlöses omedelbart innan elementet har fästs upptill.
avfixed-top.bs.affix Denna händelse aktiveras efter att elementet har fästs upptill.
affix-bottom.bs.affix Denna händelse utlöses omedelbart innan elementet har fästs-botten.
avfixed-bottom.bs.affix Denna händelse aktiveras efter att elementet har fästs-botten.