Bootstrap 框架的介绍及安装

Bootstrap简介

Bootstrap 是基于 HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，所以它要求开发者具备 HTML、CSS、Javascript 的基础知识。其最大的优势是响应式布局，使得开发者可以方便的让网页无论在台式机、平板设备、手机上都获得最佳的体验。

     

Bootstrap的安装

通过官网下载 https://v3.bootcss.com，这里需要注意三种不同的下载方式针对具有不同技能等级的开发者和不同的使用场景，这里我们通常使用第一种下载方式用于生产环境的 Bootstrap

在以往的开发过程中，我常用到的安装方式就是以上这种方式，其余的几种安装方式在用到的时候会补充的

包含的内容

Bootstrap 提供了两种形式的压缩包，在下载下来的压缩包内可以看到以下目录和文件，这些文件按照类别放到了不同的目录内，并且提供了压缩与未压缩两种版本。下载包包含 CSS、JS、Font 三种文件夹

解压后的目录结构如下：

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文件夹如图：

Font文件夹如图：

注意：带有 min 的文件是压缩文件，我们在项目中一般引用的是压缩文件。带有 map 的文件是 CSS 源码映射表，可以在某些浏览器的开发工具中使用。

基本应用模板

Bootstrap 框架的使用就是把它的 CSS 文件和 JS 文件引入到所写的网页中去，这里我引用的是两种文件的压缩格式。 图中可以清楚的看到我在引入 Bootstrap 的 JS 文件之前就引用了 jQuery 库，是因为 Bootstrap 的所有 JavaScript 插件都依赖  jQuery，所以 jQuery 必须在 Bootstrap 之前引入，还有需要注意的是 Bootstrap 支持引入的 jQuery 库的版本必须是1.9.1以上的版本

工具

1、一般常见的 IDE 开发工具就可以编写 bootstrap 响应式页面，例如VS Code,WebStorm 

2、Bootlint: Bootstrap 官方所支持的 HTML检测工具,Bootlint 检测你的页面上的 Bootstrap 组件是否符合 Bootstrap 的 HTML 结构规则。