twitter-bootstrap-3
Кнопки в twitter-bootstrap-3

Использование класса twitter-bootstrap `btn`

Класс btn Twitter-bootstrap может использоваться с любым из следующих элементов html.

1. якорь
2. кнопка
3. ввод with both type="button" and type="submit"

Ниже приведены примеры всех возможных вариантов использования класса 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">

Хотя класс btn может использоваться любым из четырех способов, но настоятельно рекомендуется использовать элемент <button> когда это возможно

Изображение приведенного выше кода приведено ниже

Источник

разные размеры кнопки в twitter-bootstrap-3

twitter-bootstrap-3 предоставил четыре разных размера кнопок

1. Большая кнопка btn-lg
2. Кнопка по умолчанию does not require any btn size
3. Маленькая кнопка btn-sm
4. Дополнительная маленькая кнопка 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>

Изображение приведенного выше кода приведено ниже

Источник

Добавить Glyphicon to Button

Глификон можно использовать в тексте, кнопках, панелях инструментов, навигации, формах и т. Д. (Источник: W3Schools). Глификоны - это в основном формы иконок, которые можно использовать для стиля любого из вышеупомянутых. В этих примерах описывается использование глификонов внутри двух типов кнопок, просто используя диапазон внутри кнопок, которые имеют класс типа glyphicon:

Кнопка HTML

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

Кнопка ASP

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