Bootstrap4 教程基础知识

Bootstrap4 Menu déroulant

Lorsque l'utilisateur place le curseur ou clique sur l'élément déclencheur, généralement dans le titre de navigation, le menu déroulant est utilisé pour afficher la liste des liens associés. Vous pouvez utiliser le plugin de menu déroulant Bootstrap pour ajouter un menu déroulant configurable à presque tout contenu (comme des liens, des boutons ou des groupes de boutons, des barres de navigation, des onglets et des导航药丸等)， sans avoir à écrire de code JavaScript, en ouvrant et fermant simplement avec un clic.

Bootstrap4 Le menu déroulant dépend de popper.min.js。

Le menu déroulant est configurable, il s'affiche sous forme de liste de liens dans un menu contextuel.

示例

!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">
　　<h2Menu déroulant</h2>
　　<p>.dropdown classe est utilisée pour spécifier un menu déroulant.</p>
　　<p>.dropdown-classe menu pour configurer le menu déroulant réel.</p>
　　<p>Nous pouvons utiliser un bouton ou un lien pour ouvrir le menu déroulant, le bouton ou le lien doit ajouter .dropdown-toggle et data-l'attribut toggle="dropdown"。</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<div class="dropdown">
　　　　<button type="button" class="btn btn-primary dropdown-toggle"　data-toggle="dropdown">
　　　　　　Bouton dropdown
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Lien　1</a>
　　　　　　<a class="dropdown-item" href="#">Lien　2</a>
　　　　　　<a class="dropdown-item" href="#">Lien　3</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

测试看看 ‹/›

运行后的效果如下：

Exemple d'analyse

.dropdown classe est utilisée pour spécifier un menu déroulant.

Nous pouvons utiliser un bouton ou un lien pour ouvrir le menu déroulant, le bouton ou le lien doit ajouter .dropdown-toggle et data-l'attribut toggle="dropdown".

L'élément <div> ajoute .dropdown-classe menu pour configurer le menu déroulant réel, puis ajouter .dropdown-classe item.

Nous pouvons également utiliser dans l'étiquette <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">
		Lien du menu déroulant
	　　</a>
	　　<div class="dropdown-menu"　aria-labelledby="dropdownMenuLink">
		<a class="dropdown-item"　href="#">Action</a>
		<a class="dropdown-item"　href="#">Another　action</a>
		<a class="dropdown-item"　href="#">Something　else　here</a>
	　　</div>
	</div>
</div>
</body>
</html>

测试看看 ‹/›

La ligne de séparation dans le menu déroulant

.dropdown-La classe divider est utilisée pour créer une ligne de séparation horizontale dans le menu déroulant :

示例

!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>Dans le menu déroulant</h2>
　　<p>.dropdown-La classe divider est utilisée pour créer une ligne de séparation horizontale dans le menu déroulant :</p>
　　<div class="dropdown">
　　　　<button type="button" class="btn btn-primary dropdown-toggle"　data-toggle="dropdown">
　　　　　　Bouton dropdown
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Lien　1</a>
　　　　　　<a class="dropdown-item" href="#">Lien　2</a>
　　　　　　<a class="dropdown-item" href="#">Lien　3</a>
　　　　　　<div class="dropdown-divider"></div>
　　　　　　<a class="dropdown-item" href="#">Another　link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

测试看看 ‹/›

Le titre du menu déroulant

.dropdown-La classe header est utilisée pour ajouter un titre dans le menu déroulant :

示例

!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>Dans le menu déroulant</h2>
　　<p>.dropdown-La classe header est utilisée pour ajouter un titre dans le menu déroulant :</p>
　　<div class="dropdown">
　　　　<button type="button" class="btn btn-primary dropdown-toggle"　data-toggle="dropdown">
　　　　　　Bouton dropdown
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<h5　class="dropdown-header">En-tête du menu déroulant</h5>
　　　　　　<a class="dropdown-item" href="#">Lien　1</a>
　　　　　　<a class="dropdown-item" href="#">Lien　2</a>
　　　　　　<a class="dropdown-item" href="#">Lien　3</a>
　　　　　　<h5　class="dropdown-header">En-tête du menu déroulant</h5>
　　　　　　<a class="dropdown-item" href="#">Another　link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

测试看看 ‹/›

Les éléments disponibles et désactivés dans le menu déroulant

.active classe fait apparaître les options du menu déroulant en surbrillance (ajout d'un fond bleu)。

Pour désactiver les options du menu déroulant, vous pouvez utiliser la classe .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">
　　<h2Menu déroulant</h2>
　　<p>.active classe fait apparaître les options du menu déroulant en surbrillance (ajout d'un fond bleu)。</p>
　　<p>Si vous souhaitez désactiver une option du menu déroulant, vous pouvez utiliser la classe .disabled.</p>
　　<div class="dropdown">
　　　　<button type="button" class="btn btn-primary dropdown-toggle"　data-toggle="dropdown">
　　　　　　Bouton dropdown
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Normal</a>
　　　　　　<a class="dropdown-item active" href="#">Actif</a>
　　　　　　<a class="dropdown-item disabled" href="#">Désactivé</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

测试看看 ‹/›

Positionnement du menu déroulant

<p>Si nous voulons aligner le menu déroulant à droite, nous pouvons ajouter la classe .dropdown sur l'élément :-Ajouter .dropdown après la classe menu-menu-right class.

示例

!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">
　　<h2Menu déroulant</h2>
　　<p>Si nous voulons aligner le menu déroulant à droite, nous pouvons ajouter la classe .dropdown sur l'élément :-Ajouter .dropdown après la classe menu-menu-right class.</p>
　　<div class="dropdown">
　　　　<button type="button" class="btn btn-primary dropdown-toggle"　data-toggle="dropdown">
　　　　　　Bouton dropdown
　　　　</button>
　　　　<div class="dropdown-menu dropdown-menu-right">
　　　　　　<a class="dropdown-item" href="#">Lien　1</a>
　　　　　　<a class="dropdown-item" href="#">Lien　2</a>
　　　　　　<a class="dropdown-item" href="#">Lien　3</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

测试看看 ‹/›

Définir la direction du menu déroulant

La direction par défaut du menu déroulant est vers le bas, bien sûr, nous pouvons également définir différentes directions.

Définir le menu déroulant qui s'ouvre vers la droite

Si vous souhaitez que le menu déroulant s'ouvre vers la droite, vous pouvez ajouter la classe "dropright" sur l'élément 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">
　　<h2Menu déroulant</h2>
　　<p>La classe .dropright est utilisée pour définir le menu déroulant qui s'ouvre vers la droite :</p><br>
　　<!--　Bouton par défaut dropright　-->
	<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">
		<!--　Dropdown　menu　links　-->
		<a class="dropdown-item"　href="#">Action</a>
　　　　　　　　<a class="dropdown-item"　href="#">Another　action</a>
　　　　　　　　<a class="dropdown-item"　href="#">Something　else　here</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item"　href="#">Separated　link</a>
　　　　　　　　</div>
	</div>
	<!--　Bouton Split dropright　-->
	<div class="btn-group dropright">
	　　<button type="button" class="btn btn-secondary">
		Split dropright
	　　</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">Basculer Dropright</span>
	　　</button>
	　　<div class="dropdown-menu">
		<!--　Dropdown　menu　links　-->
		　<a class="dropdown-item"　href="#">Action</a>
　　　　　　　　<a class="dropdown-item"　href="#">Another　action</a>
　　　　　　　　<a class="dropdown-item"　href="#">Something　else　here</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item"　href="#">Separated　link</a>
	　　</div>
	</div>
</div>
</body>
</html>

测试看看 ‹/›

Définir le menu déroulant qui s'ouvre vers le haut

Si vous souhaitez que le menu déroulant s'ouvre vers le haut, vous pouvez ajouter la classe "dropup" sur l'élément 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">
　　　　<h2Menu déroulant</h2>
　　　　<p>La classe .dropup est utilisée pour définir le menu déroulant qui s'ouvre vers le haut :</p><br><br><br><br><br><br><br><br>
　　<!--　Bouton par défaut dropup　-->
　　　　<div class="btn-group dropup">
　　　　<button type="button" class="btn btn-secondary dropdown-toggle"　data-toggle="dropdown"　aria-haspopup="true"　aria-expanded="false">
　　　　　　　　Dropup
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　　　<!--　Dropdown　menu　links　-->
　　　　　　　　<a class="dropdown-item"　href="#">Action</a>
　　　　　　　　<a class="dropdown-item"　href="#">Another　action</a>
　　　　　　　　<a class="dropdown-item"　href="#">Something　else　here</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item"　href="#">Separated　link</a>
　　　　</div>
　　　　</div>
　　　　
　　　　<!--　Bouton Split dropup　-->
　　　　<div class="btn-group dropup">
　　　　<button type="button" class="btn btn-secondary">
　　　　　　　　Split dropup
　　　　</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">Basculer le menu déroulant</span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　　　<!--　Dropdown　menu　links　-->
　　　　　　　　<a class="dropdown-item"　href="#">Action</a>
　　　　　　　　<a class="dropdown-item"　href="#">Another　action</a>
　　　　　　　　<a class="dropdown-item"　href="#">Something　else　here</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item"　href="#">Separated　link</a>
　　　　</div>
　　　　</div>
</div>
</body>
</html>

测试看看 ‹/›

Définir le menu déroulant qui s'ouvre vers la gauche

Si vous souhaitez que le menu déroulant s'ouvre vers le haut, vous pouvez ajouter la classe "dropleft" sur l'élément 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;">
　　<h2Menu déroulant</h2>
　　<p>La classe .dropleft est utilisée pour définir le menu déroulant qui s'ouvre vers la gauche :</p><br>
　　<!--　Default　dropleft　button　-->
	<div class="btn-group　dropleft">
	　　<button type="button" class="btn btn-secondary dropdown-toggle"　data-toggle="dropdown"　aria-haspopup="true"　aria-expanded="false">
		Dropleft
	　　</button>
	　　<div class="dropdown-menu">
		<!--　Dropdown　menu　links　-->
		<a class="dropdown-item"　href="#">Action</a>
　　　　　　　　<a class="dropdown-item"　href="#">Another　action</a>
　　　　　　　　<a class="dropdown-item"　href="#">Something　else　here</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item"　href="#">Separated　link</a>
	　　</div>
	</div>
<br><br><br>
	<!--　Split　dropleft　button　-->
	<div class="btn-group　dropleft">
	　　<button type="button" class="btn btn-secondary">
		Split　dropleft
	　　</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">Toggle　Dropleft</span>
	　　</button>
	　　<div class="dropdown-menu">
		<!--　Dropdown　menu　links　-->
		<a class="dropdown-item"　href="#">Action</a>
　　　　　　　　<a class="dropdown-item"　href="#">Another　action</a>
　　　　　　　　<a class="dropdown-item"　href="#">Something　else　here</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item"　href="#">Separated　link</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="#">Lien　1</a>
　　　　　　<a class="dropdown-item" href="#">Lien　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="#">Lien　1</a>
　　　　　　<a class="dropdown-item" href="#">Lien　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="#">Lien　1</a>
　　　　　　<a class="dropdown-item" href="#">Lien　2</a>
　　　　</div>
　　</div>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-info">Information</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="#">Lien　1</a>
　　　　　　<a class="dropdown-item" href="#">Lien　2</a>
　　　　</div>
　　</div>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-warning">Avertissement</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="#">Lien　1</a>
　　　　　　<a class="dropdown-item" href="#">Lien　2</a>
　　　　</div>
　　</div>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-danger">Dangereux</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="#">Lien　1</a>
　　　　　　<a class="dropdown-item" href="#">Lien　2</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

测试看看 ‹/›

运行后的效果如下：

Bootstrap4 折叠 Bootstrap4 卡片