🔎这里是【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 的作用？

课外了解知识：

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

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

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

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

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