后台侧边功能栏

---

1.上一节我们做完导航，接着我们做左边的这个侧边功能栏。将侧边功能栏放在<nav>标签里面。

2.侧边功能栏实例

<!--侧边功能栏-->

<div class="navbar-default navbar-collaps"  id="slider_sub">

//增加两个样式，并设置id

 <ul>

  <li>

   <!--搜索-->

    <div class="input-group mysearch">

     <input type="text" class="form-control"/>

     <span class="input-group-button">

//"input-group-button"在文本框右边设置按钮（按钮紧挨这文本框右侧）

      <button type="button" class="btn btn-default">

       <span class="glyphicon glyphicon-search"></span>

      </button>

    </div>

   </li>

     <li>

       <a herf="#" class="collapse" data-toggle="collapse">系统功能<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>

         <ul id="sub1" class="nav collapse">

            <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>&nbsp

;系统信息</a></li>

            <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;管理员管理</a></li>

            <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;日志信息</a></li>

            <li><a href="#"><span class="glyphicon glyphicon-remove-circle"></span>&nbsp;退出</a></li>

        </ul>

   </li>

  </ul>

 </div>

</nav>

注意：我们在高分辨率下整个侧边栏应该占很小一部分，这个就要用到媒体导入，所以我们要在头文件上加媒体导入。

3.运行效果

大于768px：

小于768px