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

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

Выпадающие меню Bootstrap4

Когда пользователь наводит курсор или нажимает на элемент триггера, обычно используется выпадающее меню в заголовке навигации для отображения списка связанных ссылок. 您可以使用Bootstrap下拉插件向几乎所有内容（如链接，按钮或按钮组，导航栏，选项卡和药丸导航等）添加可切换的下拉菜单（即单击打开和关闭），而无需编写任何JavaScript代码。

Bootstrap4 下拉菜单依赖于 popper.min.js。

下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Выпадающее меню</h2>
　　<p>.dropdown　类用来指定一个下拉菜单。</p>
　　<p>.dropdown-menu　类来设置实际下拉菜单。</p>
　　<p>我们可以使用一个按钮或链接来打开下拉菜单，　按钮或链接需要添加　.dropdown-toggle　和　data-toggle="dropdown"　属性。</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<div class="dropdown">
　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Кнопка выпадающего меню
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Ссылка 1</a>
　　　　　　<a class="dropdown-item" href="#">Ссылка 2</a>
　　　　　　<a class="dropdown-item" href="#">Ссылка 3</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Проверьте ‹/›

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

示例解析

.dropdown 类用来指定一个下拉菜单。

我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。

<div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。

我们也可以在 <a> 标签中使用：

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<div class="dropdown">
	　　<a　class="btn　btn-secondary　dropdown-toggle"　href="#"　role="button"　id="dropdownMenuLink"　data-toggle="dropdown"　aria-haspopup="true"　aria-expanded="false">
		Dropdown　link
	　　</a>
	　　<div　class="dropdown-menu"　aria-labelledby="dropdownMenuLink">
		<a class="dropdown-item" href="#">Действие</a>
		<a class="dropdown-item" href="#">Другое действие</a>
		<a class="dropdown-item" href="#">Что-то еще здесь</a>
	　　</div>
	</div>
</div>
</body>
</html>
Проверьте ‹/›

下拉菜单中的分割线

.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线：

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>下拉菜单中</h2>
　　<p>.dropdown-divider　类用于在下拉菜单中创建一个水平的分割线：</p>
　　<div class="dropdown">
　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Кнопка выпадающего меню
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Ссылка 1</a>
　　　　　　<a class="dropdown-item" href="#">Ссылка 2</a>
　　　　　　<a class="dropdown-item" href="#">Ссылка 3</a>
　　　　　　<div class="dropdown-divider"></div>
　　　　　　<a class="dropdown-item" href="#">Другая ссылка</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Проверьте ‹/›

下拉菜单中的标题

.dropdown-header 类用于在下拉菜单中添加标题：

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>下拉菜单中</h2>
　　<p>.dropdown-header　类用于在下拉菜单中添加标题：</p>
　　<div class="dropdown">
　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Кнопка выпадающего меню
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<h5　class="dropdown-header">Dropdown　header</h5>
　　　　　　<a class="dropdown-item" href="#">Ссылка 1</a>
　　　　　　<a class="dropdown-item" href="#">Ссылка 2</a>
　　　　　　<a class="dropdown-item" href="#">Ссылка 3</a>
　　　　　　<h5　class="dropdown-header">Dropdown　header</h5>
　　　　　　<a class="dropdown-item" href="#">Другая ссылка</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Проверьте ‹/›

Доступные и отключенные элементы выпадающего меню

.active класс позволяет выделить опцию выпадающего меню (добавить синий фон)

Чтобы отключить опцию выпадающего меню, можно использовать класс .disabled

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Выпадающее меню</h2>
　　<p>Класс .active позволяет выделить опцию выпадающего меню (добавить синий фон).</p>
　　<p>Чтобы отключить опцию выпадающего меню, можно использовать класс .disabled.</p>
　　<div class="dropdown">
　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Кнопка выпадающего меню
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Нормальный</a>
　　　　　　<a class="dropdown-item active" href="#">Активен</a>
　　　　　　<a class="dropdown-item disabled" href="#">Отключен</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Проверьте ‹/›

Позиционирование выпадающего меню

Если мы хотим, чтобы выпадающее меню было правосторонним, мы можем добавить класс 　.dropdown-menu-right к классу .dropdown-menu.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Выпадающее меню</h2>
　　<p>Если мы хотим, чтобы выпадающее меню было правосторонним, мы можем добавить класс 　.dropdown-menu-right к классу .dropdown-menu.</p>
　　<div class="dropdown">
　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Кнопка выпадающего меню
　　　　</button>
　　　　<div class="dropdown-menu dropdown-menu-right">
　　　　　　<a class="dropdown-item" href="#">Ссылка 1</a>
　　　　　　<a class="dropdown-item" href="#">Ссылка 2</a>
　　　　　　<a class="dropdown-item" href="#">Ссылка 3</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Проверьте ‹/›

Настройка направления弹出下拉菜单

По умолчанию направление弹出下拉菜单 составляет вниз, конечно, мы также можем установить другое направление.

Указать выпадающее меню, которое появляется в правую сторону

Если вы хотите, чтобы выпадающее меню появлялось в правую сторону, вы можете добавить класс 　"dropright" к элементу div:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Выпадающее меню</h2>
　　<p>　.dropright　класс используется для настройки выпадающего меню, которое появляется в правую сторону：</p><br>
　　<!-- Default dropright button -->
	<div class="btn-group dropright">
	　　<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropright
	　　</button>
	　　<div class="dropdown-menu">
		<!-- Ссылки меню выпадающего списка -->
		<a class="dropdown-item" href="#">Действие</a>
　　　　　　　　<a class="dropdown-item" href="#">Другое действие</a>
　　　　　　　　<a class="dropdown-item" href="#">Что-то еще здесь</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item" href="#">Отдельная ссылка</a>
　　　　　　　　</div>
	</div>
	<!-- Split dropright button -->
	<div class="btn-group dropright">
	　　<button type="button" class="btn btn-secondary">
		Разделить справа
	　　</button>
	　　<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Переключить Dropright</span>
	　　</button>
	　　<div class="dropdown-menu">
		<!-- Ссылки меню выпадающего списка -->
		　<a class="dropdown-item" href="#">Действие</a>
　　　　　　　　<a class="dropdown-item" href="#">Другое действие</a>
　　　　　　　　<a class="dropdown-item" href="#">Что-то еще здесь</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item" href="#">Отдельная ссылка</a>
	　　</div>
	</div>
</div>
</body>
</html>
Проверьте ‹/›

Указать подъемное меню, которое появляется向上

Если вы хотите, чтобы подъемное меню появлялось向上, вы можете добавить класс "dropup" к элементу div:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　　<h2>Выпадающее меню</h2>
　　　　<p>Класс .dropup используется для настройки выпадающего меню, которое появляется向上:</p><br><br><br><br><br><br><br><br>
　　<!-- Default сверху кнопку -->
　　　　<div class="btn-group dropup">
　　　　<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
　　　　　　　　Вверх
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　　　<!-- Ссылки меню выпадающего списка -->
　　　　　　　　<a class="dropdown-item" href="#">Действие</a>
　　　　　　　　<a class="dropdown-item" href="#">Другое действие</a>
　　　　　　　　<a class="dropdown-item" href="#">Что-то еще здесь</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item" href="#">Отдельная ссылка</a>
　　　　</div>
　　　　</div>
　　　　
　　　　<!-- Разделить сверху кнопку -->
　　　　<div class="btn-group dropup">
　　　　<button type="button" class="btn btn-secondary">
　　　　　　　　Разделить сверху
　　　　</button>
　　　　<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
　　　　　　　　<span class="sr-only">Переключить выпадающее меню</span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　　　<!-- Ссылки меню выпадающего списка -->
　　　　　　　　<a class="dropdown-item" href="#">Действие</a>
　　　　　　　　<a class="dropdown-item" href="#">Другое действие</a>
　　　　　　　　<a class="dropdown-item" href="#">Что-то еще здесь</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item" href="#">Отдельная ссылка</a>
　　　　</div>
　　　　</div>
</div>
</body>
</html>
Проверьте ‹/›

Указать выпадающее меню, которое появляется слева

Если вы хотите, чтобы выпадающее меню появлялось向上, вы можете добавить класс "dropleft" к элементу div:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="text-align:center;">
　　<h2>Выпадающее меню</h2>
　　<p>Класс .dropleft используется для настройки выпадающего меню, которое появляется слева:</p><br>
　　<!-- Default слева кнопка -->
	<div class="btn-group dropleft">
	　　<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Слева
	　　</button>
	　　<div class="dropdown-menu">
		<!-- Ссылки меню выпадающего списка -->
		<a class="dropdown-item" href="#">Действие</a>
　　　　　　　　<a class="dropdown-item" href="#">Другое действие</a>
　　　　　　　　<a class="dropdown-item" href="#">Что-то еще здесь</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item" href="#">Отдельная ссылка</a>
	　　</div>
	</div>
<br><br><br>
	<!-- Разделить слева кнопка -->
	<div class="btn-group dropleft">
	　　<button type="button" class="btn btn-secondary">
		Разделить слева
	　　</button>
	　　<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Переключить Dropleft</span>
	　　</button>
	　　<div class="dropdown-menu">
		<!-- Ссылки меню выпадающего списка -->
		<a class="dropdown-item" href="#">Действие</a>
　　　　　　　　<a class="dropdown-item" href="#">Другое действие</a>
　　　　　　　　<a class="dropdown-item" href="#">Что-то еще здесь</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item" href="#">Отдельная ссылка</a>
	　　</div>
	</div>
</div>
</body>
</html>
Проверьте ‹/›

Настройка выпадающего меню в кнопке

Мы можем добавить выпадающее меню в кнопку:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>В下拉菜单е кнопки</h2>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Primary</button>
　　　　<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Ссылка 1</a>
　　　　　　<a class="dropdown-item" href="#">Ссылка 2</a>
　　　　</div>
　　</div>
　　
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-secondary">Secondary</button>
　　　　<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Ссылка 1</a>
　　　　　　<a class="dropdown-item" href="#">Ссылка 2</a>
　　　　</div>
　　</div>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-success">Success</button>
　　　　<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Ссылка 1</a>
　　　　　　<a class="dropdown-item" href="#">Ссылка 2</a>
　　　　</div>
　　</div>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-info">Info</button>
　　　　<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Ссылка 1</a>
　　　　　　<a class="dropdown-item" href="#">Ссылка 2</a>
　　　　</div>
　　</div>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-warning">Warning</button>
　　　　<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Ссылка 1</a>
　　　　　　<a class="dropdown-item" href="#">Ссылка 2</a>
　　　　</div>
　　</div>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-danger">Опасно</button>
　　　　<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Ссылка 1</a>
　　　　　　<a class="dropdown-item" href="#">Ссылка 2</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Проверьте ‹/›

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

Сворачивание Bootstrap4Карточки Bootstrap4