Bootstrap3系列:导航
Posted Libing@2019
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Bootstrap3系列:导航相关的知识,希望对你有一定的参考价值。
1. 标签页
.nav添加.nav-tabs设计标签页,.nav-tabs 依赖 .nav 基类。
1.1 示例代码
<ul class="nav nav-tabs"> <li class="active"><a href="#">首页</a></li> <li><a href="#">个人设置</a></li> <li><a href="#">消息中心</a></li> </ul>
1.2 示例效果
2. 胶囊式标签页
.nav添加.nav-pills设计胶囊式标签页
2.1 示例代码
<ul class="nav nav-pills"> <li class="active"><a href="#">首页</a></li> <li><a href="#">个人设置</a></li> <li><a href="#">消息中心</a></li> </ul>
2.2 示例效果
3. 胶囊式标签页垂直排列
在<ul class="nav nav-pills">添加.nav-stacked设计胶囊式标签页垂直排列。
3.1 示例代码
<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">首页</a></li> <li><a href="#">个人设置</a></li> <li><a href="#">消息中心</a></li> </ul>
3.2 示例效果
以上是关于Bootstrap3系列:导航的主要内容,如果未能解决你的问题,请参考以下文章