可切换标签式的导航菜单
可切换标签式的导航菜单
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
在标签页上使用导航需要依赖 JavaScript 标签页插件
由于标签页需要控制内容区的展示，因此，你必须使用 标签页组件的 JavaScript 插件。另外还要添加 role 和 ARIA 属性。
确保导航组件的可访问性
如果你在使用导航组件实现导航条功能，务必在 <ul> 的最外侧的逻辑父元素上添加 role="navigation" 属性，或者用一个 <nav> 元素包裹整个导航组件。不要将 role 属性添加到 <ul> 上，因为这样可以被辅助设备（残疾人用的）上被识别为一个真正的列表。
标签页
注意 .nav-tabs 类依赖 .nav 基类。
表格导航或标签
创建一个标签式的导航菜单：
以一个带有 class .nav 的无序列表开始。
添加 class .nav-tabs。下面的实例演示了这点：
- <!DOCTYPE html>
- <html>
- <head>
- <title>Bootstrap 实例 - 标签式的导航菜单</title>
- <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
- <script src="/scripts/jquery.min.js"></script>
- <script src="/bootstrap/js/bootstrap.min.js"></script>
- </head>
- <body>
- <p>标签式的导航菜单</p>
- <ul class="nav nav-tabs">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">SVN</a></li>
- <li><a href="#">iOS</a></li>
- <li><a href="#">VB.Net</a></li>
- <li><a href="#">Java</a></li>
- <li><a href="#">PHP</a></li>
- </ul>
- </body>
- </html>
- Home
- Profile
- Messages
<ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> 正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
