Bootstrap源码解读导航条（7）

Bootstrap源码解读导航条（7）

源码解读Bootstrap导航条

基础导航条

要制作一个基础导航条，要在制作导航的列表

“.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”来实现，例如：

　 标题

...

主要是加大了字体设置，并且设置了最大宽度，实现源码如下：

.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-default）下，对navbar-brand也做了颜色处理，实现源码如下：

.navbar-default .navbar-brand {

color: #777;

}

.navbar-default .navbar-brand:hover,

.navbar-default .navbar-brand:focus {

color: #5e5e5e;

background-color: transparent;

}

带表单的导航条

在navbar容器中放置一个带有“navbar-form”类名的表单，例如：

...

搜索

实现源码如下：

.navbar-form {

padding: 10px 15px;

margin-top: 8px;

margin-right: -15px;

margin-bottom: 8px;

margin-left: -15px;

border-top: 1px solid transparent;

border-bottom: 1px solid transparent;

-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);

box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);

}

@media (min-width: 768px) {

.navbar-form .form-group {

display: inline-block;

margin-bottom: 0;

vertical-align: middle;

}

.navbar-form .form-control {

display: inline-block;

width: auto;

vertical-align: middle;

}

.navbar-form .form-control-static {

display: inline-block;

}

.navbar-form .input-group {

display: inline-table;

vertical-align: middle;

}

.navbar-form .input-group .input-group-addon,

.navbar-form .input-group .input-group-btn,

.navbar-form .input-group .form-control {

width: auto;

}

.navbar-form .input-group > .form-control {

width: 100%;

}

.navbar-form .control-label {

margin-bottom: 0;

vertical-align: middle;

}

.navbar-form .radio,

.navbar-form .checkbox {

display: inline-block;

margin-top: 0;

margin-bottom: 0;

vertical-align: middle;

}

.navbar-form .radio label,

.navbar-form .checkbox label {

padding-left: 0;

}

.navbar-form .radio input[type="radio"],

.navbar-form .checkbox input[type="checkbox"] {

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”为右浮动。实现源码如下：

@media (min-width: 768px) {

.navbar-left {

float: left !important;

}

.navbar-right {

float: right !important;

}

}

固定导航条

要将导航条固定在浏览器顶部或底部，只需要在制作导航条最外部容器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。实现源码如下：

.navbar-fixed-top,

.navbar-fixed-bottom {

position: fixed;

right: 0;

left: 0;

z-index: 1030;

}

@media (min-width: 768px) {

.navbar-fixed-top,

.navbar-fixed-bottom {

border-radius: 0;

}

}

.navbar-fixed-top {

top: 0;

border-width: 0 0 1px;

}

.navbar-fixed-bottom {

bottom: 0;

margin-bottom: 0;

border-width: 1px 0 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来决定。

完整示例如下：

Toggle Navigation

Bootstrap中文网

反色导航条

将navbar-deafult类名换成navbar-inverse即可。只是导航条的背景色和文本做了修改。

带页码的分页导航

在ul标签上加入pagination方法即可。例如：

实现源码如下：

.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”可以让分页导航变小。实现源码如下：

.pagination-lg> li > a,

.pagination-lg> li > span {

padding: 10px 16px;

font-size: 18px;

}

.pagination-lg>li:first-child> a,

.pagination-lNEQRMRg>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,

.pahttp://gination-sm>li:last-child> span {

border-top-right-radius: 3px;

border-bottom-right-radius: 3px;

}

翻页分页导航

为ul标签加入pager类即可。例如：

实现源码如下：

.pager {

padding-left: 0;

margin: 20px 0;

text-align: center;

list-style: none;

}

.pager li {

display: inline;

}

.pager li > 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类名。实现源码如下：

.pager .next > a,

.pager .next > span {

float: right;

}

.pager .previous > a,

.pager .previous > span {

float: left;

}

本文系列教程整理到：Bootstrap基础教程 专题中，欢迎点击学习。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。