Barre de navigation que Bootstrap doit apprendre tous les jours_compétences javascript-js tutoriel-php.cn

1. Barre de navigation

La différence entre la barre de navigation (navbar) et la navigation (nav) introduite dans la section précédente n'est qu'un mot, avec l'ajout du mot « bar ». En fait, ils sont encore évidemment différents dans le framework Bootstrap. Il y a une couleur d'arrière-plan dans la barre de navigation (navbar) (l'affichage est plus visible) et la barre de navigation peut être un pur lien (similaire à la navigation), un formulaire ou une combinaison de formulaire et de navigation. Dans cette section, nous aborderons l'utilisation des barres de navigation dans le framework Bootstrap.

La barre de navigation, tout comme la navigation, est un composant indépendant du framework Bootstrap, vous pouvez donc également utiliser différentes versions selon vos besoins :

Version LESS : fichier source correspondant navbar.less
Version Sass : fichier source correspondant _navbar.scss
Version compilée : vérifiez les lignes 3642 à 4111 du fichier bootstrap.css (notez que la version Bootstrap mentionnée ici est la 3.1.1 et que les emplacements des autres versions sont incohérents).

2. Barre de navigation de base

Dans la boîte Bootstrap, l'apparence de la barre de navigation et de la navigation n'est pas très différente, mais en utilisation réelle, la barre de navigation est beaucoup plus compliquée que la navigation. Examinons d'abord la barre de navigation la plus basique : la barre de navigation de base.

1), utilisation :

Lors de la création d'une barre de navigation de base, il y a principalement les étapes suivantes :

Première étape : Tout d'abord, ajoutez le nom de classe « navbar-nav » en fonction de la liste de navigation (
- Étape 2 : Ajoutez un conteneur (div) en dehors de la liste et utilisez les noms de classe "navbar" et "navbar-default"
```
<div class="navbar navbar-default" role="navigation">
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
</div>
```
Copier après la connexion
La fonction principale du style ".navbar" est de définir des effets tels que le remplissage gauche et droit et les coins arrondis, mais il n'a aucun paramètre lié aux styles de couleurs. Son code source principal est le suivant :

/Code source voir le fichier bootstrap.css ligne 3642 ~ ligne 3647/
```
.navbar {
 position: relative;
 min-height: 50px;
 margin-bottom: 20px;
 border: 1px solid transparent;
}
```
Copier après la connexion
2), analyse du principe :

La couleur de la barre de navigation est contrôlée via ".navbar-default":

/Code source voir le fichier bootstrap.css ligne 3940~ligne 3943/
```
.navbar-default {
 background-color: #f8f8f8;
 border-color: #e7e7e7;
}
```
Copier après la connexion
Le style navbar-nav réajuste les marges flottantes et intérieures et extérieures des éléments de menu en fonction de navigation.nav. Il n'inclut pas non plus les paramètres de couleur et autres paramètres de style. Pour le code source, veuillez consulter les lignes 3785 à 3830 du fichier bootstrap.css. Nous allons extraire le code et le placer dans bootstrap.css à droite.

Les couleurs et autres styles sont implémentés avec le conteneur parent "navbar-default":

/Pour le code source, veuillez consulter les lignes 3955~3974 du fichier bootstrap.css/
```
.navbar-default .navbar-nav> li > a {
 color: #777;
}
.navbar-default .navbar-nav> li >a:hover,
.navbar-default .navbar-nav> li >a:focus {
 color: #333;
 background-color: transparent;
}
.navbar-default .navbar-nav> .active > a,
.navbar-default .navbar-nav> .active >a:hover,
.navbar-default .navbar-nav> .active >a:focus {
 color: #555;
 background-color: #e7e7e7;
}
.navbar-default .navbar-nav> .disabled > a,
.navbar-default .navbar-nav> .disabled >a:hover,
.navbar-default .navbar-nav> .disabled >a:focus {
 color: #ccc;
 background-color: transparent;
}
```
Copier après la connexion
3. Ajoutez un titre, un menu secondaire et un statut à la barre de navigation

1), ajouter le titre de la barre de navigation

Dans la production de pages Web, il y a souvent un titre devant le menu (la taille du texte est légèrement plus grande que les autres textes). En fait, le framework Bootstrap a également pris en compte cet aspect pour tout le monde. Il utilise "navbar-header". " et " navbar-brand " à réaliser.
```
<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">慕课网</a>
 　</div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
</div>
```
Copier après la connexion
2), analyse du principe :

Cette fonction sert principalement de fonction de rappel. Bien entendu, si elle est améliorée, elle peut être utilisée comme logo (à ne pas développer ici). Le style augmente principalement le paramètre de police et définit la largeur maximale :

/Code source voir le fichier bootstrap.css ligne 3739 ~ ligne 3755/
```
.navbar-brand {
 float: left;
 height: 50px;
 padding: 15px 15px;
 font-size: 18px;
 line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
 text-decoration: none;
}
@media (min-width: 768px) {
 .navbar> .container .navbar-brand,
 .navbar> .container-fluid .navbar-brand {
 margin-left: -15px;
 }
}
```
Copier après la connexion
Également sous la barre de navigation par défaut (navbar-default), la marque de la barre de navigation est également colorée :

/Pour le code source, veuillez consulter les lignes 3947~3951 du fichier bootstrap.css/
```
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}
```
Copier après la connexion
3), état de la barre de navigation, menu secondaire

De même, la barre de navigation de base fournit des menus avec l'état actuel, l'état désactivé, l'état suspendu et d'autres effets, et peut également avoir une barre de navigation avec des menus secondaires.
```
<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">慕课网</a>
 　</div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li class="dropdown">
  <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
  <ul class="dropdown-menu">
  <li><a href="##">CSS3</a></li>
  <li><a href="##">JavaScript</a></li>
  <li class="disabled"><a href="##">PHP</a></li>
  </ul>
 </li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
</div>
```
Copier après la connexion
效果图如下：

4、带表单的导航条

有的导航条中会带有搜索表单，比如新浪微博的导航条：

在Bootstrap框架中提供了一个“navbar-form”，使用方法很简单，在navbar容器中放置一个带有navbar-form类名的表单。
```
<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">慕课网</a>
 　</div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li class="dropdown">
  <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
  <ul class="dropdown-menu">
  <li><a href="##">CSS3</a></li>
  <li><a href="##">JavaScript</a></li>
  <li class="disabled"><a href="##">PHP</a></li>
  </ul>
 </li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
 <form action="##" class="navbar-form navbar-left" rol="search">
 <div class="form-group">
  <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
 </form>
</div>
```
Copier après la connexion
实现导航条+表单的样式代码源码请查看bootstrap.css文件第3839行～第3904行.

在上面的示例中，大家看到了“navbar-left”让表单左浮动，更好实现对齐。在Bootstrap框架中，还提供了“navbar-right”样式，让元素在导航条靠右对齐。

/源码请查看bootstrap.css文件第3831行～第3838行/
```
@media (min-width: 768px) {
 .navbar-left {
 float: left !important;
}
.navbar-right {
 float: right !important;
 }
}
```
Copier après la connexion
注意：这里有一个条件，只有当浏览器视窗宽度大于768px生效。

5、导航条中的按钮、文本和链接

Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素。框架提供了三种其他样式：
- 1、导航条中的按钮navbar-btn
- 2、导航条中的文本navbar-text
- 3、导航条中的普通链接navbar-link
但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。

先来看看这三种样式对应的源码：

/源码请查看bootstrap.css文件第3914行～第3939行/
```
.navbar-btn {
margin-top: 8px;
margin-bottom: 8px;
}
.navbar-btn.btn-sm {
margin-top: 10px;
margin-bottom: 10px;
}
.navbar-btn.btn-xs {
margin-top: 14px;
margin-bottom: 14px;
}
.navbar-text {
margin-top: 15px;
margin-bottom: 15px;
}
@media (min-width: 768px) {
.navbar-text {
float: left;
margin-right: 15px;
margin-left: 15px;
 }
.navbar-text.navbar-right:last-child {
margin-right: 0;
 }

}
/bootstrap.css文件第3952行～第3954行/

.navbar-default .navbar-text {
 color: #777;
}

/bootstrap.css文件第4035行～第4037行/

.navbar-inverse .navbar-text {
color: #999;
}

/boostrap.css文件第4017行～第4022行/

.navbar-default .navbar-link {
color: #777;
}
.navbar-default .navbar-link:hover {
color: #333;
}

/bootstrap.css文件第4106行～第4111行/

.navbar-inverse .navbar-link {
color: #999;
}
.navbar-inverse .navbar-link:hover {
color: #fff;
}
```
Copier après la connexion
navbar-btn和navbar-link在上一小节已经讲过，现在我们来看一下navbar-text的一个简单应用
```
<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">慕课网</a>
 　</div>
 <ul class="nav navbar-nav">
 <li><a href="##" class="navbar-text">Navbar Text</a></li>
 <li><a href="##" class="navbar-text">Navbar Text</a></li>
 <li><a href="##" class="navbar-text">Navbar Text</a></li>
 </ul>
</div>
```
Copier après la connexion
在结果窗口中查看效果，可以看出明显的存在问题.

通过浏览器调试工具，可以看到a标签有margin-top和margin-bottom的值为15px，欲将其对齐，我们将上面的结构做一定的调整. 将