胶囊式导航菜单


胶囊式导航菜单

如果需要把标签改成胶囊的样式,只需要使用 class .nav-pills 代替 .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-pills"> 
  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> 

HTML 标记相同,但使用 .nav-pills 类:

<ul class="nav nav-pills">
  <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>
胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。
<ul class="nav nav-pills nav-stacked">
  ...
</ul>

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

学习导航


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