可切换标签式的导航菜单

W3CSchool > bootstrap3中文手册 > Bootstrap 导航标签 > 可切换标签式的导航菜单

可切换标签式的导航菜单

Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的。改变修饰类可以改变样式。

在标签页上使用导航需要依赖 JavaScript 标签页插件

由于标签页需要控制内容区的展示,因此,你必须使用 标签页组件的 JavaScript 插件。另外还要添加 role 和 ARIA 属性。

确保导航组件的可访问性

如果你在使用导航组件实现导航条功能,务必在 <ul> 的最外侧的逻辑父元素上添加 role="navigation" 属性,或者用一个 <nav> 元素包裹整个导航组件。不要将 role 属性添加到 <ul> 上,因为这样可以被辅助设备(残疾人用的)上被识别为一个真正的列表。

注意 .nav-tabs 类依赖 .nav 基类。

表格导航或标签

创建一个标签式的导航菜单:

以一个带有 class .nav 的无序列表开始。

添加 class .nav-tabs

下面的实例演示了这点:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.    <title>Bootstrap 实例 - 标签式的导航菜单</title> 
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
  6.    <script src="/scripts/jquery.min.js"></script> 
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script> 
  8. </head> 
  9. <body> 
  10.  
  11. <p>标签式的导航菜单</p> 
  12. <ul class="nav nav-tabs"> 
  13.    <li class="active"><a href="#">Home</a></li> 
  14.    <li><a href="#">SVN</a></li> 
  15.    <li><a href="#">iOS</a></li> 
  16.    <li><a href="#">VB.Net</a></li> 
  17.    <li><a href="#">Java</a></li> 
  18.    <li><a href="#">PHP</a></li> 
  19. </ul> 
  20.  
  21. </body> 
  22. </html> 
<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>

没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)