Oversigt

Individuelt eller samlet

Plugins kan indgå individuelt (bootstrap's individuelle *.js filer), eller alle på en gang (med bootstrap.js eller minified bootstrap.min.js).

Data attributter

Du kan bruge alle bootstrap-plugins rent gennem markup API uden at skrive en eneste linje af JavaScript. Dette er bootstrap's førsteklasses API og bør være dit første betragtning, når du bruger en plugin.

Når det er sagt, i nogle situationer kan det være ønskeligt at slå denne funktion fra. Derfor yder vi også mulighed for at deaktivere dataattributten API ved adskillelse alle hændelser på dokumentet namespaced med data-api. Det ser således ud:

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

Alternativt til at ramme et bestemt plugin, kun omfatte plugin's navn som et navneområde sammen med data-api namespace:

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

Programmaessige API

Vi tror også du skal kunne bruge alle bootstrap-plugins rent gennem JavaScript-API. Alle offentlige API'er er enkelt, chainable metoder, og vende tilbage til indsamling handlet.

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

Alle metoder skal acceptere en valgfri muligheder objekt, en streng som mål en bestemt metode eller noget (som indleder et plugin med standardopsætningen):

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

Hvert plugin også udsætter sin rå konstruktør på en Constructor ejendom: $.fn.popover.Constructor. Hvis du gerne vil have et bestemt plugin f. eks. hente det direkte fra et element: $('[rel="popover"]').data('popover').

Standardindstillinger

Du kan ændre standardindstillingerne for en plugin ved at ændre plugin's Constructor.DEFAULTS objekt:

$.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 navneområde kollisioner kan lejlighedsvis forekomme. Hvis dette sker, kan du ringe .noConflict på plugin du ønsker at vende tilbage til værdi af.

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

Hændelser

Bootstrap giver brugerdefinerede begivenheder for de fleste plugins' unikke handlinger. Generelt disse kommer i en uendelig og tidligere participle form - hvor uendelig (ex. show) Udløses i begyndelsen af en hændelse, og dens tidligere participle form (ex. shown) Udløses ved afslutningen af en handling.

Som i 3.0.0, bootstrap-begivenheder er namespaced.

Alle uendelig events giver preventDefault funktionalitet. Dette giver mulighed for at standse 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
})

Ingen særlig kraftig tilbagegang i JavaScript er deaktiveret

Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <noscript> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.

Overgange transition.js

Om overgange

For simple overgangseffekter, omfatter transition.js når ud til andre JS filer. Hvis du bruger den kompilerede (eller minified) bootstrap.js, er det ikke nødvendigt at medtage denne—det er der allerede.

Hvad er indeni

Overgang.js er en grundlæggende helper transitionEnd begivenheder samt en CSS overgang emulator. Det bruges af andre plug-ins til at kontrollere om CSS-overgangsproces og fange hængende overgange.

Modals modal.js

Modals er strømlinet, men en fleksibel dialog beskeder med det mindste nødvendige funktioner og smarte standardindstillinger.

På grund af hvordan HTML5 definerer dets semantik, autofocus HTML egenskab har ingen virkning på bootstrap modals.

Eksempler

Statisk eksempel

En gengivne modal med hoved, krop og handlinger i sidefoden.

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</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

Skifte en modal via JavaScript ved at klikke på knappen nedenfor. Den glider ned og fade i 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" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</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

Modals har to valgfrie størrelser, der er tilgængelige via modifikator klasser skal 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 bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

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

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

Fjern animation

For modals, der blot vises i stedet for fade ind at se, fjern .fade klasse fra dit modale markup.

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

Brug

Den modale plugin skifter dit skjulte indhold på efterspørgsel via data attributter eller JavaScript. Det tilføjer også .modal-open til <body> for at tilsidesætte standard rulle adfærd og genererer en .modal-backdrop for at give et klik på området for fyringen modals vises når du klikker uden for de forskellige transportformer.

Via data attributter

Aktivere en modal uden at skrive JavaScript. data-toggle="modal" På en controller element, f. eks. en knap, sammen med en data-target="#foo" eller href="#foo" til at ramme et bestemt modale skifte.

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

Via JavaScript

Kalder en modal med id myModal med en enkelt linie i JavaScript:

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

Indstillinger

Indstillinger kan overføres via data attributter eller JavaScript. For data attributter, append funktionen navn 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 indstillinger object.

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

.modal('toggle')

Manuelt skifter mellem forskellige transportformer. vender tilbage til personen før den modale har faktisk været vist eller skjult (altså før shown.bs.modal eller hidden.bs.modal hændelse).

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

.modal('show')

Manuelt åbner en modal. vender tilbage til personen før den modale har faktisk været vist (altså før shown.bs.modal hændelse).

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

.modal('hide')

Manuelt gemmer en modal. vender tilbage til personen før den modale faktisk er blevet skjult (altså før hidden.bs.modal hændelse).

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

Hændelser

Bootstrap-modal klasse afslører et par arrangementer for tilslutning til modal funktionalitet.

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

Rullelister dropdown.js

Eksempler

Tilføj dropdown menuer til næsten alt med denne simple plugin, herunder navbar -, faner og piller.

I en navbar

Inden piller

Brug

Via data attributter eller JavaScript, rullelisten plugin skifter skjulte indhold (dropdown menuer) ved at skifte .open klasse på den overordnede liste element.

På mobile enheder, åbne en rulleliste tilføjer en .dropdown-backdrop som et tryk på området til at lukke rullelisten menuer ved at banke uden for menuen, en forudsætning for passende iOS-støtte. Dette betyder, at man skifter fra en åbn rullemenuen til en anden rullemenuen kræver et ekstra tryk på mobil.

Bemærk: data-toggle="dropdown" attribut er henvist til for at lukke rullelisten menuer på en plan, så det er en god ide at bruge det.

Via data attributter

Tilføj data-toggle="dropdown" til et link eller en knap til at skifte en rulleliste.

<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" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

At holde URLs intakt med link knapper, brug data-target attribut i stedet for href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Via JavaScript

Opkald afrejsested via JavaScript:

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

Indstillinger

Ingen

Metoder

$().dropdown('toggle')

Skifter til rullemenuen for en given navbar - eller faneopdelt navigering.

Hændelser

Rullemenuen alle begivenheder er fyret på .dropdown-menu's overordnede element.

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

ScrollSpy scrollspy.js

Eksempel i navbar

Det ScrollSpy plugin er for automatisk at opdatere nav mål baseret på scroll-position. Rul området under navbar - og se de aktive klasse. Rullelisten underpunkter bliver fremhævet som meget vel.

Brug

Kræver relativ positionering

Uanset gennemførelsen metode scrollspy kræver brug af position: relative; på det element du udspionere. I de fleste tilfælde <body>.

Via data attributter

For nemt at tilføje scrollspy adfærd til din topbar navigation, tilføje data-spy="scroll" til det element, du ønsker at udspionere (mest typisk vil det være <body>). Tilsæt derefter data-target med attributten ID eller klasse af det overordnede element i enhver bootstrap .nav komponent.

body {
  position: relative;
}

<body data-spy="scroll" data-target=".navbar-example">
  ...
  <div class="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Via JavaScript

Efter tilføjelse af position: relative; i din CSS, kalder 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 den dom, du skal ringe til opdater metode som så:

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

Indstillinger

Indstillinger kan overføres via data attributter eller JavaScript. For data attributter, append funktionen navn data-, som i data-offset="".

Hændelser

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

Togglable faner tab.js

Eksempel faner

Tilføj hurtig, dynamisk fane funktionalitet til at gå gennem ruder af lokalt indhold, endda via dropdown menuer.

Brug

Aktiverer tabbable faner via JavaScript (hver fane skal aktiveres individuelt):

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

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

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

Markup

Du kan aktivere et vindue eller pille navigation uden at skrive noget JavaScript ved blot at angive data-toggle="tab" eller data-toggle="pill" på et element. Tilføjelse af nav og nav-tabs klasser til fanen ul vil anvende bootstrap fane styling, men tilføjer nav og nav-pills klasser pille styling.

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#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>

Fade-effekt

At tappe fade ind, tilføjer .fade til hver .tab-pane. Den første fane rude skal også have .in til korrekt fade i indledende indhold.

<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 vindue element og indhold beholder. Tab skal have enten en data-target eller href rettet mod en container node i DOM.

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

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

<script>
  $(function () {
    $('#myTab a:last').tab('show')
  })
</script>

Hændelser

When showing a new tab, the events fire in the following order:

1. hide.bs.tab (on the current active tab)
2. show.bs.tab (on the to-be-shown tab)
3. hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
4. shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

If no tab was already active, then the hide.bs.tab and hidden.bs.tab events will not be fired.

$('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 den fremragende jQuery.Smarties) blev lidt småfuld plugin skrevet af Jason ramme; Værktøjstip er en opdateret version, som ikke er afhængige af billeder, bruge CSS3 for animationer, og data-egenskaber for lokal titel storage.

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

Eksempler

Holde musen hen over linkene nedenfor for at se værktøjstip:

Static tooltip

Der er fire muligheder: øverst til højre, nederst, og justeret til venstre.

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>

Brug

Værktøjstippet plugin genererer indhold og markup på efterspørgslen, og som standard placerer værktøjstip efter deres udløser element.

Udløser værktøjstippet via JavaScript:

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

Markup

Det krævede markup for et værktøjstip er kun en data attribut og title på HTML-element, du ønsker at have et værktøjstip. Den genererede formattering af et værktøjstip er forholdsvis enkelt, men det kræver en holdning (som standard indstillet til top af 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>

Indstillinger

Indstillinger kan overføres via data attributter eller JavaScript. For data attributter, append funktionen navn data-, som i data-animation="".

Metoder

$().tooltip(options)

Lægger et værktøjstip handler til et element samling.

.tooltip('show')

Reveals an element's tooltip. Tooltips with zero-length titles are never displayed.

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

.tooltip('hide')

Skjuler et element's værktøjstip.

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

.tooltip('toggle')

Skifter et element's værktøjstip.

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

.tooltip('destroy')

Huder og ødelægger et element's værktøjstip.

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

Hændelser

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

Popovers popover.js

Eksempler

Tilføje små masker i indhold, f. eks. om iPad, at ethvert element i husets sekundære oplysninger.

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

Statisk popover

Der er fire muligheder: øverst til højre, nederst, og justeret til venstre.

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>

Afskedigelse på næste klik

Brug en focus trigger til at afskedige popovers på det næste klik, at brugeren foretager.

<a href="#" 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

Aktiverer popovers via JavaScript:

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

Indstillinger

Indstillinger kan overføres via data attributter eller JavaScript. For data attributter, append funktionen navn data-, som i data-animation="".

Metoder

$().popover(options)

Initialiserer popovers til et element samling.

.popover('show')

Reveals an element's popover. Popovers whose both title and content are zero-length are never displayed.

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

.popover('hide')

Hides an element's popover.

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

.popover('toggle')

Toggles an element's popover.

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

.popover('destroy')

Huder og ødelægger et element's popover.

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

Hændelser

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

Alarmmeddelelser alert.js

Eksempel advarsler

Tilføj afskedige funktionalitet til alle alarmmeddelelser med dette plugin.

When using a .close button, it must be the first child of the .alert-dismissible and no text content may come before it in the markup.

Brug

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM.

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

To have your alerts use animation when closing, make sure they have the .fade and .in classes already applied to them.

Metoder

$().alert()

Gør en opmærksom lytter til klik-hændelser på nedstammer elementer, som har data-dismiss="alert" attribut. (Ikke nødvendigt ved brug af data-api's auto-initialisering.)

$().alert('close')

Lukker en advarsel ved at fjerne det fra DOM. Hvis .fade og .in klasser er til stede på det element, at indberetningen vil fade ud før det er fjernet.

Hændelser

Bootstrap's alarm plugin afdækker nogle hændelser til fastgørelse af advarselsfunktion.

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

Knapper button.js

Udret mere med knapper. Knap, eller oprette grupper af knapper til flere komponenter som f. eks. værktøjslinjer.

Stateful

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

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

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

Enkelt skifte

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

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

Checkbox / Radio

Add data-toggle="buttons" to a .btn-group containing checkbox or radio inputs to enable toggling in their respective styles.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

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

Metoder

$().button('toggle')

Skifter push stat. Giver knappen udseende, at det er blevet aktiveret.

$().button('reset')

Nulstiller knappen stat - swaps tekst til den oprindelige tekst.

$().button(string)

Swaps text to any data defined text state.

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

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

Sammenbrud sammenbrud.js

Om

Få base stilarter og fleksibel support til sammenfoldelige komponenter som harmonikaer og navigation.

Eksempel harmonika

Ved hjælp af sammenbrud plugin, vi har bygget et simpelt harmonikafals ved at udvide panel komponent.

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

It's also possible to swap out .panel-bodys with .list-groups.

Du kan også bruge plugin uden harmonikafals markup. Lav en knap skifte udvidelse og indskrænkning af et andet element.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo" aria-expanded="true" aria-controls="demo">
  simple collapsible
</button>

<div id="demo" class="collapse in">...</div>

Brug

Sammenbruddet plugin benytter et par klasser til håndtering af tunge løft:

• .collapse skjuler indholdet
• .collapse.in viser indholdet
• .collapsing Når overgangen starter, og fjernes, når det slutter

Disse klasser kan findes i component-animations.less.

Via data attributter

Just add data-toggle="collapse" and a data-target to the element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

For at tilføje harmonikafals-lignende gruppe forvaltning til en sammenklappelig kontrol, tilføje data egenskab data-parent="#selector". Se demoen for at se det i aktion.

Via JavaScript

Aktiver manuelt:

$('.collapse').collapse()

Indstillinger

Indstillinger kan overføres via data attributter eller JavaScript. For data attributter, append funktionen navn data-, som i data-parent="".

Metoder

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object.

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

.collapse('toggle')

Skifter en sammenklappelig element til vist eller skjult.

.collapse('show')

Viser en sammenklappelig element.

.collapse('hide')

Skjuler en sammenklappelig element.

Hændelser

Bootstrap's sammenbrud klasse afdækker nogle hændelser til fastgørelse i sammenbrud funktionalitet.

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

Carousel carousel.js

Et diasshow komponent for cykling gennem bestanddele, ligesom 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"></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"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Valgfrie undertekster

Tilføj billedtekst til din glider nemt med .carousel-caption inden for .item. Placer blot om et valgfrit HTML inden der, og den vil automatisk blive justeret og formateret.

Første skub etiket

Nulla vitae elit libero, augue pharetra mollis interdum.

Anden skub etiket

Lorem Ipsum sidde for knappens amet, consectetur adipiscing elit.

Tredje skub etiket

Praesent commodo studieforløb magna, veau 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 id på den yderste container ( .carousel) for karrusel kontrol for at fungere korrekt. Når du tilføjer flere karruseller, eller når man skifter en karrusel id, skal du sørge for at opdatere den relevante kontrol.

Via data attributter

Brug data attributter til nemt at styre positionen af karrusellen. data-slide Accepterer nøgleord prev eller next, som ændrer skub position i forhold til den aktuelle stilling. Alternativt kan du bruge data-slide-to skal passere en rå skub indeks til karrusellen data-slide-to="2", som skifter skub holdning til et bestemt indeks begynder med 0.

data-ride="carousel" Egenskab bruges til at markere en karrusel som animerer start page load. kan ikke bruges i kombination med (overflødige og unødvendige) udtrykkelig JavaScript initialisering af samme karrusel.

Via JavaScript

Opkald karrusel manuelt med:

$('.carousel').carousel()

Indstillinger

Indstillinger kan overføres via data attributter eller JavaScript. For data attributter, append funktionen navn data-, som i data-interval="".

Metoder

.carousel(options)

Initialiserer karrusel med en valgfri indstillinger object og starter cykling gennem elementer.

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

.carousel('cycle')

Bladrer gennem karrusellen elementer fra venstre til højre.

.carousel('pause')

Stop karrusellen fra cykling gennem elementer.

.carousel(number)

Cyklusser med karrusel til en bestemt ramme (0, svarende til et array).

.carousel('prev')

Skifter til det forrige element.

.carousel('next')

Skifter til den næste vare.

Hændelser

Bootstrap-karrusel klasse udsætter to hændelser for tilslutning til karrusel funktion.

Begge begivenheder har følgende ekstra egenskaber:

• direction: i hvilken retning karrusel glider (enten "left" eller "right".
• relatedTarget: DOM element, der skubbes på plads som det aktive element.

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

Anbringe affix.js

Eksempel

Det subnavigation til højre er en live demo af anbringe plugin.

Brug

Brug den anbringer plugin via data attributter eller manuelt med din egen JavaScript. i begge situationer skal du give CSS for placering og bredde af din anbragt indhold.

Placering via CSS

Det anbringer plugin skifter mellem tre klasser, som hver repræsenterer en bestemt tilstand: .affix .affix-top, og .affix-bottom. Du skal give de stilarter for disse klasser selv (uafhængig af dette plugin) til at håndtere de faktiske positioner.

Her er hvordan anbringer plugin fungerer:

1. Til at begynde med plugin tilføjer .affix-top for at angive det element er i sin øverste position. På dette punkt ingen CSS positionering er nødvendig.
2. Du ruller forbi det element, du vil anbringe skal udløse den faktiske anbringelse. Dette er hvor .affix erstatter .affix-top og position: fixed; (leveret af bootstrap's CSS).
3. Hvis en nedre forskydning er defineret, rulle forbi det skal erstatte .affix med .affix-bottom. Da forskydninger er valgfrit, om man skal du indstille den relevante CSS. I dette tilfælde tilsættes position: absolute; når det er nødvendigt. Det plugin bruger data egenskab eller JavaScript til at bestemme placeringen af elementet fra der.

Følg ovenstående trin for at indstille din CSS for enten for brug nedenstående indstillinger.

Via data attributter

For nemt at tilføje anbringe adfærd til ethvert element, blot tilføje data-spy="affix" til det element, du ønsker at udspionere. Brug forskydninger for at definere, hvornår for at skifte til fastgørelse af et element.

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

Via JavaScript

Ring til anbringer plugin via JavaScript:

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

Indstillinger

Indstillinger kan overføres via data attributter eller JavaScript. For data attributter, append funktionen navn data-, som i data-offset-top="200".

Hændelser

Bootstrap's anbringe plugin afdækker nogle hændelser til fastgørelse i anbringer funktionalitet.