twitter-bootstrap-3
Knoppen in twitter-bootstrap-3

Gebruik de klasse twitter-bootstrap `btn`

btn klasse btn van Twitter-bootstrap kan worden gebruikt met een van de volgende HTML-elementen.

1. anker
2. knop
3. invoer with both type="button" and type="submit"

Hieronder staan voorbeelden van alle mogelijke use cases van btn klasse

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

Hoewel btn klasse op een van de vier bovenstaande manieren kan worden gebruikt, maar het wordt ten zeerste aanbevolen om het element <button> waar mogelijk te gebruiken

Afbeelding van de bovenstaande code is hieronder bijgevoegd

Bron

verschillende maten knoppen in twitter-bootstrap-3

twitter-bootstrap-3 heeft vier verschillende formaten knoppen

1. Grote knop btn-lg
2. Standaardknop does not require any btn size
3. Kleine knop btn-sm
4. Extra kleine knop 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>

Afbeelding van de bovenstaande code is hieronder bijgevoegd

Bron

Glyphicon toevoegen aan knop

Glyphicons kunnen worden gebruikt in tekst, knoppen, werkbalken, navigatie, formulieren, enz. (Bron: W3Schools). Glyphicons zijn in principe pictogramvormen die kunnen worden gebruikt om een van de bovengenoemde stijlen te maken. Deze voorbeelden schetsen het gebruik van glyphicons in twee soorten knoppen door eenvoudig een overspanning in de knoppen te gebruiken die een klasse van het type glyphicon hebben:

HTML-knop

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

ASP-knop

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