码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap3系列:导航

时间:2016-09-07 01:28:53      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:

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系列:导航

标签:

原文地址:http://www.cnblogs.com/libingql/p/5847644.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!