Barre de navigation que Bootstrap doit apprendre tous les jours_compétences javascript

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 (73a72cdc17fc2b29bb35d64b4687fa7c)
• É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>

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;
}

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;
}

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;
}

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>

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;
 }
}

É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;
}

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>

效果图如下：

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>

实现导航条+表单的样式代码源码请查看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;
 }
}

注意：这里有一个条件，只有当浏览器视窗宽度大于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;
}

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>

在结果窗口中查看效果，可以看出明显的存在问题.

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

6、固定导航条

很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式：

☑ .navbar-fixed-top：导航条固定在浏览器窗口顶部
☑ .navbar-fixed-bottom：导航条固定在浏览器窗口底部
使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>

1）、实现原理：

实现原理很简单，就是在navbar-fixed-top和navbar-fixed-bottom使用了position：fixed属性，并且设置navbar-fixed-top的top值为0,而navbar-fixed-bottom的bottom值为0。具体的源码如下：

/源码请查看bootstrap.css文件第3717 行～第3738行/

.navbar-fixed-top,
.navbar-fixed-bottom {
 position: fixed;
 right: 0;
 left: 0;
 z-index: 1030;
}
@media (min-width: 768px) {
.navbar-fixed-top,
.navbar-fixed-bottom {
 border-radius: 0;
 }
}
.navbar-fixed-top {
 top: 0;
 border-width: 0 0 1px;
}
.navbar-fixed-bottom {
 bottom: 0;
 margin-bottom: 0;
 border-width: 1px 0 0;
}

2）、存在bug及解决方法:

从运行效果中大家不难发现，页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容，我们需要在body上做一些处理：

body {
 padding-top: 70px;/*有顶部固定导航条时设置*/
 padding-bottom: 70px;/*有底部固定导航条时设置*/
}

因为固定导航条默认高度是50px，我们一般设置padding-top和padding-bottom的值为70px，当然有的时候还是需要具体情况具体分析。

3）、第二种解决这个bug方法：

其实除了这种解决方案之外，我们还有其他的解决方法，把固定导航条都放在页面内容前面：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>
<div class="content">我是内容</div>

在文件中添加下列样式代码：

.navbar-fixed-top ~ .content {
 padding-top: 70px;
}
.navbar-fixed-bottom ~ .content {
 padding-bottom: 70px;
}

当然，这种方法有的时候也是需要具体情况具体分析的。

7、响应式导航条

如今浏览Web页面的终端不在是一尘不变了，前面示例实现的导航条仅能适配于大屏幕的浏览器，但当浏览器屏幕变小的时候，就不适合了。因此响应式设计也就随之而来。那么在一个响应式的Web页面中，对于响应式的导航条也就非常的重要。例如Bootstrap框架官网的导航条：

（宽屏时效果）

（中屏时效果）

（窄屏时效果）

那么在这一节中，主要和大家探讨如何使用Bootstrap框架实现响应式导航条效果。

先上代码：

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
 　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
  <span class="sr-only">Toggle Navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
 </button>
 <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
 <a href="##" class="navbar-brand">慕课网</a>
 </div>
 <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse">
 <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>
</div>

1）、

使用方法：

• 保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。
• 保证在窄屏时要显示的图标样式（固定写法）：

<button class="navbar-toggle" type="button" data-toggle="collapse">
 <span class="sr-only">Toggle Navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
</button>

• 3、并为button添加data-target=“.类名/#id名”，究竞是类名还是id名呢？由需要折叠的div来决定。如：

（1）需要折叠的div代码段（用id表示）：

<div class="collapse navbar-collapse" id="example">
 <ul class="nav navbar-nav">
 …
 </ul>
</div>

窄屏时显示的图标代码段：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
 ...
</button>

（2）也可以这么写，需要折叠的div代码段（用class表示）：

<div class="collapse navbar-collapse example" >
 <ul class="nav navbar-nav">
 …
 </ul>
</div>

窄屏时要显示的图标：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
 ...
</button>

8、反色导航条

反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。如下：

<div class="navbar navbar-inverse" role="navigation">
<div class="nav bar-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>
</ul>
</div>

运行效果如下：

对应的源码，请查看bootstrap.css文件第4023行～第4111行

9、分页导航（带页码的分页导航）

分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航：

☑ 带页码的分页导航
☑ 带翻页的分页导航
1）、带页码的分页导航

带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。在Bootstrap框架为开发者提供不同的版本：

☑ LESS版本：对应的源文件pagination.less

☑ Sass版本：对应的源文件_pagination.scss

☑ 编译后版本：对应bootstrap.css文件第4130行～第4222行

使用方法：

平时很多人喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法：

<ul class="pagination">
 <li><a href="#">&laquo;</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">&raquo;</a></li>
</ul>

运行效果：

2）、实现原理：

从效果中可以看出，当前状态页码会高亮显示，而且不能点击。而最后一页是禁用状态，也不能点击。实现样式：

/bootstrap.css文件第4170行~第4192行/

.pagination> .active > a,
.pagination> .active > span,
.pagination> .active >a:hover,
.pagination> .active >span:hover,
.pagination> .active >a:focus,
.pagination> .active >span:focus {
z-index: 2;
color: #fff;
cursor: default;
background-color: #428bca;
border-color: #428bca;
}
.pagination> .disabled > span,
.pagination> .disabled >span:hover,
.pagination> .disabled >span:focus,
.pagination> .disabled > a,
.pagination> .disabled >a:hover,
.pagination> .disabled >a:focus {
color: #999;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd;
}

注意：要禁用当前状态和禁用状态不能点击，我们还要依靠js来实现，或者将这两状态下的a标签换成span标签。

3）、大小设置：

在Bootstrap框架中，也可以通过几个不同的情况来设置其大小。类似于按钮一样：

• 通过“pagination-lg”让分页导航变大；
• 通过“pagination-sm”让分页导航变小：

<ul class="pagination pagination-lg">
 …
</ul>
<ul class="pagination">
 …
</ul>
<ul class="pagination pagination-sm">
 …
</ul>

4）、大小设置实现原理：

其实就是通增加相应的padding大小、font-size大小和圆角大小，源码查看bootstrap.css文件第4193行～第4222行.

10、分页导航（翻页分页导航）

Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。

Bootstrap框架将其独立成一个单独的部分：

☑ LESS版本：对应源文件为pager.less

☑ Sass版本：对应源文件为_pager.scss

☑ 编译后版本：对应bootstrap.css文件第4223行～第4260行

使用方法：

在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类：

<ul class="pager">
 <li><a href="#">&laquo;上一页</a></li>
 <li><a href="#">下一页&raquo;</a></li>
</ul>

运行效果：

«上一页
下一页»
1）、实现原理：

对应样式代码：

/bootstrap.css文件第4223行～第4244行/

.pager {
padding-left: 0;
margin: 20px 0;
text-align: center;
list-style: none;
}
.pager li {
display: inline;
}
.pager li > a,
.pager li > span {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 15px;
}
.pager li >a:hover,
.pager li >a:focus {
text-decoration: none;
background-color: #eee;
}

2）、对齐样式设置：

默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架提供了两个样式：

☑ previous：让“上一步”按钮居左
☑ next：让“下一步”按钮居右
具体使用的时候，只需要在li标签上添加对应类名即可：

<ul class="pager">
 <li class="previous"><a href="#">&laquo;上一页</a></li>
 <li class="next"><a href="#">下一页&raquo;</a></li>
</ul>

运行效果：

«上一页
下一页»
3）、实现原理：

实现原理很简单，就是一个进行了左浮动，一个进行了右浮动：

/bootstrap.css文件第4245行～第4252行/

.pager .next > a,
.pager .next > span {
float: right;
}
.pager .previous > a,
.pager .previous > span {
float: left;
}

4）、状态样式设置：

和带页码分页导航一样，如果在li标签上添加了disabled类名的时候，分页按钮处于禁用状态，但同样不能禁止其点击功能。你可以通过js来处理，或将a标签换成span标签。

<ul class="pager">
 <li class="disabled"><span>&laquo;上一页</span></li>
 <li><a href="#">下一页&raquo;</a></li>
</ul>

运行效果：

«上一页
下一页»
5）、状态样式实现原理：

/bootstrap.css文件第4253行～第4260行/

.pager .disabled > a,
.pager .disabled >a:hover,
.pager .disabled >a:focus,
.pager .disabled > span {
 color: #999;
 cursor: not-allowed;
 background-color: #fff;
}

以上就是本文的全部内容，希望对大家的学习有所帮助。