6 Bootstrap框架(UI库)

插件：基于页面元素 ->使用流程：引入CSS样式、JS插件文件，聚焦点为配置项，例如swiper.js      组件：往往直接引入“标签”使用，其更聚焦页面的“构成部分”，整体性较好 ->使用流程：引入组件库 控件：表单控件、按钮空间等；                                                                                                            - ->>插件、组件的使用：完成“代码”复用，提高开发效率，同时其也是“模块化”开发很重要的思想

1、Bootstrap：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单 ->其源码基于Less，Sass、jQuery -> 聚焦点便是开发“响应式网页”；

- - - >>>目前其更新到Bootstrap4.0，同时5.0也即将发布，官方宣布5.0及以后的版本不再依赖jQuery，建议先使用Bootstrap3.0版本；

(1).下载：生产环境的Bootstrap已经解析成浏览器可识别的CSS、JS(jQuery)；源码基于Less、Sass，需要Less编译器和设置工作 ->建议使用“生产环境”版本，或者直接使用CDN引入；                Bootstrap所有的JavaScript插件都依赖于jQuery，因此必须引入jQuery;

(2).Bootstrap框架学习聚焦点：全局CSS样式、组件、JavaScript插件

[1].全局CSS样式 ->class类名的操作

栅格系统：.container/.container-fluid > row >div.col-sm-6;//行(row)必须包含在.container(固定宽度)或 .container-fluid(100% 宽度)中，以便为其赋予合适的排列(aligment)和内补(padding); 实际也可以选择自行操作；                                                                                                                                    - - ->>> 栅格系统底层实现就是“媒体查询”

[2].组件

字体图标的使用：<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>

[3].JavaScript插件 ->使用data 属性 API

可单个引入(使用 Bootstrap 提供的单个 *.js 文件)，或者一次性全部引入(使用 bootstrap.js 或压缩版的 bootstrap.min.js)；

2、Bootstrap框架响应式开发 -> flex布局(聚焦点:移动端布局)

前端布局发展(四代)： table布局 -> div+css布局 -> flex布局 -> grid布局