in English

Knapper

Bruk Bootstraps egendefinerte knappestiler for handlinger i skjemaer, dialogbokser og mer med støtte for flere størrelser, tilstander og mer.

På denne siden

Eksempler

Bootstrap inkluderer flere forhåndsdefinerte knappestiler, som hver tjener sitt eget semantiske formål, med noen få ekstrautstyr for mer kontroll.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Formidle mening til hjelpeteknologier

Å bruke farger for å legge til mening gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjon angitt med fargen enten er åpenbar fra selve innholdet (f.eks. den synlige teksten), eller er inkludert på alternative måter, for eksempel ekstra tekst skjult i .visually-hiddenklassen.

Deaktiver tekstbryting

Hvis du ikke vil at knappeteksten skal brytes, kan du legge .text-nowrapklassen til knappen. I Sass kan du angi $btn-white-space: nowrapå deaktivere tekstbryting for hver knapp.

Knappemerker

Klassene .btner laget for å brukes med <button>elementet. Du kan imidlertid også bruke disse klassene på <a>eller <input>elementer (selv om noen nettlesere kan bruke en litt annen gjengivelse).

Når du bruker knappeklasser på <a>elementer som brukes til å utløse funksjonalitet på siden (som kollapsende innhold), i stedet for å lenke til nye sider eller seksjoner på gjeldende side, bør disse koblingene gis en role="button"for å formidle hensikten til hjelpeteknologier som f.eks. skjermlesere.

Link

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Konturknapper

Trenger du en knapp, men ikke de heftige bakgrunnsfargene de kommer med? Erstatt standard modifikatorklassene med .btn-outline-*de for å fjerne alle bakgrunnsbilder og farger på en hvilken som helst knapp.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Noen av knappestilene bruker en relativt lys forgrunnsfarge, og bør kun brukes på en mørk bakgrunn for å ha tilstrekkelig kontrast.

Størrelser

Lyst på større eller mindre knapper? Legg til .btn-lgeller .btn-smfor flere størrelser.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Deaktivert tilstand

Få knapper til å se inaktive ut ved å legge til det disabledboolske attributtet til ethvert <button>element. Deaktiverte knapper har pointer-events: noneaktivert, og hindrer sveving og aktive tilstander fra å utløses.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

Deaktiverte knapper som bruker <a>elementet oppfører seg litt annerledes:

<a>s støtter ikke disabledattributtet, så du må legge til .disabledklassen for å få den visuelt til å virke deaktivert.
Noen fremtidsvennlige stiler er inkludert for å deaktivere alle pointer-eventspå ankerknapper.
Deaktiverte knapper bør inkludere aria-disabled="true"attributtet for å indikere tilstanden til elementet til hjelpeteknologier.

Primær lenke Link

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Forbehold om lenkefunksjonalitet

Klassen .disabledbruker pointer-events: nonefor å prøve å deaktivere lenkefunksjonaliteten til <a>s, men den CSS-egenskapen er ennå ikke standardisert. I tillegg, selv i nettlesere som støtter pointer-events: none, forblir tastaturnavigasjon upåvirket, noe som betyr at seende tastaturbrukere og brukere av hjelpeteknologi fortsatt vil kunne aktivere disse koblingene. Så for å være sikker, i tillegg til aria-disabled="true", inkluderer du også et tabindex="-1"attributt på disse koblingene for å hindre dem i å motta tastaturfokus, og bruk tilpasset JavaScript for å deaktivere funksjonaliteten deres helt.

Blokker knapper

Lag responsive stabler med "blokkknapper" i full bredde som de i Bootstrap 4 med en blanding av skjerm- og gap-verktøyene våre. Ved å bruke verktøy i stedet for knappespesifikke klasser, har vi mye større kontroll over avstand, justering og responsiv atferd.

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Her lager vi en responsiv variasjon, som starter med vertikalt stablede knapper til mdbruddpunktet, der .d-md-blockerstatter .d-gridklassen, og dermed ugyldiggjøre gap-2verktøyet. Endre størrelsen på nettleseren for å se dem endres.

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Du kan justere bredden på blokkknappene med rutenettskolonnebreddeklasser. For eksempel, for en halvbredde "blokkknapp", bruk .col-6. Sentrer den horisontalt med .mx-autoogså.

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Ytterligere verktøy kan brukes til å justere justeringen av knappene når de er horisontale. Her har vi tatt vårt tidligere responsive eksempel og lagt til noen flex-verktøy og et margin-verktøy på knappen for å høyrejustere knappene når de ikke lenger er stablet.

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Knapp-plugin

Knappe-pluginen lar deg lage enkle på/av-veksleknapper.

Visuelt er disse veksleknappene identiske med vekslingsknappene i avmerkingsboksen . Imidlertid formidles de annerledes av hjelpeteknologier: avkrysningsboksene vil bli annonsert av skjermlesere som "avmerket"/"ikke avmerket" (siden, til tross for utseendet, er de i utgangspunktet fortsatt avmerkingsbokser), mens disse veksleknappene vil bli annonsert som "knapp"/"knapp trykket". Valget mellom disse to tilnærmingene vil avhenge av hvilken type veksler du oppretter, og hvorvidt vekslingen vil gi mening for brukere når den annonseres som en avkrysningsboks eller som en faktisk knapp.

Veksle mellom tilstander

Legg data-bs-toggle="button"til for å veksle mellom en knapps activetilstand. Hvis du forhåndsveksler en knapp, må du legge til .activeklassen manuelt og aria-pressed="true" for å sikre at den formidles riktig til hjelpeteknologier.

<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>

Slå på koblingen Aktiv vekselkobling Deaktivert av/på-kobling

<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Metoder

Du kan opprette en knappeforekomst med knappekonstruktøren, for eksempel:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)

Metode	Beskrivelse
`toggle`	Bytter push-tilstand. Gir knappen det utseendet at den er aktivert.
`dispose`	Ødelegger knappen til et element. (Fjerner lagrede data på DOM-elementet)
`getInstance`	Statisk metode som lar deg få knappeforekomsten knyttet til et DOM-element, du kan bruke den slik:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Statisk metode som returnerer en knappeinstans knyttet til et DOM-element eller oppretter en ny i tilfelle den ikke ble initialisert. Du kan bruke det slik:`bootstrap.Button.getOrCreateInstance(element)`

For eksempel for å veksle mellom alle knapper

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

Sass

Variabler

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              $link-color;
$btn-link-hover-color:        $link-hover-color;
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

Mixins

Det er tre blandinger for knapper: knapp- og knappomrissvarianter (begge basert på $theme-colors), pluss en knappstørrelsesmiks.

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  &:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  .btn-check:focus + &,
  &:focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    @if $enable-shadows {
      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
    }
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color: $active-color;
    background-color: $active-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $disabled-color;
    background-color: $disabled-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $disabled-border;
  }
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  color: $color;
  border-color: $color;

  &:hover {
    color: $color-hover;
    background-color: $active-background;
    border-color: $active-border;
  }

  .btn-check:focus + &,
  &:focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: $active-color;
    background-color: $active-background;
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $color;
    background-color: transparent;
  }
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  padding: $padding-y $padding-x;
  @include font-size($font-size);
  // Manually declare to provide an override to the browser default
  @include border-radius($border-radius, 0);
}

Løkker

Knappvarianter (for vanlige knapper og konturknapper) bruker sine respektive mikser med $theme-colorskartet vårt for å generere modifikatorklassene i scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}