BootStrap布局
1> 下载地址: http://v3.bootcss.com/getting-started/#download
根据自己的需要，下载不同的版本。我这里使用的是1版本的。比较简单好用。
2> Bootstrap常用的布局样式介绍
1->布局容器（.container和.container-fluid）
2->栅格系统 （.col-xs-[1-12], .col-sm-[1-12], .col-md-[1-12]和.col-lg-[1-12]）
3->表单控件 （.form-group和.form-control）
4->按钮样式
5->按钮的大小
6->图片的形状
3> 编写页面
<!DOCTYPE html>
<html>
<head>
<title>首页 - 用户列表页面</title>
<link rel="shortcut icon" href="/static/img/favicon.png" />
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"/>
<script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
<style>
.bodercss{
border: 1px solid #00f;
}
</style>
</head>
<body>
<!--布局容器-->
<div class="container" style="border:1px solid red">
<p>这是container布局</p>
<p>.container 类用于固定宽度并支持响应式布局的容器。</p>
</div>
<div class="container-fluid" style="border:1px solid #0f0">
<p>container-fluid</p>
<p>.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。</p>
</div>
<!--栅格布局部分-->
<div class="container">
<div class="row">
<div class="col-md-1 bodercss">1</div>
<div class="col-md-1 bodercss">2</div>
<div class="col-md-1 bodercss">3</div>
<div class="col-md-1 bodercss">4</div>
<div class="col-md-1 bodercss">5</div>
<div class="col-md-1 bodercss">6</div>
<div class="col-md-1 bodercss">7</div>
<div class="col-md-1 bodercss">8</div>
<div class="col-md-1 bodercss">9</div>
<div class="col-md-1 bodercss">10</div>
<div class="col-md-1 bodercss">11</div>
<div class="col-md-1 bodercss">12</div>
</div>
<div class="row">
<div class="col-md-2 bodercss">2</div>
<div class="col-md-2 bodercss">4</div>
<div class="col-md-2 bodercss">6</div>
<div class="col-md-2 bodercss">8</div>
<div class="col-md-2 bodercss">10</div>
<div class="col-md-2 bodercss">12</div>
</div>
<div class="row">
<div class="col-md-3 bodercss">3</div>
<div class="col-md-3 bodercss">6</div>
<div class="col-md-3 bodercss">9</div>
<div class="col-md-3 bodercss">12</div>
</div>
<div class="row">
<div class="col-md-4 bodercss">4</div>
<div class="col-md-4 bodercss">4</div>
<div class="col-md-4 bodercss">4</div>
</div>
<div class="row">
<div class="col-md-4 bodercss">4</div>
<div class="col-md-8 bodercss">8</div>
</div>
<div class="row">
<div class="col-md-6 bodercss">6</div>
<div class="col-md-6 bodercss">12</div>
</div>
<div class="row">
<div class="col-md-12 bodercss">12</div>
</div>
</div>
<!--表单控件-->
<div class="container">
<form>
<div class="form-group">
<label for="text">文本:</label>
<input type="text" class="form-control" id="text" placeholder="文本">
</div>
<div class="form-group">
<label for="number">数字:</label>
<input type="number" class="form-control" id="number" placeholder="数字">
</div>
<div class="form-group">
<label for="datetime">时间:</label>
<input type="datetime" class="form-control" id="datetime" placeholder="时间">
</div>
<div class="form-group">
<label for="tel">电话:</label>
<input type="tel" class="form-control" id="tel" placeholder="电话">
</div>
<div class="form-group">
<label for="email">邮箱:</label>
<input type="email" class="form-control" id="email" placeholder="邮箱">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="密码">
</div>
<div class="form-group">
<label for="exampleInputFile">上传文件</label>
<input type="file" id="exampleInputFile">
<p class="help-block">上传文件</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" />多选A
</label>
<label>
<input type="checkbox" id="blankCheckbox" value="option1"/>多选B
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1"/>单选A
</label>
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1"/>单选B
</label>
</div>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button type="submit" class="btn btn-default">提交</button>
<button type="reset" class="btn btn-primary">重置</button>
</form>
</div>
<!--按钮样式-->
<div class="container" style="margin-top:20px;">
<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>
</div>
<!--图片形状-->
<div class="container" style="margin-top:20px;">
<img src="/static/img/1.jpg" style="200px;height:200px;" class="img-rounded">
<img src="/static/img/2.jpg" style="200px;height:200px;" class="img-circle">
<img src="/static/img/3.jpg" style="200px;height:200px;" class="img-thumbnail">
</div>
</body>
</html>
4> 运行页面效果如下:
1->布局容器
2->栅格系统
3->Form表单
4->按钮样式
5->图片的样式
6->下一章节，将Easyui控件的使用