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>

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.

<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-lgof .btn-smvoor 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 disabledbooleaanse 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 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. 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" 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>

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 activewijzigen. Als u een knop vooraf omschakelt, moet u de .activeklas 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 .buttonkunnen worden toegepast op andere elementen, zoals <label>s, om te schakelen tussen selectievakjes of keuzerondjes. Voeg toe data-toggle="buttons"aan een .btn-groupmet die gewijzigde knoppen om hun schakelgedrag via JavaScript in te schakelen en voeg toe .btn-group-toggleom 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 clickeen gebeurtenis op de knop. Als u een andere methode gebruikt om de invoer bij te werken, bijvoorbeeld met <input type="reset">of door de checkedeigenschap van de invoer handmatig toe te passen, moet u de invoer handmatig .activeinschakelen <label>.

Houd er rekening mee dat u voor vooraf aangevinkte knoppen de .activeklasse 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: