in English

Knapper

Brug Bootstraps brugerdefinerede knapstile til handlinger i formularer, dialogbokse og mere med understøttelse af flere størrelser, tilstande og mere.

På denne side

Eksempler

Bootstrap inkluderer flere foruddefinerede knapstilarter, der hver tjener sit eget semantiske formål, med et par ekstramateriale indsat for mere kontrol.

<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 hjælpeteknologier

Brug af farve til at tilføje betydning giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier - såsom skærmlæsere. Sørg for, at oplysninger, der er angivet med farven, enten er tydelige fra selve indholdet (f.eks. den synlige tekst), eller er inkluderet via alternative måder, såsom ekstra tekst skjult i .visually-hiddenklassen.

Deaktiver tekstombrydning

Hvis du ikke ønsker, at knapteksten skal ombrydes, kan du tilføje .text-nowrapklassen til knappen. I Sass kan du indstille $btn-white-space: nowraptil at deaktivere tekstombrydning for hver knap.

Knapmærker

Klasserne .btner designet til at blive brugt sammen med <button>elementet. Du kan dog også bruge disse klasser på <a>eller <input>elementer (selvom nogle browsere kan anvende en lidt anderledes gengivelse).

Når du bruger knapklasser på <a>elementer, der bruges til at udløse in-page funktionalitet (såsom kollapsende indhold), i stedet for at linke til nye sider eller sektioner på den aktuelle side, bør disse links gives en role="button"for passende at formidle deres formål til hjælpeteknologier som f.eks. skærmlæsere.

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

Kontur knapper

Har du brug for en knap, men ikke de heftige baggrundsfarver, de kommer med? Erstat standardmodifikatorklasserne med .btn-outline-*dem for at fjerne alle baggrundsbilleder og farver på enhver knap.

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

Nogle af knapstilene bruger en relativt lys forgrundsfarve og bør kun bruges på en mørk baggrund for at have tilstrækkelig kontrast.

Størrelser

Kunne du tænke dig større eller mindre knapper? Tilføj .btn-lgeller .btn-smfor yderligere 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>

Deaktiveret tilstand

Få knapper til at se inaktive ud ved at tilføje den disabledbooleske attribut til ethvert <button>element. Deaktiverede knapper er blevet pointer-events: noneanvendt til at forhindre svævebevægelse og aktive tilstande i at udløse.

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

Deaktiverede knapper, der bruger <a>elementet, opfører sig lidt anderledes:

<a>s understøtter ikke disabledattributten, så du skal tilføje .disabledklassen for at få den visuelt til at virke deaktiveret.
Nogle fremtidsvenlige stilarter er inkluderet for at deaktivere alle pointer-eventspå ankerknapper.
Deaktiverede knapper skal indeholde aria-disabled="true"attributten for at angive elementets tilstand til hjælpeteknologier.

Primært link 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 linkfunktionalitet

Klassen .disabledbruger pointer-events: nonetil at forsøge at deaktivere linkfunktionaliteten af <a>s, men denne CSS-egenskab er endnu ikke standardiseret. Derudover, selv i browsere, der understøtter pointer-events: none, forbliver tastaturnavigation upåvirket, hvilket betyder, at seende tastaturbrugere og brugere af hjælpeteknologier stadig vil være i stand til at aktivere disse links. Så for at være sikker skal du udover aria-disabled="true", også inkludere en tabindex="-1"attribut på disse links for at forhindre dem i at modtage tastaturfokus, og brug tilpasset JavaScript til at deaktivere deres funktionalitet helt.

Blok knapper

Skab responsive stakke af "blokknapper" i fuld bredde som dem i Bootstrap 4 med en blanding af vores display- og gap-værktøjer. Ved at bruge hjælpeprogrammer i stedet for knapspecifikke klasser har vi meget større kontrol over afstand, justering og responsiv adfærd.

<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 skaber vi en responsiv variation, startende med lodret stablede knapper, indtil mdbreakpointet, hvor .d-md-blockerstatter .d-gridklassen, og dermed annullerer gap-2værktøjet. Tilpas størrelsen på din browser for at se dem ændre sig.

<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 af dine blokknapper med gitterkolonnebreddeklasser. Brug f.eks. til en "blokknap" i halv bredde .col-6. Centrer den også vandret med .mx-auto.

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

Yderligere hjælpeprogrammer kan bruges til at justere justeringen af knapper, når de er vandret. Her har vi taget vores tidligere responsive eksempel og tilføjet nogle flex-værktøjer og et margin-værktøj på knappen for at højrejustere knapperne, når de ikke længere 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>

Knap plugin

Knap-plugin'et giver dig mulighed for at oprette enkle tænd/sluk-knapper.

Visuelt er disse til/fra-knapper identiske med afkrydsningsfeltet til/fra-knapper . De formidles imidlertid anderledes af hjælpeteknologier: afkrydsningsfelterne vil blive annonceret af skærmlæsere som "afkrydset"/"ikke markeret" (da de, trods deres udseende, grundlæggende stadig er afkrydsningsfelter), hvorimod disse skifteknapper vil blive annonceret som "knap"/"knap trykket". Valget mellem disse to tilgange vil afhænge af den type skift, du opretter, og om skiftet vil give mening for brugerne, når det annonceres som et afkrydsningsfelt eller som en faktisk knap.

Skift tilstande

Tilføj data-bs-toggle="button"for at skifte en knaps activetilstand. Hvis du på forhånd aktiverer en knap, skal du manuelt tilføje .activeklassen og aria-pressed="true" sikre, at den formidles korrekt til hjælpeteknologier.

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

Skift link Aktivt til/fra-link Deaktiveret til/fra-link

<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 oprette en knapinstans med knapkonstruktøren, for eksempel:

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

Metode	Beskrivelse
`toggle`	Skifter push-tilstand. Giver knappen det udseende, at den er blevet aktiveret.
`dispose`	Ødelægger et elements knap. (Fjerner gemte data på DOM-elementet)
`getInstance`	Statisk metode, som giver dig mulighed for at få knapforekomsten knyttet til et DOM-element, du kan bruge det sådan her:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Statisk metode, som returnerer en knapforekomst, der er knyttet til et DOM-element, eller opretter en ny, hvis den ikke blev initialiseret. Du kan bruge det sådan her:`bootstrap.Button.getOrCreateInstance(element)`

For eksempel for at skifte mellem 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

Der er tre mixins til knapper: knap- og knapkonturvarianter (begge baseret på $theme-colors), plus en knapstørrelsesmixin.

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

Sløjfer

Knapvarianter (til almindelige knapper og konturknapper) bruger deres respektive mixins med vores $theme-colorskort til at generere modifikatorklasserne 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);
  }
}