bootstrap 右自适应 左_Bootstrap响应式侧边栏改进版

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

本文是将其中的导航条和下拉菜单进行结合，然后设计并改进了侧边栏的制作。

html:

• 后端开发
• 数据库

• 前端开发

  • HTML/CSS
  • JavaScript
  • jQuery
  • Bootstrap
  • node.js
• 移动开发
• 视觉设计
• 云计算

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实战教程