Bootstrap学习要点：
1.Bootstrap 概述
2.Bootstrap 特点
3.Bootstrap 结构
4.创建第一个页面
5.学习的各项准备
本节课我们主要了解一下Boostrap 历史、特点、用途，以及为什么选择Boostrap 来开发我们的Web 项目。
一．Bootstrap 概述
Bootstrap 是由Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地构建基于PC 及移动端设备的Web 页面需求。
2010 年6 月，Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历各种方案后，Bootstrap 最终被确定下来，并于2011 年8 月发布。经过很长时间的迭代升级，由最初的CSS 驱动项目发展成为内置很多JavaScript 插件和图标的多功能Web 前端的开源框架。
Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容PC 端、PAD以及手机移动端的页面访问。
Bootstrap 下载及演示：
国内文档翻译官网：http://www.bootcss.com
二．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下载地址如下：
Bootstrap 下载地址：http://v3.bootcss.com/ (选择生产环境即可，v3.3.4)
解压后，目录呈现这样的结构：
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)。
1.css 目录中有四个css 后缀的文件，其中包含min 字样的，是压缩版本，一般使用这个；不包含的属于没有压缩的，可以学习了解css 代码的文件；而map 后缀的文件则是css 源码映射表，在一些特定的浏览器工具中使用。
2.js 目录包含两个文件，是未压缩和压缩的js 文件。
3.fonts 目录包含了不同后缀的字体文件。
四．Bootstrap创建第一个页面
我们创建一个HTML5 的页面，并且将Bootstrap 的核心文件引入，然后测试是否正常显示。
//第一个Bootstrap
<meta charset="UTF-8" />
<title>
Bootstrap 介绍
</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<button class="btn btn-info">Bootstrap</button>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
五．学习Bootstrap的各项准备
1.开发工具，我们使用Sublime Text3 作为Bootstrap 的开发工具，并且安装了Emmet代码生成插件；
2.测试工具，除了常规的现代浏览器，其次就是作为移动端的测试工具，我们这里采用的是Opera Mobile Emulator，和Chrome 的移动Web 测试工具。
3.所需基�。辽儆蠬TML5 第一季课程的基�。珺ootstrap 内置了很多jQuery 插件，虽然使用起来比jQuery 或JS 本身要简单的多，但如果有jQuery 和JS 课程的基�。茄袄斫饬透由钊耄�
更新时间：2016-03-18
