/*=============================关于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;
}
网友评论