Основной учебник Bootstrap

Bootstrap плагины

Группы полей ввода Bootstrap Группы кнопок Bootstrap

Выпадающие меню кнопок Bootstrap

В этой главе будет рассказано, как использовать Bootstrap class для добавления спускающегося меню к кнопке. Чтобы добавить спускающееся меню к кнопке, достаточно просто добавить .btn-group Достаточно просто поместить кнопку и спускающееся меню в контейнер. Вы также можете использовать <span></span>, чтобы указать, что кнопка является спускающимся меню.

Ниже приведен пример базового простого спускающегося меню с кнопкой:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Основные кнопки спускающегося меню</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group">
	<button type="button" class="btn btn-default dropdown-toggle">　
			data-toggle="dropdown"
		По умолчанию
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Функция</a></li>
		<li><a href="#">Другая функция</a></li>
		<li><a href="#">Другое</a></li>
		<li class="divider"></li>
		<li><a href="#">Отдельная ссылка</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Оригинал　
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Функция</a></li>
		<li><a href="#">Другая функция</a></li>
		<li><a href="#">Другое</a></li>
		<li class="divider"></li>
		<li><a href="#">Отдельная ссылка</a></li>
	</ul>
</div>
</body>
</html>

Проверьте это ‹/›

Результаты показаны ниже:

Разделенные кнопки спускающегося меню

Разделенные кнопки спускающегося меню используют стили, аналогичные стилям кнопок спускающегося меню, но добавляют оригинальные функции для спускающегося меню. Левая сторона разделенной кнопки - это оригинальные функции, правая сторона - переключение для отображения спускающегося меню.

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Разделенные кнопки спускающегося меню</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group">
	<button type="button" class="btn btn-default">По умолчанию</button>
	<button type="button" class="btn btn-default dropdown-toggle">　
			data-toggle="dropdown"
		<span class="caret"></span>
		<span class="sr-only">Переключить спускающееся меню</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Функция</a></li>
		<li><a href="#">Другая функция</a></li>
		<li><a href="#">Другое</a></li>
		<li class="divider"></li>
		<li><a href="#">Отдельная ссылка</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-primary">Присутствие</button>
	<button type="button" class="btn btn-primary dropdown-toggle">　
			data-toggle="dropdown"
		<span class="caret"></span>
		<span class="sr-only">Переключить спускающееся меню</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Функция</a></li>
		<li><a href="#">Другая функция</a></li>
		<li><a href="#">Другое</a></li>
		<li class="divider"></li>
		<li><a href="#">Отдельная ссылка</a></li>
	</ul>
</div>
</body>
</html>

Проверьте это ‹/›

Результаты показаны ниже:

Размер кнопки спускающегося меню

Вы можете использовать спускающиеся меню с кнопками различных размеров:.btn-lg, .btn-sm или .btn-xs。

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Размер кнопки спускающегося меню</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group">
	<button type="button" class="btn btn-default dropdown-toggle btn-lg">　
			data-toggle="dropdown"
		По умолчанию
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Функция</a></li>
		<li><a href="#">Другая функция</a></li>
		<li><a href="#">Другое</a></li>
		<li class="divider"></li>
		<li><a href="#">Отдельная ссылка</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-primary dropdown-toggle btn-sm">　
			data-toggle="dropdown"
		Присутствие
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Функция</a></li>
		<li><a href="#">Другая функция</a></li>
		<li><a href="#">Другое</a></li>
		<li class="divider"></li>
		<li><a href="#">Отдельная ссылка</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-success dropdown-toggle btn-xs"　
			data-toggle="dropdown"
		Успешно <span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Функция</a></li>
		<li><a href="#">Другая функция</a></li>
		<li><a href="#">Другое</a></li>
		<li class="divider"></li>
		<li><a href="#">Отдельная ссылка</a></li>
	</ul>
</div>
</body>
</html>

Проверьте это ‹/›

Результаты показаны ниже:

Кнопка раскрывающегося меню

Меню также можно растянуть вверх, нужно только просто направить в родительский .btn-group Добавить контейнер .dropup Готово.

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　<title>Пример Bootstrap - Кнопка раскрывающегося меню</title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" style="margin-left:50px; margin-top:200px">
	<div class="btn-group dropup">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">По умолчанию　
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">Функция</a></li>
			<li><a href="#">Другая функция</a></li>
			<li><a href="#">Другое</a></li>
			<li class="divider"></li>
			<li><a href="#">Отдельная ссылка</a></li>
		</ul>
	</div>
	<div class="btn-group dropup">
		<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Оригинал　
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">Функция</a></li>
			<li><a href="#">Другая функция</a></li>
			<li><a href="#">Другое</a></li>
			<li class="divider"></li>
			<li><a href="#">Отдельная ссылка</a></li>
		</ul>
	</div>
</div>
</body>
</html>

Проверьте это ‹/›

Результаты показаны ниже:

Группы полей ввода Bootstrap Группы кнопок Bootstrap