基础导航条
要制作一个基础导航条,要在制作导航的列表<ul class="nav">
基础上添加类名“navbar-nav”,然后在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”。例如:
<div class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li class="active"><a href="##">首页</a></li>
<li><a href="##">网站内容</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
“.navbar”样式的主要功能就是设置左右padding和圆角等效果,实现源码如下:
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
导航条的颜色都是通过“.navbar-default”来进行控制,实现源码如下:
.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
}
“.navbar-nav”样式是在导航“.nav”的基础上重新调整了菜单项的浮动与内外边距。而颜色和其他样式是通过配合父容器“navbar-default”来一起实现。实现源码如下:
.navbar-default .navbar-nav> li > a {
color: #777;
}
.navbar-default .navbar-nav> li >a:hover,
.navbar-default .navbar-nav> li >a:focus {
color: #333;
background-color: transparent;
}
.navbar-default .navbar-nav> .active > a,
.navbar-default .navbar-nav> .active >a:hover,
.navbar-default .navbar-nav> .active >a:focus {
color: #555;
background-color: #e7e7e7;
}
.navbar-default .navbar-nav> .disabled > a,
.navbar-default .navbar-nav> .disabled >a:hover,
.navbar-default .navbar-nav> .disabled >a:focus {
color: #ccc;
background-color: transparent;
}
导航条标题
通过“navbar-header”和“navbar-brand”来实现,例如:
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">标题</a>
</div>
<ul class="nav navbar-nav">
...
</ul>
</div>
主要是加大了字体设置,并且设置了最大宽度,实现源码如下:
.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
.navbar-brand > img {
display: block;
}
@media (min-width: 768px) {
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
margin-left: -15px;
}
}
在默认导航条(navbar-