twitter-bootstrap-3
Knappar i twitter-bootstrap-3

Använda twitter-bootstrap `btn` klass

btn klassen av Twitter-bootstrap kan användas med något av följande html-element.

1. ankare
2. knapp
3. ingång with both type="button" and type="submit"

Nedan följer exempel på alla möjliga användningsfall av btn klassen

<a class="btn" href="#" role="button">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Även om btn klassen kan användas på något av ovanstående fyra sätt, men det rekommenderas starkt att använda <button> -elementet när det är möjligt

Bild av ovanstående kod bifogas nedan

Källa

olika storlekar på knappen i twitter-bootstrap-3

twitter-bootstrap-3 har tillhandahållit fyra olika storlekar på knappar

1. Stor knapp btn-lg
2. Standardknappen does not require any btn size
3. Liten knapp btn-sm
4. Extra liten knapp btn-xs

 <button type="button" class="btn  btn-lg">Large button</button>
 <button type="button" class="btn">Default button</button>
 <button type="button" class="btn  btn-sm">Small button</button>
 <button type="button" class="btn  btn-xs">Extra small button</button>

Bild av ovanstående kod bifogas nedan

Källa

Lägg till Glyphicon till knappen

Glyphicons kan användas i text, knappar, verktygsfält, navigering, formulär osv. (Källa: W3Schools). Glyphicons är i princip ikonformer som kan användas för att utforma vilken som helst av de nämnda. Dessa exempel beskriver användningen av glyphicons i två typer av knappar genom att helt enkelt använda ett spann inne i knapparna som har en klass av typen glyphicon:

HTML-knapp

<button type="button" class="btn btn-info">
    <span class="glyphicon glyphicon-search"></span> Search
</button>

ASP-knapp

<asp:LinkButton runat="server" CssClass="btn btn-info" >
    <span class="glyphicon glyphicon-envelope"></span> Email
</asp:LinkButton>