基于Bootstrap3制作响应式布局网站（三）

前言

原创文章，欢迎转载，请保留出处。
有任何错误、疑问或者建议，欢迎指出。
我的邮箱:Maxwell_nc@163.com

前两篇已经简单地介绍了Bootstrap的基本特性和原理，接下来我们来实现一般网站都需要的导航栏，显而易见的例子就是CSDN本身就有两种导航栏。文章主要分为顶部导航栏和侧边导航栏两个部分。这里是实现的都是响应式的导航栏。

响应式的顶部导航栏

这里我们先展示不说如何实现跳转，下节我们再来谈具体跳转原理和实现

（可以参考上次提供的源码http://download.csdn.net/detail/maxwell_nc/8727873）

先来看看jsp部分的div，这里主要利用了Bootstrap的自带类和组件来实现

由于 顶部导航栏 在Bootstrap3已经实现了响应式布局，所以不需要我们额外添加JS或者CSS就可以实现响应式布局。

具体可以参考Bootstrap3的中文文档：

http://v3.bootcss.com/components/#navbar

<!-- 顶部导航栏 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">

<a class="navbar-brand" href="#home" data-toggle="tab">我的Bootstrap3网站</a>

<!-- 分辨率低时显示的弹出顶部导航栏的按钮 -->
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>

</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">设置</a></li>
<li><a href="#">退出</a></li>
</ul>
</div>
</div>
</nav>

另外添加自定义样式（界面调整）

/* 顶部导航栏占了 50px，下移内容部分 */
body {
padding-top: 50px;
}

/* 顶部导航栏，隐藏默认显示的1px边框 */
.navbar-fixed-top {
border: 0;
}

这里简单就可以实现响应式的布局，效果如下：

在

.col-xs-*

设备上：



点击按钮后显示导航：



在

.col-sm-*

设备上：



接下来我们来实现侧边导航栏，尤其在管理系统中，这个十分常用，然而Bootstrap3并没有为其提供响应式的组件或者类（由于时间关系我没有深入研究Bootstrap3源码，如果有提供可以留言指出，我会及时修正），我们只能利用CSS媒体查询来实现。

响应式的侧边导航栏

我们实现响应式的侧边栏，实际上是在

.col-xs-*

设备上把侧边栏收起来，通过点击某个按钮（这里是头像）弹出，

这里实际上和新版的手机QQ侧边栏有异曲同工之妙，如下图：



由于这个按钮属于顶部导航栏，所以我们需要在顶部导航栏的容器里添加：



要添加的代码如下：

<!-- 分辨率低时显示的弹出左侧侧边栏按钮 -->
<div class="pull-left visible-xs">
<button type="button" class="offcanvas-nav-button"
data-toggle="offcanvas"></button>
</div>

我们这里定义了一个类

.offcanvas-nav-button

，利用CSS媒体查询，设置他在

.col-xs-*

设备上才显示，其他情况不显示，代码如下：

/* 这里是当浏览器宽度最大不超过767px时应用的效果 */
@media screen and (max-width: 767px) {

/* 弹出按钮的样式 */
.offcanvas-nav-button {
margin: 10px;
background-color: #eeeeee;
background-image: url(../pic/avatar.png);
background-size: 30px 30px;
background-position: center;
width: 30px;
height: 30px;
border: 1px solid #ffffff;
border-radius: 50%;
}
}

我们把顶部导航栏放进一个容器，把其他内容（侧边栏和主要内容）放到另一个容器



这里面我们注意到使用了

.row-offcanvas

和

.row-offcanvas-left

类，这个是Bootstrap为我们提供的布局，实现内容偏移，不过还需要对应的js代码才能实现。

我们添加index.js，在index.jsp底部引入

<!-- 自己定义的js -->
<script src="${pageContext.request.contextPath}/my/js/index.js"></script>

具体的代码为：

/*响应弹出左侧侧边栏*/
$(document).ready(function() {
$('[data-toggle="offcanvas"]').click(function() {
$('.row-offcanvas').toggleClass('active')
});
});

然后定义侧边栏的内容，这里

<a href="#box" data-toggle="tab"></a>

是用于跳转的，暂时不需要理解，其实不使用也可以，每一个内容就是一个

<li></li>

，可以添加任意内容进入，这里演示了添加头像，名称和在线状态和普通的导航，而且带分组功能。

注意这里栅格布局的

col-xs-0

并不影响侧边栏在

col-xs-*

设备上的显示。

<!-- 侧边导航栏 -->
<div class="col-xs-0 col-sm-3 col-md-2 sidebar-offcanvas">

<div class="pic-border">
<div class="pic-background">
<a href="#"> <img
src="${pageContext.request.contextPath}/my/pic/avatar.png"
width="80">
</a>
</div>
</div>

<h5 class="user-name">
<span class="online"></span> Maxwell_nc
</h5>

<ul id="myTab" class="nav nav-sidebar">
<li class="active"><a href="#home" data-toggle="tab">主页 <span
class="sr-only">(current)</span></a></li>
<li><a href="#box" data-toggle="tab">盒子演示</a></li>
<li><a href="#calendar" data-toggle="tab">日历演示</a></li>
<li><a href="#form" data-toggle="tab">表单演示</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="#" data-toggle="tab">个人信息</a></li>
<li><a href="#" data-toggle="tab">修改密码</a></li>

</ul>
</div>

最后利用CSS的媒体查询来实现侧边栏弹出：

/* 这里是当浏览器宽度最大不超过767px时应用的效果 */
@media screen and (max-width: 767px) {
/* 侧边栏弹出动画 设置*/
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-left .sidebar-offcanvas {
left: -50%;
}
.row-offcanvas-left.active {
left: 50%;
}

/* 弹出的侧边栏设置 */
.sidebar-offcanvas {
position: absolute;
width: 50%;
top: 0px;
bottom: 0px;
left: 0px;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: #C80027;
border-right: 1px solid #ffffff;
}
}

当然不要忘记，在非

col-xs-*

设备上，也要调整：

/* 这里是当浏览器宽度最小不小于768px时应用的效果  */
@media ( min-width : 768px) {
/* 侧边栏的样式 */
.sidebar-offcanvas {
position: fixed;
top: 50px;
bottom: 0px;
left: 0px;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: #C80027;
border-right: 1px solid #ffffff;
}
}

另外要加上一些CSS样式丰富导航栏：

/* 侧边栏中的头像背景设置为白色 */
.pic-background {
background-color: #ffffff;
border-radius: 50%;
overflow: hidden;
}

.pic-border {
margin:0 auto;
background: none repeat scroll 0 0 rgba(87, 120, 137, 0.1);

border-radius: 50%;
height: 80px;
width: 80px;
}

.pic-border:hover {
box-shadow: 0 0 10px #ffffff;
}

.user-name:hover {
text-shadow: 0 0 10px #ffffff;
}

/* 侧边栏中的名字居中 */
.user-name {
color: #ffffff;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}

/* 侧边栏中的在线按钮 */
.online {
width: 10px;
height: 10px;
background: #66DD00;
margin-right: 5px;
display: inline-block;
}

/* 侧边栏中的导航内容分组*/
.nav-sidebar {
margin-bottom: 20px;
}

/* 侧边栏中的导航文字对齐*/
.nav-sidebar>li>a {
color: #ffffff;
padding-right: 20px;
padding-left: 30px;
}

/* 侧边栏导航当前选中的的样式 */
.nav-sidebar>.active>a,.nav-sidebar>.active>a:hover,.nav-sidebar>.active>a:focus
{
color: #C80027;
background-color: #ffffff;
}

/* 侧边栏导航划过的样式 */
.nav>li>a:hover {
color: #C80027;
background-color: #ffffff;
}

到此就可以实现响应式的侧边导航栏了。

后记

最近实在比较忙，源码没什么太大改动，可以下载上一篇的提供的源码（已经包含本篇的所有源码）：

http://download.csdn.net/detail/maxwell_nc/8727873

如果你也是博主，你也会感受到写博文比写代码费时间。虽然如此但我还是坚持一周至少一篇博文。

下篇准备简单地介绍下如何实现无刷新跳转，这里并非介绍AJAX，而是一种比较简单的方法（当然也有一定缺点），当然也有看到源码的应该都明白，建议还是先看看源码。

另外由于时间仓促，未免有错漏，本人不是大牛，写博文完全是为了记录和分享自己学习过程，有错误和问题希望可以回复指出。