Bootstrap学习总结

详解Bootstrap框架:
首先,我们要知道为什么使用框架的原理。CSS框架是一系列CSS文件的集合体,包含了基本的元素重置,页面排版,网络布局,表单样式,通用规则等代码块。使用CSS框架,可以简化工作,提高工作效率。
Bootstrap=响应式设计+css组件+jQuery1.01+JavaScript插件+基础布局组件+12栅格系统
原因大概如下:
随着H5,CSS3的快速火起来,用户体验尤为重要,移动设备用户的庞大,不容小视,而恰恰,Bootstrap就是为移动设备而开发的框架。他虽然是以移动设备优先,倾向于Mobile,但不是移动设备框架。
它由规范的CSS,JavaScript插件构成,其最大的优势是响应式布局,CSS媒体查询(Media Query)的功劳,使得开发者可以方便的让网页无论在台式机,手机上都获得最佳的体验。 
1.抽象出常用的css样式,高再可用性,高移植性
2.有固有的定义,详细的文档及开发特点
3.高兼容性,可以兼容流行的浏览器
4.以css为主,但不一定全部是css,可能有一些js(或者其他)脚本用于兼容浏览器
 Bootstrap框架可以分为三类:
第一:预处理脚本:
Bootstrap的源码是基于最流行的CSS预处理脚本-Less和Sass开发的。你可以采用预编译的CSS文件快速开发,也可以从源码定制自己需要的样式。例如。如果你页面上有很多同样的效果。只需要写一个效果类。然后让用到的地方去继承他。就不需要再写了。
第二:一个框架,多种设备
你的网站和应用能在Bootstrap的帮助下通过同一个代码快速,有效设配手机,平板、PC设备,这都是CSS媒体查询的功劳。
第三:特效齐全
Bootstrap提供了全面、美观的文档、可以找到关于HTML元素,HTML和CSS组件、jQuery插件方面的所有详细文档。
JavaScript插件Bootstrap自带了13个jQuery插件,这些插件为Bootstrap中的组件赋予了“生命”。其中包括:模式对话框、标签页、滚动条、弹出框等。 还有更重要的一点是,Bootstrap是完全开源的。它的代码托管,开发,维护都依赖GITHub平台。
其次:
我们看下使用Bootstrap的利弊:
 优点:
a) 提高开发效率。
b) 规范名称定义,便于维护。
c) 规范项目开发流程 d)css代码更清晰、简单。html代码更合理。
e) 大规模项目中可以减少用户下载
f) Bootstrap 为屏幕、排版和链接设置了基本的全局样式


 缺点:
a) 学习成本提高。你需要了解整个框架,需要阅读框架的文档。
b)css框架对于一个小项目等页面来说很臃肿。框架中可能有大部分你用不到的代码。
c)可能会无法帮助你的技术提高。太依赖框架,以至于很难排除bug。包括框架中本身就带的bug。
d) 选择自己需要的框架与开发框架都很痛苦。写到后面发现越来越不灵活,越来越臃肿。
1、页面外部引用样式过多。譬如关于ul的margin定义,在格式化的css中会声明为0,而在基本样式的css中又可能会声明margin:5px 10px;所以在Yslow中会出现多次定义。
2、组件复用性的考量。譬如表单定义的css中定义了所有表单的修饰,而假定在注册这个页面中只是需要这个css的百分之三十。那是否应切割出去那不要的百分之七十?综合以上的二个问题,个人认为解决的方式便是封装,让该有的有,不该有的没有。尽量减少http连接数和css的大小。但如果彻底是这样做的话,css的复用性又会变得很差,后期手工的封装会很痛苦。
基于Bootstrap版本的使用:
目前使用较广的是版本2和3,其中2的最新版本是2.3.2,3的最新版本3.3.5。
版本4最主要变化是:
1.从Less迁移到Sass
(为什么?因为那么Sass和LESS是一样的,只是CSS预处理器中的一种而以。但是Less相对来说,语法太过严格,所以使用的人也就少了。)
2.改进网格系统
3.缺省弹性框
4.支持 Dropped wells,thumbnails,and panels for cards
5.合并所有HTML resets到一个新的模块中:Reboot 全新自定义选项
6.不再支持IE8
7.重写所有的JavaScript插件
8.改进工具提示和popovers的自动定位
9.改进文档
10.其他大量改进

你可能感兴趣的:(H5)