Tutoriel de base Bootstrap

Plugin Bootstrap

Plugin de surveillance de défilement Bootstrap Plugin de boîte de dialogue Bootstrap

Plugin de menu déroulant (Dropdown) Bootstrap

Menu déroulant Bootstrap Ce chapitre explique les menus déroulants, mais ne couvre pas la partie interactive. Ce chapitre expliquera spécifiquement l'interaction des menus déroulants. En utilisant l'add-on de menu déroulant (Dropdown), vous pouvez ajouter un menu déroulant à n'importe quel composant (par exemple, la barre de navigation, les onglets, le menu de navigation en capsule, les boutons, etc.).

Si vous souhaitez citer individuellement les fonctionnalités de cet add-on, vous devez citer dropdown.jsou, comme Aperçu des plugins Bootstrap Comme mentionné dans le premier chapitre, vous pouvez citer bootstrap.js ou la version compressée bootstrap.min.js。

Utilisation

Vous pouvez basculer le contenu caché du plugin Menu déroulant (Dropdown) :

par l'attribut data：Ajouter à l'hyperlien ou au bouton data-toggle="dropdown" pour basculer le menu déroulant, comme indiqué ci-dessous :

<div>
　　<a data-toggle="dropdown" href="#">Déclencheur de menu déroulant (Dropdown)</a>
　　<ul role="menu" aria-labelledby="dLabel">
　　　　...
　　</ul>
</div>

Si vous avez besoin de conserver l'intégrité du lien (utile lorsque JavaScript n'est pas activé dans le navigateur), utilisez data-cible remplacer les attributs href="#"：

<div>
　　<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
　　　　Menu déroulant (Dropdown) <span></span>
　　</a>
　　<ul role="menu" aria-labelledby="dLabel">
　　　　...
　　</ul>
</div>

Par JavaScript：Par JavaScript, appeler le basculement du menu déroulant, utilisez la méthode suivante :
```
$('.dropdown-toggle').dropdown()
```

Exemples en ligne

Dans la barre de navigation

L'exemple suivant montre l'utilisation du menu déroulant dans la barre de navigation :

Exemples en ligne

Exemple

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Exemples Bootstrap<　-　Barre de navigation par défaut</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>
<nav　class="navbar　navbar-default"　role="navigation">
	<div　class="container-fluid">　
	<div　class="navbar-header">
		<a　class="navbar-brand"　href="#">Réseau de base de connaissances</a>
	</div>
	<div>
		<ul　class="nav　navbar-nav">
			<li　class="active"><a　href="#">iOS</a></li>
			<li><a　href="#">SVN</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle"　data-toggle="dropdown">
					Java　
					<b class="caret"></b>
				</a>
				<ul　class="dropdown-menu">
					<li><a href="#">jmeter</a></li>
					<li><a　href="#">EJB</a></li>
					<li><a　href="#">Jasper　Report</a></li>
					<li　class="divider"></li>
					<li><a　href="#">Liens séparés</a></li>
					<li　class="divider"></li>
					<li><a href="#">Un autre lien séparé</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>
</body>
</html>

Voyons un test ‹/›

Les résultats sont affichés comme suit :

Dans les onglets

L'exemple suivant montre l'utilisation du menu déroulant dans les onglets :

Exemples en ligne

Exemple

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Exemples Bootstrap<　-　Étiquettes avec menu déroulant</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>
<p>Étiquettes avec menu déroulant</p>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle"　data-toggle="dropdown" href="#">
			Java <span class="caret"></span>
		</a>
		<ul　class="dropdown-menu">
			<li><a href="#">Swing</a></li>
			<li><a href="#">jMeter</a></li>
			<li><a　href="#">EJB</a></li>
			<li　class="divider"></li>
			<li><a　href="#">Liens séparés</a></li>
		</ul>
	</li>
	<li><a　href="#">PHP</a></li>
</ul>
</body>
</html>

Voyons un test ‹/›

Les résultats sont affichés comme suit :

Options

Pas d'options.

Méthode

Le basculement du menu déroulant a une méthode simple pour afficher ou masquer le menu déroulant.

$().dropdown('toggle')

Exemples en ligne

Les exemples suivants montrent l'utilisation de la méthode du plugin Menu déroulant (Dropdown) :

Exemples en ligne

Exemple

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">
	<title>Exemples Bootstrap<　-　Méthodes du plugin Menu déroulant (Dropdown)</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>
<nav　class="navbar　navbar-default"　role="navigation">
	<div　class="container-fluid">　
	<div　class="navbar-header">
		<a　class="navbar-brand"　href="#">Réseau de base de connaissances</a>
	</div>
	<div　id="myexample">
		<ul　class="nav　navbar-nav">
			<li　class="active"><a　href="#">iOS</a></li>
			<li><a　href="#">SVN</a></li>
			<li　class="dropdown"><a　href="#"　class="dropdown-toggle"　data-toggle="dropdown">Java　<b　class="caret"></b></a>
				<ul　class="dropdown-menu">
					<li><a　id="action-1"　href="#">mètre</a></li>
					<li><a　href="#">EJB</a></li>
					<li><a　href="#">Jasper　Report</a></li>
					<li　class="divider"></li>
					<li><a　href="#">Liens séparés</a></li>
					<li　class="divider"></li>
					<li><a href="#">Un autre lien séparé</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>	
</nav>
<script>
$(function(){
	//　affichage par défaut
	$(".dropdown-toggle").dropdown('toggle');
});　
</script>
</body>
</html>

Voyons un test ‹/›

Les résultats sont affichés comme suit :

Plugin de surveillance de défilement Bootstrap Plugin de boîte de dialogue Bootstrap