Bootstrap 5 knapper

Knapstilarter

Bootstrap 5 tilbyder forskellige stilarter af knapper:

Eksempel

<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">Information</button>
<button type="button" class="btn btn-warning">Advarsel</button>
<button type="button" class="btn btn-danger">Farlig</button>
<button type="button" class="btn btn-dark">Mørk</button>
<button type="button" class="btn btn-light">Lys</button>
<button type="button" class="btn btn-link">Link</button>

Prøv det selv

Knapper kan bruges til <a>og<button> eller <input> Element:

Eksempel

<a href="#" class="btn btn-success">Link knap</a>
<button type="button" class="btn btn-success">Knap</button>
<input type="button" class="btn btn-success" value="Indtast knap">
<input type="submit" class="btn btn-success" value="Indsend knap">
<input type="reset" class="btn btn-success" value="Nulstil knap">

Prøv det selv

Hvorfor skriver vi en # i href-egenskaben for links?}

Da vi ikke har nogen side, vi kan linke til, og vi ikke vil modtage en "404"-meddelelse, bruger vi # som link. I virkeligheden bør det være den rigtige URL til "søge"-siden.

Knappeskrog

Bootstrap 5 tilbyder også otte kontur/kantknapper.

Flyt musen hen over dem, og du kan se ekstra "hover" effekter:

Eksempel

<button type="button" class="btn btn-outline-primary">Primær</button>
<button type="button" class="btn btn-outline-secondary">Secundær</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Information</button>
<button type="button" class="btn btn-outline-warning">Advarsel</button>
<button type="button" class="btn btn-outline-danger">Farlig</button>
<button type="button" class="btn btn-outline-dark">Mørk</button>
<button type="button" class="btn btn-outline-light text-dark">Lys</button>

Prøv det selv

knappestørrelse

brug for store knapper .btn-lg klasse, brug for små knapper .btn-sm klasse:

Eksempel

<button type="button" class="btn btn-primary btn-lg">Stor</button>
<button type="button" class="btn btn-primary">Standard</button>
<button type="button" class="btn btn-primary btn-sm">Lille</button>

Prøv det selv

blokknapper

Hvis du vil oprette en blokknapp som strækker sig over hele bredden af forældrelementet, skal du bruge .d-grid "helper" klasse:

Eksempel

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Fuld bredde knap</button>
</div>

Prøv det selv

Hvis du har mange blokknapper, kan du bruge .gap-* Klasser kontrollerer afstanden mellem dem:

Eksempel

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Fuld bredde knap</button>
  <button type="button" class="btn btn-primary btn-block">Fuld bredde knap</button>
  <button type="button" class="btn btn-primary btn-block">Fuld bredde knap</button>
</div>

Prøv det selv

Aktiv/deaktiveret knap

Knapper kan indstilles til aktiv (vises som trykket ned) eller deaktiveret (ikke klikbar) tilstand:

klassen .active gør knappen synlig som trykket ned, mens deaktiveret Egenskaben gør knappen ikke klikbar. Bemærk, at <a>-elementet ikke understøtter disabled-egenskaben, så du skal bruge .disabled Klasser gør det synligt som deaktiveret.

Eksempel

<button type="button" class="btn btn-primary active">Aktiv Primær</button>
<button type="button" class="btn btn-primary" disabled>Deaktiveret Primær</button>
<a href="#" class="btn btn-primary disabled">Deaktiveret Link</a>

Prøv det selv

Lasterknapper

Du kan også tilføje "spinner" til knapperne, og du vil lære mere om vores BS5 Spinner-tur:

Eksempel

<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>

Prøv det selv