7.5 导航
Bootstap提供了一些简单的样式来实现简单导航和复杂的导航条。
7.5.1 简单导航的基础样式
简单导航就是将一些超链接以列表的形似展示出来,用户可通过单击超链接进行导航。简单导航涉及如下CSS样式。
| 样式 |
描述 |
.nav |
导航样式。要实现简单导航必须先设置该样式。 |
.nav-tabs或.nav-pills |
设置导航风格。其中,.nav-tabs是标签式导航,.nav-pills是胶囊式导航。这两个样式都依赖于.nav样式。 |
.nav-stacked |
当使用胶囊式导航时,可通过设置该样式进行堆叠排列。 |
.active |
将某个导航项设为激活状态。 |
.disabled |
将某个导航项设为禁用状态。 |
由于标签页需要控制内容区的展示,因此在标签页上实现导航功能需要依赖JavaScript标签页插件。 |
|
另外,如果希望使用导航组件实现导航条功能,则必须在<ul>最外侧的逻辑父元素上添加role="navigation"属性,或者用一个<nav>元素包裹整个导航组件。总之不要将role属性添加到<ul>上,否则会被辅助设备(残疾人用的)识别为列表。 |
|
程序示例 实现简单的标签式导航
下面代码示范了如何开发简单的标签式导航。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 导航 </title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li role="presentation"><a href="#">主页</a></li>
<li role="presentation"><a href="#">课程体系</a></li>
<li role="presentation" class="active"><a href="#">师资介绍</a></li>
<li role="presentation"><a href="#">教育理念</a></li>
<li role="presentation" class="disabled"><a href="#">退出系统</a></li>
</ul>
</div>
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
|
在该代码中使用.nav、.nav-tabs定义了一个导航,该导航内包含5个超链接,其中为第三个超链接设置了激活状态,为第五个超链接设置了禁用状态。
提示:Bootstrap既可使用<ul>元素来定义导航,也可使用<ol>元素来定义导航。但如果希望通过导航组件来实现导航条,则建议使用<nav>元素来包裹<ul>或<ol>元素。
程序示例 实现简单的胶囊式导航
下面代码示范了如何开发简单的胶囊式导航。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 导航 </title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<ol class="nav nav-pills">
<li role="presentation"><a href="#">主页</a></li>
<li role="presentation"><a href="#">课程体系</a></li>
<li role="presentation" class="active"><a href="#">师资介绍</a></li>
<li role="presentation"><a href="#">教育理念</a></li>
<li role="presentation" class="disabled"><a href="#">退出系统</a></li>
</ol>
</div>
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
|
胶囊式导航支持堆叠方式排列,只要为导航的<ul>或<ol>元素增加.nav-stacked 样式即可。
胶囊式导航支持堆叠方式排列
例如如下代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 导航 </title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<ul class="nav nav-pills nav-stacked">
<li role="presentation"><a href="#">主页</a></li>
<li role="presentation"><a href="#">课程体系</a></li>
<li role="presentation" class="active"><a href="#">师资介绍</a></li>
<li role="presentation"><a href="#">教育理念</a></li>
<li role="presentation" class="disabled"><a href="#">退出系统</a></li>
</ul>
</div>
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
|