Toetsen
Gebruik de aangepaste knopstijlen van Bootstrap voor acties in formulieren, dialoogvensters en meer met ondersteuning voor meerdere formaten, statussen en meer.
Voorbeelden
Bootstrap bevat verschillende vooraf gedefinieerde knopstijlen, die elk hun eigen semantische doel dienen, met een paar extra's voor meer controle.
<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 .sr-only
klasse.
Knoptags
De .btn
klassen 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.
<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.
<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>
Maten
Zin in grotere of kleinere knopen? Voeg toe .btn-lg
of .btn-sm
voor extra maten.
<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>
Maak knoppen op blokniveau (die de volledige breedte van een bovenliggend element beslaan) door toe te voegen .btn-block
.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
Actieve staat
Knoppen worden ingedrukt weergegeven (met een donkere achtergrond, donkere rand en ingevoegde schaduw) wanneer ze actief zijn. Het is niet nodig om een klasse toe te voegen aan <button>
s omdat ze een pseudo-klasse gebruiken . U kunt echter nog steeds hetzelfde actieve uiterlijk forceren met .active
(en het aria-pressed="true"
kenmerk opnemen) als u de status programmatisch moet repliceren.
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
Uitgeschakelde staat
Laat knoppen er inactief uitzien door het disabled
booleaanse attribuut aan elk <button>
element toe te voegen.
<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>
Uitgeschakelde knoppen die het <a>
element gebruiken, gedragen zich iets anders:
<a>
s ondersteunen hetdisabled
attribuut niet, dus u moet de.disabled
klasse toevoegen om het visueel uitgeschakeld te laten lijken.- Sommige toekomstvriendelijke stijlen zijn opgenomen om alle
pointer-events
ankerknoppen uit te schakelen. In browsers die die eigenschap ondersteunen, ziet u de uitgeschakelde cursor helemaal niet. - Uitgeschakelde knoppen moeten het
aria-disabled="true"
attribuut bevatten om de status van het element voor ondersteunende technologieën aan te geven.
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
Waarschuwing voor linkfunctionaliteit
De .disabled
klasse pointer-events: none
probeert de linkfunctionaliteit van <a>
s uit te schakelen, maar die CSS-eigenschap is nog niet gestandaardiseerd. Bovendien pointer-events: none
blijft 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 een tabindex="-1"
attribuut toe aan deze links (om te voorkomen dat ze toetsenbordfocus krijgen) en gebruik aangepast JavaScript om hun functionaliteit uit te schakelen.
Knop plug-in
Doe meer met knoppen. Beheer knopstatussen of maak groepen knoppen voor meer componenten zoals werkbalken.
Staten wisselen
Toevoegen data-toggle="button"
om de status van een knop te active
wijzigen. Als u een knop vooraf omschakelt, moet u de .active
klas handmatig toevoegen en aria-pressed="true"
aan de <button>
.
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
Selectievakje en keuzerondjes
De stijlen van Bootstrap .button
kunnen worden toegepast op andere elementen, zoals <label>
s, om te schakelen tussen selectievakjes of keuzerondjes. Voeg toe data-toggle="buttons"
aan een .btn-group
met die gewijzigde knoppen om hun schakelgedrag via JavaScript in te schakelen en voeg toe .btn-group-toggle
om de <input>
s binnen uw knoppen te stylen. Merk op dat u knoppen met één ingang of groepen ervan kunt maken.
De aangevinkte status voor deze knoppen wordt alleen bijgewerkt via click
een gebeurtenis op de knop. Als u een andere methode gebruikt om de invoer bij te werken, bijvoorbeeld met <input type="reset">
of door de checked
eigenschap van de invoer handmatig toe te passen, moet u de invoer handmatig .active
inschakelen <label>
.
Houd er rekening mee dat u voor vooraf aangevinkte knoppen de .active
klasse handmatig aan de invoer moet toevoegen <label>
.
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> Checked
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
Methoden:
Methode | Beschrijving |
---|---|
$().button('toggle') |
Schakelt de push-status in. Geeft de knop de indruk dat deze is geactiveerd. |
$().button('dispose') |
Vernietigt de knop van een element. |