twitter-bootstrap-3
Przyciski w twitter-bootstrap-3

Korzystanie z twitter-bootstrap klasy `btn`

Klasy btn Twitter-bootstrap można używać z dowolnym z następujących elementów HTML.

1. Kotwica
2. przycisk
3. wpisz with both type="button" and type="submit"

Poniżej znajdują się przykłady wszystkich możliwych przypadków użycia klasy btn

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

Chociaż klasa btn może być używana na jeden z czterech powyższych sposobów, zaleca się jednak używanie elementu <button> , gdy tylko jest to możliwe

Obraz powyższego kodu znajduje się poniżej

Źródło

różne rozmiary guzików w twitter-bootstrap-3

twitter-bootstrap-3 dostarczył cztery różne rozmiary przycisków

1. Duży przycisk btn-lg
2. Domyślny przycisk does not require any btn size
3. Mały przycisk btn-sm
4. Bardzo mały przycisk 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>

Obraz powyższego kodu znajduje się poniżej

Źródło

Dodaj glif do przycisku

Glifikonów można używać w tekście, przyciskach, paskach narzędzi, nawigacji, formularzach itp. (Źródło: W3Schools). Glify to w zasadzie ikony, których można użyć do stylizacji dowolnego z wyżej wymienionych. Te przykłady przedstawiają użycie glifikonów w dwóch typach przycisków, po prostu za pomocą zakresu wewnątrz przycisków, które mają klasę glifów typu:

Przycisk HTML

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

Przycisk ASP

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