Кнопки были описаны в статье Bootstrap - Кнопки. С помощью этого плагина вы можете добавить некоторые взаимодействия, такие как состояния кнопок управления, или создать группы кнопок для большего количества компонентов, таких как панели инструментов.
Содержание:
Если вы хотите включить эту функциональность плагина индивидуально, вам понадобится button.js
, после включения bootstrap.js
или bootstrap.min.js
.
Состояние загрузки
Чтобы добавить состояние загрузки к кнопке, просто добавьте в файл data-load-text = "Loading..."
в качестве атрибута элемента кнопки, как показано в следующем примере -
Одиночный переключатель
Чтобы активировать переключение (т.е. изменить нормальное состояние кнопки на состояние нажатия и наоборот) на одной кнопке, добавьте data-toggle = "button"
в качестве атрибута элемента кнопки, как показано в следующем примере -
Флажок
Вы можете создать группу флажков и добавить к ней переключение, просто добавив данные атрибута data-toggle = "buttons"
в группу btn.
Радио
Аналогичным образом вы можете создать группу радиовходов и добавить к ним переход, просто добавив данные атрибута data-toggle = "buttons"
в группу btn.
Применение кнопочного плагина
Вы можете включить плагин для кнопок через JavaScript, как показано ниже -
Методы
Ниже приведены некоторые из полезных методов для плагинов кнопок -
Метод | Описание | Пример |
---|---|---|
.button('toggle') | Переключает состояние нажатия. Придает кнопке вид, что он был активирован. Вы также можете включить автоматическое переключение кнопки с помощью атрибута data-toggle . | |
.button('loading' | При загрузке кнопка отключается, и текст изменяется на параметр из атрибута data-loading-text элемента кнопки | |
.button('reset') | Сбрасывает состояние кнопки, возвращая исходное содержимое в текст. Этот метод полезен, когда вам нужно вернуть кнопку в основное состояние | |
.button(string) | Строка в этом методе относится к любой строке, объявленной пользователем. Чтобы сбросить состояние кнопки и ввести новый контент, используйте этот метод. |
Следующий пример демонстрирует использование вышеуказанных методов -
Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!
Новые статьи
Предыдущие статьи
- Bootstrap - Плагин Alert - 22/09/2018 17:32
- Bootstrap - Плагин Popover - 22/09/2018 17:31
- Bootstrap - Плагин для подсказки - 22/09/2018 17:31
- Bootstrap - Плагин Tab - 22/09/2018 17:30
- Bootstrap - Плагин Scrollspy - 22/09/2018 17:30
- Bootstrap - Плагин для раскрывающегося списка - 22/09/2018 17:29
- Bootstrap - Модальный плагин - 22/09/2018 17:29
- Bootstrap - Переходный плагин - 22/09/2018 17:28
- Bootstrap -Обзор плагинов - 22/09/2018 17:28
- Бутстрап – Wells - 22/09/2018 17:27
- Бутстрап - Панели - 22/09/2018 17:26
- Bootstrap - Список групп - 22/09/2018 17:26
- Bootstrap - Объект мультимедиа - 22/09/2018 17:25
- Бутстрап - Индикатор прогресса - 22/09/2018 17:25
- Бутстрап - Оповещения - 22/09/2018 17:24
- Bootstrap - Миниатюры - 22/09/2018 17:24
- Bootstrap - Заголовок страницы - 22/09/2018 17:23
- Бутстрап - Jumbotron - карточка статьи - 22/09/2018 17:23
- Бутстрап - Значки - 22/09/2018 17:23
- Бутстрап - Ярлыки - 22/09/2018 17:22