Oversikt

Individuell eller kompilert

Plugins kan inkluderes individuelt (ved å bruke Bootstraps individuelle *.jsfiler), eller alle på en gang (ved å bruke bootstrap.jseller minifisert bootstrap.min.js).

Dataattributter

Du kan bruke alle Bootstrap-plugins rent gjennom markup API uten å skrive en eneste linje med JavaScript. Dette er Bootstraps førsteklasses API og bør være din første vurdering når du bruker en plugin.

Når det er sagt, kan det i noen situasjoner være ønskelig å slå av denne funksjonaliteten. Derfor gir vi også muligheten til å deaktivere dataattributtet API ved å oppheve bindingen av alle hendelser på dokumentet med navneavstand data-api. Dette ser slik ut:

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

Alternativt, for å målrette mot et spesifikt plugin, inkluderer du bare pluginens navn som et navneområde sammen med data-api navneområdet slik:

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

Programmatisk API

Vi mener også at du bør kunne bruke alle Bootstrap-plugins rent gjennom JavaScript API. Alle offentlige API-er er enkle, kjedebare metoder, og returnerer samlingen som ble utført.

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

Alle metoder bør godta et valgfritt alternativobjekt, en streng som retter seg mot en bestemt metode, eller ingenting (som starter en plugin med standard oppførsel):

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

Hvert plugin viser også sin råkonstruktør på en Constructoregenskap: $.fn.popover.Constructor. Hvis du vil ha en bestemt plugin-forekomst, kan du hente den direkte fra et element: $('[rel="popover"]').data('popover').

Standard instillinger

Du kan endre standardinnstillingene for en plugin ved å endre plugin- Constructor.DEFAULTSobjektet:

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

Ingen konflikt

Noen ganger er det nødvendig å bruke Bootstrap-plugins med andre UI-rammer. Under disse omstendighetene kan navneområdekollisjoner av og til forekomme. Hvis dette skjer, kan du ringe .noConflicttil plugin-en du ønsker å tilbakestille verdien av.

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

arrangementer

Bootstrap gir tilpassede hendelser for de fleste plugins unike handlinger. Generelt kommer disse i en infinitiv og partisippform - der infinitiv (eks. show) utløses ved starten av en hendelse, og partisippform (eks. shown) utløses ved fullføring av en handling.

Fra og med 3.0.0 er alle Bootstrap-hendelser med navn.

Alle infinitive hendelser gir preventDefaultfunksjonalitet. Dette gir muligheten til å stoppe utførelsen av en handling før den starter.

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

Sanitizer

Verktøytips og popovers bruker vår innebygde rensemiddel for å rense alternativer som godtar HTML.

Standardverdien whiteLister følgende:

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

Hvis du vil legge til nye verdier til denne standarden whiteList, kan du gjøre følgende:

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)

Hvis du vil omgå desinficeringsmiddelet vårt fordi du foretrekker å bruke et dedikert bibliotek, for eksempel DOMPurify , bør du gjøre følgende:

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

Versjonsnummer

Versjonen av hver av Bootstraps jQuery-plugins kan nås via VERSIONegenskapen til plugin-konstruktøren. For eksempel for verktøytips-plugin:

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

Ingen spesielle fallbacks når JavaScript er deaktivert

Bootstraps plugins faller ikke spesielt elegant tilbake når JavaScript er deaktivert. Hvis du bryr deg om brukeropplevelsen i dette tilfellet, bruk <noscript>for å forklare situasjonen (og hvordan du aktiverer JavaScript på nytt) for brukerne dine, og/eller legg til dine egne tilpassede reserver.

Overganger transition.js

Om overganger

For enkle overgangseffekter, ta med transition.jsén gang sammen med de andre JS-filene. Hvis du bruker den kompilerte (eller minifiserte) bootstrap.js, er det ikke nødvendig å inkludere dette – det er der allerede.

Hva er inni

Transition.js er en grunnleggende hjelper for transitionEndarrangementer samt en CSS-overgangsemulator. Den brukes av de andre pluginene for å se etter støtte for CSS-overganger og for å fange hengende overganger.

Deaktiverer overganger

Overganger kan deaktiveres globalt ved å bruke følgende JavaScript-kodebit, som må komme etter at transition.js(eller bootstrap.jseller bootstrap.min.js, alt ettersom) er lastet inn:

$.support.transition = false

Modals modal.js

Modaler er strømlinjeformede, men fleksible, dialogmeldinger med minimum nødvendig funksjonalitet og smarte standardinnstillinger.

På grunn av hvordan HTML5 definerer sin semantikk, har autofocusHTML-attributtet ingen effekt i Bootstrap-modaler. For å oppnå samme effekt, bruk litt tilpasset JavaScript:

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

Eksempler

Statisk eksempel

En gjengitt modal med topptekst, brødtekst og sett med handlinger i bunnteksten.

<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

Veksle en modal via JavaScript ved å klikke på knappen nedenfor. Den vil gli ned og tone inn fra toppen av siden.

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

Valgfrie størrelser

Modaler har to valgfrie størrelser, tilgjengelige via modifikasjonsklasser for å plasseres 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>

Fjern animasjon

For modaler som ganske enkelt vises i stedet for å fortone seg, fjern .fadeklassen fra din modale markering.

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

Bruke rutenettet

For å dra nytte av Bootstrap-rutenettsystemet i en modal, må du bare legge .rows i .modal-bodyog deretter bruke de vanlige rutenettsystemklassene.

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

Varierende modalt innhold basert på utløserknapp

Har du en haug med knapper som alle utløser den samme modalen, bare med litt forskjellig innhold? Bruk event.relatedTargetog HTML - data-*attributter (eventuelt via jQuery ) for å variere innholdet i modalen avhengig av hvilken knapp som ble klikket på. Se dokumentene for Modal Events for 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)
})

Bruk

Modal-pluginen veksler mellom det skjulte innholdet ditt på forespørsel, via dataattributter eller JavaScript. Den legger også .modal-opentil for <body>å overstyre standard rulleadferd og genererer et .modal-backdropklikkområde for å avvise viste modaler når du klikker utenfor modalen.

Via dataattributter

Aktiver en modal uten å skrive JavaScript. Sett data-toggle="modal"på et kontrollerelement, som en knapp, sammen med en data-target="#foo"eller href="#foo"for å målrette en bestemt modal for å veksle.

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

Via JavaScript

Ring en modal med id myModalmed en enkelt linje med JavaScript:

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

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-backdrop="".

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

Metoder

.modal(options)

Aktiverer innholdet ditt som en modal. Godtar et valgfritt alternativ object.

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

.modal('toggle')

Bytter en modal manuelt. Går tilbake til den som ringer før modalen faktisk har blitt vist eller skjult (dvs. før hendelsen shown.bs.modaleller hidden.bs.modalinntreffer).

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

.modal('show')

Åpner en modal manuelt. Går tilbake til den som ringer før modalen faktisk har blitt vist (dvs. før shown.bs.modalhendelsen inntreffer).

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

.modal('hide')

Skjuler en modal manuelt. Går tilbake til den som ringer før modalen faktisk har blitt skjult (dvs. før hidden.bs.modalhendelsen inntreffer).

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

.modal('handleUpdate')

Justerer modalens posisjonering for å motvirke en rullefelt i tilfelle en skulle vises, noe som ville få modalen til å hoppe til venstre.

Kun nødvendig når høyden på modalen endres mens den er åpen.

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

arrangementer

Bootstraps modalklasse avslører noen få hendelser for å koble til modal funksjonalitet.

Alle modale hendelser skytes mot selve modalen (dvs. på <div class="modal">).

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

Dropdowns dropdown.js

Eksempler

Legg til rullegardinmenyer til nesten hva som helst med denne enkle plugin-en, inkludert navigasjonslinjen, fanene og pillene.

Innenfor en navigasjonslinje

Innenfor piller

Bruk

Via dataattributter eller JavaScript, veksler rullegardinpluginen skjult innhold (rullegardinmenyer) ved å veksle mellom .openklassen på det overordnede listeelementet.

På mobile enheter legger du til en rullegardin .dropdown-backdropsom et trykkområde for å lukke rullegardinmenyer når du trykker utenfor menyen, et krav for riktig iOS-støtte. Dette betyr at bytte fra en åpen rullegardinmeny til en annen rullegardinmeny krever et ekstra trykk på mobilen.

Merk: data-toggle="dropdown"Attributtet er avhengig av lukking av rullegardinmenyer på applikasjonsnivå, så det er en god idé å alltid bruke det.

Via dataattributter

Legg data-toggle="dropdown"til en lenke eller knapp for å veksle mellom en rullegardin.

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

For å holde nettadresser intakte med lenkeknapper, bruk data-targetattributtet i stedet for 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 rullegardinmenyene via JavaScript:

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

Alternativer

Ingen

Metoder

$().dropdown('toggle')

Bytter rullegardinmenyen til en gitt navigasjonslinje eller navigering med faner.

arrangementer

Alle dropdown-hendelser utløses på .dropdown-menu's overordnede element.

Alle rullegardinhendelser har en relatedTargetegenskap, hvis verdi er det vekslende ankerelementet.

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

ScrollSpy scrollspy.js

Eksempel i navbar

ScrollSpy-pluginen er for automatisk oppdatering av nav-mål basert på rulleposisjon. Rull området under navigasjonslinjen og se den aktive klassen endre seg. Underelementene i rullegardinmenyen vil også bli uthevet.

Bruk

Krever relativ posisjonering

Uansett implementeringsmetode, krever scrollspy bruk av position: relative;på elementet du spionerer på. I de fleste tilfeller er dette <body>. Når du rullespionerer på andre elementer enn <body>, sørg for å ha et heightsett og overflow-y: scroll;brukt.

Via dataattributter

For enkelt å legge til scrollspy-adferd til topplinjenavigasjonen, legg data-spy="scroll"til elementet du vil spionere på (vanligvis vil dette være <body>). Legg deretter til data-targetattributtet med IDen eller klassen til det overordnede elementet til en hvilken som helst 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

Etter å ha lagt position: relative;til CSS, ring scrollspy via JavaScript:

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

Metoder

.scrollspy('refresh')

Når du bruker scrollspy i forbindelse med å legge til eller fjerne elementer fra DOM, må du kalle oppdateringsmetoden slik:

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

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-offset="".

arrangementer

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

Skiftbare faner tab.js

Eksempelfaner

Legg til rask, dynamisk fanefunksjonalitet for overgang gjennom ruter med lokalt innhold, selv via rullegardinmenyer. Nestede faner støttes ikke.

Bruk

Aktiver tabbare faner via JavaScript (hver fane må aktiveres individuelt):

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

Du kan aktivere individuelle faner på flere måter:

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

Markup

Du kan aktivere en fane- eller pillenavigasjon uten å skrive noe JavaScript ved å spesifisere data-toggle="tab"eller data-toggle="pill"på et element. Hvis du legger til navklassene nav-tabsog i fanen ul, brukes Bootstrap-fanens styling , mens du legger til navog nav-pillsklassene vil bruke pille-styling .

<div>

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

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

</div>

Fade-effekt

For å få faner til å tone inn, legg .fadetil i hver .tab-pane. Den første faneruten må også .ingjøre det opprinnelige innholdet synlig.

<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

Aktiverer et faneelement og innholdsbeholder. Tab skal ha enten en data-targeteller en hrefmålrettet beholdernode i DOM. I eksemplene ovenfor er fanene <a>s med data-toggle="tab"attributter.

.tab('show')

Velger den gitte fanen og viser tilhørende innhold. Enhver annen fane som tidligere ble valgt blir opphevet og det tilhørende innholdet skjules. Går tilbake til den som ringer før faneruten faktisk har blitt vist (dvs. før shown.bs.tabhendelsen inntreffer).

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

arrangementer

Når du viser en ny fane, utløses hendelsene i følgende rekkefølge:

1. hide.bs.tab(på gjeldende aktive fane)
2. show.bs.tab(på fanen som skal vises)
3. hidden.bs.tab(på den forrige aktive fanen, den samme som for hide.bs.tabarrangementet)
4. shown.bs.tab(på den nylig aktive fanen som nettopp er vist, den samme som for show.bs.tabarrangementet)

Hvis ingen fane allerede var aktiv, vil ikke hide.bs.tabog hidden.bs.tab-hendelsene bli utløst.

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

Verktøytips tooltip.js

Inspirert av den utmerkede jQuery.tipsy-pluginen skrevet av Jason Frame; Verktøytips er en oppdatert versjon som ikke er avhengig av bilder, bruker CSS3 for animasjoner og dataattributter for lokal tittellagring.

Verktøytips med null-lengde titler vises aldri.

Eksempler

Hold markøren over koblingene nedenfor for å se verktøytips:

Statisk verktøytips

Fire alternativer er tilgjengelige: topp-, høyre-, bunn- og venstrejustert.

Fire retninger

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

Bruk

Verktøytips-pluginen genererer innhold og markering på forespørsel, og plasserer som standard verktøytips etter utløserelementet.

Utløs verktøytipset via JavaScript:

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

Markup

Den nødvendige markeringen for et verktøytips er kun et dataattributt og titlepå HTML-elementet ønsker du å ha et verktøytips. Den genererte markeringen av et verktøytips er ganske enkel, selv om den krever en posisjon (som standard satt til 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>

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-animation="".

Metoder

$().tooltip(options)

Legger en verktøytipsbehandler til en elementsamling.

.tooltip('show')

Avslører et elements verktøytips. Går tilbake til den som ringer før verktøytipset faktisk har blitt vist (dvs. før shown.bs.tooltiphendelsen inntreffer). Dette regnes som en "manuell" utløsning av verktøytipset. Verktøytips med null-lengde titler vises aldri.

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

.tooltip('hide')

Skjuler et elements verktøytips. Går tilbake til den som ringer før verktøytipset faktisk har blitt skjult (dvs. før hidden.bs.tooltiphendelsen inntreffer). Dette regnes som en "manuell" utløsning av verktøytipset.

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

.tooltip('toggle')

Veksler på verktøytipset til et element. Går tilbake til den som ringer før verktøytipset faktisk har blitt vist eller skjult (dvs. før hendelsen shown.bs.tooltipeller hidden.bs.tooltipinntreffer). Dette regnes som en "manuell" utløsning av verktøytipset.

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

.tooltip('destroy')

Skjuler og ødelegger et elements verktøytips. Verktøytips som bruker delegering (som opprettes ved å bruke selectoralternativet ) kan ikke ødelegges individuelt på etterkommere triggerelementer.

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

arrangementer

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

Popovers popover.js

Legg til små overlegg av innhold, som de på iPad, til et hvilket som helst element for å inneholde sekundær informasjon.

Popovers hvis både tittel og innhold har null lengde, vises aldri.

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

Eksempler

Statisk popover

Fire alternativer er tilgjengelige: topp-, høyre-, bunn- og venstrejustert.

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>

Fire retninger

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

Avvis ved neste klikk

Bruk focusutløseren til å avvise popovers ved neste klikk som brukeren gjø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>

Bruk

Aktiver popovers via JavaScript:

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

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-animation="".

Metoder

$().popover(options)

Initialiserer popovers for en elementsamling.

.popover('show')

Avslører et elements popover. Går tilbake til den som ringer før popover faktisk har blitt vist (dvs. før shown.bs.popoverhendelsen inntreffer). Dette regnes som en "manuell" utløsning av popover. Popovers hvis både tittel og innhold har null lengde, vises aldri.

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

.popover('hide')

Skjuler et elements popover. Går tilbake til den som ringer før popover-en faktisk har blitt skjult (dvs. førhidden.bs.popover hendelsen inntreffer). Dette regnes som en "manuell" utløsning av popover.

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

.popover('toggle')

Veksler på et elements popover. Går tilbake til den som ringer før popover-en faktisk har blitt vist eller skjult (dvs. før hendelsen shown.bs.popovereller hidden.bs.popoverinntreffer). Dette regnes som en "manuell" utløsning av popover.

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

.popover('destroy')

Skjuler og ødelegger et elements popover. Popovers som bruker delegering (som opprettes ved hjelp av selectoralternativet ) kan ikke ødelegges individuelt på etterkommere triggerelementer.

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

arrangementer

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

Varslingsmeldinger alert.js

Eksempler på varsler

Legg til avvisningsfunksjonalitet til alle varselmeldinger med denne plugin-modulen.

Når du bruker en .closeknapp, må den være det første underordnede av den .alert-dismissible, og ingen tekstinnhold kan komme før den i markeringen.

Bruk

Bare legg data-dismiss="alert"til lukkeknappen for automatisk å gi et varsel om lukkefunksjonalitet. Hvis du lukker et varsel, fjernes det fra DOM.

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

For å få varslene dine til å bruke animasjon når de lukkes, sørg for at de har klassene .fadeog allerede brukt på dem..in

Metoder

$().alert()

Får et varsel til å lytte etter klikkhendelser på etterkommere elementer som har data-dismiss="alert"attributtet. (Ikke nødvendig når du bruker data-APIs automatiske initialisering.)

$().alert('close')

Lukker et varsel ved å fjerne det fra DOM. Hvis .fadeog.in er til stede på elementet, vil varselet tone ut før det fjernes.

arrangementer

Bootstraps varslingsplugin avslører noen få hendelser for å koble til varslingsfunksjonalitet.

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

Knapper button.js

Gjør mer med knapper. Kontroller knappstatuser eller lag grupper med knapper for flere komponenter som verktøylinjer.

Stateful

Legg data-loading-text="Loading..."til for å bruke en lastetilstand på en knapp.

Denne funksjonen er avviklet siden v3.3.5 og har blitt fjernet 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 bryter

Legg data-toggle="button"til for å aktivere veksling på en enkelt knapp.

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

Avmerkingsboks / Radio

Legg data-toggle="buttons"til en .btn-groupavkrysningsboks som inneholder eller radioinnganger for å aktivere veksling i deres respektive stiler.

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

Bytter push-tilstand. Gir knappen det utseendet at den er aktivert.

$().button('reset')

Tilbakestiller knappens tilstand - bytter tekst til originaltekst. Denne metoden er asynkron og returnerer før tilbakestillingen faktisk er fullført.

$().button(string)

Bytter tekst til hvilken som helst datadefinert teksttilstand.

<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

Fleksibel plugin som bruker en håndfull klasser for enkel vekslingsadferd.

Eksempel

Klikk på knappene nedenfor for å vise og skjule et annet element via klasseendringer:

• .collapseskjuler innhold
• .collapsingbrukes under overganger
• .collapse.inviser innhold

Du kan bruke en lenke med hrefattributtet, eller en knapp med data-targetattributtet. I begge tilfeller er det data-toggle="collapse"nødvendig.

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

Trekkspill eksempel

Utvid standard kollapsatferd for å lage et trekkspill 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 er også mulig å bytte ut .panel-bodys med .list-groups.

Bruk

Kollaps-pluginen bruker noen få klasser for å håndtere tunge løft:

• .collapseskjuler innholdet
• .collapse.inviser innholdet
• .collapsinglegges til når overgangen starter, og fjernes når den er ferdig

Disse klassene finner du i component-animations.less.

Via dataattributter

Bare legg til data-toggle="collapse"og a data-targettil elementet for å automatisk tildele kontroll over et sammenleggbart element. Attributtet data-targetgodtar en CSS-velger å bruke sammenbruddet på. Sørg for å legge klassen collapsetil det sammenleggbare elementet. Hvis du vil at den skal åpnes som standard, legger du til den ekstra klassen in.

For å legge til trekkspilllignende gruppestyring til en sammenleggbar kontroll, legg til dataattributtet data-parent="#selector". Se demoen for å se dette i aksjon.

Via JavaScript

Aktiver manuelt med:

$('.collapse').collapse()

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-parent="".

Metoder

.collapse(options)

Aktiverer innholdet ditt som et sammenleggbart element. Godtar et valgfritt alternativ object.

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

.collapse('toggle')

Bytter et sammenleggbart element til vist eller skjult. Går tilbake til den som ringer før det sammenleggbare elementet faktisk har blitt vist eller skjult (dvs. før hendelsen shown.bs.collapseeller hidden.bs.collapseinntreffer).

.collapse('show')

Viser et sammenleggbart element. Går tilbake til den som ringer før det sammenleggbare elementet faktisk har blitt vist (dvs. før shown.bs.collapsehendelsen inntreffer).

.collapse('hide')

Skjuler et sammenleggbart element. Går tilbake til den som ringer før det sammenleggbare elementet faktisk har blitt skjult (dvs. før hidden.bs.collapsehendelsen inntreffer).

arrangementer

Bootstraps kollapsklasse avslører noen få hendelser for å koble seg til kollapsfunksjonalitet.

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

Carousel carousel.js

En lysbildefremvisningskomponent for å sykle gjennom elementer, som en karusell. Nestede karuseller støttes ikke.

Eksempler

Tidligere Neste

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

Valgfrie bildetekster

Legg enkelt til bildetekster til lysbildene dine med .carousel-captionelementet i en hvilken som helst .item. Plasser omtrent hvilken som helst valgfri HTML der inne, og den blir automatisk justert og formatert.

Første lysbildeetikett

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Tidligere Neste

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

Bruk

Flere karuseller

Karuseller krever bruk av en idpå den ytterste beholderen (den .carousel) for at karusellkontrollene skal fungere skikkelig. Når du legger til flere karuseller, eller når du bytter en karusell id, må du sørge for å oppdatere de relevante kontrollene.

Via dataattributter

Bruk dataattributter for enkelt å kontrollere posisjonen til karusellen. data-slidegodtar nøkkelordene preveller next, som endrer lysbildeposisjonen i forhold til gjeldende posisjon. Alternativt kan du bruke data-slide-tofor å sende en rå lysbildeindeks til karusellen data-slide-to="2", som flytter lysbildeposisjonen til en bestemt indeks som begynner med 0.

Attributtet brukes til å merke en karusell som animasjon fra og data-ride="carousel"med sideinnlasting. Den kan ikke brukes i kombinasjon med (overflødig og unødvendig) eksplisitt JavaScript-initialisering av samme karusell.

Via JavaScript

Ring karusell manuelt med:

$('.carousel').carousel()

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-interval="".

Metoder

.carousel(options)

Initialiserer karusellen med valgfrie alternativer objectog begynner å sykle gjennom gjenstander.

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

.carousel('cycle')

Bla gjennom karusellelementene fra venstre til høyre.

.carousel('pause')

Stopper karusellen fra å sykle gjennom gjenstander.

.carousel(number)

Sykler karusellen til en bestemt ramme (0-basert, ligner på en matrise).

.carousel('prev')

Går til forrige element.

.carousel('next')

Går til neste element.

arrangementer

Bootstraps karusellklasse avslører to hendelser for å koble til karusellfunksjonalitet.

Begge arrangementene har følgende tilleggsegenskaper:

• direction: Retningen som karusellen glir (enten "left"eller "right").
• relatedTarget: DOM-elementet som skyves på plass som det aktive elementet.

Alle karusellbegivenheter skytes mot selve karusellen (dvs. ved <div class="carousel">).

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

Fest affix.js

Eksempel

Affix-pluginen position: fixed;slås av og på, og emulerer effekten funnet med position: sticky;. Undernavigasjonen til høyre er en live demo av affix-plugin.

Bruk

Bruk affix-plugin via dataattributter eller manuelt med ditt eget JavaScript. I begge situasjoner må du oppgi CSS for plassering og bredde på det tilknyttede innholdet.

Merk: Ikke bruk avfix-plugin-modulen på et element i et relativt plassert element, for eksempel en trukket eller skjøvet kolonne, på grunn av en Safari-gjengivelsesfeil .

Posisjonering via CSS

Affix-pluginen veksler mellom tre klasser, som hver representerer en bestemt tilstand: .affix, .affix-top, og .affix-bottom. Du må oppgi stilene, med unntak av position: fixed;på .affix, for disse klassene selv (uavhengig av dette pluginet) for å håndtere de faktiske posisjonene.

Slik fungerer affix-pluginen:

1. For å starte, legger plugin til .affix-topfor å indikere at elementet er i sin øverste posisjon. På dette tidspunktet er ingen CSS-posisjonering nødvendig.
2. Hvis du ruller forbi elementet du vil feste, bør det utløse selve påføringen. Det er her .affixerstatter .affix-topog setter position: fixed;(levert av Bootstraps CSS).
3. Hvis en bunnforskyvning er definert, bør rulling forbi den erstattes .affixmed .affix-bottom. Siden forskyvninger er valgfrie, krever innstilling av en at du angir riktig CSS. I dette tilfellet, legg til position: absolute;når det er nødvendig. Programtillegget bruker dataattributtet eller JavaScript-alternativet for å bestemme hvor elementet skal plasseres derfra.

Følg trinnene ovenfor for å angi CSS for ett av bruksalternativene nedenfor.

Via dataattributter

For enkelt å legge til atferd til ethvert element, legg data-spy="affix"til elementet du vil spionere på. Bruk forskyvninger for å definere når du skal veksle mellom festing av et element.

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

Via JavaScript

Ring affix-plugin-modulen via JavaScript:

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

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-offset-top="200".

Metoder

.affix(options)

Aktiverer innholdet ditt som tilknyttet innhold. Godtar et valgfritt alternativ object.

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

.affix('checkPosition')

Beregner tilstanden til vedlegget på nytt basert på dimensjonene, posisjonen og rulleposisjonen til de relevante elementene. Klassene .affix, .affix-top, og .affix-bottomblir lagt til eller fjernet fra det tilknyttede innholdet i henhold til den nye tilstanden. Denne metoden må kalles hver gang dimensjonene til det tilknyttede innholdet eller målelementet endres, for å sikre riktig plassering av det tilknyttede innholdet.

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

arrangementer

Bootstraps affix-plugin avslører noen få hendelser for å koble til affix-funksjonalitet.