转载

胶囊式导航菜单

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

   <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>

HTML 标记相同，但使用 .nav-pills 类：

Home
Profile
Messages

 <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 类。

Home
Profile
Messages

 <ul class="nav nav-pills nav-stacked">   ... </ul>

正文到此结束

所属分类： bootstrap3

本文标签： java CSS Bootstrap jquery js ip src SVN example tab 实例 PHP HTML
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

胶囊式导航菜单

胶囊式导航菜单

热门推荐

相关文章

bootstrap3

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流