0%

7.5 导航 7.5.1 简单导航的基础样式

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">
<!-- 使用nav定义一个导航,`.nav-tabs`表示该导航是`标签式导航`-->
<ul class="nav nav-tabs">
<li role="presentation"><a href="#">主页</a></li>
<li role="presentation"><a href="#">课程体系</a></li>
<!-- `.active`将`某个导航项`设为`激活状态`。 -->
<li role="presentation" class="active"><a href="#">师资介绍</a></li>
<li role="presentation"><a href="#">教育理念</a></li>
<!-- `.disabled将`某个导航项`设为`禁用`状态。 -->
<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>

原文链接: 7.5 导航 7.5.1 简单导航的基础样式