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>

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.

<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 verschijnen ingedrukt wanneer ze actief zijn met een donkere achtergrond, een donkerdere rand en, wanneer schaduwen zijn ingeschakeld, een ingevoegde schaduw. 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 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

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

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.

<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">
  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> 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" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Methoden: