改进Bootstrap中的响应式侧边栏

来源：互联网发布：linux系统入门教程编辑：程序博客网时间：2024/06/05 08:18

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

1 0