🔎这里是【JQuery】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【JQuery】 目前主要更新JQuery，一起学习一起进步。
👀本期介绍
本期主要介绍扩展BootStrap入门——知识点讲解(一)
文章目录
1. bootstrap 概述
1.1 什么是 bootstrap？bootstrap 的作用？
1.2 什么是响应式布局？响应式布局解决的问题？
2. bootstrap 环境搭建
2.1 下载资源
2.2 目录结构
2.3 bootstrap 的通用简洁模板
2.4 扩展：完整模板
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 下载资源
中文官网地址： http://d.bootcss.com/bootstrap-3.3.5.zip
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
