JS Button (button.js)
Используйте этот плагин, если вы хотите иметь больше контроля над кнопками.
Для учебника о кнопках, прочитайте наши Bootstrap кнопки Учебник .
В Кнопка Plugin Классы
Приведенные ниже классы могут быть использованы для любого стиля <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();
Кнопка Опции
None |
Методы Button
В следующей таблице перечислены все доступные методы кнопки.
Примечание: Для этого плагина, методы также могут быть переданы с помощью атрибутов данных; добавить имя метода к данные-, так как в данных-переключателя или загрузки данных.
метод | Описание | Попробуй |
---|---|---|
.button("toggle") | Делает кнопку взгляд нажатой | Попробуй |
.button("loading") | Отключение кнопки и изменяет текст кнопки "Загрузка ..." | Попробуй |
.button("reset") | Изменение текста кнопки к оригинальному тексту (если он был изменен) | Попробуй |
.button("string") | Определяет новый текст кнопки | Попробуй |
Примеры
Использование CSS для Настройка кнопок
Как удалить закругленные границы:
Как добавить определенный цвет:
пример
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
}
Попробуй сам " Как добавить тени: