Bootstrap 5.2 / Componenten

Buttons

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

Voorbeelden

Bootstrap bevat verschillende vooraf gedefinieerde knopstijlen, elk met een eigen semantisch doel, plus 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>

Let op

Gebruik kleur niet als enige manier om iets duidelijk te maken. Zorg voor extra aanwijzingen (tekst, een icoon, een ander contrast), zodat mensen die kleuren niet of anders waarnemen de informatie ook krijgen.

Tekstomslag uitschakelen

Wil je niet dat de knoptekst omslaat, dan kun je de klasse .text-nowrap aan de knop toevoegen. In Sass kun je $btn-white-space: nowrap instellen om tekstomslag voor elke knop uit te schakelen.

Knop-tags

De .btn-klassen zijn ontworpen voor gebruik met het <button>-element. Je kunt deze klassen echter ook op <a>- of <input>-elementen gebruiken (al kunnen sommige browsers dan een iets afwijkende weergave toepassen).

Wanneer je knopklassen gebruikt op <a>-elementen die functionaliteit binnen de pagina aansturen (zoals content inklappen), in plaats van naar nieuwe pagina's of secties binnen de huidige pagina te linken, moeten die links een role="button" krijgen om hun doel goed over te brengen aan hulptechnologieën zoals schermlezers.

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="Versturen">
<input class="btn btn-primary" type="reset" value="Resetten">

Outline-knoppen

Wel een knop nodig, maar niet de zware achtergrondkleuren die erbij horen? Vervang de standaard modifier-klassen door de .btn-outline-*-varianten om alle achtergrondafbeeldingen en -kleuren van een knop te verwijderen.

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>

Let op

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

Formaten

Zin in grotere of kleinere knoppen? Voeg .btn-lg of .btn-sm toe voor extra formaten.

HTML

<button type="button" class="btn btn-primary btn-lg">Grote knop</button>
<button type="button" class="btn btn-secondary btn-lg">Grote knop</button>

HTML

<button type="button" class="btn btn-primary btn-sm">Kleine knop</button>
<button type="button" class="btn btn-secondary btn-sm">Kleine knop</button>

Je kunt zelfs je eigen formaat samenstellen 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;">
  Eigen knop
</button>

Uitgeschakelde status

Laat knoppen inactief ogen door het booleaanse attribuut disabled aan een <button>-element toe te voegen. Uitgeschakelde knoppen krijgen pointer-events: none, waardoor hover- en active-states niet geactiveerd worden.

HTML

<button type="button" class="btn btn-primary" disabled>Primary-knop</button>
<button type="button" class="btn btn-secondary" disabled>Knop</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary-knop</button>
<button type="button" class="btn btn-outline-secondary" disabled>Knop</button>

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

<a>s ondersteunen het disabled-attribuut niet, dus je moet de klasse .disabled toevoegen om ze er visueel uitgeschakeld uit te laten zien.
Er zijn wat toekomstbestendige stijlen opgenomen om alle pointer-events op ankerknoppen uit te schakelen.
Uitgeschakelde knoppen met <a> horen het attribuut aria-disabled="true" te bevatten om de status van het element aan hulptechnologieën door te geven.
Uitgeschakelde knoppen met <a> horen geen href-attribuut te bevatten.

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>

Kanttekening bij linkfunctionaliteit

Voor gevallen waarin je het href-attribuut op een uitgeschakelde link moet behouden, gebruikt de klasse .disabled pointer-events: none om de linkfunctionaliteit van <a>s uit te schakelen. Let op: deze CSS-eigenschap is voor HTML nog niet gestandaardiseerd, maar alle moderne browsers ondersteunen hem. Bovendien blijft, zelfs in browsers die pointer-events: none wél ondersteunen, toetsenbordnavigatie onaangetast, wat betekent dat ziende toetsenbordgebruikers en gebruikers van hulptechnologieën deze links nog steeds kunnen activeren. Voeg daarom voor de zekerheid naast aria-disabled="true" ook een tabindex="-1"-attribuut aan deze links toe om te voorkomen dat ze toetsenbordfocus krijgen, en gebruik eigen JavaScript om hun functionaliteit volledig uit te schakelen.

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>

Blokknoppen

Maak responsieve stapels van "blokknoppen" met volledige breedte, zoals in Bootstrap 4, met een mix van onze display- en gap-utilities. Door utilities te gebruiken in plaats van knopspecifieke klassen hebben we veel meer controle over tussenruimte, uitlijning en responsief gedrag.

HTML

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Knop</button>
  <button class="btn btn-primary" type="button">Knop</button>
</div>

Hier maken we een responsieve variant die begint met verticaal gestapelde knoppen tot het md-breakpoint, waar .d-md-block de klasse .d-grid vervangt en daarmee de gap-2-utility opheft. Verklein of vergroot je browser om ze te zien veranderen.

HTML

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Knop</button>
  <button class="btn btn-primary" type="button">Knop</button>
</div>

Je kunt de breedte van je blokknoppen aanpassen met grid-kolombreedteklassen. Voor een "blokknop" van halve breedte gebruik je bijvoorbeeld .col-6. Centreer hem ook horizontaal met .mx-auto.

HTML

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Knop</button>
  <button class="btn btn-primary" type="button">Knop</button>
</div>

Met extra utilities kun je de uitlijning van knoppen aanpassen wanneer ze horizontaal staan. Hier hebben we ons vorige responsieve voorbeeld genomen en er wat flex-utilities plus een margin-utility op de knop aan 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">Knop</button>
  <button class="btn btn-primary" type="button">Knop</button>
</div>

Button-plugin

Met de button-plugin kun je eenvoudige aan/uit-toggle-knoppen maken.

Let op

Visueel zijn deze toggle-knoppen identiek aan de toggle-knoppen met selectievakje. Ze worden echter anders overgebracht door hulptechnologieën: de selectievakje-toggles worden door schermlezers aangekondigd als "aangevinkt"/"niet aangevinkt" (omdat het ondanks hun uiterlijk in de kern nog steeds selectievakjes zijn), terwijl deze toggle-knoppen worden aangekondigd als "knop"/"knop ingedrukt". De keuze tussen deze twee aanpakken hangt af van het soort toggle dat je maakt, en of de toggle voor gebruikers logisch is wanneer die als selectievakje of juist als echte knop wordt aangekondigd.

Toggle-states

Voeg data-bs-toggle="button" toe om de active-status van een knop te schakelen. Schakel je een knop vooraf al in, dan moet je handmatig de klasse .active én aria-pressed="true" toevoegen, zodat dit goed aan hulptechnologieën wordt doorgegeven.

HTML

<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle-knop</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Actieve toggle-knop</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Uitgeschakelde toggle-knop</button>

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">Actieve toggle-link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Uitgeschakelde toggle-link</a>

Methodes

Je kunt een button-instantie maken met de button-constructor, bijvoorbeeld:

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

Methode	Omschrijving
`dispose`	Vernietigt de button van een element. (Verwijdert opgeslagen gegevens van het DOM-element)
`getInstance`	Statische methode waarmee je de button-instantie kunt ophalen die bij een DOM-element hoort; je gebruikt hem zo: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Statische methode die een button-instantie teruggeeft die bij een DOM-element hoort, of een nieuwe aanmaakt als die nog niet was geïnitialiseerd. Je gebruikt hem zo: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Schakelt de ingedrukte status. Geeft de knop het uiterlijk alsof hij is geactiveerd.

Bijvoorbeeld om alle knoppen te schakelen:

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

CSS

Variabelen

Nieuw in v5.2.0

Als onderdeel van Bootstraps groeiende aanpak met CSS-variabelen gebruiken knoppen nu lokale CSS-variabelen op .btn, voor betere aanpassingen in realtime. De waarden voor de CSS-variabelen worden via Sass ingesteld, dus aanpassen via Sass wordt nog steeds ondersteund.

Standaardwaarden: zie scss/_buttons.scss in de Bootstrap-broncode.

Elke .btn-*-modifier-klasse werkt de bijbehorende CSS-variabelen bij, om met onze mixins button-variant(), button-outline-variant() en button-size() het aantal extra CSS-regels te beperken.

Hier is een voorbeeld van het bouwen van een eigen .btn-*-modifier-klasse, zoals wij dat doen voor de knoppen die uniek zijn voor onze documentatie, door de CSS-variabelen van Bootstrap opnieuw toe te kennen met een mix van onze eigen CSS- en Sass-variabelen.

Standaardwaarden: zie site/assets/scss/_buttons.scss in de Bootstrap-broncode.

Sass-variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Sass-mixins

Er zijn drie mixins voor knoppen: de mixins voor de knop- en outline-knopvariant (beide gebaseerd op $theme-colors), plus een mixin voor het knopformaat.

Standaardwaarden: zie scss/mixins/_buttons.scss in de Bootstrap-broncode.

Sass-loops

Knopvarianten (voor gewone en outline-knoppen) gebruiken hun respectievelijke mixins met onze $theme-colors-map om de modifier-klassen in scss/_buttons.scss te genereren.

Standaardwaarden: zie scss/_buttons.scss in de Bootstrap-broncode.