Bootstrap 是一个前端框架，当然主要就是包含 HTML、CSS 和 JavaScript 了，对于我而言，Bootstrap 因为已经预先封装了很多样式，因此使用起来的话可以使页面十分美观，不然如果直接写 CSS 代码的话，那就太吃力了，Bootstrap 是由 Twitter 公司开发出来并开源给大家使用的，总是会对这样将自己的产品或者工具共享出来给大家一起使用的公司和组织有莫名的好感，就像在 Java 领域的 Apache 组织一样，提供的工具减轻了多少开发人员的负担啊，真感觉挺了不起的。
1.Bootstrap的目录结构
要想使用 Bootstrap 进行开发的话就必须先要下载 Bootstrap 的发行版本，当然到官网下载是最简单方便的了，下载得到安装包之后，进入文件夹就可以看到一个名叫 dist 的文件夹，意思是说里面的内容都是发行版的，我们需要使用的也就是这个文件夹之中的内容，这个文件中有三个文件夹，分别如下：
css: 主要放的是一些预定义好的css文件
fonts: 主要是字体文件
js: 预定义好的JavaScript脚本文件
虽然在开发中可能用不了它们中所有的文件，但是最开始接触使用的话还是建议全部拷贝到自己的开发目录，以免发生错误，比如在 Eclipse 中开发 Dynamic Web Project 项目的时候，就可以直接在 WebContent 目录下新建一个 bootstrap 文件夹，然后将上面的三个文件夹拷贝到这个文件夹当中，之后开发页面的时候只要引用这里面的文件就可以了。
需要注意的一点是：使用Bootstrap 进行开发是需要依赖 jQuery 的，因此我们同时也需要导入 jQuery 的文件，所以可以仿照上面的，在 WebContent 目录下新建一个 jquery 文件夹，然后将 jQuery 的文件拷贝放到这里面，像这样将 Bootstrap 和 jQuery 的文件分开放，而不是直接将 jQuery 的文件放到 Bootstrap 的 js 目录之下，这样也是为了让开发人员更清晰地了解项目开发所用的文件，同样也是为了方便升级，如果需要更高版本的开发文件，则可以想升级哪一部分就替换哪一部分，这样操作起来就要简单地多。
2.引用Bootstrap开发文件
使用 Bootstrap 进行开发很重要的一点就是查询文档，其实这个就和使用 Java 进行程序开发是一样的，有不清楚的地方就要及时去查询 API 文档，当发现某些部分是我们经常要查询的时候，可能就要去记住了，当然这可能还不是我们主动去记忆，而是使用的多了自动就能记住了，使用 Bootstrap 更方便的一点是它有非常好的中文文档，Java 可是没有中文版的啊，说这么多的目的就是想提醒自己有不清楚的地方就去查文档，因为任何一门技术或者一种工具要想记住它所有方面的细节肯定是不可能的，唯有多去翻文档！！！
要想得到 Bootstrap 修饰的美观效果，那就必须要在页面之中引入它的相关资源，其实在文档中也写的很清楚了。
<!-- Bootstrap -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
这里就是引用了 Bootstrap 的 css 和 js 文件，引用之后我们就可以在自己的页面之中使用 Bootstrap 的相关资源了，不过需要注意的一点就是，在引用 Bootstrap 的 js 文件之前，必须先引用 jQuery 的文件，这是因为 Bootstrap 中的 js 文件会依赖 jQuery。
3.相关概念
3.1 布局容器
Bootstrap 中所有的内容都应该放在布局容器当中，而 Bootstrap 提供了两种布局容器，分别就是 container 和 container-fluid，其实使用它们也比较简单，就是在最靠近 body 标签的位置加一个 div 标签，然后给当前这个 div 的 class 属性设置上面两个之中一个的值，这样就可以了。
<body>
<div class="container" style="border: 1px solid red;">
I am Lau Cloud.
</div>
</body>
其实上面的两个值都尝试一下之后就会发现，它们最大的区别就在于，取值为 container 的时候，网页在浏览器显示的时候会发现 div 的两侧是留有一定空白的，而当取值为 container-fluid 的时候，div 标签会占满一行，两侧并不会留有空白。
3.2 栅格系统
栅格系统就是将一个页面看做是由一个一个行和列所组成的，当我们把想要表现的元素放到某行和某列之中时，这样也就确定了这个元素的布局，栅格系统将一行分为 12 列，当然我们在设置一个元素时是可以跨越多列的，如果一行之中的总列数超过了 12 ，那超过的部分就会在下一行显示了，不过行和列是可以嵌套使用的，即列中在包含行，行中再包含列。
使用栅格系统的一些注意点：
1.行必须在布局容器当中，而列又必须在行之中
2.使用行是要设置类属性row,使用列使用类属性样式：col-屏幕尺寸-所占列数
3.列的排列顺序决定了它的显示顺序
屏幕尺寸：
Bootstrap 中将屏幕的尺寸分为四种，分别是超小屏幕、小屏幕、中等屏幕和大屏幕，当然它会有对于的尺寸范围，是可以在 API 里面查到的，上面四种屏幕对应的英文字母如下：
超小屏幕：xs
小屏幕：sm
中等屏幕：md
大屏幕：lg
这样一来对于每一行中的列的设置就可以更清晰地理解了。(col-屏幕尺寸-所占列数)
屏幕尺寸设置规则：就是如果设置了比较小的屏幕的显示规则，那么比这个屏幕大的也会遵守相应的规则，但是比这个屏幕小的不会遵守这个规则，所以如果某项规则想要适用于多种屏幕，那只要设置最小的屏幕就好了，就不用都设置那么麻烦了。
列偏移：
如果想让某个元素从某一行的中间开始显示，这个元素的前面应该是空白的，那应该怎么办？这时就应该使用这个列偏移了，就是这个元素所在的列在这行中是偏移了几列才开始显示的，如果想直接从中间开始，一行是分为 12 列，那就应该偏移 6 列，设置偏移量应该使用 col-屏幕尺寸-offset-占列数。
4.一些小案例
4.1 轮播图
轮播图主要的效果就是几张图片可以自动地切换显示，同时通过点击左右的滑动按钮也是可以控制图片的滑动的，其实这个只要将官网文档中的示例拿过来，修改一下就可以显示出来了，直接把代码放下面吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/1.jpg" alt="图片1">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="img/2.jpg" alt="图片2">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="img/3.jpg" alt="图片3">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
其中设置图片的地方在本地链接到自己的图片就行了，head 标签中对 Bootstrap 资源的引用还是和之前一样。
4.2 登录案例
当我们在某个网站登录的时候，总是希望得到友好的提示的，比如某些必输项没有输入时，会提示某些项不能为空，当然提示还不能是简单地弹框，因为那样太烦人了，每当有点不对的时候就会弹框，而且还需要用户一个一个去点击关闭弹框，这样做谁都会受不了的，好的做法还是在某个地方给出提示信息，而且表单也不会提交。先把代码放在下面然后再对重点进行说明吧。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
//密码和确认密码一致性校验
//前提：密码和确认密码必须填写
function checkPwdAndRepwd(f1,f2){
if(f1&&f2){
//密码和确认密码不为空，进行非空校验
//1、密码和确认密码 值拿到
var pwd=document.getElementById("password").value;
var repwd=document.getElementById("repassword").value;
var msg=document.getElementById("repasswordMsg");
var div=document.getElementById("repasswordDiv");
//2、一致性判断
if(pwd==repwd){
div.className="form-group";
msg.innerHTML="";
return true;
}else{
div.className+=" has-error";
msg.innerHTML="必须和密码一致";
return false;
}
}else{
//密码和确认密码有一个为空，直接返回false
return false;
}
}
//非空校验
function checkNotNull(nid){
//1、获取表单输入项 元素对象
var nodex=document.getElementById(nid);
//获取对应的错误信息回显 label元素
var msg=document.getElementById(nid+"Msg");
//获取对应的DIV
var div=document.getElementById(nid+"Div");
//2、对进行非空判断
var reg = /^\s*$/;//如果有0~多个空白符，就为true
if(reg.test(nodex.value)){
//信息不合格
div.className+=" has-error";
msg.innerHTML="不能为空";
return false;
}else{
//信息合格
div.className="form-group";
msg.innerHTML="";
return true;
}
}
//表单校验方法
function checkForm(){
//用户名
var flag1=checkNotNull("username");
//密码
var flag2=checkNotNull("password");
//确认密码
var flag3=checkNotNull("repassword");
//一致性校验
var flag4=checkPwdAndRepwd(flag2,flag3);
return flag1&&flag2&&flag3&&flag4;
}
</script>
</head>
<body>
<div class="container">
<!-- 网站头部 -->
<div class="row">
<div class="col-md-4">
<img src="../img/logo2.png" />
</div>
<div class="col-md-4">
<img src="../img/header.png" />
</div>
<div class="col-md-4">
<ul class="list-inline" style="margin-top:10px;">
<li><a href="" class="btn btn-primary">登录</a></li>
<li><a href="" class="btn btn-primary">注册</a></li>
<li><a href="" class="btn btn-danger">购物车</a></li>
</ul>
</div>
</div>
<!-- 导航条 -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">手机数码<span class="sr-only">(current)</span></a></li>
<li><a href="#">电脑办公</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">母婴用品</a></li>
<li><a href="#">汽车配件</a></li>
<li role="separator" class="divider"></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</nav>
<!-- 注册页面主体-->
<div class="row" style="background-image: url(../img/regist_bg.jpg)">
<div class="col-sm-8 col-sm-offset-2" style="border:5px solid gainsboro;background-color:white;">
<!-- 表单部分 -->
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<font color="#204D74" size="4">会员注册</font>
</div>
</div>
<form class="form-horizontal" onsubmit="return checkForm()">
<div id="usernameDiv" class="form-group">
<label class="col-sm-2 control-label">用户名</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
</div>
<label id="usernameMsg" class="col-sm-2 control-label"></label>
</div>
<div id="passwordDiv" class="form-group">
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
</div>
<label id="passwordMsg" class="col-sm-2 control-label"></label>
</div>
<div id="repasswordDiv" class="form-group">
<label class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="repassword" placeholder="请输入确认密码">
</div>
<label id="repasswordMsg" class="col-sm-2 control-label"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">email</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="email" name="email" placeholder="请输入email">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">姓名</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性别</label>
<div class="col-sm-8">
<input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" name="sex" value="woman"/>女
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-danger btn-lg" value=" 注 册 "/>
</div>
</div>
</form>
</div>
</div>
<!-- 网站底部 -->
<div class="row">
<div class="col-xs-12">
<img src="../img/footer.jpg" width="100%"/>
</div>
</div>
<div class="row">
<div class="col-xs-12 text-center">
<ul class="list-inline">
<li><a href="">联系我们</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 text-center">
Copyright © 2005-2020
</div>
</div>
</div>
</body>
</html>
没有给图片，因为这不是重点，下面说明一下需要注意的点吧：
1.每个输入框的后面都会有一个 label 标签，这是用来显示该项是否通过验证的信息的，当用户选择点击提交按钮的时候，如果有某些项不能满足我们预定的要求，那么就不应该提交表单，而且还应该将导致表单不能提交的原因反馈到对应的项，这样就能给用户良好的反馈效果。
2.还有一个点需要注意的就是，在 form 标签之中有这样一句代码 onsubmit="return checkForm()" ，这句代码的作用就是当用户点击表单提交按钮的时候，会触发到 onsubmit 属性中设置的函数，也就是 checkForm()，而且有一点特殊的就是里面还有一个 return，放在这里的作用就是当 checkForm() 函数返回 true 的时候表单就会提交，返回 false 表单就不会进行提交了。
5.总结
Bootstrap 这个前端框架包含的内容很多，比如还有我们后面会用到的分页条，简单地展示一下很简单，只要将文档中的示例代码稍微修改一下就好了，不过这样也就没有多少实用价值了，要想真正让分页条有意义，那还是应该结合动态 html 编程来做，说这个主要是为了说明，如果想使用 Bootstrap 做出某个效果，那就应该在碰到问题的时候赶快去查询文档中的示例代码和相关说明，然后再根据实际需要去进行改写。
