Spring til hovedindhold Spring til dokumentnavigation
Check
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.

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

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.

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

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

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.

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>

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, der bruger <a>, skal inkludere aria-disabled="true"attributten for at angive elementets tilstand til hjælpeteknologier.
  • Deaktiverede knapper, der bruger <a> , bør ikke indeholde hrefattributten.
Primært link 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 at dække tilfælde, hvor du skal beholde hrefattributten på et deaktiveret link, .disabledbruger klassen pointer-events: nonetil at forsøge at deaktivere linkfunktionaliteten i <a>s. Bemærk, at denne CSS-egenskab endnu ikke er standardiseret til HTML, men alle moderne browsere understøtter den. 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.

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

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.

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

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

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>

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.

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>

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 dog forskelligt af hjælpeteknologier: afkrydsningsfelterne vil blive annonceret af skærmlæsere som "afkrydset"/"ikke markeret" (da de på trods af 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 til 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.

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>
Skift link Aktivt skifte-link Deaktiveret til/fra-link
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 oprette en knapinstans med knapkonstruktøren, for eksempel:

const bsButton = new bootstrap.Button('#myButton')
Metode Beskrivelse
dispose Ødelægger et elements knap. (Fjerner lagrede 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).
toggle Skifter push-tilstand. Giver knappen det udseende, at den er blevet aktiveret.

For eksempel for at skifte mellem alle knapper

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

CSS

Variabler

Tilføjet i v5.2.0

Som en del af Bootstraps udviklende CSS-variabletilgang bruger knapper nu lokale CSS-variabler .btntil forbedret realtidstilpasning. Værdier for CSS-variablerne indstilles via Sass, så Sass-tilpasning understøttes også stadig.

  --#{$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 opdaterer de relevante CSS-variabler for at minimere yderligere CSS-regler med vores button-variant(), button-outline-variant(), og button-size()mixins.

Her er et eksempel på at bygge en tilpasset .btn-*modifikatorklasse, som vi gør for knapperne, der er unikke for vores dokumenter, ved at omtildele Bootstraps CSS-variabler med en blanding af vores 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 variable

$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%;

Sasse blandinger

Der er tre mixins til knapper: knap- og knapomridsvarianter (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)
) {
  --#{$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 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} {
    @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);
  }
}