Bootstrap- knoppen
Knopstijlen
Bootstrap biedt verschillende soorten knoppen:
Om de bovenstaande knopstijlen te bereiken, heeft Bootstrap de volgende klassen:
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link
Het volgende voorbeeld toont de code voor de verschillende knopstijlen:
Voorbeeld
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</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-link">Link</button>
De knopklassen kunnen worden gebruikt op een <a>, <button>, of
<input>element:
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 de link in onze voorbeelden. Het moet een echte URL zijn naar een specifieke pagina.
Knop maten
Bootstrap biedt vier knopformaten:
De klassen die de verschillende maten definiëren zijn:
.btn-lg.btn-sm.btn-xs
Het volgende voorbeeld toont de code voor verschillende knopformaten:
Voorbeeld
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Knoppen op blokkeringsniveau
Een knop op blokniveau beslaat de volledige breedte van het bovenliggende element.
Voeg klasse .btn-blocktoe om een knop op blokniveau te maken:
Voorbeeld
<button type="button" class="btn btn-primary btn-block">Button 1</button>
Actieve/Uitgeschakelde knoppen
Een knop kan worden ingesteld op een actieve (verschijnen ingedrukt) of een uitgeschakelde (niet-klikbare) status:
De klas .activelaat een knop ingedrukt lijken en de klas
.disabled
maakt een knop onklikbaar:
Voorbeeld
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Volledige Bootstrap-knopreferentie
Ga voor een volledige referentie van alle knopklassen naar onze volledige Bootstrap-knopreferentie .