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>

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 visas nedtryckta (med mörkare bakgrund, mörkare ram och infälld skugga) när de är aktiva. 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 bör inkludera aria-disabled="true"attributet för att indikera elementets tillstånd för hjälpmedel.

<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" autocomplete="off">
  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 autocomplete="off"> 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" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Metoder