bootstrap

/*=============================关于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;
}