В этой статье мы расскажем о том, как добавить раскрывающееся меню к кнопкам с использованием классов Bootstrap. Чтобы добавить раскрывающийся список к кнопке, просто оберните кнопку и выпадающее меню в группе .btn
. Вы также можете использовать span class = "caret"
, чтобы действовать как индикатор того, что кнопка является выпадающим списком.
В следующем примере демонстрируются базовые одиночные выпадающие меню -
Разделенные кнопки
Выпадающие выпадающие кнопки используют тот же общий стиль, что и выпадающая кнопка, но добавляют основное действие вместе с раскрывающимся списком. Сплит-кнопки имеют основное действие слева и переключатель справа, который отображает выпадающий список.
Размер раскрывающегося списка кнопок
Вы можете использовать выпадающие списки с любым размером кнопки - .btn-large
, .btn-sm
или .btn-xs
.
Изменение вариации
Меню также могут быть построены, чтобы опускаться, а не вниз. Для этого просто добавьте .dropup
в родительский контейнер .btn-group
.
Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!
Новые статьи
- 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
- Бутстрап - Пагинация - разбиение на страницы - 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