Bootstrap响应式侧边栏改进版

侧边栏在响应式设计中起到很大的作用，当屏幕小到手机的屏幕时，能够自适应屏幕大小的侧边栏固然能够为网站添加色彩，那么在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实战教程