Bootstrap响应式侧边栏改进版

前端之家收集整理的这篇文章主要介绍了Bootstrap响应式侧边栏改进版前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

html:

<div class="collapse navbar-collapse" id="side-menu">
<ul class="nav navbar-nav" id="side-item">

  • css:

    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,.175);
    Box-shadow: 0 6px 12px rgba(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相关文章