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

Brug af det kompilerede JavaScript

Både bootstrap.jsog bootstrap.min.jsindeholder alle plugins i en enkelt fil. Medtag kun én.

Plugin-afhængigheder

Nogle plugins og CSS-komponenter afhænger af andre plugins. Hvis du inkluderer plugins individuelt, skal du sørge for at tjekke for disse afhængigheder i dokumenterne. Bemærk også, at alle plugins afhænger af jQuery (dette betyder, at jQuery skal inkluderes før plugin-filerne). Se voresbower.json for at se, hvilke versioner af jQuery der understøttes.

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

Kun ét plugin pr. element via dataattributter

Brug ikke dataattributter fra flere plugins på det samme element. For eksempel kan en knap ikke både have et værktøjstip og skifte modal. For at opnå dette skal du bruge et indpakningselement.

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

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

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.

Tredjeparts biblioteker

Bootstrap understøtter ikke officielt tredjeparts JavaScript-biblioteker som Prototype eller jQuery UI. På trods .noConflictaf begivenheder med navneafstand kan der være kompatibilitetsproblemer, som du skal løse på egen hånd.

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.

Flere åbne modaler understøttes ikke

Sørg for ikke at åbne en modal, mens en anden stadig er synlig. Visning af mere end én modal ad gangen kræver tilpasset kode.

Modal markup placering

Forsøg altid at placere en modals HTML-kode på øverste niveau i dit dokument for at undgå, at andre komponenter påvirker modalens udseende og/eller funktionalitet.

Forbehold for mobilenheder

Der er nogle forbehold vedrørende brug af modals på mobile enheder. Se vores browsersupportdokumenter for detaljer.

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>

Gør modaler tilgængelige

Sørg for at tilføje role="dialog"og aria-labelledby="...", med henvisning til den modale titel, til .modal, og role="document"til sig .modal-dialogselv.

Derudover kan du give en beskrivelse af din modale dialog med aria-describedby.modal.

Indlejring af YouTube-videoer

Indlejring af YouTube-videoer i modaler kræver yderligere JavaScript, der ikke er i Bootstrap for automatisk at stoppe afspilning og mere. Se dette nyttige Stack Overflow-indlæg for mere information.

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 bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

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

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

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

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,

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

Navn type Standard beskrivelse
baggrund boolesk eller strengen'static' rigtigt Indeholder et modal-baggrundselement. Alternativt kan du angive staticfor en baggrund, som ikke lukker modalen ved klik.
tastatur boolesk rigtigt Lukker modalen, når der trykkes på escape-tasten
at vise boolesk rigtigt Viser modal ved initialisering.
fjern sti falsk

Denne indstilling er forældet siden v3.3.0 og er blevet fjernet i v4. Vi anbefaler i stedet at bruge skabeloner på klientsiden eller en databindingsramme eller selv at kalde jQuery.load .

Hvis en ekstern URL er angivet, vil indholdet blive indlæst én gang via jQuerys loadmetode og injiceret i .modal-contentdiv. Hvis du bruger data-api'en, kan du alternativt bruge hrefattributten til at angive fjernkilden. Et eksempel på dette er vist nedenfor:

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

Metoder

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

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

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

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

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

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

Begivenhedstype Beskrivelse
show.bs.modal Denne hændelse udløses med det samme, når showinstansmetoden kaldes. Hvis det er forårsaget af et klik, er det klikkede element tilgængeligt som relatedTargethændelsens egenskab.
vist.bs.modal Denne hændelse udløses, når modalen er gjort synlig for brugeren (vil vente på, at CSS-overgange er fuldført). Hvis det er forårsaget af et klik, er det klikkede element tilgængeligt som relatedTargethændelsens egenskab.
hide.bs.modal Denne hændelse udløses straks, når hideinstansmetoden er blevet kaldt.
skjult.bs.modal Denne hændelse udløses, når modalen er færdig med at blive skjult for brugeren (vil vente på, at CSS-overgange er fuldført).
loaded.bs.modal Denne hændelse udløses, når modalen har indlæst indhold ved hjælp af remoteindstillingen.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

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

Indenfor en navbar

Indenfor piller

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

data-toggle="dropdown"stadig påkrævet

Uanset om du kalder din dropdown via JavaScript eller i stedet bruger data-api, data-toggle="dropdown"skal du altid være tilstede på dropdownens triggerelement.

Ingen

Skifter rullemenuen for en given navigationslinje eller navigation med faner.

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.

Begivenhedstype Beskrivelse
vis.bs.dropdown Denne hændelse udløses med det samme, når vis-instansmetoden kaldes.
vist.bs.dropdown Denne hændelse udløses, når rullemenuen er gjort synlig for brugeren (vil vente på CSS-overgange for at fuldføre).
hide.bs.dropdown Denne hændelse udløses med det samme, når hide instansmetoden er blevet kaldt.
skjult.bs.rullemenu Denne hændelse udløses, når dropdown-menuen er færdig med at blive skjult for brugeren (vil vente på CSS-overgange for at fuldføre).
$('#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.

@fed

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi før de udsolgte qui. Tumblr cykelrettigheder fra jord til bord uanset hvad. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hættetrøje minim qui du sandsynligvis ikke har hørt om dem og cardigan trust fund culpa biodiesel wes anderson æstetiske. Nihil tatoveret accusamus, cred ironi biodiesel keffiyeh håndværker ullamco consequat.

@mdo

Veniam marfa overskæg skateboard, adipisicing fugiat velit pitchfork skæg. Freegan skæg aliqua cupidatat mcsweeney's vero. Cupidatat fire loko nisi, ea helvetica nulla carles. Tatoveret cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles ikke-æstetisk øvelse quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

en

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

to

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

three

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

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche ironi, thundercats du sikkert ikke har hørt om dem consequat hættetrøje glutenfri lo-fi fap aliquip. Labore elit placeat før de solgte ud, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Brug

Kræver Bootstrap nav

Scrollspy kræver i øjeblikket brug af en Bootstrap nav-komponent for korrekt fremhævelse af aktive links.

Opløselige ID-mål påkrævet

Navbar-links skal have opløselige id-mål. For eksempel skal et <a href="#home">home</a>svar svare til noget i DOM som <div id="home"></div>.

Ikke- :visiblemålelementer ignoreret

Målelementer, der ikke er i :visiblehenhold til jQuery , vil blive ignoreret, og deres tilsvarende nav-elementer vil aldrig blive fremhævet.

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

Navn type Standard beskrivelse
offset nummer 10 Pixels til forskydning fra toppen ved beregning af rulleposition.

Begivenheder

Begivenhedstype Beskrivelse
activate.bs.scrollspy Denne begivenhed udløses, når et nyt element bliver aktiveret af scrollspyen.
$('#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.

Rå denim du har sikkert ikke hørt om dem jeanshorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegansk helvetica. Reprehenderit slagter retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan amerikansk beklædning, slagter voluptate nisi qui.

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

Udvider navigation med faner

Dette plugin udvider navigationskomponenten med faner for at tilføje områder med tabulatorer.

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.

Begivenhedstype Beskrivelse
show.bs.tab Denne begivenhed udløses på faneshow, men før den nye fane er blevet vist. Brug event.targetog event.relatedTargettil at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig).
vist.bs.faneblad Denne begivenhed udløses på faneshow, efter at en fane er blevet vist. Brug event.targetog event.relatedTargettil at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig).
hide.bs.tab Denne hændelse udløses, når en ny fane skal vises (og dermed skal den tidligere aktive fane skjules). Brug event.targetog event.relatedTargettil at målrette henholdsvis den aktuelle aktive fane og den nye snart-aktive fane.
skjult.bs.fane Denne hændelse udløses, efter at en ny fane er vist (og dermed er den tidligere aktive fane skjult). Brug event.targetog event.relatedTargettil at målrette henholdsvis den forrige aktive fane og den nye aktive fane.
$('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:

Stramme bukser næste niveau keffiyeh du har sikkert ikke hørt om dem. Photo booth skæg rå denim bogtryk vegansk messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie bæredygtige quinoa 8-bit amerikansk beklædning har en frotté richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fire loko mcsweeney's cleanse veganske chambray. En virkelig ironisk håndværker uanset keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin kaffe viral.

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>

Opt-in funktionalitet

Af præstationsmæssige årsager er Tooltip og Popover data-api'erne tilvalgte, hvilket betyder, at du selv skal initialisere dem .

En måde at initialisere alle værktøjstip på en side ville være at vælge dem efter deres data-toggleegenskab:

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

Links med flere linjer

Nogle gange vil du tilføje et værktøjstip til et hyperlink, der ombryder flere linjer. Værktøjstip-plugin'ets standardadfærd er at centrere det vandret og lodret. Tilføj white-space: nowrap;til dine ankre for at undgå dette.

Værktøjstip i knapgrupper, inputgrupper og tabeller kræver specielle indstillinger

Når du bruger værktøjstip på elementer i et .btn-groupeller et .input-group, eller på tabelrelaterede elementer ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), skal du angive muligheden container: 'body'(dokumenteret nedenfor) for at undgå uønskede bivirkninger (såsom elementet bliver bredere og/ eller mister sine afrundede hjørner, når værktøjstip udløses).

Forsøg ikke at vise værktøjstip på skjulte elementer

Hvis du kalder $(...).tooltip('show')på, når målelementet er, display: none;vil værktøjstippet blive placeret forkert.

Tilgængelige værktøjstip til brugere af tastatur og hjælpemidler

For brugere, der navigerer med et tastatur, og især brugere af hjælpeteknologier, bør du kun tilføje værktøjstip til elementer, der kan fokuseres på tastaturet, såsom links, formularkontrolelementer eller ethvert vilkårligt element med en tabindex="0"attribut.

Værktøjstip på deaktiverede elementer kræver indpakningselementer

For at tilføje et værktøjstip til et disabledeller .disabledelement skal du placere elementet inde i et <div>og anvende værktøjstip til det <div>i stedet.

Muligheder

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

Navn Type Standard Beskrivelse
animation boolesk rigtigt Anvend en CSS-fade-overgang til værktøjstip
beholder streng | falsk falsk

Føjer værktøjstip til et bestemt element. Eksempel: container: 'body'. Denne mulighed er især nyttig, fordi den giver dig mulighed for at placere værktøjstip i dokumentflowet nær det udløsende element - hvilket vil forhindre værktøjstip i at flyde væk fra det udløsende element under en vinduesstørrelsesændring.

forsinke nummer | objekt 0

Forsinket visning og skjulning af værktøjstip (ms) - gælder ikke for manuel triggertype

Hvis et nummer er angivet, anvendes forsinkelse på både skjul/show

Objektstrukturen er:delay: { "show": 500, "hide": 100 }

html boolesk falsk Indsæt HTML i værktøjstippet. Hvis falsk, vil jQuerys textmetode blive brugt til at indsætte indhold i DOM. Brug tekst, hvis du er bekymret for XSS-angreb.
placering streng | fungere 'top'

Sådan placeres værktøjstip - top | nederst | venstre | højre | auto.
Når "auto" er angivet, vil det dynamisk omorientere værktøjstippet. For eksempel, hvis placeringen er "auto venstre", vises værktøjstip til venstre, når det er muligt, ellers vises det til højre.

Når en funktion bruges til at bestemme placeringen, kaldes den med værktøjstip DOM-knudepunktet som dets første argument og det udløsende element DOM-noden som dets andet. Konteksten thisindstilles til værktøjstip-forekomsten.

vælger snor falsk Hvis der er angivet en vælger, vil værktøjstip-objekter blive uddelegeret til de angivne mål. I praksis bruges dette til at give dynamisk HTML-indhold tilføjet værktøjstip. Se dette og et informativt eksempel .
skabelon snor '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML til brug ved oprettelse af værktøjstip.

Værktøjstip titlevil blive injiceret i .tooltip-inner.

.tooltip-arrowbliver pilen til værktøjstip.

Det yderste indpakningselement skal have .tooltipklassen.

titel streng | fungere ''

Standard titelværdi, hvis titleattribut ikke er til stede.

Hvis en funktion er givet, vil den blive kaldt med dens thisreferencesæt til det element, som værktøjstippet er knyttet til.

udløser snor 'hover fokus' Hvordan værktøjstip udløses - klik | svæv | fokus | brugervejledning. Du kan passere flere triggere; adskille dem med et mellemrum. manualkan ikke kombineres med nogen anden trigger.
viewport streng | objekt | fungere { selector: 'body', polstring: 0 }

Holder værktøjstip inden for dette elements grænser. Eksempel: viewport: '#viewport'eller{ "selector": "#viewport", "padding": 0 }

Hvis en funktion er givet, kaldes den med det udløsende element DOM node som eneste argument. Konteksten thisindstilles til værktøjstip-forekomsten.

Dataattributter for individuelle værktøjstip

Valgmuligheder for individuelle værktøjstip kan alternativt specificeres ved brug af dataattributter, som forklaret ovenfor.

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ør hidden.bs.tooltiphæ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

Begivenhedstype Beskrivelse
vis.bs.værktøjstip Denne hændelse udløses med det samme, når showinstansmetoden kaldes.
vist.bs.værktøjstip Denne hændelse udløses, når værktøjstippet er gjort synligt for brugeren (vil vente på, at CSS-overgange er fuldført).
skjule.bs.værktøjstip Denne hændelse udløses straks, når hideinstansmetoden er blevet kaldt.
skjult.bs.værktøjstip Denne hændelse udløses, når værktøjstip er færdig med at blive skjult for brugeren (vil vente på, at CSS-overgange er fuldført).
indsat.bs.værktøjstip Denne hændelse udløses efter show.bs.tooltiphændelsen, når værktøjstip-skabelonen er blevet tilføjet til DOM.
$('#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.

Plugin-afhængighed

Popovers kræver, at værktøjstip-plugin'et er inkluderet i din version af Bootstrap.

Opt-in funktionalitet

Af præstationsmæssige årsager er Tooltip og Popover data-api'erne tilvalgte, hvilket betyder, at du selv skal initialisere dem .

En måde at initialisere alle popovers på en side ville være at vælge dem efter deres data-toggleegenskab:

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

Popovers i knapgrupper, inputgrupper og tabeller kræver speciel indstilling

Når du bruger popovers på elementer i et .btn-groupeller et .input-group, eller på tabelrelaterede elementer ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), skal du angive muligheden container: 'body'(dokumenteret nedenfor) for at undgå uønskede bivirkninger (såsom elementet bliver bredere og/ eller mister sine afrundede hjørner, når popover udløses).

Forsøg ikke at vise popovers på skjulte elementer

Hvis du kalder $(...).popover('show')på, når målelementet er, display: none;vil popoveren blive placeret forkert.

Popovers på deaktiverede elementer kræver indpakningselementer

For at tilføje en popover til et disabledeller .disabledelement, skal du lægge elementet inde i et <div>og anvende popover på det <div>i stedet.

Links med flere linjer

Nogle gange vil du tilføje en popover til et hyperlink, der omslutter flere linjer. Popover-pluginnets standardopførsel er at centrere det vandret og lodret. Tilføj white-space: nowrap;til dine ankre for at undgå dette.

Eksempler

Statisk popover

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

Popover top

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

Popover højre

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

Popover bund

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

Popover venstre

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

Live demo

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

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.

Specifik opmærkning påkrævet for at afvise-ved-næste-klik

For korrekt adfærd på tværs af browsere og på tværs af platforme skal du bruge <a>tagget, ikke<button> tagget, og du skal også inkludere role="button"og tabindexattributterne.

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

Navn Type Standard Beskrivelse
animation boolesk rigtigt Anvend en CSS-fade-overgang til popoveren
beholder streng | falsk falsk

Føjer popover til et bestemt element. Eksempel: container: 'body'. Denne indstilling er især nyttig, fordi den giver dig mulighed for at placere popover i dokumentflowet nær det udløsende element - hvilket vil forhindre popover i at flyde væk fra det udløsende element under en vinduesstørrelse.

indhold streng | fungere ''

Standardindholdsværdi ifdata-content attribut ikke er til stede.

Hvis en funktion er givet, vil den blive kaldt med dens thisreference sat til det element, som popoveren er knyttet til.

forsinke nummer | objekt 0

Forsinket visning og skjulning af popover (ms) - gælder ikke for manuel triggertype

Hvis et nummer er angivet, anvendes forsinkelse på både skjul/show

Objektstrukturen er:delay: { "show": 500, "hide": 100 }

html boolesk falsk Indsæt HTML i popoveren. Hvis falsk, vil jQuerys textmetode blive brugt til at indsætte indhold i DOM. Brug tekst, hvis du er bekymret for XSS-angreb.
placering streng | fungere 'ret'

Sådan placeres popover - top | nederst | venstre | højre | auto.
Når "auto" er angivet, vil den dynamisk omorientere popover-vinduet. For eksempel, hvis placeringen er "auto venstre", vil popover'et blive vist til venstre, når det er muligt, ellers vises det til højre.

Når en funktion bruges til at bestemme placeringen, kaldes den med popover DOM-knuden som dets første argument og det udløsende element DOM-noden som dens anden. Konteksten thisindstilles til popover-forekomsten.

vælger snor falsk Hvis der er angivet en vælger, vil popover-objekter blive uddelegeret til de angivne mål. I praksis bruges dette til at gøre det muligt for dynamisk HTML-indhold at tilføje popovers. Se dette og et informativt eksempel .
skabelon snor '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Base HTML til brug ved oprettelse af popover.

Popover'erne titlevil blive sprøjtet ind i .popover-title.

Popover'erne contentvil blive sprøjtet ind i .popover-content.

.arrowbliver popoverens pil.

Det yderste indpakningselement skal have .popoverklassen.

titel streng | fungere ''

Standard titelværdi, hvis titleattribut ikke er til stede.

Hvis en funktion er givet, vil den blive kaldt med dens thisreference sat til det element, som popoveren er knyttet til.

udløser snor 'klik' Hvordan popover udløses - klik | svæv | fokus | brugervejledning. Du kan passere flere triggere; adskille dem med et mellemrum. manualkan ikke kombineres med nogen anden trigger.
viewport streng | objekt | fungere { selector: 'body', polstring: 0 }

Holder popover inden for dette elements grænser. Eksempel: viewport: '#viewport'eller{ "selector": "#viewport", "padding": 0 }

Hvis en funktion er givet, kaldes den med det udløsende element DOM node som eneste argument. Konteksten thisindstilles til popover-forekomsten.

Dataattributter for individuelle popovers

Valgmuligheder for individuelle popovers kan alternativt specificeres ved brug af dataattributter, som forklaret ovenfor.

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

Begivenhedstype Beskrivelse
show.bs.popover Denne hændelse udløses med det samme, når showinstansmetoden kaldes.
vist.bs.popover Denne hændelse udløses, når popoveren er gjort synlig for brugeren (vil vente på, at CSS-overgange er fuldført).
hide.bs.popover Denne hændelse udløses straks, når hideinstansmetoden er blevet kaldt.
skjult.bs.popover Denne hændelse udløses, når popoveren er færdig med at blive skjult for brugeren (vil vente på, at CSS-overgange er fuldført).
indsat.bs.popover Denne hændelse udløses efter show.bs.popoverhændelsen, når popover-skabelonen er blevet tilføjet til DOM.
$('#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 alarmer til at bruge animation, når de lukker, skal du sørge for, at de har .fadeog.in klasserne

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.

Begivenhedstype Beskrivelse
close.bs.alert Denne hændelse udløses med det samme, når closeinstansmetoden kaldes.
lukket.bs.alarm Denne hændelse udløses, når alarmen er blevet lukket (vil vente på, at CSS-overgange er fuldført).
$('#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.

Cross-browser kompatibilitet

Firefox fortsætter i form af kontroltilstande (deaktiveret og tjekket) på tværs af sideindlæsninger . En løsning for dette er at bruge autocomplete="off". Se Mozilla-fejl #654072 .

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.

Brug hvilken tilstand du kan lide!

Af hensyn til denne demonstration bruger vi data-loading-textog $().button('loading'), men det er ikke den eneste tilstand, du kan bruge. Se mere om dette nedenfor i $().button(string)dokumentationen .

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

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

Enkelt skifte

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

Forudskiftede knapper har brug for.active ogaria-pressed="true"

For præ-skiftede knapper skal du tilføje .activeklassen og aria-pressed="true"attributten til buttondig selv.

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

Forudvalgte muligheder har brug for.active

For forudvalgte muligheder skal du selv tilføje .activeklassen til input's label.

Visuel kontrolleret tilstand opdateres kun ved klik

Hvis den afkrydsede tilstand af en afkrydsningsboksknap opdateres uden at udløse en clickhændelse på knappen (f.eks. via <input type="reset">eller via indstilling af checkedegenskaben for input), skal du selv skifte .activeklassen til inputtet label.

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

Metoder

$().button('toggle')

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" autocomplete="off">
  ...
</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.

Plugin-afhængighed

Collapse kræver, at overgangspluginnet er inkluderet i din version af Bootstrap.

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.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Eksempel på harmonika

Udvid standardsammenbrudsadfærden for at skabe en harmonika med panelkomponenten.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sætte en fugl på det blæksprutte single-oprindelse kaffe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegansk excepteur slagter vice lomo. Leggings occaecat craft beer farm-to-table, rå denim æstetisk synth nesciunt du sikkert ikke har hørt om dem accusamus labore bæredygtig VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Det er også muligt at bytte .panel-bodys ud med .list-groups.

  • Bootply
  • One itmus ac facilin
  • Second eros

Gør udvid/skjul kontrolelementer tilgængelige

Sørg for at tilføje aria-expandedtil kontrolelementet. Denne attribut definerer eksplicit den aktuelle tilstand af det sammenklappelige element til skærmlæsere og lignende hjælpeteknologier. Hvis det sammenklappelige element er lukket som standard, skal det have en værdi på aria-expanded="false". Hvis du har indstillet det sammenklappelige element til at være åbent som standard ved hjælp af inklassen, skal du indstille aria-expanded="true"på kontrolelementet i stedet. Pluginnet vil automatisk skifte denne egenskab baseret på, om det sammenklappelige element er blevet åbnet eller lukket.

Derudover, hvis dit kontrolelement målretter mod et enkelt sammenklappeligt element - dvs. data-targetattributten peger på en idvælger - kan du tilføje en yderligere aria-controlsattribut til kontrolelementet, der indeholder iddet sammenklappelige element. Moderne skærmlæsere og lignende hjælpeteknologier gør brug af denne egenskab til at give brugerne yderligere genveje til at navigere direkte til selve det sammenklappelige element.

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

Navn type Standard beskrivelse
forælder vælger falsk Hvis der er angivet en vælger, vil alle sammenfoldelige elementer under den angivne overordnede blive lukket, når dette sammenklappelige element vises. (svarende til traditionel harmonikaadfærd - dette afhænger af panelklassen)
skifte boolesk rigtigt Slår det sammenklappelige element til eller fra ved kald

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.

Begivenhedstype Beskrivelse
show.bs.kollaps Denne hændelse udløses med det samme, når showinstansmetoden kaldes.
vist.bs.kollaps Denne hændelse udløses, når et sammenbrudselement er blevet gjort synligt for brugeren (vil vente på, at CSS-overgange er fuldført).
skjule.bs.kollapse Denne hændelse udløses straks, når hidemetoden er blevet kaldt.
skjult.bs.kollaps Denne hændelse udløses, når et sammenbrudselement er blevet skjult for brugeren (vil vente på, at CSS-overgange er fuldført).
$('#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.

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

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

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

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

Navn type Standard beskrivelse
interval nummer 5000 Mængden af ​​tid, der skal forsinkes mellem automatisk cykling af en vare. Hvis falsk, vil karrusellen ikke automatisk cykle.
pause streng | nul "hover" Hvis den er indstillet til "hover", pauser cyklingen af ​​karrusellen på mouseenterog genoptager cyklingen af ​​karrusellen på mouseleave. Hvis den er indstillet til null, vil det ikke sætte den på pause ved at holde markøren over karrusellen.
indpakning boolesk rigtigt Om karrusellen skal cykle kontinuerligt eller have hårde stop.
tastatur boolesk rigtigt Om karrusellen skal reagere på tastaturbegivenheder.

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

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

Cykler gennem karruselelementerne fra venstre mod højre.

Stopper karrusellen i at cykle gennem genstande.

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

Skifter til det forrige element.

Skifter til næste punkt.

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

Begivenhedstype Beskrivelse
slide.bs.karrusel Denne hændelse udløses med det samme, når slideinstansmetoden påkaldes.
slid.bs.karrusel Denne begivenhed udløses, når karrusellen har fuldført sin slide-overgang.
$('#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-pluginnet.


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

Navn type Standard beskrivelse
offset nummer | funktion | objekt 10 Pixels at forskyde fra skærmen ved beregning af scrollposition. Hvis der angives et enkelt tal, vil forskydningen blive anvendt i både top- og bundretninger. For at give en unik, bund- og topforskydning skal du blot angive et objekt offset: { top: 10 }eller offset: { top: 10, bottom: 5 }. Brug en funktion, når du dynamisk skal beregne en offset.
mål vælger | node | jQuery element windowobjektet _ Angiver målelementet for affikset.

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.

Begivenhedstype Beskrivelse
affix.bs.affix Denne hændelse udløses umiddelbart før elementet er blevet sat på.
affixed.bs.affix Denne hændelse udløses, efter at elementet er blevet påsat.
affix-top.bs.affix Denne hændelse udløses umiddelbart før elementet er blevet sat på toppen.
affixed-top.bs.affix Denne begivenhed udløses, efter at elementet er blevet sat på toppen.
affix-bottom.bs.affix Denne hændelse udløses umiddelbart før elementet er blevet anbragt-bunden.
affixed-bottom.bs.affix Denne hændelse udløses, efter at elementet er blevet anbragt nederst.