一.Bootstrap整体架构
Bootstrap来自Twitter，是目前最流行的前端框架。它是基于HTML、CSS、JavaScript的一个简洁、灵活地开源框架。从官网 http://getbootstrap.com下载最新版
解压缩后可以看到三大核心目录：css(样式)、js(脚本)、fonts(字体)，就是我们所需要的 Bootstrap 运行环境。其中需要进入到页面的是 bootstrap.min.css 、jquery.min.js 和 bootstrap.min.js 三个文件。
文件作用
1> bootstrap.min.css ：包含了Bootstrap所有基本样式。
2> jquery.min.js ：因为Bootstrap的 js 是依赖Jquery的， 所以必须在引入Bootstrap的 js 之前引入jquery.min.js
3> bootstrap.min.js ：包含了Bootstrap所有的基本插件。
在我们的HTML页面上按照顺序引入这三个文件，那么Bootstrap就配置好了
Bootstrap的基础支撑平台如下图所示
1.什么是12栅格系统？
BootStrap的12栅格系统也就是把网页的总宽度平分为12份，开发人员可以自由地按份组合，以便开发出简洁方便的程序。此外BootStrap也提供了更为灵活地栅格系统，即栅格系统所使用的总宽度可以不固定，你可以针对一个div元素使用12等分的栅格，因为BootStrap是按照百分比进行12等分的。
12栅格系统是整个BootStrap的核心功能，也是响应式设计核心理念的一个实现方式。
2.基础布局组件
在12栅格系统的基础上，BootStrap提供了多种基础布局组件，如排版、代码、表单按钮等。这些基础组件可以随意应用在页面的任何元素上，包括其顶部的CSS组件内部也可以任意使用这些基础组件。在有的地方也会称它为CSS全局样式，其实它们表示的是相同的内容。
3.JQuery
BootStrap所有的JavaScript插件都依赖于jQuery1.10+，如果要使用这些插件，就必须要用到jQuery库。如果你只是用CSS组件，那就可以不要它了。
4.响应式设计
页面的设计开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面决定，包括弹性网络和布局、图片、CSS媒体查询的使用等。无论用户使用笔记本电脑还是平板电脑，我们的页面都应该能够自动切换分辨率、图片尺寸及相应脚本功能等，以适应不同设备。
5.CSS组件
在BootStrap最新的版本中提供了20种CSS组件，分别是下拉菜单（Dropdown）、按钮组（Button group）、按钮下拉菜单（Button dropdown）、导航（Nav）、导航条（Navbar）、面包屑导航（Breadcrumb）、分页导航（Pagination）、标签（Label）、徽章（Badge）、缩略图（Thumbnail）、警告框（Alert）、进度条（Progress-bar）、媒体对象（Media-object）…
6.JavaScript插件
JavaScript插件总共有12种，分别是动画效果（Transition）、模态框（Modal）、下拉菜单（Dropdown）、滚动侦测（Progress-bar）、弹出框（Popover）、按钮（Button）…
二、栅格系统
1.简介BootStrap提供了一套响应式、移动设备先行的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为12列。
栅格系统通过一系列行（row）与列（column）的组合来创建页面的布局，设置的内容可以放在创建好的布局中。
2.实现原理
栅格系统的实现原理非常简单，仅仅是通过定义容器的大小，平分为12份，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式的栅格系统。
（1）一行数据（row）必须包含在 .container中，以便为其赋予合适的对齐方式和内边距
（2）使用行（row）在水平方向创建一组列（column）
（3） 具体内容放在列（column）内，列（column）可以作为行（row）的直接子元素
（4） 内置的一大堆样式，可以使用col-xs-4（占4列宽度）的样式来快速创建栅格
（5）通过设置padding从而创建列（column）之间的间隙，让后面第一列和最后一列设置负值margin来抵消掉padding的影响
（6）栅格系统中指定1到12的值来表示其跨越的范围
3.如何使用
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Bootstrap列组合</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<style>
body{
margin-top: 20px;
}
.row div{
outline: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
</div>
<br/>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-8">col-md-8</div>
</div>
<br/>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
</body>
</html>效果图：
这里就可以看出来我们是栅格系统就相当于1行给了我们12列这12列我们可以随意均匀但是不可以超过12列，注意如果这一行的列超过了12等份，那么他就会自动去下一行。
4.列偏移
有时候我们不想让两个相邻的列挨在一起，这时候利用栅格系统的列偏移（offset）功能来实现，而不必再定义margin值。对于中等屏幕，可以使用.col-md-offset-*形式的样式将例如： .col-md-offset-2的意思是将元素向右移动了两个列的宽度，
/*省略部分代码*/
<style>
body {
margin-top: 20px;
color: #fff;
}
.container {
outline: 1px solid red;
}
.row div {
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-4 col-md-offset-4">col-md-1 col-md-offset-4</div>
</div>
<br/>
<div class="row">
<div class="col-md-4 col-md-offset-4">col-md-4 col-md-offset-4</div>
</div>
<br/>
<div class="row">
<div class="col-md-6 col-md-offset-6">col-md-6 col-md-offset-6</div>
</div>
</div>
</body>如下：
5.列嵌套
栅格系统也支持列嵌套，即在一个列里声明一个或多个行（row）。但是要注意，内部所嵌套的row的宽度为100%时，就是当前外部列的宽度。被嵌套的行（row）所包含的列（column）的个数不能超过12。
//部分代码：
<div class="row:>
<div class="col-md-4">第一列</div>
<div class="col-md-4">
第二列
<div class="row">
<div class="col-md-12>我是被嵌套的</div>
</div>
</div>
<div class="col-md-4">第三列</div>
</div用语言描述下列嵌套就是：
一行12份。想象一下假定我们给3列，每列都给了4列，这时候一行就被3列给填充了。
这时我们在第2列给他嵌套了一行并且这一行里在做一个列然后将这行的12份都给了这一行，但是注意：这个嵌套的这一行12份 实际上的大小只是属于被嵌套的第二列的大小，也就是说他只有他被嵌套的这列的大小。
6.列排序
列排序就是改变列的方向，也就是改变左右浮动，并设置浮动的距离。在栅格系统里，可以通过.col-md-push-*和.col-md-pull-*来实现这一目的。
pull：左排序。
push：右排序
三、响应式栅格
我们都知道，BootStrap可以制作响应式页面。它能为不同屏幕尺寸提供不同栅格样式。在前面的例子中，我们一直都在使用中等屏幕（md），既然是响应式页面，当然还应该包括超小屏幕（xs）、小型屏幕（sm）、中型屏幕（md）、大屏幕（lg）等
这些大小其实都是通过媒体查询来实现的，出下源码：
/*超小屏幕（手机，小于768px），没有设置任何的媒体查询代码，因为在BootStrap中是默认的（移动优先）*/
@media(min-width : 768px){
.container {width：750px；} /*小屏幕（平板，大于等于768px）*/
}
@media（min-width ：992px）{
.container（width ： 970px；） /*中等屏幕（桌面显示器，大于等于992px）*/
}
@media（min-width：1200px）{ /*大屏幕（大桌面显示器，大于等于1200px）*/
.container{width：1170px；}
}四、常用属性
1. Bootstrap标题
<div class="h1"></div>除了h1还有 h2、h3、h4、h5、h6
2.页面主体
字体突出显示：class=“lead”
3.对齐方式
左对齐：class=“text-left”
中间对齐 ：text-center
右对齐：text-right
两端对齐：text-justify
4.列表（横向）
<ul class="list-inlune">5.列表(水平)
<dl class="dl-horizontal">
<dt>标题</dt>
<dd>内容</dd>6.内联表单
<form action="#" class="form-inline">
... //省略部分代码
</form>
7.横向表单
<body>
<div class="container">
<form action="#" class="form-horizontal">
<div class="form-group">
<span class="col-sm-2 text-center">姓名：</span>
<div class="col-sm-10">
<input class="form-control " type="text" placeholder="请输入你的姓名"/>
</div>
</div>
<div class="form-group">
<span class="col-sm-2 text-center"> 邮箱：</span>
<div class="col-sm-10">
<input class="form-control" type="email" placeholder="请输入你的邮箱"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-4" >
<input class=" form-control " type="submit" 提交/>
</div>
</div>
</form>
</div>
</body>
8.验证提示状态
在填写表单的时候，经常要提示用户其输入的内容是否合法，长度是否够用，再次输入的密码是否和第一次一致等验证方面的问题，不同的输入就需要不同的样式表现（如颜色、边框、提示框等）。BootStrap提供了.has-warning、.has-error、.has-success三种样式分别表示警告（黄色）、错误（红色）、成功（绿色）语境。使用了这些类后，输入框会变化边框颜色和阴影颜色。
9.控件大小
<input type="text" class="input-lg form-control" placeholder="大型输入框"/>
<input type="text" class="form-control" placeholder="正常输入框" />
<input type="text" class="input-sm form-control" placeholder="小型输入框" />
10.七种默认提供的按钮样式
<input type="button" class="btn btn-default" value="default(灰色)" />
<input type="button" class="btn btn-primary" value="primary(深蓝色)" />
<input type="button" class="btn btn-success" value="default(灰色)" />
<input type="button" class="btn btn-info" value="primary(深蓝色)" />
<input type="button" class="btn btn-warning" value="default(灰色)" />
<input type="button" class="btn btn-danger" value="primary(深蓝色)" />
11.按钮大小
<input type="button" class="btn btn-default btn-lg" value="default(灰色)" />
<input type="button" class="btn btn-primary" value="primary(深蓝色)" />
<input type="button" class="btn btn-success btn-sm" value="default(灰色)" />
<input type="button" class="btn btn-info btn-xs" value="primary(深蓝色)" />
12.响应式图片
可以通过为图片添加.img-responsive类让图片支持响应式布局。其实质是为图片设置了宽度100%，高度自适应和display：block属性，从而让图片在其父元素中更好地缩放。具体使用方式如下所示。
<img src="..." class="img-responsive" />13.图片形状
BootStrap提供了三种图片形状，他们使用非常简单，只需要在图片img元素上使用.img-rounded（圆角）、.img-circle（圆形）、.img-thumbnail（圆角边框）样式即可，具体代码如下所示：
<img src="image/1.jpg" class="img-rounded" alt="" />
<img src="image/1.jpg" class="img-circle" alt="" />
<img src="image/1.jpg" class="img-thumbnail" alt="" />
总结
1.BootStrap的使用场景：PC端，移动端，响应式网页，后台网页等。
2. 12栅格的工作原理及使用：列组合、列偏移、列嵌套、列排序
3.响应式栅格的使用终端临界值、缩写及使用。
超小屏幕（xs）手机（<768px）
小屏幕（sm）平板（≥768px）
中等屏幕（md）桌面显示器（≥992px）
大屏幕（lg）大桌面显示器（≥1200px）
- BootStrap中CSS全局样式的作用。
- 基础排版：标题、页面主体、强调文本、列表与传统的使用有什么不同？原理如何？
- 表单：内联表单、横向表单、验证提示状态、控件大小的使用。
- BootStrap中按钮的使用与传统按钮有何区别？
- 响应式图片和三种不同图片的形状
