Bootstrap实例1---简介与配置

本系列博客是用bootstrap实现的一个小型的展示网站，使用的是bootstrap的 v3.3.7 版本，仅仅用于生产环境的压缩包。实例将bootstrap的基本用法都包含在其中，也算是有一个较为系统的了解。   

bootstrap简介

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目。总结起来就是：框架好，方便开发，开源，很受欢迎。

---

bootstrap的基本配置

1.从官网上下载bootstrap的官方文档官方地址点击这里
如果嫌看英文太麻烦，也可以上bootstrap的中文网中文网站点击这里
2.下载的时候会有三个选项如下所示：
用于生产环境的 Bootstrap
编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。
Bootstrap 源码
Less、JavaScript 和 字体文件的源码，并且带有文档。需要 Less 编译器和一些设置工作。
Sass
这是 Bootstrap 从 Less 到 Sass 的源码移植项目，用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入。
如果只是想引用的话，下载第一个就可以了；如果想研究一下它的源码那就下载第二项；第三个就是更加高级的用法了，暂且不谈。
3.下载到本地解压之后在bootstrap-3.3.7-dist文件夹中会有三个文件夹css、fonts和js；其中css中包含的是bootstrap的基本css样式，文件目录如下图：

js文件文件夹中包含boostrap提供的js的相关动画等插件，fonts文件夹中包含bootstrap提供的图标、字体等样式。（在下载完bootstrap之后，记得下载JQuery文件，因为bootstrap的js是建立在JQ的基础之上的，并且在项目中引用bootstrap的js文件之前要先引入JQ的文件）。
4.在hbuilder编辑器中新建一个项目test，将bootstrap-3.3.7-dist中的三个文件夹复制到项目中，即可完成bootstrap的基本配置。最后的目录结构如下图所示：