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系列:导航的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap 3移动键盘解锁导航栏[重复]

Bootstrap 3 Navbar 左侧和右侧导航栏项目的左侧折叠菜单

Bootstrap3系列:按钮组

h5侧边栏滑动效果 根据Bootstrap3的侧栏导航改编

Bootstrap3系列:输入框组

Bootstrap3系列:按钮式下拉菜单