BootStrap学习笔记,优缺点总结
本篇约定Bootstrap简写为BT
BT的受欢迎程度是大家有目共睹的,用它可以快速的搭建出网站。很早就接触过这个框架,其中的栅格系统,css模块化以及js插件做的相当不错,由于工作中较少使用也一直没有好好梳理下,这篇文章就来好好分析一下这个系统。
BT虽然很好,但也不是没有缺点,由于框架很多都是模块化的,只能这么用,当您的网站比较多样化,界面复杂的话就不太适合使用,此时您需要大量重写代码,维护比较麻烦,此外这个系统的CSS内容也比较多,很多内容是根本用不到的,对于带宽不是很理想的情况下就会造成浪费,当然BT的css模块化还是相当不错的。下面总结几点本人觉得非常不错的点。
栅格系统(结构)
BT的优势之一就是可以根据用户屏幕尺寸调整页面,使其在各个尺寸上都表现良好。实现这个功能依赖两个东西,一个是view,另一个是max-width,min-width。
BT栅格系统的本质就是通过CSS3的媒体查询实现的,如果您熟练使用max-width等媒体查询属性的话就可以抛开BT,定制属于自己的响应式网站。BT将屏幕尺寸分为四类,超小屏幕<768px,小屏幕 平板>=768px,中等屏幕 桌面显示器>=992px以及大屏幕 大桌面显示器>=1200px。每一列又被平均分成了12格,每一个8.33333333%,12格就无限接近于100%。
这里要特别提一下的就是BT的盒模型,BT强制把所有元素的盒模型都设置成了border-box,这是IE首创的,用于混杂模式下显示网页,但W3C认为这个属性是个逗逼一直没采用,但最后发现自己才是逗逼,因此在CSS3中新增了这个属性。border-box盒模型的尺寸包含了padding+border+content ,content-box盒模型的尺寸仅仅包含content部分,设置padding,border还的重新计算包含块尺寸,使用上要比border-box麻烦的多。
类前缀使用是掌握栅格系统最重要的部分,类前缀分四个超小屏幕.col-xs-*,小屏幕 平板.col-sm-*,中等屏幕 桌面显示器>.col-md-*以及大屏幕 大桌面显示器.col-lg-*,以下代码即可实现不同屏幕呈现不同的显示方式:
1
2
3
4
|
<
div
class="row">
<
div
class="col-xs-12 col-md-6"></
div
>
<
div
class="col-xs-12 col-md-6"></
div
>
</
div
>
|
这段代码的意思是,在超小屏幕下分两行显示,桌面显示器则并行显示。更详细的应用大家可以参考BT的官方文档,这里就不再赘述。
CSS模块化(表现)
BT预先定义了很多CSS类,使用的时候直接给class赋予对应的类名即可,如text-left,text-align,.table等。最有代表性的就是btn类,BT定义了一个.bt的基础类,如果还想要其他样式可以在这个基础类上进行扩展,实现不同的视觉效果。
.btn类之所以典型在于他的样式定义,CSS大牛和菜鸟的区别表现在三个方面,文件大小,后期维护以及hack,大牛的CSS文件都比较小(具体多少为小要看项目的大小);后期维护容易,能快速定位,修改一个样式需要动的地方比较少;hack使用也少。相反菜牛则会出一个庞大的文件,后期维护一团乱麻,改一个样式需要改很多地方,hack,内联,important满天飞。
CSS很多值都是有相互依赖关系的,比如em,我们都知道em是相对单位,浏览器渲染的时候是必须明确到具体值的,因此必须进行计算。正因为这些相对单位我们才可以实现模块化,.btn类就是利用相对单位和字体大小之间的关系实现的,将按钮的line-height,padding,border-radius设置为相对单位,字体大小设置为绝对单位,需要大按钮的时候增加字体,需要小按钮的时候减小字体,案例代码如下:
1
|
.btn{
display
: inline-
block
;
padding
:
6px
12px
;
margin-bottom
:
0
;
font-size
:
14px
;
font-weight
:
400
;
line-height
:
1.42857143
;
text-align
:
center
;
white-space
:
nowrap
;
vertical-align
:
middle
;}
|
这里的line-height会根据font-size计算出相应的值,修改font-size按钮就会相应的变大变小,一个小小的改动就实现了视觉上的变化是不是很方便
BT的CSS系统令人称道的地方还有很多,想CSS更进一步的话可以研究下他的思路,您也可以单独提取出来放到自己样式库中,以后做项目的时候可以快速使用。
JavaScript插件(交互)
BT的JavaScript插件非常丰富,既可以用现成的也可以自己扩充,BT提供了一个集成板的BT.js您可以直接拿过来使用也可以单个使用引入*.js即可。
JS插件优秀的地方在于,哪怕是不懂JS的开发人员也可以使用,只要按照官方文档提供的格式写即可,比如模态框,您只要按要求设置好class,data-toggle,data-target即可,一句JS都不用写,是不是很方便。
BT的插件开发模式基本都是相似的,先定义一个类,实现主体功能,然后是个Plugin函数,再把这个函数扩展到JQuery原型上,最后通过委托的方式给特定元素绑定事件。
不足:
对IE兼容也存在不小的问题,BT将所有的元素盒模型都设置成了border-box,这是IE混杂模式下的盒模型,光这点就导致了不能兼容IE。此外还用到了大量的H5标签以及CSS3语法,这些语法标签兼容性方面同样存在不小的问题,当然网上存在很多兼容IE的办法,但需要引入其他文件,有些还不小,势必导致加载速度变慢,影响用户体验。
BT对IE6,7的兼容性肯定不好,对IE8的支持也需要一些额外的文件。
IE8的媒体查询需要response.js的配合才能实现
BT 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下,建议将此 <meta> 标签加入到你的页面中:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
按 F12 键打开 IE 的调试工具,就可以看到 IE 当前的渲染模式是什么。
最后:
BT官方文档列出了一个编码规范,值得各个开发团队参考,下面罗列一下比较重要的:
HTML
语法:
用两个控制代替制表符(tab)--这是唯一能保证在所有环境下保持一致的的展现方法
嵌套元素应当缩进一次(两个空格)
CSS
声明顺序:
相关属性声明应该归为一组,并按照下面的顺序书写:
1、定位 Positioning
2、盒模型 Box Model
3、格式排版 Typographic
4、视觉 Visual
5、杂项 Misc
由于定位可以从正常的文档流中移除元素,并且还能覆盖盒模型相关的样式,因此排在首位。盒模型排在第二,因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部或者是不影响前两组属性,因此排在后面
完整规范网址:http://codeguide.bootcss.com/#html-syntax
总结:
BT属于前端UI库,可以快速搭建前端页面,还可以使用saas重新设计组件,,比较适合前端一般的后端工程师,大中型企业用的不多。BT源码对于前端学习非常有必要。