Oversikt

Individuell eller kompilert

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

Bruker det kompilerte JavaScript

Både bootstrap.jsog bootstrap.min.jsinneholder alle plugins i en enkelt fil. Inkluder bare én.

Plugin-avhengigheter

Noen plugins og CSS-komponenter er avhengige av andre plugins. Hvis du inkluderer plugins individuelt, sørg for å se etter disse avhengighetene i dokumentene. Vær også oppmerksom på at alle plugins er avhengige av jQuery (dette betyr at jQuery må inkluderes før plugin-filene). Se vårbower.json for å se hvilke versjoner av jQuery som støttes.

Dataattributter

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

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

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

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

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

Kun én plugin per element via dataattributter

Ikke bruk dataattributter fra flere plugins på samme element. En knapp kan for eksempel ikke både ha et verktøytips og veksle mellom en modal. For å oppnå dette, bruk et innpakningselement.

Programmatisk API

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

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

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

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

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

Standard instillinger

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

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

Ingen konflikt

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

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

arrangementer

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

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

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

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

Versjonsnummer

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

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

Ingen spesielle fallbacks når JavaScript er deaktivert

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

Tredjeparts biblioteker

Bootstrap støtter ikke offisielt tredjeparts JavaScript-biblioteker som Prototype eller jQuery UI. Til tross for .noConflicthendelser med navneavstand, kan det være kompatibilitetsproblemer som du må fikse på egen hånd.

Overganger transition.js

Om overganger

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

Hva er inni

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

Deaktiverer overganger

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

$.support.transition = false

Modals modal.js

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

Flere åpne modaler støttes ikke

Pass på at du ikke åpner en modal mens en annen fremdeles er synlig. Å vise mer enn én modal om gangen krever tilpasset kode.

Modal markup plassering

Prøv alltid å plassere en modals HTML-kode på toppnivå i dokumentet for å unngå at andre komponenter påvirker modalens utseende og/eller funksjonalitet.

Forbehold for mobilenheter

Det er noen forbehold angående bruk av modaler på mobile enheter. Se våre nettleserstøttedokumenter for detaljer.

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

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

Eksempler

Statisk eksempel

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

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Live demo

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Gjør modaler tilgjengelige

Sørg for å legge til role="dialog"og aria-labelledby="...", med referanse til den modale tittelen, til .modal, og role="document"til seg .modal-dialogselv.

I tillegg kan du gi en beskrivelse av din modale dialog med aria-describedby.modal.

Innbygging av YouTube-videoer

Innbygging av YouTube-videoer i modaler krever ekstra JavaScript som ikke er i Bootstrap for automatisk å stoppe avspillingen og mer. Se dette nyttige Stack Overflow-innlegget for mer informasjon.

Valgfrie størrelser

Modaler har to valgfrie størrelser, tilgjengelige via modifikasjonsklasser for å plasseres på en .modal-dialog.

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

<div class="modal fade 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 animasjon

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

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

Bruke rutenettet

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

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

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

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

Bruk

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

Via dataattributter

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

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

Via JavaScript

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

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

Alternativer

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

Navn type misligholde beskrivelse
bakteppe boolsk eller strengen'static' ekte Inkluderer et modalt bakteppeelement. Alternativt, spesifiser staticfor et bakteppe som ikke lukker modalen ved klikk.
tastatur boolsk ekte Lukker modalen når escape-tasten trykkes
forestilling boolsk ekte Viser modalen når initialisert.
fjernkontroll sti falsk

Dette alternativet er avviklet siden v3.3.0 og har blitt fjernet i v4. Vi anbefaler i stedet å bruke maler på klientsiden eller et databindingsrammeverk, eller å ringe jQuery.load selv.

Hvis en ekstern URL er oppgitt, vil innhold lastes en gang via jQuerys loadmetode og injiseres i .modal-contentdiv. Hvis du bruker data-api, kan du alternativt bruke hrefattributtet for å spesifisere den eksterne kilden. Et eksempel på dette er vist nedenfor:

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

Metoder

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

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

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

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

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

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

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

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

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

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

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

arrangementer

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

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

Hendelsestype Beskrivelse
show.bs.modal Denne hendelsen utløses umiddelbart når showinstansmetoden kalles. Hvis det er forårsaket av et klikk, er det klikkede elementet tilgjengelig som relatedTargetegenskapen til hendelsen.
vist.bs.modal Denne hendelsen utløses når modalen er gjort synlig for brukeren (vil vente til CSS-overganger er fullført). Hvis det er forårsaket av et klikk, er det klikkede elementet tilgjengelig som relatedTargetegenskapen til hendelsen.
hide.bs.modal Denne hendelsen utløses umiddelbart når hideinstansmetoden er kalt.
skjult.bs.modal Denne hendelsen utløses når modalen er ferdig skjult for brukeren (vil vente på at CSS-overganger er fullført).
lastet.bs.modal Denne hendelsen utløses når modalen har lastet inn innhold ved å bruke remotealternativet.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

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

Innenfor en navigasjonslinje

Innenfor piller

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

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

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

Via dataattributter

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

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

For å holde nettadresser intakte med lenkeknapper, bruk data-targetattributtet i stedet for href="#".

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

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

Via JavaScript

Ring rullegardinmenyene via JavaScript:

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

data-toggle="dropdown"fortsatt nødvendig

Uansett om du kaller ned rullegardinlisten din via JavaScript eller i stedet bruker data-api, data-toggle="dropdown"er det alltid nødvendig å være tilstede på rullegardinmenyens triggerelement.

Ingen

Bytter rullegardinmenyen til en gitt navigasjonslinje eller navigering med faner.

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

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

Hendelsestype Beskrivelse
vis.bs.rullegardinmenyen Denne hendelsen utløses umiddelbart når vis-instansmetoden kalles.
vist.bs.rullegardinmenyen Denne hendelsen utløses når rullegardinmenyen er gjort synlig for brukeren (vil vente på CSS-overganger for å fullføre).
skjule.bs.rullegardinmenyen Denne hendelsen utløses umiddelbart når hide-forekomstmetoden har blitt kalt.
skjult.bs.rullegardinmenyen Denne hendelsen utløses når rullegardinmenyen er ferdig skjult for brukeren (vil vente på CSS-overganger for å fullføre).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Eksempel i navbar

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

@fett

Annonse leggings keytar, brunsj id art party dolor labore. Pitchfork yr enim lo-fi før de solgte ut qui. Tumblr gård-til-bord sykkelrettigheter uansett. Anim keffiyeh carles cardigan. Velit seitan mcsweeneys fotoboks 3 wolf moon irure. Cosby genser lomo jean shorts, williamsburg hettegenser minim qui du sannsynligvis ikke har hørt om dem et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tatoverte accusamus, cred ironi biodiesel keffiyeh håndverker ullamco consequat.

@mdo

Veniam marfa bart skateboard, adipisicing fugiat velit høygaffelskjegg. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat fire loko nisi, ea helvetica nulla carles. Tatovert cosby genser food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles ikke estetisk trening 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 bag. 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 blogg, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche ironi, thundercats du sannsynligvis ikke har hørt om dem consequat hettegenser glutenfri lo-fi fap aliquip. Labore elit placeat før de solgte ut, 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.

Bruk

Krever Bootstrap nav

Scrollspy krever for øyeblikket bruk av en Bootstrap nav-komponent for riktig fremheving av aktive lenker.

Løsbare ID-mål kreves

Navbar-lenker må ha løsbare id-mål. For eksempel <a href="#home">home</a>må en tilsvare noe i DOM som <div id="home"></div>.

Ikke- :visiblemålelementer ignorert

Målelementer som ikke er :visiblei henhold til jQuery vil bli ignorert og deres tilsvarende nav-elementer vil aldri bli uthevet.

Krever relativ posisjonering

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

Via dataattributter

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

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Via JavaScript

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

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

Metoder

.scrollspy('refresh')

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

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

Alternativer

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

Navn type misligholde beskrivelse
offset Antall 10 Piksler for å forskyve fra toppen ved beregning av rulleposisjon.

arrangementer

Hendelsestype Beskrivelse
activate.bs.scrollspy Denne hendelsen utløses når et nytt element blir aktivert av scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Skiftbare faner tab.js

Eksempelfaner

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

Rå denim du sannsynligvis ikke har hørt om dem jeanshorts Austin. Nesciunt tofu stumptown aliqua, retro synth master rens. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit slakter retro keffiyeh dreamcatcher synth. Cosby genser eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, slakter 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.

Utvider fanebasert navigasjon

Denne plugin utvider navigasjonskomponenten med faner for å legge til områder med tabulatorer.

Bruk

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

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

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

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

Markup

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

<div>

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

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

</div>

Fade-effekt

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

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

Metoder

$().tab

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

.tab('show')

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

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

arrangementer

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

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

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

Hendelsestype Beskrivelse
show.bs.tab Denne hendelsen utløses på fanevisning, men før den nye fanen har blitt vist. Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den aktive fanen og den forrige aktive fanen (hvis tilgjengelig).
vist.bs.tab Denne hendelsen utløses på fanevisning etter at en fane er vist. Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den aktive fanen og den forrige aktive fanen (hvis tilgjengelig).
hide.bs.tab Denne hendelsen utløses når en ny fane skal vises (og dermed skal den forrige aktive fanen skjules). Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den gjeldende aktive fanen og den nye snart-aktive fanen.
hidden.bs.tab Denne hendelsen utløses etter at en ny fane vises (og dermed er den forrige aktive fanen skjult). Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den forrige aktive fanen og den nye aktive fanen.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Verktøytips tooltip.js

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

Verktøytips med null-lengde titler vises aldri.

Eksempler

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

Trange bukser neste nivå keffiyeh du har sannsynligvis ikke hørt om dem. Fotoboks skjegg rå denim boktrykk vegansk messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie bærekraftig quinoa 8-bits amerikanske klær har en frotté richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fire loko mcsweeney's cleanse vegan chambray. En virkelig ironisk håndverker uansett keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Statisk verktøytips

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

Fire retninger

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Opt-in funksjonalitet

Av ytelsesgrunner er Tooltip og Popover-dataapi-ene opt-in, noe som betyr at du må initialisere dem selv .

En måte å initialisere alle verktøytips på en side på er å velge dem etter deres data-toggleattributt:

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

Bruk

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

Utløs verktøytipset via JavaScript:

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

Markup

Den nødvendige markeringen for et verktøytips er kun et dataattributt og titlepå HTML-elementet ønsker du å ha et verktøytips. Den genererte markeringen av et verktøytips er ganske enkel, selv om den krever en posisjon (som standard satt til topav plugin).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Linker med flere linjer

Noen ganger vil du legge til et verktøytips til en hyperkobling som omslutter flere linjer. Standardoppførselen til verktøytipspluginen er å sentrere den horisontalt og vertikalt. Legg white-space: nowrap;til ankrene dine for å unngå dette.

Verktøytips i knappegrupper, inndatagrupper og tabeller krever spesielle innstillinger

Når du bruker verktøytips på elementer innenfor en .btn-groupeller en .input-group, eller på tabellrelaterte elementer ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), må du spesifisere alternativet container: 'body'(dokumentert nedenfor) for å unngå uønskede bivirkninger (som at elementet blir bredere og/ eller mister de avrundede hjørnene når verktøytipset utløses).

Ikke prøv å vise verktøytips på skjulte elementer

Å påkalle $(...).tooltip('show')når målelementet er display: none;vil føre til at verktøytipset blir feilplassert.

Tilgjengelige verktøytips for brukere av tastatur og hjelpemidler

For brukere som navigerer med et tastatur, og spesielt brukere av hjelpeteknologier, bør du bare legge til verktøytips til tastaturfokuserbare elementer som koblinger, skjemakontroller eller et hvilket som helst vilkårlig element med et tabindex="0"attributt.

Verktøytips på deaktiverte elementer krever innpakningselementer

For å legge til et verktøytips til et disabledeller .disabledelement, sett elementet inni et <div>og bruk verktøytipset på det <div>i stedet.

Alternativer

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

Navn Type Misligholde Beskrivelse
animasjon boolsk ekte Bruk en CSS-fade-overgang på verktøytipset
container streng | falsk falsk

Legger til verktøytipset til et spesifikt element. Eksempel: container: 'body'. Dette alternativet er spesielt nyttig ved at det lar deg plassere verktøytipset i dokumentflyten i nærheten av det utløsende elementet - noe som vil forhindre at verktøytipset flyter bort fra det utløsende elementet under en vindusstørrelse.

forsinkelse nummer | gjenstand 0

Forsinkelse med å vise og skjule verktøytipset (ms) - gjelder ikke for manuell utløsertype

Hvis et nummer er oppgitt, brukes forsinkelse på både skjul/show

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

html boolsk falsk Sett inn HTML i verktøytipset. Hvis falsk, vil jQuerys textmetode bli brukt til å sette inn innhold i DOM. Bruk tekst hvis du er bekymret for XSS-angrep.
plassering streng | funksjon 'topp'

Slik plasserer du verktøytipset - topp | nederst | venstre | høyre | auto.
Når "auto" er spesifisert, vil den dynamisk reorientere verktøytipset. For eksempel, hvis plassering er "auto venstre", vil verktøytipset vises til venstre når det er mulig, ellers vises det til høyre.

Når en funksjon brukes til å bestemme plasseringen, kalles den med verktøytips DOM-noden som første argument og utløsende element DOM-noden som den andre. Konteksten thiser satt til verktøytipsforekomsten.

velger streng falsk Hvis en velger er angitt, vil verktøytipsobjekter bli delegert til de angitte målene. I praksis brukes dette for at dynamisk HTML-innhold skal legges til verktøytips. Se dette og et informativt eksempel .
mal streng '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Baser HTML for å bruke når du lager verktøytipset.

Verktøytipset titlevil bli injisert i .tooltip-inner.

.tooltip-arrowvil bli verktøytipsets pil.

Det ytterste omslagselementet skal ha .tooltipklassen.

tittel streng | funksjon ''

Standard tittelverdi hvis titleattributtet ikke er til stede.

Hvis en funksjon er gitt, vil den kalles med thisreferansen satt til elementet som verktøytipset er knyttet til.

avtrekker streng "hover fokus" Hvordan verktøytips utløses - klikk | sveve | fokus | Håndbok. Du kan passere flere utløsere; skille dem med et mellomrom. manualkan ikke kombineres med noen annen trigger.
viewport streng | objekt | funksjon { selector: 'body', padding: 0 }

Holder verktøytipset innenfor grensene til dette elementet. Eksempel: viewport: '#viewport'eller{ "selector": "#viewport", "padding": 0 }

Hvis en funksjon er gitt, kalles den med det utløsende elementet DOM-noden som eneste argument. Konteksten thiser satt til verktøytipsforekomsten.

Dataattributter for individuelle verktøytips

Alternativer for individuelle verktøytips kan alternativt spesifiseres ved bruk av dataattributter, som forklart ovenfor.

Metoder

$().tooltip(options)

Legger en verktøytipsbehandler til en elementsamling.

.tooltip('show')

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

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

.tooltip('hide')

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

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

.tooltip('toggle')

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

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

.tooltip('destroy')

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

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

arrangementer

Hendelsestype Beskrivelse
vis.bs.verktøytips Denne hendelsen utløses umiddelbart når showinstansmetoden kalles.
vist.bs.verktøytips Denne hendelsen utløses når verktøytipset er gjort synlig for brukeren (vil vente på at CSS-overganger er fullført).
skjule.bs.verktøytips Denne hendelsen utløses umiddelbart når hideinstansmetoden er kalt.
skjult.bs.verktøytips Denne hendelsen utløses når verktøytipset er ferdig skjult for brukeren (vil vente på at CSS-overganger er fullført).
satt inn.bs.verktøytips Denne hendelsen utløses etter show.bs.tooltiphendelsen når verktøytipsmalen er lagt til DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

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

Plugin-avhengighet

Popovers krever at tooltip-pluginen er inkludert i din versjon av Bootstrap.

Opt-in funksjonalitet

Av ytelsesgrunner er Tooltip og Popover-dataapi-ene opt-in, noe som betyr at du må initialisere dem selv .

En måte å initialisere alle popovers på en side er å velge dem etter data-toggleattributtet deres:

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

Popovers i knappegrupper, inndatagrupper og tabeller krever spesiell innstilling

Når du bruker popovers på elementer i en .btn-groupeller en .input-group, eller på tabellrelaterte elementer ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), må du spesifisere alternativet container: 'body'(dokumentert nedenfor) for å unngå uønskede bivirkninger (som at elementet blir bredere og/ eller mister de avrundede hjørnene når popoveren utløses).

Ikke prøv å vise popovers på skjulte elementer

Å påkalle $(...).popover('show')når målelementet er display: none;vil føre til at popover-en blir feilplassert.

Popovers på deaktiverte elementer krever innpakningselementer

For å legge til en popover til et disabledeller .disabledelement, plasser elementet inni en <div>og bruk popover på det <div>i stedet.

Linker med flere linjer

Noen ganger vil du legge til en popover til en hyperkobling som omslutter flere linjer. Standardoppførselen til popover-pluginen er å sentrere den horisontalt og vertikalt. Legg white-space: nowrap;til ankrene dine for å unngå dette.

Eksempler

Statisk popover

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

Popover-topp

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

Popover høyre

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

Popover bunn

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>

Avvis ved neste klikk

Bruk focusutløseren til å avvise popovers ved neste klikk som brukeren gjør.

Spesifikk markering kreves for avvisning ved neste klikk

For riktig oppførsel på tvers av nettlesere og på tvers av plattformer, må du bruke <a>taggen, ikke<button> taggen, og du må også inkludere role="button"og - tabindexattributtene.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Bruk

Aktiver popovers via JavaScript:

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

Alternativer

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

Navn Type Misligholde Beskrivelse
animasjon boolsk ekte Bruk en CSS-fade-overgang på popoveren
container streng | falsk falsk

Legger popover til et bestemt element. Eksempel: container: 'body'. Dette alternativet er spesielt nyttig ved at det lar deg plassere popover i flyten av dokumentet nær det utløsende elementet - noe som vil forhindre popover fra å flyte bort fra det utløsende elementet under en vindusstørrelse.

innhold streng | funksjon ''

Standardinnholdsverdi hvis data-contentattributtet ikke er til stede.

Hvis en funksjon er gitt, vil den bli kalt med thisreferansen satt til elementet som popoveren er knyttet til.

forsinkelse nummer | gjenstand 0

Forsinkelse av å vise og skjule popover (ms) - gjelder ikke for manuell utløsertype

Hvis et nummer er oppgitt, brukes forsinkelse på både skjul/show

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

html boolsk falsk Sett inn HTML i popover-vinduet. Hvis falsk, vil jQuerys textmetode bli brukt til å sette inn innhold i DOM. Bruk tekst hvis du er bekymret for XSS-angrep.
plassering streng | funksjon 'Ikke sant'

Hvordan plassere popover - toppen | nederst | venstre | høyre | auto.
Når "auto" er spesifisert, vil den dynamisk reorientere popover-vinduet. For eksempel, hvis plasseringen er "auto venstre", vil popover-vinduet vises til venstre når det er mulig, ellers vises det til høyre.

Når en funksjon brukes til å bestemme plasseringen, kalles den med popover-DOM-noden som det første argumentet og det utløsende elementet DOM-noden som den andre. Konteksten thiser satt til popover-forekomsten.

velger streng falsk Hvis en velger er angitt, vil popover-objekter bli delegert til de angitte målene. I praksis brukes dette for å gjøre det mulig for dynamisk HTML-innhold å legge til popovers. Se dette og et informativt eksempel .
mal streng '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Base HTML for å bruke når du oppretter popover.

Popover-ene titlevil bli injisert i .popover-title.

Popover-ene contentvil bli injisert i .popover-content.

.arrowvil bli popover-pilen.

Det ytterste omslagselementet skal ha .popoverklassen.

tittel streng | funksjon ''

Standard tittelverdi hvis titleattributtet ikke er til stede.

Hvis en funksjon er gitt, vil den bli kalt med thisreferansen satt til elementet som popoveren er knyttet til.

avtrekker streng 'klikk' Hvordan popover utløses - klikk | sveve | fokus | Håndbok. Du kan passere flere utløsere; skille dem med et mellomrom. manualkan ikke kombineres med noen annen trigger.
viewport streng | objekt | funksjon { selector: 'body', padding: 0 }

Holder popover innenfor grensene til dette elementet. Eksempel: viewport: '#viewport'eller{ "selector": "#viewport", "padding": 0 }

Hvis en funksjon er gitt, kalles den med det utløsende elementet DOM-noden som eneste argument. Konteksten thiser satt til popover-forekomsten.

Dataattributter for individuelle popovers

Alternativer for individuelle popovers kan alternativt spesifiseres ved bruk av dataattributter, som forklart ovenfor.

Metoder

$().popover(options)

Initialiserer popovers for en elementsamling.

.popover('show')

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

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

.popover('hide')

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

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

.popover('toggle')

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

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

.popover('destroy')

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

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

arrangementer

Hendelsestype Beskrivelse
show.bs.popover Denne hendelsen utløses umiddelbart når showinstansmetoden kalles.
vist.bs.popover Denne hendelsen utløses når popoveren er gjort synlig for brukeren (vil vente på at CSS-overgangene er fullført).
hide.bs.popover Denne hendelsen utløses umiddelbart når hideinstansmetoden er kalt.
skjult.bs.popover Denne hendelsen utløses når popover-en er ferdig skjult for brukeren (vil vente på at CSS-overganger er fullført).
innsatt.bs.popover Denne hendelsen utløses etter show.bs.popoverhendelsen når popover-malen er lagt til DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Varslingsmeldinger alert.js

Eksempler på varsler

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

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

Bruk

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

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

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

Metoder

$().alert()

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

$().alert('close')

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

arrangementer

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

Hendelsestype Beskrivelse
close.bs.alert Denne hendelsen utløses umiddelbart når closeinstansmetoden kalles.
lukket.bs.varsel Denne hendelsen utløses når varselet er lukket (vil vente på CSS-overganger for å fullføre).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Knapper button.js

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

Kompatibilitet på tvers av nettlesere

Firefox vedvarer formkontrolltilstander (deaktivert og kontrollert) på tvers av sideinnlastinger . En løsning for dette er å bruke autocomplete="off". Se Mozilla-feil #654072 .

Stateful

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

Denne funksjonen er avviklet siden v3.3.5 og har blitt fjernet i v4.

Bruk hvilken tilstand du vil!

Av hensyn til denne demonstrasjonen bruker vi data-loading-textog $().button('loading'), men det er ikke den eneste tilstanden du kan bruke. Se mer om dette nedenfor i $().button(string)dokumentasjonen .

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

Enkel bryter

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

Forhåndsvekslede knapper trenger .activeogaria-pressed="true"

For forhåndsaktiverte knapper må du legge til .activeklassen og aria-pressed="true"attributtet til buttondeg selv.

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

Avmerkingsboks / Radio

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

Forhåndsvalgte alternativer trenger.active

For forhåndsvalgte alternativer må du selv legge til .activeklassen til inndataene label.

Visuelt kontrollert tilstand oppdateres kun ved klikk

Hvis den avkryssede tilstanden til en avkrysningsboksknapp oppdateres uten å utløse en clickhendelse på knappen (f.eks. via <input type="reset">eller via innstilling av checkedegenskapen til inngangen), må du selv bytte .activeklassen på inngangen 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')

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

$().button('reset')

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

$().button(string)

Bytter tekst til hvilken som helst datadefinert teksttilstand.

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

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

Collapse collapse.js

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

Plugin-avhengighet

Collapse krever at overgangspluginen er inkludert i din versjon av Bootstrap.

Eksempel

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

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

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

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>

Trekkspill eksempel

Utvid standard kollapsatferd for å lage et trekkspill med panelkomponenten.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunsj. 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. Annonse vegansk unntatt slakter vice lomo. Leggings occaecat craft beer farm-to-table, rå denim estetisk synth nesciunt du sannsynligvis ikke har hørt om dem accusamus labore bærekraftig VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunsj. 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. Annonse vegansk unntatt slakter vice lomo. Leggings occaecat craft beer farm-to-table, rå denim estetisk synth nesciunt du sannsynligvis ikke har hørt om dem accusamus labore bærekraftig VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunsj. 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. Annonse vegansk unntatt slakter vice lomo. Leggings occaecat craft beer farm-to-table, rå denim estetisk synth nesciunt du sannsynligvis ikke har hørt om dem accusamus labore bærekraftig 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å mulig å bytte ut .panel-bodys med .list-groups.

  • Bootply
  • En itmus ac facilin
  • Andre eros

Gjør utvidelses-/skjulkontroller tilgjengelige

Sørg for å legge aria-expandedtil kontrollelementet. Dette attributtet definerer eksplisitt gjeldende tilstand for det sammenleggbare elementet til skjermlesere og lignende hjelpeteknologier. Hvis det sammenleggbare elementet er lukket som standard, skal det ha en verdi på aria-expanded="false". Hvis du har angitt at det sammenleggbare elementet skal være åpent som standard ved å brukein klassen, settaria-expanded="true" på kontrollen i stedet. Programtillegget vil automatisk veksle mellom dette attributtet basert på om det sammenleggbare elementet har blitt åpnet eller lukket.

I tillegg, hvis kontrollelementet ditt målretter mot et enkelt sammenleggbart element – ​​dvs. at data-targetattributtet peker til en idvelger – kan du legge til et ekstra aria-controlsattributt til kontrollelementet som inneholder iddet sammenleggbare elementet. Moderne skjermlesere og lignende hjelpeteknologier bruker dette attributtet for å gi brukere ekstra snarveier for å navigere direkte til selve det sammenleggbare elementet.

Bruk

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

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

Disse klassene finner du i component-animations.less.

Via dataattributter

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

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

Via JavaScript

Aktiver manuelt med:

$('.collapse').collapse()

Alternativer

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

Navn type misligholde beskrivelse
forelder velger falsk Hvis en velger er oppgitt, vil alle sammenleggbare elementer under den angitte overordnede bli lukket når dette sammenleggbare elementet vises. (ligner på tradisjonell trekkspilladferd - dette er avhengig av panelklassen)
veksle boolsk ekte Veksler på det sammenleggbare elementet ved påkalling

Metoder

.collapse(options)

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

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

.collapse('toggle')

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

.collapse('show')

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

.collapse('hide')

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

arrangementer

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

Hendelsestype Beskrivelse
show.bs.kollaps Denne hendelsen utløses umiddelbart når showinstansmetoden kalles.
vist.bs.kollaps Denne hendelsen utløses når et kollapselement er gjort synlig for brukeren (vil vente på at CSS-overganger er fullført).
skjule.bs.kollaps Denne hendelsen utløses umiddelbart når hidemetoden har blitt kalt.
skjult.bs.kollaps Denne hendelsen utløses når et kollapselement er skjult for brukeren (vil vente på at CSS-overganger er fullført).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

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

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Valgfrie bildetekster

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

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

Flere karuseller

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

Via dataattributter

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

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

Via JavaScript

Ring karusell manuelt med:

$('.carousel').carousel()

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

Navn type misligholde beskrivelse
intervall Antall 5000 Tiden det tar mellom automatisk sykling av et element. Hvis falsk, vil ikke karusellen gå automatisk.
pause streng | null "sveve" Hvis satt til "hover", pauser syklingen av karusellen på mouseenterog fortsetter syklingen av karusellen på mouseleave. Hvis satt til null, vil det ikke settes på pause ved å holde musepekeren over karusellen.
pakke inn boolsk ekte Om karusellen skal sykle kontinuerlig eller ha harde stopp.
tastatur boolsk ekte Om karusellen skal reagere på tastaturhendelser.

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

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

Bla gjennom karusellelementene fra venstre til høyre.

Stopper karusellen fra å sykle gjennom gjenstander.

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

Går til forrige element.

Går til neste element.

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

Begge arrangementene har følgende tilleggsegenskaper:

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

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

Hendelsestype Beskrivelse
slide.bs.karusell Denne hendelsen utløses umiddelbart når slideinstansmetoden påkalles.
slide.bs.karusell Denne hendelsen utløses når karusellen har fullført lysbildeovergangen.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Fest affix.js

Eksempel

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


Bruk

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

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

Posisjonering via CSS

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

Slik fungerer affix-pluginen:

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

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

Via dataattributter

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

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

Via JavaScript

Ring affix-plugin-modulen via JavaScript:

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

Alternativer

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

Navn type misligholde beskrivelse
offset nummer | funksjon | gjenstand 10 Piksler for å forskyve fra skjermen ved beregning av rulleposisjon. Hvis et enkelt tall er oppgitt, vil forskyvningen bli brukt i både topp- og bunnretninger. For å gi en unik bunn- og toppforskyvning, oppgi bare et objekt offset: { top: 10 }eller offset: { top: 10, bottom: 5 }. Bruk en funksjon når du skal dynamisk beregne en offset.
mål velger | node | jQuery element windowobjektet _ Angir målelementet til affikset.

Metoder

.affix(options)

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

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

.affix('checkPosition')

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

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

arrangementer

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

Hendelsestype Beskrivelse
affix.bs.affix Denne hendelsen utløses umiddelbart før elementet er festet.
avfixed.bs.affix Denne hendelsen utløses etter at elementet er festet.
avfix-top.bs.affix Denne hendelsen utløses umiddelbart før elementet er festet øverst.
avfixed-top.bs.affix Denne hendelsen utløses etter at elementet er festet øverst.
affix-bottom.bs.affix Denne hendelsen utløses umiddelbart før elementet er festet til bunnen.
avfixed-bottom.bs.affix Denne hendelsen utløses etter at elementet er festet til bunnen.