Om een knop (button) aan te maken kunnen we vertrekken van een button tag, een anchor tag of input tag en hier een bepaalde layout aan toekennen. In Bootstrap volstaat het hierbij om de klasse .btn toe te kennen.
De layout kunnen we aanpassen met extra button gerelateerde klassen:
Klasse | Functionaliteit |
.btn | Iets als button opmaken |
.btn-primary | Iets als button opmaken met de primary kleur als achtergrond |
.btn-outline-primary | Iets als button opmaken met de primary kleur als outline |
.btn-lg | De grootte van de button op large plaatsen (default is medium) |
.btn-sm | De grootte van de button op small plaatsen (default is medium) |
.btn-block | De button op de volledige breedte van de pagina instellen (block level) |
Voor tabellen kan je een zebrapatroon instellen maar ook hier zijn er kleur-customizations mogelijk en kan je dit ook specifiek toepassen voor bijvoorbeeld de thead (titels van de tabel). Je moet enkel de juiste klassenamen kennen om deze functionaliteiten toe te voegen.
Klasse | Functionaliteit |
.border | Geeft een zwarte omkadering |
.table | Basis opmaak voor een tabel in bootstrap |
.table-striped | Geeft een zebra patroon aan je tabel |
.table-hover | Geeft een hover kleur wijziging effect op je tabel |
.table-dark | Gebruikt een zwart kleurschema voor je tabel |
.thead-dark | Gebruikt een zwart kleurschema voor je thead |
.table-sm | Maakt de tabel kleiner door padding te verminderen tussen de cellen |