bootstrap

作者: 青檬眼豆豆 | 来源:发表于2017-02-09 16:25 被阅读99次
    /*=============================关于bootstrap导航那些事*/
    /*====关于a标签*/
    /*
    link、visited、hover、active
    
    未移入a标签链接时:link(默认样式)
    
    移入a标签链接时:link、hover
    
    点击a标签链接时:link、hover、active
    
    点击后未移入a标签连接时:link、visited
    
    点击后移入a标签连接时:link、visited、hover
    
    点击后再次点击a标签连接时:link、visited、hover、active 
    */
    .navbar{
        border-radius: 0px;
        /*1---默认的导航是自带border-radius的,有时根据需求将其注释掉*/
    }
    .navbar-default{
        background: #3e3e3c;/*2.---修改整个导航条的背景*/
        border:transparent;/*  ----因为navbar-default是默认有border的,所以需将border去掉*/
    }
    .navbar-default .navbar-nav >li > a{
        color: #FFF; /*3. ---修改导航的字的颜色*/
    }
    /*这是对当前没有选中元素的点击事件的修改*/
    .navbar-default .navbar-nav>li>a:hover, 
    .navbar-default .navbar-nav>li>a:focus{
        background:#4C9ED9;/*4.---悬浮背景*/
        color:#FFF;/*5.---悬浮字体颜色*/
    }
    .navbar-default .navbar-nav >li>a:hover{
        color:#FFF;/*6.--- 修改导航的字悬浮的样式*/
    }
    .navbar-default .navbar-nav>li>a:focus{
        color:#FFF;/*7.----必须单独设置,否则会出现点击之后字的颜色变化的情况*/
    }
    .navbar-default .navbar-nav >.active >a{
        background: #4C9ED9;/*8.--- 修改默认选中的页面的ul li中的背景*/
        color: #FFF;/*9.--- 修改默认选中的字体颜色*/
    }
    .navbar-default .navbar-nav>.active>a:focus,
    .navbar-default .navbar-nav>.active>a:hover,
    .navbar-default .navbar-nav>.active>a:visited{
        /*10.----这是对当前选中字体的*/
        color:#FFF;
        background: #4C9ED9;
    }
    /*=====不知道什么情况,
    当.navbar-default .navbar-nav>.active>a:visited设置背景时会作用于当前选中元素*/
    
    /*=====关于LOGO*/
    .navbar-brand img{
        display: inline-block;
        /*11.----请对img的width和height设置*/
        width: 30px;
        height: 30px;
        vertical-align:middle;
        margin-top: -5px;/*12.---有时需根据需要需要调整图片的位置*/
    }
    .navbar-brand span{
        /*13.----设置公司名称或者网站名称*/
        display: inline-block;
        vertical-align: middle;
    }
    
    /*====关于导航中的下拉列表*/
    /*当下拉列表打开的时候,li标签加了class="open"*/
    
    .navbar-default .navbar-nav>.open>a{
        color: #FFF;
        background-color: #4C9ED9;
    }
    .navbar-default .navbar-nav>.open>a, 
    .navbar-default .navbar-nav>.open>a:hover, 
    .navbar-default .navbar-nav>.open>a:focus{
        color: #FFF;
        background-color: #4C9ED9;
    }
    .dropdown-menu{
        background: #3e3e3c;/*设置下列表框的背景*/
    }
    .dropdown-menu>li>a{
        /*设置下拉列表中a标签的基本样式,比如加border-bottom等*/
        color: #FFF;
    }
    .dropdown-menu>li>a:hover, 
    .dropdown-menu>li>a:focus{
        background: #4C9ED9;/*设置下拉列表框的悬浮样式*/
        color: #FFF;
    }
    
    /*由于下拉列表自适应的时候样式不变,会导致一些问题,所以要单独设置*/
    @media (max-width:768px) {
        /*设置字体颜色*/
        .navbar-default .navbar-nav .open .dropdown-menu>li>a{
            color: #FFF;
        } 
        /*设置下拉列表悬浮和点击的效果*/
        .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
        .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus{
            color: #FFF;
            background-color: #4C9ED9;
        }
    }
    /* 关于面包屑的样式 */
    .navbar-default .navbar-toggle{
        border-color: #3e3e3c;
        /*设置面包屑的border*/
    }
    .navbar-default .navbar-toggle .icon-bar{
        /*设置面包屑的3个横杠*/
        background: #4C9ED9;
    }
    .navbar-default .navbar-toggle:hover, 
    .navbar-default .navbar-toggle:focus{
        /*设置面包屑点击后出现的样式*/
        background-color: #3e3e3c;
    }
    
    /*=======================================轮播图banner那些事*/
    /*controls有时候用不到就将其注释掉就好啦*/
    .carousel-inner .item img{
        /*将图片设置为100%,平铺*/
        width: 100%;
    }
    /*设置滚轮的位置*/
    .carousel-indicators{
        margin-bottom: 50px;
    }
    /*设置单个滚轮的样式*/
    .carousel-indicators li{
        // width: 50px;
        // height: 8px;
        // border-radius: 0px;
        // background: rgba(255, 255, 255,.3);
        // border:transparent;
        // margin:0;
        // margin-left: 16px;
    }
    /*设置当前选中的滚轮的样式*/
    .carousel-indicators li.active{
        // width: 50px;
        // height: 8px;
        // border-radius: 0px;
        // margin-left: 16px;
    }
    

    相关文章

      网友评论

          本文标题:bootstrap

          本文链接:https://www.haomeiwen.com/subject/qgfwittx.html