1. bootstrap 概述

1.1 什么是 bootstrap？bootstrap 的作用？

Bootstrap，基于 HTML、CSS、JAVASCRIPT 的前端框架。

该框架已经预定义了一套 CSS 样式和与样式对应的 JS 代码。（对应的样式有对应的特效）

开发人员只需要编写 HTML 结构，添加 bootstrap 固定的 class 样式，就可以轻松完成指定效果的

实现。

作用：

1 Bootstrap 使得 Web 开发更加快捷，高效。

2 BootStrap 支持响应式开发，解决了移动互联网前端开发问题

课外了解知识：

该框架由 Twitter 公司的设计师 Mark Otto 和 Jacob Thornton 合作开发。

Bootstrap 基础入门使用的都是自带 CSS 样式，高级开发中需要使用 HTML5 、 CSS3 、

动态 CSS 语言 Less 进行自定义开发， JavaEE 课程中学习是“基础入门”。

中文官网： http://www.bootcss.com/

1.2 什么是响应式布局？响应式布局解决的问题？

响应式布局：一个网站的展示能够兼容多个终端(手机、iPad、PC 等)，而不需要为每个终端单独做一个展示版本。响应式布局：专为解决移动互联网浏览而诞生的。

作用：使得网站仅适用一套样式，就可以在不同分辨率下展示出不同的舒适效果，大大降低了网站开发维护成本，并且能带给用户更好的体验性

2. bootstrap 环境搭建

2.1 下载资源

2.2 目录结构

Javaee 使用 bootStrap 开发，主要使用 dist 发布版目录。

dist 目录结构如下：

bootstrap/

├── css/

│

├── bootstrap.css

//bootstrap 完整版的 CSS 文件。

│

├── bootstrap.css.map

│

├── bootstrap.min.css

//bootstrap 压缩版 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 完整版的脚本文件。

│

└── bootstrap.min.js

// bootstrap 压缩版的脚本文件。

└── fonts/

├── glyphicons-halflings-regular.eot

// 字体 （字体图标）

├── glyphicons-halflings-regular.svg

├── glyphicons-halflings-regular.ttf

├── glyphicons-halflings-regular.woff

└── glyphicons-halflings-regular.woff2

注：完整版用于源码学习，但因为文件大小问题，不适合网络间传递。

压缩版用于网络发布，压缩版和完整版的唯一区别，仅为压缩版将代码间的大量空格和回车换行删

除

掉了，节约了大量的空间，功能上完全相同，适用于网络间快速传递。但因为没有了空格和换行，

源代码

难以阅读。

2.3 bootstrap 的通用简洁模板

viewport：视口，即浏览器上网页的可视区域

视口作用：用于移动设备将 大型页面进行比例缩放显示。

2.4 扩展：完整模板

以下为完整模板，仅美工人员酌情使用

参考文档：http://v3.bootcss.com/getting-started/#template