Bootstrap 5 Knop

Knopstijl

Bootstrap 5 biedt verschillende stijlen van knoppen:

Voorbeeld

<button type="button" class="btn">Basis</button>
<button type="button" class="btn btn-primary">Primaire</button>
<button type="button" class="btn btn-secondary">Secundair</button>
<button type="button" class="btn btn-success">Succes</button>
<button type="button" class="btn btn-info">Informatie</button>
<button type="button" class="btn btn-warning">Waarschuwing</button>
<button type="button" class="btn btn-danger">Gevaarlijk</button>
<button type="button" class="btn btn-dark">Donker</button>
<button type="button" class="btn btn-light">Licht</button>
<button type="button" class="btn btn-link">Link</button>

Probeer het zelf

De knoppenklasse kan worden gebruikt voor <a>en<button> of <input> Element:

Voorbeeld

<a href="#" class="btn btn-success">Knop link</a>
<button type="button" class="btn btn-success">Knop</button>
<input type="button" class="btn btn-success" value="Invoer knop">
<input type="submit" class="btn btn-success" value="Verzend knop">
<input type="reset" class="btn btn-success" value="Reset knop">

Probeer het zelf

Waarom schrijven we een # in de href-eigenschap van de link?

Omdat we geen pagina's hebben die we kunnen linken en we geen "404"-bericht willen ontvangen, gebruiken we # als link. In het echt zou dit de echte URL van de "zoek"-pagina moeten zijn.

knopomlijsting

Bootstrap 5 biedt ook achttien schaduw/omlijstingsknoppen.

Als je de muis eroverheen beweegt, zie je extra "hover"-effecten:

Voorbeeld

<button type="button" class="btn btn-outline-primary">hoofd</button>
<button type="button" class="btn btn-outline-secondary">secundair</button>
<button type="button" class="btn btn-outline-success">succes</button>
<button type="button" class="btn btn-outline-info">informatie</button>
<button type="button" class="btn btn-outline-warning">waarschuwing</button>
<button type="button" class="btn btn-outline-danger">gevaarlijk</button>
<button type="button" class="btn btn-outline-dark">donker</button>
<button type="button" class="btn btn-outline-light text-dark">licht</button>

Probeer het zelf

knopmaat

voor grote knoppen gebruiken .btn-lg class, voor kleine knoppen gebruiken .btn-sm class:

Voorbeeld

<button type="button" class="btn btn-primary btn-lg">groot</button>
<button type="button" class="btn btn-primary">standaard</button>
<button type="button" class="btn btn-primary btn-sm">klein</button>

Probeer het zelf

blokkige knop

Om een blokkige knop te maken die de hele breedte van het ouder-element overslaat, gebruik dan .d-grid "helper" class:

Voorbeeld

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Volledige breedte knop</button>
</div>

Probeer het zelf

Als je veel blokkende knoppen hebt, kun je .gap-* Klasse beheert de afstand tussen hen:

Voorbeeld

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Volledige breedte knop</button>
  <button type="button" class="btn btn-primary btn-block">Volledige breedte knop</button>
  <button type="button" class="btn btn-primary btn-block">Volledige breedte knop</button>
</div>

Probeer het zelf

Actieve/uitgeschakelde knop

Knoppen kunnen ingesteld worden op actieve (zichtbaar als ingedrukt) of uitgeschakelde (niet klikbaar) status:

klasse .active maakt de knop zichtbaar als ingedrukt, terwijl disabled De eigenschap maakt de knop niet klikbaar. Let op, het <a> element ondersteunt geen disabled eigenschap, dus moet je .disabled Klasse maakt het visueel zichtbaar als uitgeschakeld.

Voorbeeld

<button type="button" class="btn btn-primary active">Actieve Primair</button>
<button type="button" class="btn btn-primary" disabled>Uitgeschakelde Primair</button>
<a href="#" class="btn btn-primary disabled">Uitgeschakelde Link</a>

Probeer het zelf

Laderknop

Je kunt ook een "spinner" toevoegen aan de knop, je zult meer leren over onze BS5 Spinner handleiding:

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>
  Laden..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Laden..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Laden..
</button>

Probeer het zelf