Bootstrap 4 Knoppen
Knopstijlen
Bootstrap 4 biedt verschillende soorten knoppen:
Voorbeeld
<button type="button" class="btn">Basic</button>
<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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button
type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
De knopklassen kunnen worden gebruikt op <a>, <button>, of
<input>elementen:
Voorbeeld
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Waarom plaatsen we een # in het href-attribuut van de link?
Omdat we geen pagina hebben om naar te linken, en we geen "404"-bericht willen krijgen, plaatsen we # als link. In het echte leven zou het natuurlijk een echte URL naar de "Zoeken"-pagina moeten zijn.
Knopoverzicht
Bootstrap 4 biedt acht overzichts-/omrande knoppen:
Voorbeeld
<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-info">Info</button>
<button
type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button
type="button" class="btn btn-outline-light text-dark">Light</button>
Knop maten
Gebruik de .btn-lgklasse voor grote knoppen of .btn-smklasse voor kleine knoppen:
Voorbeeld
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
Knoppen op blokkeringsniveau
Voeg klasse .btn-blocktoe om een knop op blokniveau te maken die de volledige breedte van het bovenliggende element beslaat.
Voorbeeld
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>
Actieve/Uitgeschakelde knoppen
Een knop kan worden ingesteld op een actieve (verschijnen ingedrukt) of een uitgeschakelde (niet-klikbare) status:
De klasse .activezorgt ervoor dat een knop ingedrukt lijkt en het disabledattribuut maakt een knop onklikbaar. Merk op dat <a>-elementen het kenmerk uitgeschakeld niet ondersteunen en daarom de .disabledklasse moeten gebruiken om het visueel uitgeschakeld te laten lijken.
Voorbeeld
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary
disabled">Disabled Link</a>
Spinnerknoppen
Je kunt ook "spinners" toevoegen aan een knop, waarover je meer zult leren in onze BS4 Spinners-zelfstudie :
Voorbeeld
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>