第一章 Bootstrap简介
定义
Bootstrap官网给出的解释是：简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、简单。
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来
特点
Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。
第二章 Bootstrap初体验
安装
- 可以去其官网直接下载
- 也可以通过Bower工具安装，
bower install bootstrap - 使用国外的CDN加速服务
安装包的内容
Bootstrap 提供了两种形式的压缩包，在下载下来的压缩包内可以看到以下目录和文件，这些文件按照类别放到了不同的目录内，并且提供了压缩与未压缩两种版本。
Bootstrap 插件全部依赖 jQuery：
请注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入。
基本使用
Bootstrap 101 Template
你好，高精尖！
第三章 bootstrap全局CSS样式
概览
深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最
佳实践。
HTML5 文档类型
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。
...
移动设备优先
在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
为了确保适当的绘制和触屏缩放，需要在
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
-
.container类用于固定宽度并支持响应式布局的容器。
... -
.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。
...
栅格系统
栅格系统-介绍
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
媒体查询
媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。
Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
栅格系统-使用
栅格系统
1、列组合
.col-md-4
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-3
.col-md-6
.col-md-3
2、列偏移
列向右移动四列的间距
.col-md-4
列向右移动四列的间距
.col-md-3
.col-md-4
列向右移动四列的间距
发生行断裂
.col-md-4
列向右移动四列的间距
.col-md-3
.col-md-4
列向右移动四列的间距
.col-md-3
col-md-offset-3
col-md-4
3、列排序
.col-md-4
.col-md-8
.col-md-4
.col-md-8
4、列的嵌套
我的里面嵌套了一个网格
col-md-6
col-md-6
col-md-4
.col-md-4
我的里面嵌套了一个网格
col-md-4
col-md-4
col-md-4
第一个8列里面插入了8-4列的网格
col-md-8
col-md-4
第二个4列插入9-3列网格
col-md-9
col-md-3
表格
表格-介绍
Bootstrap 提供了一个清晰的创建表格的布局
表格-使用
表格的使用
基本的表格布局
名称
城市
Tanmay
Bangalore
Sachin
Mumbai
条纹表格布局
名称
城市
邮编
Tanmay
Bangalore
560001
Sachin
Mumbai
400003
Uma
Pune
411027
边框表格布局
名称
城市
邮编
Tanmay
Bangalore
560001
Sachin
Mumbai
400003
Uma
Pune
411027
悬停表格布局
名称
城市
邮编
Tanmay
Bangalore
560001
Sachin
Mumbai
400003
Uma
Pune
411027
精简表格布局
名称
城市
邮编
Tanmay
Bangalore
560001
Sachin
Mumbai
400003
Uma
Pune
411027
上下文表格布局
产品
付款日期
状态
产品1
23/11/2013
待发货
产品2
10/11/2013
发货中
产品3
20/10/2013
待确认
产品4
20/10/2013
已退货
表单
表单-介绍
表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同，而且不同的浏览器对表单控件渲染的风格都各有不同。
表单-使用
表单
基础表单
水平表单
内联表单
表单控件的验证状态
表单控件的禁用状态
按钮
按钮-介绍
为 、或 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
按钮-使用
按钮
图片
图片-介绍
图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：
- img-responsive：响应式图片，主要针对于响应式设计
- img-rounded：圆角图片
- img-circle：圆形图片
- img-thumbnail：缩略图片
图片-使用
图片
默认图片
圆角图片
圆形图片
缩略图
响应式图片
第三章 bootstrap组件介绍
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等
（1）Glyphicons 字体图标
字体图标--介绍
字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。
在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。
点击查看所有的字体图标
字体图标--使用
使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。
eg：
字体图标
（2）下拉菜单
下拉菜单--介绍
用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件（Dropdown）让它具有了交互性。
下拉菜单--使用
下拉菜单
（3）按钮组
按钮组--介绍
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。
按钮组--使用
按钮组
（4）按钮式下拉菜单
按钮式下拉菜单--介绍
把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让
按钮作为菜单的触发器了。
插件依赖
按钮式下拉菜单依赖下拉菜单插件 ，因此需要将此插件包含在你所使用的 Bootstrap 版本中。
按钮式下拉菜单--使用
按钮式下拉菜单
（5）输入框组
输入框组--介绍
通过在文本输入框 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group赋予.input-group-addon或 .input-group-btn 类，可以给 .form-control的前面或后面添加额外的元素。
输入框组--使用
输入框组
基本的输入框组
输入框组的大小
（6）导航
导航--介绍
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
导航--使用
在标签页上使用导航需要依赖 JavaScript 标签页插件
导航
基础样式
标签形tab导航
胶囊形(pills)导航
垂直堆叠的导航
自适应导航
二级导航
面包屑式导航
（7）导航条
（8）路径导航
（9）分页
（10）标签
（11）徽章
（12）巨幕
（13）页头
（14）缩略图
（15）警告框
（16）进度条
进度条--介绍
通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。
进度条--使用
进度条
基本进度条
彩色进度条
条纹进度条
动态条纹进度条
层叠进度条
正常层叠进度条
不良效果层叠进度条
层叠条纹进度条
带Label的进度条
进度条1
进度条2
（17）媒体对象
媒体对象--介绍
这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。
媒体对象--使用
媒体对象
默认媒体对象
系列：十天精通CSS3
全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！
媒体对象的嵌套
我是大漠
我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例
慕课网
大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布
W3cplus
W3cplus站上还有很多教程....
媒体对象列表
-
我是大漠
我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例
-
慕课网
我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例
-
W3cplus
我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例....