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 предоставляет классы, которые позволяют изменять состояние кнопок в качестве активного, неактивного и т.д., каждый из которых обсуждаются в следующих разделах.
Рабочее состояние
Кнопки будут появляться нажатыми (с более темным фоном, темной границей, и вставкой тенью), когда активна. В следующей таблице приведены классы, используемые, чтобы сделать кнопки элементы и якорь активными:
| Элемент | Класс |
|---|---|
| Кнопочный элемент | Используйте класс .active, чтобы показать, что она включена. |
| Якорный элемент | Используйте класс .active кнопки <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%, и потеряет градиент.
В следующей таблице приведены классы, используемые, чтобы сделать элементы кнопку и якорь отключенными:
| Элемент | Класс |
|---|---|
| Элемент кнопка | Добавьте атрибут disabled для кнопки <button>. |
| Элемент Якорь | Добавьте класс disabled к <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">
