Hoppa till huvudinnehållet Hoppa till dokumentnavigering
Check
in English

Knappar

Använd Bootstraps anpassade knappstilar för åtgärder i formulär, dialogrutor och mer med stöd för flera storlekar, tillstånd och mer.

På den här sidan

Exempel

Bootstrap innehåller flera fördefinierade knappstilar, var och en tjänar sitt eget semantiska syfte, med några extrafunktioner för 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>
Förmedla mening till hjälpmedel

Att använda färg för att lägga till mening ger bara en visuell indikation som inte kommer att förmedlas till användare av hjälpmedel – som skärmläsare. Se till att information som betecknas med färgen antingen är uppenbar från själva innehållet (t.ex. den synliga texten), eller är inkluderad på andra sätt, såsom ytterligare text gömd med .visually-hiddenklassen.

Inaktivera textbrytning

Om du inte vill att knapptexten ska radbrytas kan du lägga till .text-nowrapklassen i knappen. I Sass kan du ställa in $btn-white-space: nowrapatt inaktivera textbrytning för varje knapp.

Knapptaggar

Klasserna .btnär designade för att användas med <button>elementet. Men du kan också använda dessa klasser på <a>eller <input>element (även om vissa webbläsare kan tillämpa en något annorlunda rendering).

När man använder knappklasser på <a>element som används för att utlösa funktionalitet på sidan (som komprimerande innehåll), snarare än att länka till nya sidor eller avsnitt på den aktuella sidan, bör dessa länkar ges en role="button"för att på lämpligt sätt förmedla deras syfte till hjälpmedel som t.ex. skärmläsare.

Länk
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">

Konturknappar

Behöver du en knapp, men inte de rejäla bakgrundsfärgerna de ger? Ersätt standardmodifieringsklasserna med de .btn-outline-*för att ta bort alla bakgrundsbilder och färger på valfri 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>
Vissa av knappstilarna använder en relativt ljus förgrundsfärg och bör endast användas på en mörk bakgrund för att ha tillräcklig kontrast.

Storlekar

Vill du ha större eller mindre knappar? Lägg till .btn-lgeller .btn-smför ytterligare storlekar.

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 till och med rulla din egen anpassade storlek 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>

Inaktiverat tillstånd

Få knappar att se inaktiva ut genom att lägga till det disabledbooleska attributet till valfritt <button>element. Inaktiverade knappar har pointer-events: nonetillämpats och förhindrar att hovring och aktiva tillstånd 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>

Inaktiverade knappar som använder <a>elementet beter sig lite annorlunda:

  • <a>s stöder inte disabledattributet, så du måste lägga till .disabledklassen för att den ska se inaktiverad visuellt.
  • Vissa framtidsvänliga stilar ingår för att inaktivera alla pointer-eventspå ankarknappar.
  • Inaktiverade knappar som använder <a>bör inkludera aria-disabled="true"attributet för att indikera elementets tillstånd för hjälpmedel.
  • Inaktiverade knappar som använder <a> ska inte inkludera hrefattributet.
Primär länk Länk
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>

För att täcka fall där du måste behålla hrefattributet på en inaktiverad länk, .disabledanvänder klassen pointer-events: noneför att försöka inaktivera länkfunktionaliteten för <a>s. Observera att den här CSS-egenskapen ännu inte är standardiserad för HTML, men alla moderna webbläsare stöder den. Dessutom, även i webbläsare som stöder pointer-events: none, förblir tangentbordsnavigeringen opåverkad, vilket innebär att seende tangentbordsanvändare och användare av hjälpmedel fortfarande kommer att kunna aktivera dessa länkar. Så för säkerhets skull inkluderar du förutom aria-disabled="true", även ett tabindex="-1"attribut på dessa länkar för att förhindra att de får tangentbordsfokus, och använd anpassad JavaScript för att inaktivera deras funktionalitet helt och hållet.

Primär länk Länk
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>

Blockknappar

Skapa lyhörda högar med "blockknappar" i full bredd som de i Bootstrap 4 med en blandning av våra display- och gap-verktyg. Genom att använda verktyg istället för knappspecifika klasser har vi mycket större kontroll över avstånd, anpassning och responsiva beteenden.

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>

Här skapar vi en responsiv variant, som börjar med vertikalt staplade knappar tills mdbrytpunkten, där .d-md-blockersätter .d-gridklassen, och på så sätt omintetgör gap-2verktyget. Ändra storlek på din webbläsare för att se dem ändras.

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 justera bredden på dina blockknappar med rutnätskolumnbreddsklasser. Till exempel, för en halvbredds "blockknapp", använd .col-6. Centrera den horisontellt med .mx-autoockså.

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>

Ytterligare verktyg kan användas för att justera justeringen av knappar när de är horisontella. Här har vi tagit vårt tidigare responsiva exempel och lagt till några flexverktyg och ett marginalverktyg på knappen för att högerjustera knapparna när de inte längre är staplade.

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>

Plugin för knapp

Knapppluginen låter dig skapa enkla på/av-växlingsknappar.

Visuellt är dessa växlingsknappar identiska med växlingsknapparna för kryssrutan . De förmedlas dock på olika sätt av hjälpmedel: växlingsrutorna kommer att meddelas av skärmläsare som "markerade"/"inte markerade" (eftersom de trots deras utseende fortfarande är kryssrutor), medan dessa växlingsknappar kommer att meddelas som "knapp"/"knapp nedtryckt". Valet mellan dessa två tillvägagångssätt beror på vilken typ av växling du skapar, och om växlingen kommer att vara meningsfull för användarna eller inte när den tillkännages som en kryssruta eller som en faktisk knapp.

Växla tillstånd

Lägg data-bs-toggle="button"till för att växla activetillstånd för en knapp. Om du förväxlar en knapp måste du lägga till .activeklassen manuellt och aria-pressed="true" för att säkerställa att den överförs på lämpligt sätt till hjälpmedelstekniker.

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>
Växla länk Aktiv växlingslänk Inaktiverad växlingslänk
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 skapa en knappinstans med knappkonstruktorn, till exempel:

const bsButton = new bootstrap.Button('#myButton')
Metod Beskrivning
dispose Förstör ett elements knapp. (Tar bort lagrad data på DOM-elementet)
getInstance Statisk metod som låter dig få knappinstansen kopplad till ett DOM-element, du kan använda den så här: bootstrap.Button.getInstance(element).
getOrCreateInstance Statisk metod som returnerar en knappinstans som är kopplad till ett DOM-element eller skapa en ny om den inte initierades. Du kan använda det så här: bootstrap.Button.getOrCreateInstance(element).
toggle Växlar push-tillstånd. Ger knappen intrycket att den har aktiverats.

Till exempel för att växla mellan alla knappar

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

CSS

Variabler

Lades till i v5.2.0

Som en del av Bootstraps utvecklande CSS-variabler använder knappar nu lokala CSS-variabler .btnför förbättrad realtidsanpassning. Värden för CSS-variablerna ställs in via Sass, så Sass-anpassning stöds fortfarande också.

  --#{$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);

Varje .btn-*modifieringsklass uppdaterar lämpliga CSS-variabler för att minimera ytterligare CSS-regler med våra button-variant(), button-outline-variant(), och button-size()mixins.

Här är ett exempel på att bygga en anpassad .btn-*modifieringsklass som vi gör för knapparna som är unika för våra dokument genom att omtilldela Bootstraps CSS-variabler med en blandning av våra egna CSS- och 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 mixins

Det finns tre mixins för knappar: knapp- och knappkonturvarianter (båda baserade på $theme-colors), plus en knappstorleksmixin.

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

Knappvarianter (för vanliga knappar och konturknappar) använder sina respektive mixins med vår $theme-colorskarta för att generera modifieringsklasserna 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);
  }
}