Bootstrap源码解读导航条（7）
前端之家收集整理的这篇文章主要介绍了
Bootstrap源码解读导航条（7），
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
源码解读Bootstrap导航条
基础导航条
要制作一个基础导航条，要在制作导航的列表
添加类名“navbar-nav”，然后在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”。例如：
“.navbar”样式的主要功能就是设置左右padding和圆角等效果，实现源码如下：
导航条的颜色都是通过“.navbar-default”来进行控制，实现源码如下：
“.navbar-nav”样式是在导航“.nav”的基础上重新调整了菜单项的浮动与内外边距。而颜色和其他样式是通过配合父容器“navbar-default”来一起实现。实现源码如下：
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”来实现，例如：
主要是加大了字体设置，并且设置了最大宽度，实现源码如下：
img {
display: block;
}
@media (min-width: 768px) {
.navbar > .container .navbar-brand,.navbar > .container-fluid .navbar-brand {
margin-left: -15px;
}
}
在默认导航条（navbar-default）下，对navbar-brand也做了颜色处理，实现源码如下：
带表单的导航条
在navbar容器中放置一个带有“navbar-form”类名的表单，例如：
实现源码如下：
.form-control {
width: 100%;
}
.navbar-form .control-label {
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .ra
dio,.navbar-form .check
Box {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .ra
dio label,.navbar-form .check
Box label {
padding-left: 0;
}
.navbar-form .ra
dio input[type="ra
dio"],.navbar-form .check
Box input[type="check
Box"] {
position: relative;
margin-left: 0;
}
.navbar-form .has-
Feedback .form-control-
Feedback {
top: 0;
}
}
@media (max-width: 767px) {
.navbar-form .form-group {
margin-bottom: 5px;
}
.navbar-form .form-group:last-child {
margin-bottom: 0;
}
}
@media (min-width: 768px) {
.navbar-form {
width: auto;
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-
Box-shadow: none;
Box-shadow: none;
}
}
“navbar-left”可以让导航条里的表单左浮动，“navbar-right”为右浮动。实现源码如下：
固定导航条
要将导航条固定在浏览器顶部或底部，只需要在制作导航条最外部容器navbar上追加对应的类名即可：
.navbar-fixed-top：导航条固定在浏览器窗口顶部
.navbar-fixed-bottom：导航条固定在浏览器窗口底部
例如：
实现原理就是在navbar-fixed-top和navbar-fixed-bottom使用了position：fixed
属性，并且设置navbar-fixed-top的top值为0,而navbar-fixed-bottom的bottom值为0。实现源码如下：
不过我们可以发现，页面主内容顶部和底部都被固定导航条给遮住了。我们可以在body上加上样式：padding-top: 70px;或padding-bottom: 70px;来避免这种情况。
响应式导航条
响应式导航条比较复杂，宽屏是水平平铺显示，窄屏时收缩垂直显示，使用方法如下：
1. 把在窄屏时需要折叠的内容包裹在带一个div内，并且为这个div追加“collapse”、“navbar-collapse”两个类名。最后为这个div添加一个class类名或者id名。
2. 定制在窄屏时要显示的图标样式。
3. 为button添加data-target=”.类名”或data-target=”#id名”，是类名还是id名由需要折叠的div来决定。
完整示例如下：
反色导航条
将navbar-deafult类名换成navbar-inverse即可。只是导航条的背景色和文本做了修改。
带页码的分页导航
在ul标签上加入pagination方法即可。例如：
实现源码如下：
.active > a,.pagination> .active > span,.pagination> .active >a:hover,.pagination> .active >span:hover,.pagination> .active >a:focus,.pagination> .active >span:focus {
z-index: 2;
color: #fff;
cursor: default;
background-color: #428bca;
border-color: #428bca;
}
.pagination> .disabled > span,.pagination> .disabled >span:hover,.pagination> .disabled >span:focus,.pagination> .disabled > a,.pagination> .disabled >a:hover,.pagination> .disabled >a:focus {
color: #999;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd;
}
在ul上追加“pagination-lg”可以让分页导航变大，“pagination-sm”可以让分页导航变小。实现源码如下：
li > a,.pagination-lg> li > span {
padding: 10px 16px;
font-size: 18px;
}
.pagination-lg>li:first-child> a,.pagination-lg>li:first-child> span {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.pagination-lg>li:last-child> a,.pagination-lg>li:last-child> span {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.pagination-sm> li > a,.pagination-sm> li > span {
padding: 5px 10px;
font-size: 12px;
}
.pagination-sm>li:first-child> a,.pagination-sm>li:first-child> span {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.pagination-sm>li:last-child> a,.pagination-sm>li:last-child> span {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
翻页分页导航
为ul标签加入pager类即可。例如：
实现源码如下：
a,.pager li > span {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 15px;
}
.pager li > a:hover,.pager li > a:focus {
text-decoration: none;
background-color: #eee;
}
导航默认居中，如果要一个居左一个居右，可以在li分别上追加previous和next类名。实现源码如下：
a,.pager .next > span {
float: right;
}
.pager .previous > a,.pager .previous > span {
float: left;
}
本文系列教程整理到： 专题中，欢迎点击学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
