Cet article comprend principalement trois aspects majeurs, veuillez l'étudier attentivement.
1. Formulaire dans la barre de navigation
Le formulaire dans la barre de navigation n'utilise pas la classe par défaut mentionnée dans le chapitre sur le formulaire Bootstrap, il utilise la classe .navbar-form. Cela garantit un alignement vertical correct du formulaire et un comportement de réduction dans les fenêtres plus étroites. Utilisez les options d'alignement (qui sont expliquées en détail dans la section Alignement des composants) pour décider où le contenu de la barre de navigation est placé.
L'exemple suivant le démontre :
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 默认的导航栏</title>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery-2.1.4.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">林炳文在此～</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">导航一</a></li>
<li><a href="#">导航二</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
下拉菜单
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">我是谁呢？</a></li>
<li><a href="#">我也不知道</a></li>
<li><a href="#">你是谁呢？</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
<div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜一下</button>
</form>
</div>
</nav>
</body>
</html> Effet :
Effet noir
2. Boutons dans la barre de navigation
Vous pouvez utiliser la classe .navbar-btn pour ajouter un bouton à un élément
N'utilisez pas .navbar-btn sur les éléments à l'intérieur de .navbar-nav car ce n'est pas une classe de bouton standard.
L'exemple suivant le démontre :
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 默认的导航栏</title>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery-2.1.4.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">林炳文在此～</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">导航一</a></li>
<li><a href="#">导航二</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
下拉菜单
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">我是谁呢？</a></li>
<li><a href="#">我也不知道</a></li>
<li><a href="#">你是谁呢？</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
<div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜一下</button>
</form>
<button type="button" class="btn btn-default navbar-btn">
导航栏按钮
</button>
</div>
</nav>
</body>
</html> L'effet est le suivant :
3. Texte dans la barre de navigation
Si vous devez inclure une chaîne de texte dans la navigation, utilisez la classe .navbar-text. Ceci est généralement utilisé en conjonction avec la balise
, garantissant un interlignage et une coloration appropriés. L'exemple suivant le démontre :
<div class="navbar-header"> <a class="navbar-brand" href="#">林炳文在此～</a> </div> <div> <p class="navbar-text">导航栏中的文本</p> </div> <div>
L'effet est le suivant :
Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun, afin que chacun puisse implémenter la barre de navigation Bootstrap plus habilement.
Comment résoudre un synrax invalide
Que faire si la visionneuse de photos Windows manque de mémoire
Méthodes de chiffrement courantes pour le stockage de données chiffrées
Introduction aux logiciels vps gratuits étrangers
La différence entre scratch et python
Que signifie l'accès au réseau refusé au wifi ?
Le port 8080 est occupé
Solution d'erreur SQL 5120
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
