一．Bootstrap  概述

Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。

2010 年 6 月，Twitter内部的工程师为了解决前端开发任务中的协作统一问题。经历各种方案后，Bootstrap 最终被确定下来，并于 2011 年 8 月发布。经过很长时间的迭代升级，由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端的开源框架。

Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容 PC 端、PAD以及手机移动端的页面访问。

二．Bootstrap  特点

Bootstrap 非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：(1).跨设备、跨浏览器

可以兼容所有现代浏览器，包括比较诟病的 IE7、8。当然，本课程不再考虑 IE9 以下浏览器。

(2).响应式布局

不但可以支持 PC 端的各种分辨率的显示，还支持移动端 PAD、手机等屏幕的响应式切换显示。

(3).提供的全面的组件

Bootstrap 提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。

(4).内置 jQuery插件

Bootstrap 提供了很多实用性的 jquery插件，这些插件方便开发者实现 Web 中各种常规特效。

(5).支持 HTML5、CSS3

HTML5 语义化标签和 CSS3 属性，都得到很好的支持。

(6).支持 LESS 动态样式LESS 使用变量、嵌套、操作混合编码，编写更快、更灵活的 CSS。它和 Bootstrap 能很好的配合开发。

三．Bootstrap  结构

首先，想要了解 Boostrap 的文档结构，需要在官网先把它下载到本地。

Bootstrap主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)。

1.css 目录中有四个 css后缀的文件，其中包含 min 字样的，是压缩版本，一般使用这个；不包含的属于没有压缩的，可以学习了解 css代码的文件；而 map 后缀的文件则是css 源码映射表，在一些特定的浏览器工具中使用。

2.js 目录包含两个文件，是未压缩和压缩的 js 文件。

3.fonts 目录包含了不同后缀的字体文件。

四．创建第一个页面

我们创建一个 HTML5 的页面，并且将 Bootstrap 的核心文件引入，然后测试是否正常显示。

在页面中引入bootstrap的层叠样式表，和javascript文件即可。

五．学习的各项准备

1.开发工具，我们使用Sublime Text3作为Bootstrap的开发工具，并且安装了Emmet代码生成插件；

2.测试工具，除了常规的现代浏览器，其次就是作为移动端的测试工具，我们这里采用的是 Opera Mobile Emulator，和 Chrome 的移动 Web 测试工具。

3.所需基础，至少有 HTML5 第一季课程的基础，Bootstrap 内置了很多 jQuery 插件，虽然使用起来比 jQuery 或 JS 本身要简单的多，但如果有 jQuery 和 JS 课程的基础，那学习理解力就更加深入；

4.课程分辨率：基础课程，我们使用 1024 x 768 来录制，但某些特殊部分，比如响应式和项目课程，需要大分辨率录制，会采用 1440 x 900来录制。

二、 排版样式

一．页面排版

Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。

1. 页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为 1.428(即20px)；

段落元素被设置等于 1/2 行高(即 10px)；颜色被设置为#333。

//创建包含段落突出的文本

给当前p标签添加lead类名即可

2. 标题

//从 h1 到 h6

<h1>Bootstrap 框架</h1>

//36px

<h2>Bootstrap 框架<h2/>

//30px

<h3>Bootstrap 框架</h3>

//24px

<h4>Bootstrap 框架</h4>

//18px

<h5>Bootstrap 框架</h5>

//14px

<h6>Bootstrap 框架</h6>

//12px

Bootstrap 分别对 h1 ~ h6 进行了 CSS 样式的重构，并且还支持普通内联元素定义 class=(.h1 ~ h6)来实现相同的功能。

//内联元素使用标题字体

<span class="h1">Bootstrap</span>

注：通过 Firebug 查看元素还看到，字体颜色、字体样式、行高均被固定了，从而保证了统一性，而原生的会根据系统内置的首选字体决定，颜色是最黑色。在 h1 ~h6 元素之间，还可以嵌入一个 small 元素作为副标题，//在标题元素内插入 small 元素

我们发现 h1 ~ h3 下 small 元素的大小只占父元素的 65%，那么通过计算(查看 Firebug 计算后的样式)，h1 ~ h3 下的 small 为 23.4px、19.5px、15.6px；h4 ~ h6 下 small 元素的大小只占父元素的 75% ,分别为：13.5px、10.5px、9px。在 h1 ~ h6 下的 small 样式也进行了改变，颜色变成淡灰色：#777，行高为1，粗度为 400。

3. 内联文本

元素//添加标记，元素或.mark 类

删除的文本<del></del>

无用的文本<s></s>

 插入的文本<ins></ins>

下划线文本<u></u>

 三、 栅格系统学习要点：

1.移动设备优先

2.布局容器

3.栅格系统

一．移动设备优先

在 HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的 meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。

//分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放

栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多12列。通过一系列的行(row)与列(column)的组合来创建页面布局。工作原理如下：

1.“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

2.通过“行（row）”在水平方向创建一组“列（column）”。

3.你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

4.类似 .row和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

5.通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了 padding。

6.负值的 margin 就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

7.栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

8.如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

9.栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-*不存在， 也影响大屏幕设备。

栅格参数表如上图所示，栅格系统最外层区分了四种宽度的浏览器：超小屏(<768px)、小屏(>=768px)、中屏(>=992px)和大屏(>=1200px)。而内层.container容器的自适应宽度为：自动、750px、970px 和 1170px。自动的意思为，如果你是手机屏幕，则全面独占一行显示。//四种屏幕分类全部激活