Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Examples
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
<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>
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden
class.
Disable text wrapping
If you don’t want the button text to wrap, you can add the .text-nowrap
class to the button. In Sass, you can set $btn-white-space: nowrap
to disable text wrapping for each button.
Button tags
Klassene .btn
er 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å den gjeldende siden, bør disse koblingene gis en role="button"
for å formidle hensikten deres til hjelpeteknologier som f.eks. skjermlesere.
<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>
Størrelser
Lyst på større eller mindre knapper? Legg til .btn-lg
eller .btn-sm
for 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 disabled
boolske attributtet til ethvert <button>
element. Deaktiverte knapper har pointer-events: none
aktivert, 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 ikkedisabled
attributtet, så du må legge til.disabled
klassen for å få den visuelt til å virke deaktivert.- Noen fremtidsvennlige stiler er inkludert for å deaktivere alle
pointer-events
på ankerknapper. - Deaktiverte knapper som bruker
<a>
, bør inkluderearia-disabled="true"
attributtet for å indikere tilstanden til elementet til hjelpeteknologier. - Deaktiverte knapper som bruker
<a>
skal ikke inkluderehref
attributtet.
<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
Advarsel om lenkefunksjonalitet
For å dekke tilfeller der du må beholde href
attributtet på en deaktivert lenke, .disabled
bruker klassen pointer-events: none
for å 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.
<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>
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 variant, som starter med vertikalt stablede knapper til md
bruddpunktet, der .d-md-block
erstatter .d-grid
klassen, og dermed ugyldiggjør gap-2
verktøyet. Endre størrelsen på nettleseren din 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-auto
også.
<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.
Veksle mellom tilstander
Legg data-bs-toggle="button"
til for å veksle mellom en knapps active
tilstand. Hvis du forhåndsveksler en knapp, må du legge til .active
klassen 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>
<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:
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-colors
kartet 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);
}
}