一、bootstrap 的使用
1.下载bootstrap
可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页
会看到两个按钮：
- Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
- Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
2.使用bootstrap
使用bootstrap的时候，只需要导入bootstrap的文件就行了，有两种方法导入
1.本地安装
用<link>标签调用css样式
2.在线安装
<!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
二、响应式设计
1.认识响应式设计
响应式设计可以使网页适应于不同的设备，在现阶段，响应式web设计的实现途径包括：弹性网格、液态布局、使用css media query技术等。
2.设计流程
1.确定需要兼容的设备类型，屏幕尺寸
2.制作线框原型并进行测试
3.视觉设计
4.脚本实现
3.设计响应式布局结构
因为网页会根据屏幕宽度自动调整布局，所以，不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。
1. 设置 Meta 标签
大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。
2.通过媒介查询来设置样式media queries
media queries是响应式设计的核心，若要定义一个屏幕的宽度范围以及自定义类样式，可以这样写：
@media screen and (min- 100px) and (max- 640px) {
.Myclass{
...
...
}
}
三、栅格系统
1.栅格系统工作原理
1.row(行)必须包含在.container中，以便为其赋予合适的排列和内补
2.使用row在水平方向创建一组列（列宽总个数应为12个）
3.网页内容要放在列内，只有列能作为行的直接子元素。下面的代码就是不合理的
<div class="row"> <h1>固定布局</h1> <div class="col-md-4">列宽4个</div> <div class="col-md-8">列宽8格</div> </div>
4.可以通过padding创建列之间的间隔
.col-1{
padding-left: 15px;
padding-right: 15px;
}
5.栅格系统的列是通过制定1到12的值来指定范围的，比如
<div class="row"> <div class="col-md-4">列宽4个</div> <div class="col-md-8">列宽8格</div> </div>
2.固定栅格与流式栅格
使用.container 和 .container-fluid分别设计
<h1>固定布局</h1> <div class="container" > <div class="row"> <div class="col-md-4">列宽4个</div> <div class="col-md-8">列宽8格</div> </div> </div> <h1>流式布局</h1> <div class="container-fluid" > <div class="row"> <div class="col-md-4">4个</div> <div class="col-md-8">8格</div> </div> </div>
效果如下：
3.列的基本操作
1.列偏移
使用offset系列类实现该功能
<div class="row"> <div class="col-md-4">列宽4个</div> <div class="col-md-6 col-md-offset-2">列宽6格 偏移2格</div> </div> <div class="row"> <div class="col-md-4 col-md-offset-4">列宽4个 偏移4格</div> </div>
2.列排序
列排序通过push 和 pull 两个类实现，push向右偏移，pull表示向左偏移
<div class="row"> <div class="col-md-4 col-md-push-8">左列，显示在右侧</div> <div class="col-md-6 col-md-pull-4">中间，在左侧</div> <div class="col-md-2 col-md-pull-4">右列，在中间</div> </div>