在学习类库、框架的时候，要思考的是，“既然这个这么简单，我学了这个后，和别人相比有什么优势呢。”所以在学习类库和框架的时候，重点是框架的思想、理念，这些东西学到了，才是自己的东西，毕竟前端变化太快了。
一套易用、优雅、灵活、可扩展的前端工具集--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模板
<meta name="renderer" content="webkit"> //360高速浏览
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">//chrome内核来渲染
<meta name="viewport" content="width=device-width, initial-scale=1">//初始化移动浏览显示
<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
说明：
1）content="IE=edge,chrome=1"
<meta http-equiv="X-UA-Compatible" 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
网友评论