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

前言

原创文章，欢迎转载，请保留出处。
有任何错误、疑问或者建议，欢迎指出。
我的邮箱:[email protected]

前一篇介绍了如何利用Bootstrap3制作响应式的导航栏，本篇简单地介绍如何实现导航栏跳转。当然这个跳转并非简单的a标签加上herf属性，而是实现一种不用刷新整个页面的跳转。

侧边导航栏实现跳转

这里我主要以侧边栏为例子讲解，同样适用于顶部导航栏。

加入链接

紧接着上篇的导航栏代码中，在A标签里面加上两个属性，其中href使用一个锚标记（后面用到的DIV的ID），另外加上一个data-toggle属性（后面用于实现跳转的一个标记），如下图：

<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>

利用jsp特性引入页面

这里是实现的核心，把多个页面引入和主页面一起送给servlet编译给前端，缺点是当页面很多时会导致载入过慢。

<!-- box页面 -->
<div class="tab-pane fade" id="box">
    <%@ include file="box.jsp"%>
</div>

这里代码的id就是上面a标签使用的锚标记，而class是Bootstrap的特性，如果class中带有in active，那么他就会激活显示。所以我们需要自己写一段js代码当点击这些导航按钮时，修改对应的div的class属性。

js激活的代码

我们写在之前我们引入的index.js文件中，代码比较简单，不需要解析：

/*响应标签页切换*/
$('#myTab a').click(function(e) {
    e.preventDefault()
    $(this).tab('show')
})

以上实现后就可以实现跳转了，不过另外的页面如何兼容原来的网站框架呢？
我们要给新的页面一个框架和CSS代码才行。

新页面的框架和CSS

这里以其中一个页面为例子：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!-- calendar的风格文件 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/my/css/calendar.css">


<div class="container">
    <!-- 页面的内容 -->
</div>

添加CSS文件

@CHARSET "UTF-8";

/* 这里是当浏览器宽度最大不超过767px时应用的效果 */
@media screen and (max-width: 767px) {
    .calendar_contain { padding-right: 40px; padding-left: 00px; }
}

效果如下图：

后记

源码下载（已经包含本篇的所有源码）：
http://download.csdn.net/detail/maxwell_nc/8727873

下篇准备介绍下制作出漂亮的盒子模块，有错误和问题希望可以回复指出。