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.
Formidle mening til hjælpeteknologier
Brug af farve til at tilføje betydning giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier - såsom skærmlæsere. Sørg for, at informationer, der er angivet med farven, enten er tydelige fra selve indholdet (f.eks. den synlige tekst), eller er inkluderet via alternative måder, såsom ekstra tekst skjult i .sr-only
klassen.
Deaktiver tekstombrydning
Hvis du ikke ønsker, at knapteksten skal ombrydes, kan du tilføje .text-nowrap
klassen til knappen. I Sass kan du indstille $btn-white-space: nowrap
til at deaktivere tekstombrydning for hver knap.
Knapmærker
Klasserne .btn
er 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.
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.
Størrelser
Kunne du tænke dig større eller mindre knapper? Tilføj .btn-lg
eller .btn-sm
for yderligere størrelser.
Opret blokniveauknapper – dem, der spænder over hele bredden af en forælder – ved at tilføje .btn-block
.
Aktiv tilstand
Knapperne vil blive trykket ned (med en mørkere baggrund, mørkere kant og indsat skygge), når de er aktive. 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.
Deaktiveret tilstand
Få knapper til at se inaktive ud ved at tilføje den disabled
booleske attribut til ethvert <button>
element.
Deaktiverede knapper, der bruger <a>
elementet, opfører sig lidt anderledes:
<a>
s understøtter ikkedisabled
attributten, så du skal tilføje.disabled
klassen for at få den visuelt til at virke deaktiveret.- Nogle fremtidsvenlige stilarter er inkluderet for at deaktivere alle
pointer-events
på ankerknapper. I browsere, der understøtter denne egenskab, vil du slet ikke se den deaktiverede markør. - Deaktiverede knapper skal indeholde
aria-disabled="true"
attributten for at angive elementets tilstand til hjælpeteknologier.
Forbehold om linkfunktionalitet
Klassen .disabled
bruger pointer-events: none
til at forsøge at deaktivere linkfunktionaliteten af <a>
s, men denne CSS-egenskab er endnu ikke standardiseret. 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 tilføje en tabindex="-1"
attribut på disse links (for at forhindre dem i at modtage tastaturfokus) og bruge tilpasset JavaScript til at deaktivere deres funktionalitet.
Knap plugin
Gør mere med knapper. Styr knaptilstande eller opret grupper af knapper til flere komponenter som værktøjslinjer.
Skift tilstande
Tilføj data-toggle="button"
for at skifte til en knaps active
tilstand. Hvis du på forhånd skifter en knap, skal du manuelt tilføje .active
klassen og aria-pressed="true"
til <button>
.
Afkrydsningsfelt og radioknapper
Bootstraps .button
stilarter 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-toggle
for 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 click
begivenhed på knappen. Hvis du bruger en anden metode til at opdatere inputtet – f.eks. med <input type="reset">
eller ved manuelt at anvende inputtets checked
egenskab – skal du slå .active
til <label>
manuelt.
Bemærk, at forhåndskontrollerede knapper kræver, at du manuelt tilføjer .active
klassen til input's <label>
.
Metoder
Metode | Beskrivelse |
---|---|
$().button('toggle') |
Skifter push-tilstand. Giver knappen det udseende, at den er blevet aktiveret. |
$().button('dispose') |
Ødelægger et elements knap. |