Knappar

Använd Bootstraps anpassade knappstilar för åtgärder i formulär, dialogrutor och mer med stöd för flera storlekar, tillstånd och mer.

Exempel

Bootstrap innehåller flera fördefinierade knappstilar, var och en tjänar sitt eget semantiska syfte, med några extrafunktioner för 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>

Inaktivera textbrytning

Om du inte vill att knapptexten ska radbrytas kan du lägga till .text-nowrapklassen i knappen. I Sass kan du ställa in $btn-white-space: nowrapatt inaktivera textbrytning för varje knapp.

Knapptaggar

Klasserna .btnär designade för att användas med <button>elementet. Men du kan också använda dessa klasser på <a>eller <input>element (även om vissa webbläsare kan tillämpa en något annorlunda rendering).

När man använder knappklasser på <a>element som används för att utlösa funktionalitet på sidan (som komprimerande innehåll), snarare än att länka till nya sidor eller avsnitt på den aktuella sidan, bör dessa länkar ges en role="button"för att på lämpligt sätt förmedla deras syfte till hjälpmedel som t.ex. skärmläsare.

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

Konturknappar

Behöver du en knapp, men inte de rejäla bakgrundsfärgerna de ger? Ersätt standardmodifieringsklasserna med de .btn-outline-*för att ta bort alla bakgrundsbilder och färger på valfri 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>

Storlekar

Vill du ha större eller mindre knappar? Lägg till .btn-lgeller .btn-smför ytterligare storlekar.

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

Skapa blocknivåknappar – de som spänner över hela bredden av en förälder – genom att lägga till .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>

Aktivt tillstånd

Knappar kommer att visas nedtryckta när de är aktiva med en mörkare bakgrund, mörkare ram och, när skuggor är aktiverade, en infälld skugga. Det finns inget behov av att lägga till en klass till <button>s eftersom de använder en pseudoklass . Du kan dock fortfarande tvinga fram samma aktiva utseende med .active(och inkludera aria-pressed=“true”attributet) om du skulle behöva replikera tillståndet programmatiskt.

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

Inaktiverat tillstånd

Få knappar att se inaktiva ut genom att lägga till det disabledbooleska attributet till valfritt <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>

Inaktiverade knappar som använder <a>elementet beter sig lite annorlunda:

• <a>s stöder inte disabledattributet, så du måste lägga till .disabledklassen för att den ska se inaktiverad visuellt.
• Vissa framtidsvänliga stilar ingår för att inaktivera alla pointer-eventspå ankarknappar. I webbläsare som stöder den egenskapen kommer du inte att se den inaktiverade markören alls.
• Inaktiverade knappar som använder <a>bör inkludera aria-disabled="true"attributet för att indikera elementets tillstånd för hjälpmedel.
• Inaktiverade knappar som använder <a> ska inte inkludera hrefattributet.

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

Varning för länkfunktioner

För att täcka fall där du måste behålla hrefattributet på en inaktiverad länk, .disabledanvänder klassen pointer-events: noneför att försöka inaktivera länkfunktionaliteten för <a>s. Observera att den här CSS-egenskapen ännu inte är standardiserad för HTML, men alla moderna webbläsare stöder den. Dessutom, även i webbläsare som stöder pointer-events: none, förblir tangentbordsnavigeringen opåverkad, vilket innebär att seende tangentbordsanvändare och användare av hjälpmedel fortfarande kommer att kunna aktivera dessa länkar. Så för säkerhets skull inkluderar du förutom aria-disabled="true", även ett tabindex="-1"attribut på dessa länkar för att förhindra att de får tangentbordsfokus, och använd anpassad JavaScript för att inaktivera deras funktionalitet helt och hållet.

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

Plugin för knapp

Gör mer med knappar. Kontrollera knapptillstånd eller skapa grupper av knappar för fler komponenter som verktygsfält.

Växla tillstånd

Lägg data-toggle="button"till för att växla activetillstånd för en knapp. Om du förväxlar en knapp måste du manuellt lägga till .activeklassen och aria-pressed="true" till <button>.

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

Kryssruta och radioknappar

Bootstraps .buttonstilar kan appliceras på andra element, till exempel <label>s, för att växla mellan kryssrutor eller radiostil. Lägg data-toggle="buttons"till en .btn-groupsom innehåller de modifierade knapparna för att aktivera deras växlingsbeteende via JavaScript och lägg .btn-group-toggletill stilarna i <input>dina knappar. Observera att du kan skapa enstaka ingångsdrivna knappar eller grupper av dem.

Det markerade tillståndet för dessa knappar uppdateras endast via clickhändelse på knappen. Om du använder en annan metod för att uppdatera inmatningen – t.ex. med <input type="reset">eller genom att manuellt tillämpa checkedindatas egenskap – måste du aktivera .activeden <label>manuellt.

Observera att förmarkerade knappar kräver att du manuellt lägger till .activeklassen i ingångens <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