bootstrap学习（框架）

在学习类库、框架的时候，要思考的是，“既然这个这么简单，我学了这个后，和别人相比有什么优势呢。”所以在学习类库和框架的时候，重点是框架的思想、理念，这些东西学到了，才是自己的东西，毕竟前端变化太快了。

一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。

1、简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。
2、基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。
3、自定义JQuery插件，完整的类库，基于Less等。

一、对bootstrap的思考

bootstrap 的适用场景是项目没有 UI 设计的情况，就意味着需要开发者自己去写页面样式。
前端开发者在使用 bootstrap 时，绝不是学习类名、记忆类名。而是学习bootstrap 的代码组织方式。

二、Bootstrap2和3的区别

Bootstrap3之于Bootstrap2最大的变化是移动优先、扁平化设计、以及浏览器兼容性方面。

1、移动优先角度

Bootstrap3也开始在移动端发力。PC、平板以及手机上同时有足够优秀的视觉效果与用户体验。

2）设计风格角度

Bootstrap2：渐变凹凸风格
Bootstrap3：扁平化设计风格

3）浏览器兼容性角度

Bootstrap2：兼容IE8甚至是IE7和IE6，虽然它自身在IE6的效果也并不完美。
Bootstrap3：高端大气上档次地选择只需要兼容高级浏览器。

bootstrap3：
1）全新设计的风格和可选主题、2）面向移动优先和响应式设计、3）全新定制、4）默认更好的盒子模型、5）超强的表格系统、6）重新了 JavaScript 插件、7）新的图标字体、8）导航条的大改进、9）模态对话框更好的响应式效果、10）组件的维护（新增和删除）、11）文档的完善、12）不再支持 IE7 和 Firefox 3.6

1、HTML模板

//360高速浏览
//chrome内核来渲染
//初始化移动浏览显示

说明：

1）content="IE=edge,chrome=1"

如果安装了GCF，则使用GCF来渲染页面，如果未安装GCF，则使用最高版本的IE内核进行渲染。

Google Chrome 浏览器内嵌框架 – GCF
谷歌做了个外挂：Google Chrome Frame(谷歌内嵌浏览器框架GCF)。这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核。

2）html5shiv.js
bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签

3）respond.min.js
为使IE6、7、8版本浏览器兼容css3样式

2、栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

col-md-8    col-md-4

3、媒体查询

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。
Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。

4、bootstrap组件介绍

1）字体图标
Glyphicons 字体图标  包括250多个来自 Glyphicon Halflings 的字体图标

2）下拉菜单
用于显示链接列表的可切换、有上下文的菜单。
Dropdown

3）按钮组
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。

4）按钮式下拉菜单
把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了

5、Bootstrap支持的JavaScript插件

1）模态弹窗（Modal）：对应的插件是modal.js
2）下拉菜单（Dropdown）：对应的插件是dropdown.js
3）选项卡（Tab）：对应的插件是tab.js
4）提示框（Tooltip）：对应的插件是tooltip.js
5）弹出框（Popover）：对应的插件是popover.js
6）警告框（Alert）：对应的插件是alert.js
7）按钮（Button）：对应的插件是button.js
8）折叠/手风琴（Collapse）：对应的插件是collapse.js
9）图片轮播（carousel）：对应的插件是carousel.js
10）滚动监听（Scrollspy）：对应的插件是scrollspy.js
11）动画过渡（transitions）：对应的插件是transition.js
12）自动定位浮标（Affix）：对应的插件是affix.js