Bootstrap JS Кнопку
Кнопка JS (кнопка. js)
Используйте этот плагин, если вы хотите иметь больший контроль над кнопками.
Для учебника о кнопках, прочитайте наши загрузочные кнопки учебник.
Классы плагинов кнопок
Классы, приведенные ниже, можно использовать для оформления любого элемента < a >, < Button > или < input >:
| Класс | Описание | |
|---|---|---|
| .btn | Добавление базовой стилизации к любой кнопке | |
| .btn-default | Указывает кнопку по умолчанию/Стандартная | |
| .btn-primary | Обеспечивает дополнительный визуальный вес и определяет основное действие в наборе кнопок | |
| .btn-success | Указывает на успешное или положительное действие | |
| .btn-info | Контекстная кнопка для информационных предупреждающих сообщений | |
| .btn-warning | Указывает на осторожность следует принимать с этим действием | |
| .btn-danger | Указывает на опасное или потенциально отрицательное действие | |
| .btn-link | Делает кнопку выглядеть как ссылка (все равно будет иметь поведение кнопки) | |
| .btn-lg | Делает большую кнопку | |
| .btn-sm | Делает маленькую кнопку | |
| .btn-xs | Делает дополнительную маленькую кнопку | |
| .btn-block | Делает кнопку уровня блока (охватывает всю ширину родительского элемента) | |
| .active | Делает нажатой кнопку | |
| .disabled | Делает кнопку отключенной |
Через JavaScript
Включить вручную с помощью:
$('.btn').button();
Параметры кнопок
| Ни один |
Методы кнопок
В следующей таблице перечислены все доступные методы кнопок.
Примечание: Для этого плагина, методы также могут быть переданы через атрибуты данных; Добавьте имя метода в Data-, как при переключении данных или загрузке данных.
| Метод | Описание | |
|---|---|---|
| .button("toggle") | Заставляет кнопку выглядеть нажатой | |
| .button("loading") | Отключает кнопку и изменяет текст кнопки на "Загрузка..." | |
| .button("reset") | Изменяет текст кнопки на исходный текст (если он изменен) | |
| .button("string") | Задает новый текст кнопки |
Другие примеры
Использование CSS для настройки кнопок
Как удалить закругленные границы:
Пример
.btn-default {
border-radius: 0;
}
Как добавить конкретный цвет:
Пример
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
}
Как добавить тени:
Пример
.btn-default {
box-shadow: 1px 2px 5px #000000;
}
