侧边栏在响应式设计中起到很大的作用，当屏幕小到手机的屏幕时，能够自适应屏幕大小的侧边栏固然能够为网站添加色彩，那么在Bootstrap的框架中提供了导航条和下拉菜单的组件，详情请自行到官网Bootstrap的文档查看，这里就不作介绍了。 本文是将其中的导航条和下拉菜单进行结合，然后设计并改进了侧边栏的制作。
html:
css:
color:#fff;
font-size: 18px;
font-family: "Microsoft Yahei",Helvetica,sans-serif,Lato;
}
width: 100%;
}
text-align: center;
width: 16%;
margin-left: 5px;
}
border: none;
-webkit-Box-shadow: 0 6px 12px rgba(0,.175);
Box-shadow: 0 6px 12px rgba(0,.175);
}
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;
}
border: none;
}
background: rgba(43,54,67,0.97);
}
margin-top: 0px;
margin-right: 0px;
margin-left: -15px;
margin-bottom: 0px;
width: 40%;
height: 999px;
}
text-align: left;
width:100%;
margin-left:0px;
}
font-size:16px;
}
background-color: #38a99c;
color:#fff;
}
Box-shadow:none;
}
padding-top:10px;
color:#fff;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
如果大家还想深入学习，可以点击进行学习，再为大家附两个精彩的专题：
原文链接：https://www.f2er.com/bootstrap/45794.html