Knapper

Brug Bootstraps brugerdefinerede knapstile til handlinger i formularer, dialogbokse og mere med understøttelse af flere størrelser, tilstande og mere.

Eksempler

Bootstrap inkluderer flere foruddefinerede knapstilarter, der hver tjener sit eget semantiske formål, med et par ekstramateriale indsat for mere kontrol.

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

Hvis du ikke ønsker, at knapteksten skal ombrydes, kan du tilføje .text-nowrapklassen til knappen. I Sass kan du indstille $btn-white-space: nowraptil at deaktivere tekstombrydning for hver knap.

Knapmærker

Klasserne .btner designet til at blive brugt sammen med <button>elementet. Du kan dog også bruge disse klasser på <a>eller <input>elementer (selvom nogle browsere kan anvende en lidt anderledes gengivelse).

Når du bruger knapklasser på <a>elementer, der bruges til at udløse in-page funktionalitet (såsom kollapsende indhold), i stedet for at linke til nye sider eller sektioner på den aktuelle side, bør disse links gives en role="button"for passende at formidle deres formål til hjælpeteknologier som f.eks. skærmlæsere.

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

Kontur knapper

Har du brug for en knap, men ikke de heftige baggrundsfarver, de kommer med? Erstat standardmodifikatorklasserne med .btn-outline-*dem for at fjerne alle baggrundsbilleder og farver på enhver knap.

<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

Kunne du tænke dig større eller mindre knapper? Tilføj .btn-lgeller .btn-smfor yderligere 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>

Opret blokniveauknapper – dem, der spænder over hele bredden af ​​en forælder – ved at tilføje .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 blive trykket ned, når de er aktive med en mørkere baggrund, mørkere kant og, når skygger er aktiveret, en indsat skygge. Der er ingen grund til at tilføje en klasse til <button>s, da de bruger en pseudo-klasse . Du kan dog stadig tvinge det samme aktive udseende med .active(og inkludere aria-pressed=“true”attributten), hvis du skulle få brug for at 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>

Deaktiveret tilstand

Få knapper til at se inaktive ud ved at tilføje den disabledbooleske attribut 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>

Deaktiverede knapper, der bruger <a>elementet, opfører sig lidt anderledes:

• <a>s understøtter ikke disabledattributten, så du skal tilføje .disabledklassen for at få den visuelt til at virke deaktiveret.
• Nogle fremtidsvenlige stilarter er inkluderet for at deaktivere alle pointer-eventspå ankerknapper. I browsere, der understøtter denne egenskab, vil du slet ikke se den deaktiverede markør.
• Deaktiverede knapper, der bruger <a>, skal inkludere aria-disabled="true"attributten for at angive elementets tilstand til hjælpeteknologier.
• Deaktiverede knapper, der bruger <a> , bør ikke indeholde hrefattributten.

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

For at dække tilfælde, hvor du skal beholde hrefattributten på et deaktiveret link, .disabledbruger klassen pointer-events: nonetil at forsøge at deaktivere linkfunktionaliteten i <a>s. Bemærk, at denne CSS-egenskab endnu ikke er standardiseret til HTML, men alle moderne browsere understøtter den. Derudover, selv i browsere, der understøtter pointer-events: none, forbliver tastaturnavigation upåvirket, hvilket betyder, at seende tastaturbrugere og brugere af hjælpeteknologier stadig vil være i stand til at aktivere disse links. Så for at være sikker skal du udover aria-disabled="true", også inkludere en tabindex="-1"attribut på disse links for at forhindre dem i at modtage tastaturfokus, og brug tilpasset JavaScript til at deaktivere deres funktionalitet 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>

Knap plugin

Gør mere med knapper. Styr knaptilstande eller opret grupper af knapper for flere komponenter som værktøjslinjer.

Skift tilstande

Tilføj data-toggle="button"for at skifte til en knaps activetilstand. Hvis du på forhånd skifter en knap, skal du manuelt tilføje .activeklassen og aria-pressed="true" til <button>.

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

Afkrydsningsfelt og radioknapper

Bootstraps .buttonstilarter kan anvendes på andre elementer, såsom <label>s, for at give afkrydsningsfelt eller radiostil-knap-skift. Føj data-toggle="buttons"til en .btn-group, der indeholder de modificerede knapper for at aktivere deres skifteadfærd via JavaScript og tilføj .btn-group-togglefor at style <input>s'erne i dine knapper. Bemærk, at du kan oprette enkelte input-drevne knapper eller grupper af dem.

Den kontrollerede tilstand for disse knapper opdateres kun via clickbegivenhed på knappen. Hvis du bruger en anden metode til at opdatere inputtet – f.eks. med <input type="reset">eller ved manuelt at anvende inputtets checkedegenskab – skal du slå .activetil <label>manuelt.

Bemærk, at forhåndskontrollerede knapper kræver, at du manuelt tilføjer .activeklassen til input's <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