English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной курс Bootstrap

Bootstrap плагины

Дропдаун-меню Bootstrap

Эта глава будет посвящена Bootstrap выпадающему меню. Выпадающее меню является переключаемым и отображается в виде списка ссылок контекстного меню. Это можно сделать, используя JavaScript плагин выпадающего меню (Dropdown) Bootstrap интерактивности.

Чтобы использовать выпадающее меню, достаточно добавить в класс .dropdown Добавьте выпадающее меню внутрь. Ниже приведен пример базового выпадающего меню:

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap пример - выпадающее меню (Dropdowns)</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="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"　
			data-toggle="dropdown"
		Тема
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Данные извлечения</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Коммуникация данных/Сеть</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Отдельная ссылка</a>
		</li>
	</ul>
</div>
</body>
</html>
Проверим, посмотрим на ‹/›

Результат будет выглядеть так:

варианты

выравнивание

через .dropdown-menu добавьте класс .pull-right Уравниться вправо выпадающее меню. Ниже приведен пример этого:

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

<!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="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"　
			data-toggle="dropdown">Тема
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu pull-right" role="menu"　
		aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Данные извлечения</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Коммуникация данных/Сеть</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Отдельная ссылка</a>
		</li>
	</ul>
</div>
</body>
</html>
Проверим, посмотрим на ‹/›

Результат будет выглядеть так:

заголовок

Вы можете использовать класс dropdown-header Добавьте заголовок в область меток выпадающего меню. Ниже приведен пример этого:

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

<!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="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"　
			data-toggle="dropdown"
		Тема
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation" class="dropdown-header">Заголовок выпадающего списка</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Данные извлечения</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">
				Данные коммуникации/сеть
			</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation" class="dropdown-header">Заголовок выпадающего списка</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Отдельная ссылка</a>
		</li>
	</ul>
</div>
</body>
</html>
Проверим, посмотрим на ‹/›

Результат будет выглядеть так:

Более примеров

КлассОписаниеПример
.dropdownУказать выпадающий список, все выпадающие списки заключены в .dropdownПопробуйте
.dropdown-menuСоздать дропдаун-менюПопробуйте
.dropdown-menu-rightПравый выравнивание дропдаун-менюПопробуйте
.dropdown-headerДобавить заголовок в дропдаун-менюПопробуйте
.dropupУказать дропдаун-меню, открывающийся наверхПопробуйте
.disabledЗапрещенные элементы в дропдаун-менюПопробуйте
.dividerРазделительная линия в дропдаун-менюПопробуйте
Группы кнопок BootstrapГлифо-иконы Bootstrap (Glyphicons)