Группы кнопок позволяют сгруппировать несколько кнопок на одной строке. Это полезно, если вы хотите разместить элементы, такие как кнопки выравнивания. Вы можете добавить опцию JavaScript-radio и стиль флажка с помощью Bootstrap Button Plugin.
Содержание:
В следующей таблице приведены важные классы, которые Bootstrap предоставляет для использования групп кнопок -
Класс | Описание | Образец кода |
---|---|---|
.btn-group | Этот класс используется для базовой группы кнопок. Оберните серию кнопок с классом .btn в .btn-group . | |
.btn-toolbar | Это помогает объединить наборы div class = "btn-group" в div class = "btn-toolbar" для более сложных компонентов. | |
.btn-group-lg, .btn-group-sm, .btn-group-xs | Эти классы могут применяться к группе кнопок вместо изменения размера каждой кнопки. | |
.btn-group-vertical | Этот класс создает набор кнопок, расположенных вертикально, а не горизонтально. |
Основная группа кнопок
Следующий пример демонстрирует использование класса .btn-group
, обсуждаемого в приведенной выше таблице -
Панель инструментов кнопок
Следующий пример демонстрирует использование класса .btn-toolbar
, рассмотренного в приведенной выше таблице,
Размер кнопки
Следующий пример демонстрирует использование класса .btn-group- *
, обсуждаемого в приведенной выше таблице,
Группировка кнопок
Вы можете группировать группы кнопок в другой группе кнопок, т.е. помещать одну .btn-group
в другую .btn-group
. Это делается, когда вы хотите, чтобы выпадающие меню смешивались с несколькими кнопками.
Вертикальная группа кнопок - Buttongroup
Следующий пример демонстрирует использование класса .btn-group-vertical
, рассмотренного в приведенной выше таблице,
Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!
Новые статьи
- 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
- Бутстрап - Пагинация - разбиение на страницы - 22/09/2018 17:20
- Bootstrap - Breadcrumb - хлебные крошки - 22/09/2018 17:20
- Bootstrap - Navbar - 22/09/2018 17:18
- Бутстрап - Элементы навигации - 22/09/2018 17:17
- Bootstrap - Группы ввода - 22/09/2018 17:17
- Bootstrap - Выпадающие окна и кнопки - 22/09/2018 17:16
Предыдущие статьи
- Бутстрап - Выпадающие окна - 22/09/2018 17:15
- Бутстрап - Глификон - 22/09/2018 17:15
- Bootstrap - Отзывчивые утилиты - 22/09/2018 17:14
- Bootstrap - Вспомогательные классы - 22/09/2018 17:14
- Bootstrap - Изображения - 22/09/2018 17:13
- Бутстрап - Кнопки - 22/09/2018 17:13
- Бутстрап - Формы - 22/09/2018 17:12
- Бутстрап - Таблицы - 22/09/2018 17:12
- Бутстрап - Вставка кода - 22/09/2018 17:11
- Бутстрап - Типография - 22/09/2018 17:10
- Bootstrap - Обзор CSS - 22/09/2018 17:10
- Бутстрап - Сетка - 22/09/2018 17:09
- Bootstrap - Настройка среды - 22/09/2018 17:09
- Bootstrap - Обзор - 22/09/2018 17:08
- Bootstrap 3. Адаптивные изображения, различные типы меню, формы в меню. Часть 3 - 31/12/2017 16:54
- Bootstrap 3. Типография - заголовки, цитаты, списки, работа с текстом. Часть 2 - 23/12/2017 20:44
- Подключение фреймворка Bootstrap 3 к сайту. Основы сетки шаблона. Часть 1 - 15/12/2017 15:47