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