附加导航 affix，side--toolbar(可结合博客园使用~)

• 什么是附加导航？
• bootstrap的affix插件
• side--toolbar类似于百度百科的附加导航

一，什么是附加导航？

当你浏览百度百科，或者bootstrap时，如果当页的内容很多，当页面下滑到一定程度时，就会在页面的最右侧出现附加导航，如下面的截图：

     

左侧截图是百度百科的附加导航，右侧是bootstrap的affix插件。

这就是附加导航，本篇博客给大家介绍这两种的使用。

二，bootstrap的affix插件。

 1，在你的代码中引入相应插件。

<script src="/static/jquery-3.1.1.js"></script>
<link rel="stylesheet" href="/static/css/bootstrap.css">
<script src="/static/js/bootstrap.js"></script>

你可以下载到本地，也可以直接引入从官网引入（affix是依赖bootstrap.css，和bootstrap.js的）。　　

2，编写html部分，和css部分。

css部分：

ul.nav-tabs{
        width: 140px;
        margin-top: 20px;
        border-radius: 4px;
        border: 1px solid #ddd;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    }
    ul.nav-tabs li{
        margin: 0;
        border-top: 1px solid #ddd;
    }
    ul.nav-tabs li:first-child{
        border-top: none;
    }
    ul.nav-tabs li a{
        margin: 0;
        padding: 8px 16px;
        border-radius: 0;
    }
    ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
        color: #fff;
        background: #0088cc;
        border: 1px solid #0088cc;
    }
    ul.nav-tabs li:first-child a{
        border-radius: 4px 4px 0 0;
    }
    ul.nav-tabs li:last-child a{
        border-radius: 0 0 4px 4px;
    }
    ul.nav-tabs.affix{
        top: 30px; /* Set the top position of pinned element */

    }
        

简单设计的css代码