Bootstrap 5 knappar

Knappstil

Bootstrap 5 erbjuder olika typer av knappar:

Exempel

<button type="button" class="btn">Grundläggande</button>
<button type="button" class="btn btn-primary">Primär</button>
<button type="button" class="btn btn-secondary">Secundär</button>
<button type="button" class="btn btn-success">Lyckad</button>
<button type="button" class="btn btn-info">Information</button>
<button type="button" class="btn btn-warning">Varning</button>
<button type="button" class="btn btn-danger">Farlig</button>
<button type="button" class="btn btn-dark">Mörkt</button>
<button type="button" class="btn btn-light">Ljust</button>
<button type="button" class="btn btn-link">Länk</button>

Prova själv

Knappklassen kan användas för <a>och<button> eller <input> Element:

Exempel

<a href="#" class="btn btn-success">Länkknapp</a>
<button type="button" class="btn btn-success">Knapp</button>
<input type="button" class="btn btn-success" value="Input knappen">
<input type="submit" class="btn btn-success" value="Skicka knappen">
<input type="reset" class="btn btn-success" value="Återställ knappen">

Prova själv

Varför skriver vi # i länkens href-egenskap?

Eftersom vi inte har några sidor att länka till och vi inte vill få "404"-meddelanden, använder vi # som länk. I verkligheten bör det vara den verkliga URL:en till "sök"-sidan.

Knappkontur

Bootstrap 5 erbjuder också åtta kontur/ramknappar.

När du flyttar muspekaren över dem, visas extra "hover"-effekter:

Exempel

<button type="button" class="btn btn-outline-primary">Huvudsaklig</button>
<button type="button" class="btn btn-outline-secondary">sekundär</button>
<button type="button" class="btn btn-outline-success">Lyckad</button>
<button type="button" class="btn btn-outline-info">Information</button>
<button type="button" class="btn btn-outline-warning">Varning</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">Lätt</button>

Prova själv

Knappstorlek

För stora knappar .btn-lg Använd för små knappar .btn-sm Klass:

Exempel

<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">Liten</button>

Prova själv

Blockknapp

För att skapa en blockknapp som täcker hela föräldrelementets bredd, använd .d-grid Klass "helper":

Exempel

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Brett knapp</button>
</div>

Prova själv

Om du har många blockknappar kan du använda .gap-* Klasser styr deras mellanrum:

Exempel

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Brett knapp</button>
  <button type="button" class="btn btn-primary btn-block">Brett knapp</button>
  <button type="button" class="btn btn-primary btn-block">Brett knapp</button>
</div>

Prova själv

Aktiv/Inaktiverad knapp

Knappen kan ställas in i aktiv (visas som nedtryckt) eller inaktiverad (icke-klickbar) status:

klass .active gör att knappen visas som nedtryckt, medan disabled Egenskapen gör knappen icke-klickbar.Observera att <a>-elementet inte stöder disabled-egenskapen, så måste du använda .disabled Klasser gör att den visuell visas som inaktiverad.

Exempel

<button type="button" class="btn btn-primary active">Aktiv primär</button>
<button type="button" class="btn btn-primary" disabled>Inaktiverad primär</button>
<a href="#" class="btn btn-primary disabled">Inaktiverad länk</a>

Prova själv

Laddareknapp

Du kan också lägga till "spinner" till knappen, du kommer att lära dig mer om våra BS5 Spinner-tutorials:

Exempel

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

Prova själv