twitter-bootstrap-3
Кнопки в twitter-bootstrap-3
Поиск…
Использование класса twitter-bootstrap `btn`
Класс btn Twitter-bootstrap может использоваться с любым из следующих элементов html.
- якорь
- кнопка
- ввод
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 предоставил четыре разных размера кнопок
- Большая кнопка
btn-lg - Кнопка по умолчанию
does not require any btn size - Маленькая кнопка
btn-sm - Дополнительная маленькая кнопка
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>


