Gå til hovedinnhold Hopp til dokumentnavigering
Check
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.

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

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

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

Du kan til og med rulle din egen tilpassede størrelse med CSS-variabler:

html 
<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom 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.

html 
<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" 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 som bruker <a>, bør inkludere aria-disabled="true"attributtet for å indikere tilstanden til elementet til hjelpeteknologier.
  • Deaktiverte knapper som bruker <a> skal ikke inkludere hrefattributtet.
Primær lenke Link
html 
<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

For å dekke tilfeller der du må beholde hrefattributtet på en deaktivert lenke, .disabledbruker klassen pointer-events: nonefor å prøve å deaktivere lenkefunksjonaliteten til <a>s. Merk at denne CSS-egenskapen ennå ikke er standardisert for HTML, men alle moderne nettlesere støtter den. 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.

Primær lenke Link
html 
<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

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.

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

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

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

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

html 
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
Slå på koblingen Aktiv vekselkobling Deaktivert av/på-kobling
html 
<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 class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Metoder

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

const bsButton = new bootstrap.Button('#myButton')
Metode Beskrivelse
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 den slik: bootstrap.Button.getOrCreateInstance(element).
toggle Bytter push-tilstand. Gir knappen det utseendet at den er aktivert.

For eksempel for å veksle mellom alle knapper

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS

Variabler

Lagt til i v5.2.0

Som en del av Bootstraps utviklende tilnærming til CSS-variabler, bruker knapper nå lokale CSS-variabler .btnfor forbedret sanntidstilpasning. Verdier for CSS-variablene settes via Sass, så Sass-tilpasning støttes fortsatt også.

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

Hver .btn-*modifikatorklasse oppdaterer de riktige CSS-variablene for å minimere ytterligere CSS-regler med våre button-variant(), button-outline-variant(), og button-size()mixins.

Her er et eksempel på å bygge en tilpasset .btn-*modifikasjonsklasse som vi gjør for knappene som er unike for dokumentene våre, ved å tilordne Bootstraps CSS-variabler med en blanding av våre egne CSS- og Sass-variabler.

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

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:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}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%;

Sass blandinger

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)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-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)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

Sass 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} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

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