目录
1.Bootstrap栅格系统
1.1 简介
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<!-- 这里采用绝对路径引入 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>
<style type="text/css">
.c{
border: 1px solid gray
}
</style>
</head>
<div class="container">
<!-- 12列 -->
<div class="row">
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
</div>
<!-- 八四分 -->
<div class="row">
<div class="col-md-8 c">.col-md-8</div>
<div class="col-md-4 c">.col-md-4</div>
</div>
<!-- 三个四分 -->
<div class="row">
<div class="col-md-4 c">.col-md-4</div>
<div class="col-md-4 c">.col-md-4</div>
<div class="col-md-4 c">.col-md-4</div>
</div>
<!-- 六六分 -->
<div class="row">
<div class="col-md-6 c">.col-md-6</div>
<div class="col-md-6 c">.col-md-6</div>
</div>
</div>
</body>
</html>运行结果：
1.2 列偏移
使用
.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4类将.col-md-4元素向右侧偏移了4个列（column）的宽度。
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<!-- 这里采用绝对路径引入 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>
<style type="text/css">
.c{
border: 1px solid gray
}
</style>
</head>
<div class="container">
<!-- 三个4分 -->
<div class="row">
<div class="col-md-4 c">.col-md-4</div>
<div class="col-md-4 col-md-offset-4 c">.col-md-4 .col-md-offset-4</div>
</div>
<!-- 四个3分 -->
<div class="row">
<div class="col-md-3 col-md-offset-3 c">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3 c">.col-md-3 .col-md-offset-3</div>
</div>
<!-- 两个6分 -->
<div class="row">
<div class="col-md-6 col-md-offset-3 c">.col-md-6 .col-md-offset-3</div>
</div>
</div>
</body>
</html>运行结果：
1.3 嵌套列
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的
.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<!-- 这里采用绝对路径引入 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>
<style type="text/css">
.c{
border: 1px solid gray
}
</style>
</head>
<div class="container">
<!-- 八四分 -->
<div class="row">
<div class="col-md-8 c">
<div class="row">
<div class="col-md-8 c">第二行8个格子</div>
<div class="col-md-4 c">第二行4个格子</div>
</div>
</div>
<div class="col-md-4 c">.col-md-4</div>
</div>
</div>
</body>
</html>运行结果：
2.Bootstrap布局
.container 类用于固定宽度并支持响应式布局的容器；
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<!-- 这里采用绝对路径引入 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>
<style type="text/css">
.c{
border: 1px solid gray
}
</style>
</head>
<!-- container 用于固定宽度并支持响应式布局的容器 -->
<div class="container">
<!-- 12列 -->
<div class="row">
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
</div>
</div>
<!-- container-fluid 用于 100% 宽度，占据全部视口（viewport）的容器 -->
<div class="container-fluid">
<!-- 12列 -->
<div class="row">
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
<div class="col-md-1 c">.col-md-1</div>
</div>
</div>
</body>
</html>运行结果：
明显看到有区别！