关于bootstrap

2016-06-30  本文已影响46人  sarry


一、规范:http://codeguide.bootcss.com/#html-syntax

良好的写作规范不仅大大缩减页面代码,结构清晰,还能被搜索引擎搜索到,更可以提高易用性。然后就看到了上面的那篇文章,以下的几点我觉得是和我相悖的也正是要去思考的。

其中:

1、减少标签的数量

如下图,我一般都会在img外面加上一个标签,我会觉得这样比较好控制。而比较好的做法是不需要外层的标签。

减少标签的数量

2、JavaScript 生成的标签:

通过 JavaScript 生成的标签让内容变得不易查找、编辑,并且降低性能。能避免时尽量避免。

3、媒体查询(Media query)的位置:

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了,将来只会被大家遗忘。下面给出一个典型的实例。

媒体查询的位置

4、class命名

class命名

感觉以上几点是我常忽视的,所谓的规范可能不是真正的规范也没有对与错,只是保持良好的习惯和取长补短的心态是重要的。比如媒体查询那里,我现在的做法是把查询都写在css文档的最下方,时间长了确实不记得写的究竟是哪里的代码。但是又觉得写在相关样式附近会不会显得比较不清晰,比较纠结。其余的还有很多点,详情点击上面的链接查看。

二、兼容

1、bootstrap中的表格,其中有个隔行变色,是用css3的nth-child实现的,不被ie8兼容,慎用

2、在firework < 30的版本中为input元素创建的line-height属性,使按钮在fireworks浏览器上不能和其他按钮保持一致的高度

3、如果为button元素添加disabled属性,ie9及更低版本的浏览器会把按钮中的文本绘制为灰色,并带有恶心的阴影,目前没办法解决

4、在ie8-10中,设置为img-responsive(让图片支持响应式布局)的svg图像显示出的尺寸不均匀。解决方法:在出现问题的地方添加widht: 100%\9;因为bootstrap并没有给所有图像元素设置这一属性,因为这会导致其他图像出现格式错误。

5、img-rounded、img-circle、img-thumbnail等圆角的样式,同样ie8不支持,因为用的是css3的样式

上一篇下一篇

猜你喜欢

热点阅读