Последние учебники веб-разработки
 

Bootstrap JS Кнопка


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 {
    border-radius: 0;
}
Попробуй сам "

Как добавить определенный цвет:

пример

.btn-default {
    background: #000;
    color: #fff;
}

.btn-default:hover {
    background: #fff;
    color: #000;
}
Попробуй сам "

Как добавить тени:

пример

.btn-default {
    box-shadow: 1px 2px 5px #000000;
}
Попробуй сам "