Toetsen

Gebruik de aangepaste knopstijlen van Bootstrap voor acties in formulieren, dialoogvensters en meer met ondersteuning voor meerdere formaten, statussen en meer.

Op deze pagina

Voorbeelden

Bootstrap bevat verschillende vooraf gedefinieerde knopstijlen, die elk hun eigen semantische doel dienen, met een paar extra's voor meer controle.

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>

Betekenis overbrengen aan ondersteunende technologieën

Het gebruik van kleur om betekenis toe te voegen geeft alleen een visuele indicatie, die niet wordt overgebracht aan gebruikers van ondersteunende technologieën, zoals schermlezers. Zorg ervoor dat informatie die wordt aangegeven met de kleur ofwel duidelijk is uit de inhoud zelf (bijv. de zichtbare tekst), of op alternatieve manieren wordt opgenomen, zoals extra tekst die verborgen is bij de .visually-hiddenklasse.

Tekstterugloop uitschakelen

Als u niet wilt dat de knoptekst terugloopt, kunt u de .text-nowrapklas aan de knop toevoegen. In Sass kunt u instellen $btn-white-space: nowrapdat tekstterugloop voor elke knop wordt uitgeschakeld.

Knoptags

De .btnklassen zijn ontworpen om te worden gebruikt met het <button>element. U kunt deze klassen echter ook gebruiken op <a>of <input>elementen (hoewel sommige browsers een iets andere weergave kunnen toepassen).

Wanneer u knopklassen gebruikt op <a>elementen die worden gebruikt om functionaliteit op de pagina te activeren (zoals samenvouwende inhoud), in plaats van te linken naar nieuwe pagina's of secties binnen de huidige pagina, moeten deze links een a krijgen role="button"om hun doel op de juiste manier over te brengen aan ondersteunende technologieën zoals schermlezers.

Koppeling

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

Overzichtsknoppen

Een knop nodig, maar niet de forse achtergrondkleuren die ze brengen? Vervang de standaard modificatieklassen door .btn-outline-*die waarmee alle achtergrondafbeeldingen en kleuren op een knop worden verwijderd.

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>

Sommige knopstijlen gebruiken een relatief lichte voorgrondkleur en mogen alleen op een donkere achtergrond worden gebruikt om voldoende contrast te hebben.

Maten

Zin in grotere of kleinere knopen? Voeg toe .btn-lgof .btn-smvoor extra maten.

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>

U kunt zelfs uw eigen aangepaste grootte maken met CSS-variabelen:

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>

Uitgeschakelde staat

Laat knoppen er inactief uitzien door het disabledbooleaanse attribuut aan elk <button>element toe te voegen. Uitgeschakelde knoppen zijn pointer-events: nonetoegepast op, waardoor de zweeftoestand en actieve status niet worden geactiveerd.

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>

Uitgeschakelde knoppen die het <a>element gebruiken, gedragen zich iets anders:

<a>s ondersteunen het disabledattribuut niet, dus u moet de .disabledklasse toevoegen om het visueel uitgeschakeld te laten lijken.
Sommige toekomstvriendelijke stijlen zijn opgenomen om alle pointer-eventsankerknoppen uit te schakelen.
Uitgeschakelde knoppen die worden gebruikt <a>, moeten het aria-disabled="true"kenmerk bevatten om de status van het element voor ondersteunende technologieën aan te geven.
Uitgeschakelde knoppen die worden gebruikt, mogen het kenmerk <a> niet bevatten.href

Primaire link Koppeling

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>

Waarschuwing voor linkfunctionaliteit

Om gevallen te dekken waarin u het hrefattribuut op een uitgeschakelde link moet houden, probeert de .disabledklasse pointer-events: nonede linkfunctionaliteit van <a>s uit te schakelen. Merk op dat deze CSS-eigenschap nog niet gestandaardiseerd is voor HTML, maar dat alle moderne browsers dit ondersteunen. Bovendien pointer-events: noneblijft toetsenbordnavigatie, zelfs in browsers die ondersteuning bieden, onaangetast, wat betekent dat ziende toetsenbordgebruikers en gebruikers van ondersteunende technologieën deze koppelingen nog steeds kunnen activeren. Dus om veilig te zijn, voeg naast aria-disabled="true", ook een tabindex="-1"attribuut toe aan deze links om te voorkomen dat ze toetsenbordfocus krijgen, en gebruik aangepast JavaScript om hun functionaliteit helemaal uit te schakelen.

Primaire link Koppeling

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>

Blokkeer knoppen

Maak responsieve stapels "blokknoppen" over de volledige breedte, zoals die in Bootstrap 4, met een mix van onze display- en gap-hulpprogramma's. Door hulpprogramma's te gebruiken in plaats van knopspecifieke klassen, hebben we veel meer controle over spatiëring, uitlijning en responsief gedrag.

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>

Hier creëren we een responsieve variant, beginnend met verticaal gestapelde knoppen tot het mdbreekpunt, waar .d-md-blockde klasse wordt vervangen , waardoor het hulpprogramma .d-gridteniet wordt gedaan . gap-2Pas het formaat van uw browser aan om ze te zien veranderen.

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>

U kunt de breedte van uw blokknoppen aanpassen met rasterkolombreedteklassen. Gebruik bijvoorbeeld voor een "blokkeringsknop" van halve breedte .col-6. Centreer het ook horizontaal met .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>

Extra hulpprogramma's kunnen worden gebruikt om de uitlijning van knoppen in horizontale positie aan te passen. Hier hebben we ons vorige responsieve voorbeeld genomen en enkele flexhulpprogramma's en een margehulpprogramma op de knop toegevoegd om de knoppen rechts uit te lijnen wanneer ze niet langer gestapeld zijn.

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>

Knop plug-in

Met de knopplug-in kunt u eenvoudige aan/uit-schakelknoppen maken.

Visueel zijn deze schakelknoppen identiek aan de schakelknoppen voor selectievakjes . Ze worden echter anders overgebracht door hulptechnologieën: de schakelaars voor selectievakjes worden door schermlezers aangekondigd als "aangevinkt" / "niet aangevinkt" (aangezien ze, ondanks hun uiterlijk, in wezen nog steeds selectievakjes zijn), terwijl deze schakelknoppen worden aangekondigd als "knop"/"knop ingedrukt". De keuze tussen deze twee benaderingen hangt af van het type schakelaar dat u aan het maken bent, en of de schakelaar zinvol is voor gebruikers wanneer deze wordt aangekondigd als een selectievakje of als een echte knop.

Staten wisselen

Toevoegen data-bs-toggle="button"om de status van een knop te activewijzigen. Als u een knop vooraf omschakelt, moet u de .activeklasse handmatig toevoegen en aria-pressed="true" ervoor zorgen dat deze op de juiste manier wordt overgebracht naar ondersteunende technologieën.

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>

Schakel link Actieve schakellink Schakellink uitgeschakeld

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>

Methoden:

U kunt een knopinstantie maken met de knopconstructor, bijvoorbeeld:

const bsButton = new bootstrap.Button('#myButton')

Methode	Beschrijving
`dispose`	Vernietigt de knop van een element. (Verwijdert opgeslagen gegevens op het DOM-element)
`getInstance`	Statische methode waarmee u de knopinstantie kunt koppelen aan een DOM-element, u kunt deze als volgt gebruiken: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Statische methode die een knopinstantie retourneert die is gekoppeld aan een DOM-element of een nieuwe maakt voor het geval deze niet is geïnitialiseerd. Je kunt het als volgt gebruiken: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Schakelt de push-status in. Geeft de knop de indruk dat deze is geactiveerd.

Om bijvoorbeeld alle knoppen te wisselen

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

CSS

Variabelen

Toegevoegd in v5.2.0

Als onderdeel van Bootstrap's evoluerende benadering van CSS-variabelen, gebruiken knoppen nu lokale CSS .btn-variabelen voor verbeterde realtime aanpassingen. Waarden voor de CSS-variabelen worden ingesteld via Sass, dus Sass-aanpassing wordt ook nog steeds ondersteund.

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

Elke .btn-*modificatieklasse werkt de juiste CSS-variabelen bij om aanvullende CSS-regels met onze button-variant(), button-outline-variant(), en button-size()mixins te minimaliseren.

Hier is een voorbeeld van het bouwen van een aangepaste .btn-*modificatieklasse zoals we doen voor de knoppen die uniek zijn voor onze documenten door de CSS-variabelen van Bootstrap opnieuw toe te wijzen met een combinatie van onze eigen CSS- en Sass-variabelen.

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

$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

Er zijn drie mixins voor buttons: button en button outline variant mixins (beide gebaseerd op $theme-colors), plus een button size mixin.

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

Knopvarianten (voor gewone en overzichtsknoppen) gebruiken hun respectievelijke mixins met onze $theme-colorskaart om de modificatieklassen in 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);
  }
}