开发者学堂课程【移动 Web 前端开发：Bootstrap- 起步】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8441
Bootstrap-起步
内容介绍
一、简单介绍 Bootstrap
二、Bootstrap 的起步
一、简单介绍 Bootstrap
1.下载 Bootstrap
先了解 bootstrap 是什么，bootstrap 里有什么？从官方网站上看——bootcss.com 当中的 bootstrap3 中文文档。
这是进去 3.0 这个版本的 bootstrap 第一个页面，可以看到 bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局，移动设备优先的 WEB 项目。说明 WEB 项目包含了 HTML、CSS 和 JS。
点开下载 Bootstrap，有下载的三个版本，一个是生产环境的，一个是源码环境，另外一个还是源码。为什么会有两个源码？用于生产环境的是直接拿出来用，源码一种是用 Less 写的，另一种是用 Sass 写的这两个都是比 css 更高级一点的进行编译。如果要用于开发，就选用生产环境的 Bootstrap。
2.为所有开发者所有应用场景而设计
点击返回往下看，Bootstrap 是让前端开发更简洁，更容易上手，所有的设备都可以适配，所有的项目都适用，场景非常广。
在学习 Bootstrap 时可以看到一个叫做 Sass，一个叫做 Less。
l 预处理脚本:虽然可以直接使用 Bootstrap 的 c ss 样式表，但不要忘记 Bootstrap基于最流行的 css 预处理脚本，less 和 sass 开发的。
l 一个框架、多种设备:但是一定要明白‘这一切都是css媒体查询的功劳’，意味着用的框架，但其原理还是媒体查询，它是我们的基础。
l 特性齐全:Bootstrap 提供了全面、美观的文档。能在这里找到关于 HTML 元 素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。证明 Bootstrap 开发出来的组件是基于 jQuery。
l 点击查看 GitHub 项目主页，GitHub 它是一个开源项目的平台。开源项目:免费的源码开放，市面上所有看到的开源项目一般都会有它的存放地址，是 Bootstrap 的源码地址
点击最右边的 Clone or download 下载，有个 Download ZIP 文件，
点击下载源代码
3.基于 Bootstrap 构建的网站
点开逛一逛，里面有很多的网站，这里所有的网站都是基于 Bootstrap 进行开发的，这些网站都是响应式战略。之前的京东是移动战略，这些网站可以适配多种终端，打开一个国内的
这个网站也是用于 Bootstrap 进行开发的。怎么验证响应式站点？切屏幕能正常浏览里面的网页内容，并没有缺失，导航栏可以点开，拉开时导航栏消失不见。
二、Bootstrap 的起步
先起步，再看全局 css 样式、组件、最后再看 Javascript 插件是什么、看完才能了解 Bootstrap 里有什么。了解完 Bootstrap 再拿过来用，直接开发站点，前提得知道 Bootstrap 有什么，否则在开发时根本不知道用哪个。
1. 下载
有三种环境，首先要用生产环境，下载后在本地上用，也可以不下载，使用在线的方式。但是现在没网络，还是要下载过来。
Bower、npm 属于包管理器，
2.预编译版
当我们下载完成之后，下载过来的文件有哪些？
bootstrap/
CSS/
bootstrap.css
bootstrap.css.map
bootstrap.min.css
bootstrap.min.css.map
bootstrap-theme.css
bootstrap-theme.css.map
bootstrap-theme.min.css
bootstrap-theme.min.css.map
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，
l css 是 Bootstrap 的核心项目库，有未压缩的，压缩的，min，还有 theme 主题。Bootstrap 除了现在看到的主题，打开一个组件翻到最下面看到一个下拉菜单。再拉到下面有一个主题预览点击主题预览左边文字有变化再看界面有一个立体的感觉。
l js 里包含 Bootstrap 的核心样式，既然包含了js插件肯定有js文件。
l fonts 说明 Bootstrap 自带字体包含的字体样式。
3.源码代码结构
可以看到里面有 less 目录，放的 less 的一些源码文件
4.安装 Grunt
现在直接使用 Bootstrap 没有必要安装 Grunt，这是一个自动化流程管理工具Bootstrap 编译时会用它。
5.基本模板
l 需要一个 Bootstrap 的开发环境，那么必须把基本模板建出来。以后所有的页面都是基于这个模板来做
<!--html5文档声明-->
<!DOCTYPE html>
<!--使用中文简洁语言申明-->
<html lang="zh-CN">
<head>
<!--字符编码-->
<meta charset="utf-8">
<!--指明当前的IE浏览器按最新的渲染引擎来渲染页面-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口：视口得宽度和设备一致 缩放比默认是1.0 不运行用户自行缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<!--上述三个 meta 标签必须放在最前面，任何其它的内容都必须跟随其后！-->
<!--页面的解析顺序从上到下 优先告诉浏览器用最新的引擎来渲染并且告诉浏览器这是一个移动端页面-->
<title>Template</title>
<!-- 引入 Bootstrap 的核心样式库-->
<link href="../lib/bootstrap/css/bootstrap.min.css"rel="stylesheet">新建一个 lib，在 lib 里建一个 bootstrap，下载过来有源码，在文件 lib 里有 bootstrap-3.3.6-dist，把里面三个文件复制到 bootstrap 里
<!--Html5标签和媒体查询在 IE8 下浏览存在兼容问题，但是通过 HTML5 shim and Respond 两解决-->
<!-- HTML5 shim and Respond.js for IE8support of HTML5 elements and media queries -->
<!--注意：不能以本地形式打开，可以用 http 形式，webstorm 形式打开-->
<!-- WARNING: Respond,js doesn't workif you view the page via file:// -->
<!--html5shiv H5标签兼容-->
<!--respond 媒体查询兼容-->
<!--条件注释在 IE9 下生效-->
<!--[if It IE 9]>
<scriptsrc="../lib/html5shiv/htm15shiv.min.js"></script>
<scriptsrc="../lib/respond/respond.min.js"></script>还需要在 lib 下添加html5shiv 和 respond，打开文件html5shiv3.7.3里的 dist 里面的复制到html5shiv中;找到 Respond-1.4.2中的 dest，将其复制到 respond 中
<![endif]-->
</head>
<body>
<h1>你好，世界!</h1>
<!--jQuery 是 bootstrap 需要依赖的库-->在 lib 下新建一个 jquery，在 lib 文件中打开 jQuery 把里面的复制到 jquery 中去
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<scriptsrc="../lib/jquery/jquery.min.js"></script>
<！引入 bootstrap 需要依赖的库-->
<!-- Include all compiled plugins (below), or include individual files as needed-->
<scriptsrc="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
l bootstrap 环境已经搭好页面里可以使用 bootstrap 组件了，在 JavaScript 中拿一个组件来用例如：模态框
<div class="modal fade" id="myModal” tabindex="-1" role—"dialog" aria-labelledby="myModalLabel”>
<div class="modal-dialog"role-"document">
<div class="modal-content">
<div class="modal-header")
<button type="button"class="close" data-dismiss="modal” aria-label="Close"><span aria hidden="true">×</span></button>
<h4 class-"modal-title"id-"myModalLabel">hadal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button"class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btrbtn-primary">Save changes</button>
</div>
</div>
</div>
</div>
将<h1>你好，世界!</h1>替换掉，再刷新。点击按钮就有模态框功能。
