twitter-bootstrap
Knappar
Sök…
Syntax
- Klasser: .btn-default | .btn-primär | .btn-framgång | .btn-info | .btn-varning | .btn-fare | .btn-link;
- Storlekar: .btn-lg | .btn-md | .btn-sm | .btn-xs;
- Tillstånd: aktiv | dissabled.
Knappklasser
Bootstrap tillhandahåller flera klasser för stylingknappar och gör att de sticker ut.
Bootstrap-knappar kan skapas genom att lägga till .btn klassen i ett element.
| Bootstrap Class | Roll (färg) |
|---|---|
.btn-default | Standardknapp (vit) |
.btn-primary | Ger extra visuell vikt och identifierar den primära handlingen (blå) |
.btn-success | Används för att indikera en framgångsrik åtgärd (grön) |
.btn-info | Kontextknapp för att tillhandahålla information (ljusblå) |
.btn-warning | Indikerar att användaren ska vara försiktig (gul) |
.btn-danger | Indikerar en farlig eller negativ handling (röd) |
.btn-link | Få knappen att se ut som en ankare. |
Knappstorlekar
Du kan också skapa olika storlekar på knappar med .btn-size i .btn-size
| Bootstrap Class | Resultat |
|---|---|
.btn-lg | Skapar en knapp i större storlek |
.btn-sm | Skapar en knapp i mindre storlek |
.btn-xs | Skapar en extra liten knapp |
.btn-block | Knappar blir element på blocknivå och sträcker sig över hela överordnade bredd |
Gör knappen aktiv
Den active klassen får en knapp att visas tryckt.
<button type="button" class="btn btn-primary active">Active Primary</button>
Inaktivera en knapp
Att lägga till den disabled klassen till en knapp gör att knappen inte kan klickas och visar en förbjuden markör när du håller över den.
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Rengör knapparna horisontellt tillsammans
Flera knappar kan återges horisontellt med klassen .btn-group . Slå helt enkelt in knapparna i ett behållarelement och ge det elementet btn-gruppklassen.
<div class="btn-group">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
Framför knapparna vertikalt
Använd klassen .btn-group-vertical på behållarelementet
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
Låt knappgruppen ta full bredd
Knappar insvept i ett .btn-group gruppelement tar bara upp så stor bredd som behövs. .btn-group-justified istället för att göra gruppen omfattande hela skärmbredden.
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apples</a>
<a href="#" class="btn btn-primary">Oranges</a>
<a href="#" class="btn btn-primary">Pineapples</a>
</div>