侧边栏在响应式设计中起到很大的作用，当屏幕小到手机的屏幕时，能够自适应屏幕大小的侧边栏固然能够为网站添加色彩，那么在Bootstrap的框架中提供了导航条和下拉菜单的组件，详情请自行到官网Bootstrap的文档查看，这里就不作介绍了。
本文是将其中的导航条和下拉菜单进行结合，然后设计并改进了侧边栏的制作。

html:

<div class="container"> <nav class="navbar navbar-default mynavbar"> <div class="container-fluid"> <!--按钮--> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed btn-sider" data-toggle="collapse" data-target="#side-menu" aria-expanded="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- 导航条内容 --> <div class="collapse navbar-collapse" id="side-menu"> <ul class="nav navbar-nav" id="side-item"> <li><a href="#">后端开发</a></li> <li><a href="#">数据库</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" id="web-item" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">前端开发 <span class="caret"></span></a> <!--下拉菜单按钮--> <ul class="dropdown-menu"> <li><a href="#">HTML/CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Bootstrap</a></li> <li><a href="#">node.js</a></li> </ul> </li> <li><a href="#">移动开发</a></li> <li><a href="#">视觉设计</a></li> <li><a href="#">云计算</a></li> </ul> </div> </div> </nav></div>

css:

.mynavbar{ background-color: #fff; border:none; } .navbar-header,#side-item{ background-color: #0b3558; } #side-menu>ul>li>a{ color:#fff; font-size: 18px; font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; } #side-menu>ul{ width: 100%; } #side-menu>ul>li{ text-align: center; width: 16%; margin-left: 5px; } #side-menu .dropdown-menu { border: none; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); } #side-item .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover,#side-item>li>a:focus,#side-item >li>a:hover { color: #24b0ff; text-decoration: none; background-color: transparent; } .btn-sider{ float: left; border:none; outline: none; margin-left: 10px; } .mynavbar .btn-sider .icon-bar{ background-color:#fff; width:23px; height:3px; } .mynavbar .btn-sider:focus, .mynavbar .btn-sider:hover { background-color: transparent; } @media (max-width: 768px) { .container { padding-left: 0px; } #side-menu{ border: none; } #side-item{ background: rgba(43, 54, 67, 0.97); } #side-menu>ul { margin-top: 0px; margin-right: 0px; margin-left: -15px; margin-bottom: 0px; width: 40%; height: 999px; } #side-menu>ul>li { text-align: left; width:100%; margin-left:0px; } #side-menu>ul>li a{ font-size:16px; } #side-item>li>a:focus,#side-item >li>a:hover,#side-item .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{ background-color: #38a99c; color:#fff; } #side-menu .dropdown-menu{ box-shadow:none; } #side-menu .dropdown-menu li a{ padding-top:10px; color:#fff; } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程