Bootstrap框架
1.1 boostrap的简介：
- 什么是框架：在现有的语言基础上，由第三方厂商开发的一些通用的功能组件，用来提高开发效率，降低开发难度。开发者只需要利于这些框架就可以开发出专业的应用程序。
bootstrap中文官网：http://www.bootcss.com/
2.2 bootstrap的作用：
- 用于前端的开发，提高开发前端效率，降低难度。
- 基于技术HTML、CSS、JavaScript
2.3Bootstrap的优势：
- Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。
- 移动设备优先：自Bootstrap3起，框架包含了贯穿整个库的移动设备优先的样式。
- 浏览器支持：Bootstrap支持所有的主流浏览器。如：Internet Explorer、Firefox、Opera、Google Chrome、Safari。
- 容易上手：只要您具备HTML和CSS的基础知识，您就可以开始学习Bootstrap。
- 响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机。
2.4 响应式设计
2.4.1 传统的网页：
如：https://m.jd.com 手机版京东 https://www.taobao.com手机版淘宝
- 淘宝网址在电脑上的效果
- 淘宝网站在手机上的效果
2.4.2 响应式设计：
如：索尼 http://www.sony.com 苹果中国：http://www.apple.com.cn
- 苹果网站在电脑上的效果：
- 苹果网站在手机上的效果：
- 响应式布局的特点：网页会根据设备分辨率的不同，会自动适配网页的宽度。
- 主要有四类设备：微：手机、小：平板 中：电脑 大：电视机
3.1 bootstrap的使用
3.1.1 Bootstrap包含的内容：
- 全局CSS:基本的HTML元素均可以通过class设置样式并得到增强的效果。
- 组件：可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
- JavaScript插件：jQuery插件为Bootstrap的组件赋予了“生命”。
3.1.2 Bootstrap的下载：
http://www.bootcss.com,下载用于生产环境的Bootstrap即可。
地址：https://v3.bootcss.com/getting-started/#download
3.1.3 Bootstrap的目录结构：
3.1.4 压缩版和标准版的区别：
- 功能上完全一样，标准版可读性强，有注释，有缩进，有空行。
- 压缩版，没有可读性，没有空行，没有注释。所有的变量名都很短。
3.1.5 目录下的字体图标：
- 图标下面的文字是这个图标的类名
3.2 创建Bootstrap模板
3.2.1 创建Bootstrap模板文件的步骤：
- 只需要创建一次，以后可以直接复制这个模板来使用。
- 将Bootstrap中解压出来的三个文件夹：css、js、fonts复制到工程中。
- 将jquery-3.2.1.min.js复制到js文件夹下
- 创建一个HTML文件，将“起步->基本模板”中的代码复制到HTML中。
3.2.2 模板的详细解释：
4.1 栅格系统组成：
- Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的格子中。
| Bootstrap栅格系统的特点 | |
| 1）“行（row）”必须包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（aligment）和内间距（padding）。 | |
| 2）通过“行（row）”在水平方向创建一组“列（column）” | |
| 3）你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）"的直接子元素 | |
|
4）栅格系统中的列是通过指定1到12的值来表示其跨越的范围。 例如，三个等宽的列可以使用三个 .col-xs-4 来创建 |
|
| 5）如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。 |