В этой статье описывается использование кнопок в Bootstrap с примерами. Все, что задано классом .btn, наследует стандартный вид серой кнопки с закругленными углами. Однако Bootstrap предоставляет некоторые варианты кнопок стиля, которые суммируются в следующей таблице -
| Класс | Описание |
|---|---|
| btn | Кнопка по умолчанию / Стандартная. |
| btn-primary | Обеспечивает дополнительный визуальный вес и определяет основное действие в наборе кнопок. |
| btn-success | Указывает на успешное или позитивное действие. |
| btn-info | Контекстная кнопка для информационных предупреждающих сообщений. |
| btn-warning | Указывает, что с этим действием следует проявлять осторожность. |
| btn-danger | Указывает на опасное или потенциально негативное действие. |
| btn-link | Деформируйте кнопку, сделав ее похожей на ссылку, сохраняя при этом поведение кнопки. |
В следующем примере демонстрируются все вышеперечисленные классы кнопок -
<!-- Standard button --> <button type = "button" class = "btn btn-default">Default Button</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type = "button" class = "btn btn-primary">Primary Button</button> <!-- Indicates a successful or positive action --> <button type = "button" class = "btn btn-success">Success Button</button> <!-- Contextual button for informational alert messages --> <button type = "button" class = "btn btn-info">Info Button</button> <!-- Indicates caution should be taken with this action --> <button type = "button" class = "btn btn-warning">Warning Button</button> <!-- Indicates a dangerous or potentially negative action --> <button type = "button" class = "btn btn-danger">Danger Button</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type = "button" class = "btn btn-link">Link Button</button>
Размер кнопки
В следующей таблице приведены классы, используемые для получения кнопок разных размеров -
| Класс | Описание |
|---|---|
| .btn-lg | Это делает размер кнопки большим. |
| .btn-sm | Это делает размер кнопки маленьким. |
| .btn-xs | Это делает размер кнопки слишком маленьким. |
| .btn-block | Это создает кнопки уровня блока - те, которые охватывают всю ширину родителя. |
Следующий пример демонстрирует это -
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Large Primary button
</button>
<button type = "button" class = "btn btn-default btn-lg">
Large button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary">
Default size Primary button
</button>
<button type = "button" class = "btn btn-default">
Default size button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-sm">
Small Primary button
</button>
<button type = "button" class = "btn btn-default btn-sm">
Small button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-xs">
Extra small Primary button
</button>
<button type = "button" class = "btn btn-default btn-xs">
Extra small button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg btn-block">
Block level Primary button
</button>
<button type = "button" class = "btn btn-default btn-lg btn-block">
Block level button
</button>
</p>
Состояние кнопки
Bootstrap предоставляет классы, которые позволяют изменять состояние кнопок как активных, отключенных и т. Д., Каждый из которых обсуждается в следующих разделах.
Активное состояние
Кнопки будут отображаться нажатыми (с более темным фоном, более темной рамкой и вставкой) при активном нажатии. В следующей таблице приведены классы, используемые для создания элементов кнопок и элементов привязки -
| Элемент | Класс |
|---|---|
| Элемент кнопки | Используйте активный класс, чтобы показать, что он активирован. |
| Анкерный элемент | Используйте активный класс для кнопок a, чтобы показать, что он активирован. |
Следующий пример демонстрирует это -
<p>
<button type = "button" class = "btn btn-default btn-lg ">
Default Button
</button>
<button type = "button" class = "btn btn-default btn-lg active">
Active Button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Primary button
</button>
<button type = "button" class = "btn btn-primary btn-lg active">
Active Primary button
</button>
</p>
Состояние отключения
Когда вы отключите кнопку, она будет исчезать в цвете на 50% и потеряет градиент.
В следующей таблице приведены классы, используемые для того, чтобы элемент кнопки и элемент привязки были отключены -
| Элемент | Класс |
|---|---|
| Элемент кнопки | Добавьте отключенный атрибут к кнопкам button. |
| Анкерный элемент | Добавьте отключенный класс к кнопкам a. |
Примечание. Этот класс изменит внешний вид a, а не его функциональность. Для отключения ссылок здесь нужно использовать собственный JavaScript.
Следующий пример демонстрирует это -
<p>
<button type = "button" class = "btn btn-default btn-lg">
Default Button
</button>
<button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
Disabled Button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Primary button
</button>
<button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
Disabled Primary button
</button>
</p>
<p>
<a href = "#" class = "btn btn-default btn-lg" role = "button">
Link
</a>
<a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
Disabled Link
</a>
</p>
<p>
<a href = "#" class = "btn btn-primary btn-lg" role = "button">
Primary link
</a>
<a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
Disabled Primary link
</a>
</p>
Теги кнопки
Вы можете использовать классы кнопок с элементами a, button или input. Но рекомендуется использовать его с элементами button, чтобы избежать проблем с несогласованностью между браузерами.
Следующий пример демонстрирует это -
<a class = "btn btn-default" href = "#" role = "button">Link</a> <button class = "btn btn-default" type = "submit">Button</button> <input class = "btn btn-default" type = "button" value = "Input"> <input class = "btn btn-default" type = "submit" value = "Submit">