前端|Bootstrap——导航组件

Bootstrap是一个用于快速开发Web 应用程序和网站的前端框架，它提供了一个带有网格系统、链接样式、背景的基本结构。Bootstrap提供了许多的组件，其中就包括导航组件。这在很大程度上简化了操作。通常都是利用列表实现来导航的，常用的是无序列表（<ul>）和有序列表（<ol>）。自定义列表（<dl>）一般不会用来实现导航。

常见的导航菜单有标签式的导航菜单，胶囊式的导航菜单等等。导航菜单的样式多种多样，其在各式软件中的应用也是不可或缺的。今天就来简单制作一个导航菜单。效果如下：

图1.1 效果图

问题描述

如何制作导航菜单

首先要引入jquery.js、bootstrap.min.js和bootstrap.min.css文件。（这里需要注意jquery.js文件必须在bootstrap.min.js之前引入）在这些文件里已经封装好了一些样式和功能，引入之后就可以利用代码实现相关功能了。

解决方案

（1）常规导航栏

先创建一个无序或者有序列表，把基本的元素先放进去。以一个带有 class=“nav”的无序列表开始,再添加class=“nav nav-tabs”。还可以向上面的元素添加role="navigation"，这样有助于增加可访问性，也可以不加，对于功能的实现没有很大的影响。向 <div> 元素添加一个标题class="active"，则表示当前默认菜单选项，添加class=“navbar-header”，会让文本看起来更大一号如下图就是现在的效果图：

图2.1 效果图

（2）页面可跳转的菜单栏

常见的导航菜单是一定可以实现页面切换的。这里就可以利用a标签。实现标签切换只需要在a标签上添加自定义属性data-toggle=“tab”。向标签添加class="tab-pane fade "，就可以实现淡入淡出效果。如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容。如下代码就可以实现跳转到B页面：

（3）可切换的下拉的菜单栏

下来菜单的实现需要使用到触发器“dropdown”,向标签添加添加data-toggle="dropdown" 就可以实现切换下拉菜单功能。这里需要注意dropdown-toggle是下拉菜单样式，data-toggle是js属性，而dropdown是属性值。data-toggle="dropdown"表示引用js给外层添加一个open类,class="dropdown"默认没有open,点击一次为class="dropdown open"，再点击一次为class="dropdown"。如果没有data-toggle="dropdown"的话，即使被定义为dropdown-toggle类，也不能实现动态的菜单下拉和收回的效果。当添加 data-toggle="dropdown" 属性，就可以让下拉菜单默认隐藏，只有在点击按钮或链接时，它才显示出来。

此外，这里的下拉菜单，还使用了使用来指示按钮作为下拉菜单。dropdown-menu设置了display：none，下拉菜单项就默认隐藏。这里需要注意aria-labelledby属性的作用是当想要的标签文本已在其他元素中存在时，可以将其值为该元素的id。tabindex="-1"：不允许使用tab键。