Oversigt

Individuel eller samlet

Plugins kan inkluderes individuelt (ved hjælp af Bootstraps individuelle *.jsfiler), eller alle på én gang (ved hjælp af bootstrap.jseller den minificerede bootstrap.min.js).

Data attributter

Du kan bruge alle Bootstrap-plugins udelukkende gennem markup-API'en uden at skrive en enkelt linje JavaScript. Dette er Bootstraps førsteklasses API og bør være din første overvejelse, når du bruger et plugin.

Når det er sagt, kan det i nogle situationer være ønskeligt at slå denne funktionalitet fra. Derfor giver vi også mulighed for at deaktivere dataattributten API ved at ophæve alle hændelser på dokumentet med navneafstand data-api. Dette ser sådan ud:

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

Alternativt, for at målrette mod et specifikt plugin, skal du blot inkludere plugin's navn som et navneområde sammen med data-api navneområdet som dette:

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

Programmatisk API

Vi mener også, at du skal være i stand til at bruge alle Bootstrap-plugins udelukkende gennem JavaScript API. Alle offentlige API'er er enkeltstående, kædebare metoder og returnerer den indsamling, der blev handlet på.

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

Alle metoder bør acceptere et valgfrit option-objekt, en streng, der er målrettet mod en bestemt metode, eller ingenting (som starter et plugin med standardadfærd):

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

Hvert plugin afslører også sin rå konstruktør på en Constructoregenskab: $.fn.popover.Constructor. Hvis du gerne vil have en bestemt plugin-instans, skal du hente den direkte fra et element: $('[rel="popover"]').data('popover').

Standardindstillinger

Du kan ændre standardindstillingerne for et plugin ved at ændre pluginets Constructor.DEFAULTSobjekt:

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

Ingen konflikt

Nogle gange er det nødvendigt at bruge Bootstrap-plugins med andre UI-rammer. Under disse omstændigheder kan navneområdekollisioner lejlighedsvis forekomme. Hvis dette sker, kan du ringe .noConflicttil det plugin, du ønsker at gendanne værdien af.

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

Begivenheder

Bootstrap leverer tilpassede begivenheder til de fleste plugins' unikke handlinger. Generelt kommer disse i en infinitiv og en perfektum form - hvor infinitiv (eks. show) udløses ved starten af ​​en begivenhed, og dens participiumform (eks. shown) udløses ved afslutningen af ​​en handling.

Fra og med 3.0.0 er alle Bootstrap-begivenheder navngivet.

Alle infinitive begivenheder giver preventDefaultfunktionalitet. Dette giver mulighed for at stoppe udførelsen af ​​en handling, før den starter.

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

Saneringsmiddel

Værktøjstip og popovers bruger vores indbyggede desinfektionsmiddel til at rense muligheder, der accepterer HTML.

Standardværdien 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 tilføje nye værdier til denne standard whiteList, kan du gø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å vores desinfektionsmiddel, fordi du foretrækker at bruge et dedikeret bibliotek, for eksempel DOMPurify , skal du gøre følgende:

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

Versionsnumre

Versionen af ​​hver af Bootstraps jQuery-plugins kan tilgås via VERSIONegenskaben af ​​plugin-konstruktøren. For eksempel til værktøjstip-plugin:

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

Ingen særlige fallbacks, når JavaScript er deaktiveret

Bootstraps plugins falder ikke særlig yndefuldt tilbage, når JavaScript er deaktiveret. Hvis du bekymrer dig om brugeroplevelsen i dette tilfælde, skal du bruge <noscript>til at forklare situationen (og hvordan du genaktiverer JavaScript) for dine brugere og/eller tilføje dine egne tilpassede reserver.

Overgange transition.js

Om overgange

For enkle overgangseffekter skal du inkludere transition.jsén gang sammen med de andre JS-filer. Hvis du bruger det kompilerede (eller minificerede) bootstrap.js, er det ikke nødvendigt at inkludere dette – det er der allerede.

Hvad er der indeni

Transition.js er en grundlæggende hjælper til transitionEndbegivenheder såvel som en CSS-overgangsemulator. Det bruges af de andre plugins til at tjekke for CSS overgangsunderstøttelse og til at fange hængende overgange.

Deaktivering af overgange

Overgange kan deaktiveres globalt ved hjælp af følgende JavaScript-kodestykke, som skal komme efter transition.js(eller bootstrap.jseller bootstrap.min.js, alt efter tilfældet) er indlæst:

$.support.transition = false

Modals modal.js

Modalerne er strømlinede, men fleksible, dialogmeddelelser med den mindst nødvendige funktionalitet og smarte standardindstillinger.

På grund af hvordan HTML5 definerer sin semantik, har autofocusHTML-attributten ingen effekt i Bootstrap-modaler. For at opnå den samme effekt skal du bruge noget tilpasset JavaScript:

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

Eksempler

Statisk eksempel

En gengivet modal med sidehoved, brødtekst og sæt handlinger i sidefoden.

<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

Skift en modal via JavaScript ved at klikke på knappen nedenfor. Det vil glide ned og fade ind fra toppen af ​​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>

Valgfri størrelser

Modaler har to valgfrie størrelser, tilgængelige via modifikationsklasser, der kan placeres 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 animation

For modaler, der blot vises i stedet for at falme ind for at se, skal du fjerne .fadeklassen fra din modale markup.

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

Brug af gittersystemet

For at drage fordel af Bootstrap-gittersystemet inden for en modal skal du blot indlejre .rows inden for .modal-bodyog derefter bruge de normale gittersystemklasser.

<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 indhold baseret på udløserknap

Har du en masse knapper, der alle udløser den samme modal, bare med lidt forskelligt indhold? Brug event.relatedTargetog HTML- data-*attributter (evt. via jQuery ) til at variere indholdet af modalen afhængigt af hvilken knap der blev klikket på. Se dokumentationen til 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)
})

Brug

Det modale plugin skifter dit skjulte indhold efter behov via dataattributter eller JavaScript. Det tilføjer også .modal-opentil <body>at tilsidesætte standard rulleadfærd og genererer et .modal-backdropklikområde til at afvise viste modaler, når der klikkes uden for modalen.

Via dataattributter

Aktiver en modal uden at skrive JavaScript. Indstil data-toggle="modal"på et controller-element, som en knap, sammen med et data-target="#foo"eller href="#foo"for at målrette en bestemt modal til at skifte.

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

Via JavaScript

Kald en modal med id myModalmed en enkelt linje JavaScript:

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

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-backdrop="".

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

Metoder

.modal(options)

Aktiverer dit indhold som en modal. Accepterer en valgfri indstilling object.

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

.modal('toggle')

Skifter manuelt en modal. Vender tilbage til den, der ringer, før modalen faktisk er blevet vist eller skjult (dvs. før hændelsen shown.bs.modaleller hidden.bs.modalindtræffer).

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

.modal('show')

Åbner manuelt en modal. Vender tilbage til den, der ringer, før modalen faktisk er blevet vist (dvs. før shown.bs.modalhændelsen indtræffer).

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

.modal('hide')

Skjuler manuelt en modal. Vender tilbage til den, der ringer, før modalen rent faktisk er blevet skjult (dvs. før hidden.bs.modalhændelsen indtræffer).

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

.modal('handleUpdate')

Justerer modalens positionering for at modvirke en rullebjælke, hvis en skulle dukke op, hvilket ville få modalen til at springe til venstre.

Kun nødvendig, når højden af ​​modalen ændres, mens den er åben.

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

Begivenheder

Bootstraps modal-klasse afslører nogle få hændelser for tilslutning til modal funktionalitet.

Alle modale hændelser skydes mod selve modalen (dvs. på <div class="modal">).

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

Dropdowns dropdown.js

Eksempler

Tilføj rullemenuer til næsten alt med dette enkle plugin, inklusive navbaren, fanerne og pillerne.

Indenfor en navbar

Indenfor piller

Brug

Via dataattributter eller JavaScript skifter dropdown-pluginnet skjult indhold (rullemenuer) ved at skifte .openklassen på det overordnede listeelement.

På mobile enheder tilføjer åbning af en rullemenu et .dropdown-backdropsom et trykområde til lukning af rullemenuer, når du trykker uden for menuen, et krav for korrekt iOS-understøttelse. Det betyder, at skift fra en åben rullemenu til en anden rullemenu kræver et ekstra tryk på mobilen.

Bemærk: data-toggle="dropdown"Attributten er afhængig af at lukke rullemenuer på et programniveau, så det er en god idé altid at bruge det.

Via dataattributter

Føj data-toggle="dropdown"til et link eller knap for at skifte til en rullemenu.

<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 at holde URL'er intakte med linkknapper skal du bruge data-targetattributten 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

Kald rullemenuerne via JavaScript:

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

Muligheder

Ingen

Metoder

$().dropdown('toggle')

Skifter rullemenuen for en given navigationslinje eller navigation med faner.

Begivenheder

Alle dropdown-hændelser udløses på .dropdown-menu's overordnede element.

Alle dropdown-hændelser har en relatedTargetegenskab, hvis værdi er det skiftende ankerelement.

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

ScrollSpy scrollspy.js

Eksempel i navbar

ScrollSpy-plugin'et er til automatisk opdatering af nav-mål baseret på rulleposition. Rul gennem området under navigeringslinjen, og se den aktive klasse ændre sig. Underelementerne i rullemenuen vil også blive fremhævet.

Brug

Kræver relativ positionering

Uanset implementeringsmetoden kræver scrollspy brugen af position: relative;​​det element, du spionerer på. I de fleste tilfælde er dette <body>. Når du scrollspyer på andre elementer end <body>, skal du sørge for at have et heightsæt og overflow-y: scroll;anvendt.

Via dataattributter

For nemt at tilføje scrollspy-adfærd til din topbjælke-navigation, skal du tilføje data-spy="scroll"til det element, du vil spionere på (det vil oftest være <body>). Tilføj derefter data-targetattributten med ID'et eller klassen for det overordnede element for enhver 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 at have tilføjet position: relative;din CSS, ring til scrollspy via JavaScript:

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

Metoder

.scrollspy('refresh')

Når du bruger scrollspy i forbindelse med tilføjelse eller fjernelse af elementer fra DOM, skal du kalde opdateringsmetoden sådan:

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

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-offset="".

Begivenheder

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

Skiftbare faner tab.js

Eksempler på faner

Tilføj hurtig, dynamisk fanefunktionalitet til overgang gennem ruder med lokalt indhold, selv via rullemenuer. Indlejrede faner understøttes ikke.

Brug

Aktiver faner, der kan tabuleres via JavaScript (hver fane skal aktiveres individuelt):

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

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

$('#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 pillenavigation uden at skrive JavaScript ved blot at angive data-toggle="tab"eller data-toggle="pill"på et element. Tilføjelse af klasserne og til fanen navvil anvende Bootstrap- fanens styling , mens tilføjelse af klasserne og vil anvende pille-styling .nav-tabsulnavnav-pills

<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 at få faner til at falme ind, skal du tilføje .fadetil hver .tab-pane. Den første fanerude skal også .ingøre det oprindelige indhold 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

Aktiverer et faneelement og indholdsbeholder. Tab skal have enten en data-targeteller en hrefmålretning mod en containernode i DOM. I ovenstående eksempler er fanerne <a>s med data-toggle="tab"attributter.

.tab('show')

Vælger den givne fane og viser dens tilknyttede indhold. Enhver anden fane, der tidligere er valgt, bliver fravalgt, og dens tilknyttede indhold er skjult. Vender tilbage til den, der ringer, før faneruden faktisk er blevet vist (dvs. før shown.bs.tabhændelsen indtræffer).

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

Begivenheder

Når du viser en ny fane, udløses begivenhederne i følgende rækkefølge:

1. hide.bs.tab(på den aktuelle aktive fane)
2. show.bs.tab(på fanen der skal vises)
3. hidden.bs.tab(på den forrige aktive fane, den samme som for hide.bs.tabbegivenheden)
4. shown.bs.tab(på det nyligt aktive faneblad, det samme som for show.bs.tabbegivenheden)

Hvis ingen fane allerede var aktiv, vil begivenhederne hide.bs.tabog hidden.bs.tabikke blive udløst.

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

Værktøjstip tooltip.js

Inspireret af det fremragende jQuery.tipsy plugin skrevet af Jason Frame; Værktøjstip er en opdateret version, som ikke er afhængig af billeder, bruger CSS3 til animationer og dataattributter til lokal titellagring.

Værktøjstip med titler på nul længde vises aldrig.

Eksempler

Hold markøren over nedenstående links for at se værktøjstip:

Statisk værktøjstip

Fire muligheder er tilgængelige: top-, højre-, bund- og venstrejusteret.

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

Brug

Værktøjstip-pluginnet genererer indhold og opmærkning efter behov og placerer som standard værktøjstip efter deres udløserelement.

Udløs værktøjstippet via JavaScript:

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

Markup

Den nødvendige markering for et værktøjstip er kun en dataattribut, og titlepå HTML-elementet ønsker du at have et værktøjstip. Den genererede markering af et værktøjstip er ret enkel, selvom den kræver en position (som standard indstillet til topaf 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>

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-animation="".

Metoder

$().tooltip(options)

Vedhæfter en værktøjstip-handler til en elementsamling.

.tooltip('show')

Viser et elements værktøjstip. Vender tilbage til den, der ringer, før værktøjstip faktisk er blevet vist (dvs. før shown.bs.tooltiphændelsen indtræffer). Dette betragtes som en "manuel" udløsning af værktøjstip. Værktøjstip med titler på nul længde vises aldrig.

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

.tooltip('hide')

Skjuler et elements værktøjstip. Vender tilbage til den, der ringer, før værktøjstip rent faktisk er blevet skjult (dvs. førhidden.bs.tooltip hændelsen indtræffer). Dette betragtes som en "manuel" udløsning af værktøjstip.

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

.tooltip('toggle')

Skifter et elements værktøjstip. Vender tilbage til den, der ringer, før værktøjstip faktisk er blevet vist eller skjult (dvs. før hændelsen shown.bs.tooltipeller hidden.bs.tooltipindtræffer). Dette betragtes som en "manuel" udløsning af værktøjstip.

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

.tooltip('destroy')

Skjuler og ødelægger et elements værktøjstip. Værktøjstip, der bruger delegering (som oprettes ved hjælp af selectormuligheden ), kan ikke individuelt destrueres på efterkommer-triggerelementer.

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

Begivenheder

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

Popovers popover.js

Tilføj små overlejringer af indhold, som dem på iPad, til ethvert element for at rumme sekundær information.

Popovers, hvis både titel og indhold er nul-længde, vises aldrig.

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

Eksempler

Statisk popover

Fire muligheder er tilgængelige: top-, højre-, bund- og venstrejusteret.

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>

Afvis ved næste klik

Brug focustriggeren til at afvise popovers ved det næste klik, som brugeren foretager.

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

Brug

Aktiver popovers via JavaScript:

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

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-animation="".

Metoder

$().popover(options)

Initialiserer popovers for en elementsamling.

.popover('show')

Afslører et elements popover. Vender tilbage til den, der ringer, før popover-vinduet rent faktisk er blevet vist (dvs. før shown.bs.popoverhændelsen indtræffer). Dette betragtes som en "manuel" udløsning af popover. Popovers, hvis både titel og indhold er nul-længde, vises aldrig.

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

.popover('hide')

Skjuler et elements popover. Vender tilbage til den, der ringer, før popover faktisk er blevet skjult (dvs. før hidden.bs.popoverhændelsen indtræffer). Dette betragtes som en "manuel" udløsning af popover.

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

.popover('toggle')

Skifter et elements popover. Vender tilbage til den, der ringer, før pop-over faktisk er blevet vist eller skjult (dvs. før hændelsen shown.bs.popovereller hidden.bs.popoverindtræffer). Dette betragtes som en "manuel" udløsning af popover.

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

.popover('destroy')

Skjuler og ødelægger et elements popover. Popovers, der bruger delegering (som oprettes ved hjælp af selectormuligheden ), kan ikke individuelt destrueres på descendant trigger-elementer.

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

Begivenheder

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

Advarselsmeddelelser alert.js

Eksempler på advarsler

Tilføj afvisningsfunktionalitet til alle advarselsmeddelelser med dette plugin.

Når du bruger en .closeknap, skal den være det første underordnede af den, .alert-dismissibleog der må ikke komme noget tekstindhold før den i markeringen.

Brug

Du skal bare tilføje data-dismiss="alert"til din lukkeknap for automatisk at give en alarmlukningsfunktionalitet. Lukning af en alarm fjerner den fra DOM.

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

For at få dine underretninger til at bruge animation, når de lukker, skal du sørge for, at klasserne .fadeog allerede er anvendt på dem..in

Metoder

$().alert()

Får en advarsel til at lytte efter klikhændelser på efterkommerelementer, som har data-dismiss="alert"attributten. (Ikke nødvendigt, når du bruger data-API's automatiske initialisering.)

$().alert('close')

Lukker en advarsel ved at fjerne den fra DOM. Hvis klasserne .fadeog .iner til stede på elementet, vil advarslen fade ud, før den fjernes.

Begivenheder

Bootstraps advarselsplugin afslører nogle få hændelser for at tilslutte sig advarselsfunktionalitet.

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

Knapper button.js

Gør mere med knapper. Styr knaptilstande eller opret grupper af knapper til flere komponenter som værktøjslinjer.

Stateful

Tilføj data-loading-text="Loading..."for at bruge en indlæsningstilstand på en knap.

Denne funktion er forældet siden v3.3.5 og er blevet 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>

Enkelt skifte

Tilføj data-toggle="button"for at aktivere skifte på en enkelt knap.

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

Afkrydsningsfelt / Radio

Tilføj data-toggle="buttons"til et .btn-groupindeholdende afkrydsningsfelt eller radioindgange for at aktivere skifte i deres respektive stilarter.

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

Skifter push-tilstand. Giver knappen det udseende, at den er blevet aktiveret.

$().button('reset')

Nulstiller knaptilstand - bytter tekst til original tekst. Denne metode er asynkron og vender tilbage, før nulstillingen rent faktisk er fuldført.

$().button(string)

Skifter tekst til enhver datadefineret 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

Fleksibelt plugin, der bruger en håndfuld klasser til nem skifteadfærd.

Eksempel

Klik på knapperne nedenfor for at vise og skjule et andet element via klasseændringer:

• .collapseskjuler indhold
• .collapsinganvendes under overgange
• .collapse.inviser indhold

Du kan bruge et link med hrefattributten eller en knap med data-targetattributten. I begge tilfælde er det data-toggle="collapse"påkrævet.

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

Eksempel på harmonika

Udvid standardsammenbrudsadfærden for at skabe en harmonika 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å muligt at bytte .panel-bodys ud med .list-groups.

Brug

Collapse-pluginnet bruger et par klasser til at håndtere de tunge løft:

• .collapseskjuler indholdet
• .collapse.inviser indholdet
• .collapsingtilføjes, når overgangen starter, og fjernes, når den er færdig

Disse klasser kan findes i component-animations.less.

Via dataattributter

Bare tilføj data-toggle="collapse"og a data-targettil elementet for automatisk at tildele kontrol over et sammenklappeligt element. Attributten data-targetaccepterer en CSS-vælger at anvende sammenbruddet på. Sørg for at tilføje klassen collapsetil det sammenklappelige element. Hvis du vil have den til at åbne som standard, skal du tilføje den ekstra klasse in.

For at tilføje harmonika-lignende gruppestyring til en sammenklappelig kontrol, skal du tilføje dataattributten data-parent="#selector". Se demoen for at se dette i aktion.

Via JavaScript

Aktiver manuelt med:

$('.collapse').collapse()

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-parent="".

Metoder

.collapse(options)

Aktiverer dit indhold som et sammenklappeligt element. Accepterer en valgfri indstilling object.

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

.collapse('toggle')

Skifter et sammenklappeligt element til at blive vist eller skjult. Vender tilbage til den, der ringer, før det sammenklappelige element faktisk er blevet vist eller skjult (dvs. før hændelsen shown.bs.collapseeller hidden.bs.collapseindtræffer).

.collapse('show')

Viser et sammenklappeligt element. Vender tilbage til den, der ringer, før det sammenklappelige element faktisk er blevet vist (dvs. før shown.bs.collapsehændelsen indtræffer).

.collapse('hide')

Skjuler et sammenklappeligt element. Vender tilbage til den, der ringer, før det sammenklappelige element rent faktisk er blevet skjult (dvs. før hidden.bs.collapsehændelsen indtræffer).

Begivenheder

Bootstraps kollapsklasse afslører nogle få hændelser for at tilslutte sig sammenbrudsfunktionalitet.

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

Karrusel carousel.js

En slideshow-komponent til at cykle gennem elementer, som en karrusel.Indlejrede karruseller understøttes ikke.

Eksempler

Tidligere Næste

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

Valgfri billedtekster

Tilføj nemt billedtekster til dine dias med .carousel-captionelementet i enhver .item. Placer næsten enhver valgfri HTML derinde, og den vil automatisk blive justeret og formateret.

Første slide label

Nulla vitae elit libero, en pharetra augue mollis interdum.

Anden slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tredje slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Tidligere Næste

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

Brug

Flere karruseller

Karruseller kræver brug af en idpå den yderste beholder (den .carousel) for at karruselkontrollerne fungerer korrekt. Når du tilføjer flere karruseller, eller når du ændrer en karrusel id, skal du sørge for at opdatere de relevante kontroller.

Via dataattributter

Brug dataattributter til nemt at kontrollere karrusellens position. data-slideaccepterer nøgleordene preveller next, som ændrer diaspositionen i forhold til dens aktuelle position. Alternativt kan du bruge data-slide-totil at sende et råt diasindeks til karrusellendata-slide-to="2" , som flytter diaspositionen til et bestemt indeks, der begynder med 0.

Attributten data-ride="carousel"bruges til at markere en karrusel som animerende startende ved sideindlæsning. Den kan ikke bruges i kombination med (overflødig og unødvendig) eksplicit JavaScript-initialisering af den samme karrusel.

Via JavaScript

Kald karrusel manuelt med:

$('.carousel').carousel()

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-interval="".

Metoder

.carousel(options)

Initialiserer karrusellen med valgfrie muligheder objectog begynder at cykle gennem genstande.

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

.carousel('cycle')

Cykler gennem karruselelementerne fra venstre mod højre.

.carousel('pause')

Stopper karrusellen i at cykle gennem genstande.

.carousel(number)

Cykler karrusellen til en bestemt ramme (0-baseret, svarende til et array).

.carousel('prev')

Skifter til det forrige element.

.carousel('next')

Skifter til næste punkt.

Begivenheder

Bootstraps karruselklasse afslører to hændelser for tilslutning til karruselfunktionalitet.

Begge begivenheder har følgende yderligere egenskaber:

• direction: Den retning, karrusellen glider i (enten "left"eller "right").
• relatedTarget: DOM-elementet, der skubbes på plads som det aktive element.

Alle karruselbegivenheder skydes mod selve karrusellen (dvs. ved <div class="carousel">).

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

Sæt affix.js på

Eksempel

Affix-plugin'et slår position: fixed;til og fra og emulerer effekten fundet med position: sticky;. Undernavigationen til højre er en live demo af affix plugin.

Brug

Brug affix-pluginnet via dataattributter eller manuelt med dit eget JavaScript. I begge situationer skal du angive CSS for placeringen og bredden af ​​dit vedhæftede indhold.

Bemærk: Brug ikke affix-pluginnet på et element indeholdt i et relativt placeret element, såsom en trukket eller skubbet kolonne, på grund af en Safari-gengivelsesfejl .

Positionering via CSS

Affix-plugin'et skifter mellem tre klasser, der hver repræsenterer en bestemt tilstand: .affix, .affix-top, og .affix-bottom. Du skal selv angive stilene, med undtagelse af position: fixed;den .affix, for disse klasser (uafhængig af dette plugin) for at håndtere de faktiske positioner.

Sådan fungerer affix-pluginnet:

1. For at starte tilføjer pluginnet.affix-top for at angive, at elementet er i sin øverste position. På dette tidspunkt kræves ingen CSS-positionering.
2. Hvis du ruller forbi det element, du vil have påsat, burde det udløse den faktiske påsætning. Det er her, .affixerstatter .affix-topog sætter position: fixed;(leveret af Bootstraps CSS).
3. Hvis en bundforskydning er defineret, skal rulle forbi den erstattes .affixmed .affix-bottom. Da forskydninger er valgfrie, kræver indstilling en, at du indstiller den relevante CSS. I dette tilfælde tilføjes position: absolute;efter behov. Pluginnet bruger dataattributten eller JavaScript-indstillingen til at bestemme, hvor elementet skal placeres derfra.

Følg ovenstående trin for at indstille din CSS til en af ​​nedenstående brugsmuligheder.

Via dataattributter

For nemt at tilføje affix-adfærd til ethvert element, skal du blot tilføje data-spy="affix"til det element, du vil spionere på. Brug forskydninger til at definere, hvornår fastgørelsen af ​​et element skal skiftes.

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

Via JavaScript

Kald affix-pluginnet via JavaScript:

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

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-offset-top="200".

Metoder

.affix(options)

Aktiverer dit indhold som vedhæftet indhold. Accepterer en valgfri indstilling object.

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

.affix('checkPosition')

Genberegner tilstanden af ​​affikset baseret på dimensioner, position og rulleposition for de relevante elementer. Klasserne .affix, .affix-top, og .affix-bottomføjes til eller fjernes fra det vedhæftede indhold i henhold til den nye tilstand. Denne metode skal kaldes, hver gang dimensionerne af det vedhæftede indhold eller målelementet ændres, for at sikre korrekt placering af det vedhæftede indhold.

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

Begivenheder

Bootstraps affix-plugin afslører nogle få hændelser for tilslutning til affix-funktionalitet.