第二章 初步使用Bootstrap

 一、Bootstrap环境安装

第一步：下载Bootstrap 

您可以从https://v3.bootcss.com/上下载 Bootstrap CSS、JavaScript 和字体的文件。

 

生产环境的Bootstrap是指正式提供对外服务的，一般会关掉错误报告，打开错误日志。简单讲就是所谓的线上，就是正式给用户使用的环境。

Bootstrap源码适用于开发环境：开发环境是程序猿们专门用于开发的服务器，配置可以比较随意， 为了开发调试方便，一般打开全部错误报告。简单讲就是项目尚且处于编码阶段，一般这时候会把代码放在开发环境中，不会放在生产环境中。

也可以从http://getbootstrap.com/上下载 Bootstrap CSS、JavaScript 和字体的文件。

Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。

Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。

第二步：下载好的文件解压后结构如下：

预编译的 Bootstrap

当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：

 

 

 如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.*），以及已编译压缩的 CSS 和 JS（bootstrap.min.*）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。

Bootstrap 源代码

如果您下载了 Bootstrap 源代码，那么文件结构将如下所示：

 

 

 ess/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。

dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。

docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。

第三步：使用Bootstrap实现响应式开发

1、什么是响应式？

　　利用媒体查询，让同一个网站兼容不同的终端（PC端，移动端）呈现不同的页面布局。

2，为什么要写自适应的页面（响应式页面）

　　众所周知，电脑、平板、手机的屏幕是差距很大的，假如在电脑上写好了一个页面，在电脑上看起来不错，但是如果放到手机上的话，那可能就会乱的一塌糊涂，这时候怎么解决呢？以前，可以再专门为手机定制一个页面，当用户访问的时候，判断设备是手机还是电脑，如果是手机就跳转到相应的手机页面，例如百度的就是，手机访问www.baidu.com就会跳转到m.baidu.com，这样做简直就是费力不讨好的活，所以聪明的程序员开发了一种自适应写法，即一次开发，处处显示！这到底是一个什么样的神器东西呢，接下来就揭晓它的神秘面纱。

4、通过一个使用了Bootstrap的案例了解使用Bootstrap实现响应式开发的文件结构

第四步:在HTML文件中加入<Metaname="viewport"content="width=device-width, initial-scale=1.0">

viewport：设置网页自适应移动端设备

device-width：device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例

第五步：引入<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet">

引入Bootstrap的css样式，可以引入下载到本地的Bootstrap中的css样式（也可以使用bootcdn提供的免费CDN加速服务）。

第六步：引入JQuert类库文件<scriptsrc="https://code.jquery.com/jquery.js"></script>

引入JQuery类库文件（也可以使用bootcdn提供的免费CDN加速服务）。

第七步：引入Bootstrap中的js文件<scriptsrc="js/bootstrap.min.js"></script>

引入bootstrap中的js文件（也可以使用bootcdn提供的免费CDN加速服务）。