Knapper

Bruk Bootstraps egendefinerte knappestiler for handlinger i skjemaer, dialogbokser og mer med støtte for flere størrelser, tilstander og mer.

Eksempler

Bootstrap inkluderer flere forhåndsdefinerte knappestiler, som hver tjener sitt eget semantiske formål, med noen få ekstrautstyr for mer kontroll.

<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Deaktiver tekstbryting

Hvis du ikke vil at knappeteksten skal brytes, kan du legge .text-nowrapklassen til knappen. I Sass kan du angi $btn-white-space: nowrapå deaktivere tekstbryting for hver knapp.

Knappemerker

Klassene .btner laget for å brukes med <button>elementet. Du kan imidlertid også bruke disse klassene på <a>eller <input>elementer (selv om noen nettlesere kan bruke en litt annen gjengivelse).

Når du bruker knappeklasser på <a>elementer som brukes til å utløse funksjonalitet på siden (som kollapsende innhold), i stedet for å lenke til nye sider eller seksjoner på gjeldende side, bør disse koblingene gis en role="button"for å formidle hensikten til hjelpeteknologier som f.eks. skjermlesere.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Konturknapper

Trenger du en knapp, men ikke de heftige bakgrunnsfargene de kommer med? Erstatt standard modifikatorklassene med .btn-outline-*de for å fjerne alle bakgrunnsbilder og farger på en hvilken som helst knapp.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Størrelser

Lyst på større eller mindre knapper? Legg til .btn-lgeller .btn-smfor flere størrelser.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Lag blokknivåknapper – de som spenner over hele bredden til en forelder – ved å legge til .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Aktiv tilstand

Knapper vil vises trykket når de er aktive med en mørkere bakgrunn, mørkere kant og, når skygger er aktivert, en innfelt skygge. Det er ikke nødvendig å legge til en klasse til <button>s da de bruker en pseudo-klasse . Du kan imidlertid fortsatt tvinge frem det samme aktive utseendet med .active(og inkludere aria-pressed=“true”attributtet) hvis du trenger å replikere tilstanden programmatisk.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Deaktivert tilstand

Få knapper til å se inaktive ut ved å legge til det disabledboolske attributtet til ethvert <button>element.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

Deaktiverte knapper som bruker <a>elementet oppfører seg litt annerledes:

• <a>s støtter ikke disabledattributtet, så du må legge til .disabledklassen for å få den visuelt til å virke deaktivert.
• Noen fremtidsvennlige stiler er inkludert for å deaktivere alle pointer-eventspå ankerknapper. I nettlesere som støtter denne egenskapen, vil du ikke se den deaktiverte markøren i det hele tatt.
• Deaktiverte knapper som bruker <a>, bør inkludere aria-disabled="true"attributtet for å indikere tilstanden til elementet til hjelpeteknologier.
• Deaktiverte knapper som bruker <a> skal ikke inkludere hrefattributtet.

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Forbehold om lenkefunksjonalitet

For å dekke tilfeller der du må beholde hrefattributtet på en deaktivert lenke, .disabledbruker klassen pointer-events: nonefor å prøve å deaktivere lenkefunksjonaliteten til <a>s. Merk at denne CSS-egenskapen ennå ikke er standardisert for HTML, men alle moderne nettlesere støtter den. I tillegg, selv i nettlesere som støtter pointer-events: none, forblir tastaturnavigasjon upåvirket, noe som betyr at seende tastaturbrukere og brukere av hjelpeteknologi fortsatt vil kunne aktivere disse koblingene. Så for å være sikker, i tillegg til aria-disabled="true", inkluderer du også et tabindex="-1"attributt på disse koblingene for å hindre dem i å motta tastaturfokus, og bruk tilpasset JavaScript for å deaktivere funksjonaliteten deres helt.

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Knapp-plugin

Gjør mer med knapper. Kontroller knappstatuser eller lag grupper med knapper for flere komponenter som verktøylinjer.

Veksle mellom tilstander

Legg data-toggle="button"til for å veksle mellom en knapps activetilstand. Hvis du forhåndsveksler en knapp, må du manuelt legge til .activeklassen og aria-pressed="true" til <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Avmerkingsboks og radioknapper

Bootstraps .buttonstiler kan brukes på andre elementer, for eksempel <label>s, for å veksle mellom avkrysningsboks eller radiostilknapp. Legg data-toggle="buttons"til en .btn-groupsom inneholder de modifiserte knappene for å aktivere vekslingsadferden deres via JavaScript og legg .btn-group-toggletil stilene i <input>knappene dine. Vær oppmerksom på at du kan lage enkeltinngangsdrevne knapper eller grupper av dem.

Den sjekkede tilstanden for disse knappene oppdateres kun via clickhendelse på knappen. Hvis du bruker en annen metode for å oppdatere inndata – f.eks. med <input type="reset">eller ved å bruke inndataegenskapene manuelt checked– må du slå .activepå <label>manuelt.

Merk at forhåndskontrollerte knapper krever at du manuelt legger til .activeklassen til inngangens <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Metoder