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>
|
原文链接: 7.5 导航 7.5.1 简单导航的基础样式