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

Tutoriel de base Bootstrap

Plugins Bootstrap

Bootstrap 导航元素教程

Dans ce chapitre, nous allons expliquer certains options fournies par Bootstrap pour définir des éléments de navigation. Ils utilisent les mêmes balises et classes de base .navBootstrap fournit également une classe d'aide pour partager des balises et des états. En changeant la classe décorative, vous pouvez passer d'un style à un autre.

Navigation dans le tableau ou les balises

Créer un menu de navigation à balises :

  • Ajouter une class .nav démarrer une liste non ordonnée.

  • ajouter class .nav-tabs.

L'exemple suivant montre cela :

Exemple en ligne

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemple Bootstrap　-　<p>Menu de navigation en onglets</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>Menu de navigation en onglets</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><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
Voyons si ça fonctionne ‹/›

Les résultats sont les suivants :

Menu de navigation en capsules

Menu de navigation en capsules de base

Si vous souhaitez changer l'onglet en style de capsule, il suffit d'utiliser la class .nav-pills remplacer .nav-tabs c'est tout, les autres étapes sont les mêmes.

L'exemple suivant montre cela :

Exemple en ligne

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemple Bootstrap　-　<p>Menu de navigation en capsules de base</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>Menu de navigation en capsules de base</p>
<ul class="nav nav-pills">
	<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><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
Voyons si ça fonctionne ‹/›

Les résultats sont les suivants :

Menu de navigation en capsules verticales

vous pouvez utiliser la class .nav,.nav-pills en même temps que la class .nav-stackedpermettent aux capsules de s'empiler verticalement.

L'exemple suivant montre cela :

Exemple en ligne

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemple Bootstrap　-　<p>Menu de navigation en capsules verticales</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>Menu de navigation en capsules verticales</p>
<ul class="nav nav-pills nav-stacked">
	<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><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
Voyons si ça fonctionne ‹/›

Les résultats sont les suivants :

alignés à deux extrémités

Vous pouvez voir que les liens de navigation alignés à deux extrémités 768px, en utilisant .nav,.nav-tabs ou .nav,.nav-pills en même temps que la class .nav-justifiedpermettent aux menus de navigation en onglets ou en capsules d'avoir la même largeur que l'élément parent. Sur les écrans plus petits, les liens de navigation s'empilent.

L'exemple suivant montre cela :

Exemple en ligne

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemple Bootstrap　-　<p>Éléments de navigation alignés à deux extrémités</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>Éléments de navigation alignés à deux extrémités</p>
<ul class="nav nav-pills nav-justifié">
	<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><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul><br><br><br>
<ul class="nav nav-tabs nav-justifié">
	<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><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
Voyons si ça fonctionne ‹/›

Les résultats sont les suivants :

lien désactivé

pour chaque .nav class, si vous ajoutez .disabled class, un lien gris sera créé et le lien sera désactivé. :hover comme dans l'exemple suivant :

Exemple en ligne

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemple Bootstrap　-　Liens désactivés dans les éléments de navigation :/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>
Liens désactivés dans les éléments de navigation :/p>
<ul class="nav nav-pills">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li class="disabled"><a href="#">iOS (lien désactivé)</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul><br><br>
<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 class="disabled"><a href="#">VB.Net (lien désactivé)</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>	
</body>
</html>
Voyons si ça fonctionne ‹/›

Les résultats sont les suivants :

Cette class ne change que l'apparence de <a>, sans affecter sa fonction. Ici, vous devez utiliser JavaScript personnalisé pour désactiver les liens.

menu déroulant

Les éléments de navigation utilisent une syntaxe similaire aux menus déroulants. Par défaut, les ancres des éléments de liste collaborent avec certaines propriétés de données pour déclencher les menus déroulants avec .dropdown-menu class de la liste non ordonnée.

un onglet avec un menu déroulant

Voici les étapes pour ajouter un menu déroulant à un onglet :

  • Ajouter une class .nav démarrer une liste non ordonnée.

  • ajouter class .nav-tabs.

  • ajouter avec .dropdown-menu class de la liste non ordonnée.

Exemple en ligne

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">
	<title>Exemple Bootstrap　-　<p>un onglet avec un 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>un onglet avec un 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 si ça fonctionne ‹/›

Les résultats sont les suivants :

un onglet avec un menu déroulant

Les étapes sont les mêmes que pour créer un onglet avec un menu déroulant, mais il faut .nav-tabs class modifié en .nav-pillscomme dans l'exemple suivant :

Exemple en ligne

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">
	<title>Exemple Bootstrap　-　Capsules 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>Capsules avec menu déroulant</p>
<ul class="nav nav-pills">
	<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 si ça fonctionne ‹/›

Les résultats sont les suivants :

Plus d'exemples de composants de navigation

Onglets et capsules d'étiquettes

ClasseDescriptionExemple
.nav nav-tabsOnglets尝试一下
.nav nav-pillsLes capsules d'étiquettes尝试一下
.nav nav-pills nav-stackedLes capsules d'étiquettes empilées verticalement尝试一下
.nav-justifiedLes onglets alignés à deux extrémités, sur un écran plus grand que 768d'écran, via .nav-La classe 'justified' permet de faire apparaître les onglets ou les capsules de manière égale en largeur. Sur les écrans de petite taille, les liens de navigation sont affichés en mode empilé.尝试一下
.disabledÉtiquette de page inactive尝试一下
Ajout de menu déroulant de balise尝试一下
带下拉菜单的胶囊式标签页教程尝试一下
.tab-content与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改尝试一下
.tab-pane与 .tab-content 和 data-toggle="tab" (data-toggle="pill")一同使用, 设置标签页对应的内容随标签的切换而更改尝试一下
Bootstrap 导航栏教程Bootstrap 输入框组教程