twitter-bootstrap
Toetsen
Zoeken…
Syntaxis
- Klassen: .btn-standaard | .btn-primary | .btn-succes | .btn-info | .btn-waarschuwing | .btn-hazard | .btn-link;
- Maten: .btn-lg | .btn-md | .btn-sm | .btn-xs;
- Staat: actief | dissabled.
Knopklassen
Bootstrap biedt meerdere klassen om knoppen te stylen en te laten opvallen.
Bootstrap-knoppen kunnen worden gemaakt door de .btn klasse aan een element toe te voegen.
| Bootstrap-klasse | Rol (kleur) |
|---|---|
.btn-default | Standaardknop (wit) |
.btn-primary | Biedt extra visueel gewicht en identificeert de primaire actie (blauw) |
.btn-success | Wordt gebruikt om een succesvolle actie aan te geven (groen) |
.btn-info | Contextuele knop voor het verstrekken van informatie (lichtblauw) |
.btn-warning | Geeft aan dat de gebruiker voorzichtig moet zijn (geel) |
.btn-danger | Geeft een gevaarlijke of negatieve actie aan (rood) |
.btn-link | Laat je knop eruitzien als een ankertag. |
Knopmaten
U kunt ook knoppen van verschillende grootte maken met de klassen .btn-size
| Bootstrap-klasse | Resultaat |
|---|---|
.btn-lg | Maakt een grotere knop |
.btn-sm | Creëert een kleinere knop |
.btn-xs | Maakt een extra kleine knop |
.btn-block | Knoppen worden elementen op blokniveau en beslaan de volledige breedte van hun bovenliggende element |
Maak de knop actief
De active klasse laat een knop verschijnen.
<button type="button" class="btn btn-primary active">Active Primary</button>
Schakel een knop uit
Als u de disabled klasse aan een knop toevoegt, wordt er niet op de knop geklikt en wordt een verboden cursor weergegeven wanneer u erover zweeft.
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Knoppen horizontaal samen weergeven
Meerdere knoppen kunnen horizontaal worden weergegeven met de klasse .btn-group . Wikkel uw knoppen eenvoudigweg in een containerelement en geef dat element de klasse btn-group.
<div class="btn-group">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
Knoppen verticaal weergeven
Pas de .btn-group-vertical op het container-element
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
Laat de knoppengroep de volledige breedte innemen
Knoppen gewikkeld in een .btn-group element nemen slechts de breedte in die nodig is. Gebruik in plaats daarvan .btn-group-justified om de groep over de volledige breedte van het scherm te laten overspannen.
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apples</a>
<a href="#" class="btn btn-primary">Oranges</a>
<a href="#" class="btn btn-primary">Pineapples</a>
</div>