Ö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).

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

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

Saneringsmedel

Tooltips och Popovers använder vår inbyggda desinficering för att sanera alternativ som accepterar HTML.

Standardvärdet whiteListär följande:

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

Om du vill lägga till nya värden till denna standard whiteListkan du göra följande:

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)

Om du vill kringgå vår desinficering för att du föredrar att använda ett dedikerat bibliotek, till exempel DOMPurify , bör du göra följande:

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

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.4.1"

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.

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

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>

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

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

Varierande modalt innehåll baserat på triggerknapp

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,

<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="".

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

Metoder

.modal(options)

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

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

.modal('toggle')

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

.modal('show')

Ö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')

.modal('hide')

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

.modal('handleUpdate')

Justerar om modalens positionering för att motverka en rullningslist ifall 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">).

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

Dropdowns dropdown.js

Exempel

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

Användande

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

alternativ

Ingen

Metoder

$().dropdown('toggle')

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

evenemang

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

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

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

Användande

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="".

evenemang

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

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.

$('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:

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>

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

alternativ

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

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

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

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

Exempel

Statisk popover

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

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.

<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="".

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 popoveren faktiskt har dolts (dvs. förehidden.bs.popover hä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

$('#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 .fadeoch.in finns 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.

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

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.

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

Enkel växling

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

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  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.

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

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">
  ...
</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.

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.

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

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

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="".

Metoder

.collapse(options)

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

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

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

Exempel

Tidigare Nästa

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

Första objektglasetiketten

Nulla vitae elit libero, a pharetra augue mollis interdum.

Andra objektglasetiketten

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tredje objektglasetiketten

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Tidigare Nästa

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

Användande

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

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

Metoder

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

Går till föregående post.

.carousel('next')

Går till nästa objekt.

evenemang

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">).

$('#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 utdragen 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;på .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. För att börja, tillägger plugin.affix-top fö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 .affixersätter .affix-topoch 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. Lägg i så fall till position: 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 tilldata-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".

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.