虎说:bootstrap源码解读(重置模块)
------<!--action-->------
开场show:前不生“不犹豫”,后半生“不后悔”。今天又逃课,我不后悔
素材:推特公司的前端框架bootstrap(下称bt),解读源码(当然你也可以在官网分分钟下载一个源码包应用学习)
介绍:不介绍,著名的流行的框架,总有一大推的介绍
思考(或许会打自己脸):bt给我的感觉就像是人家写好的模板,虽然是顶级公司写的,但总感觉很别扭,就像厨师使用的是大师配置好,现成的高汤,料汁,只是在应用层。优秀的前端不应该自己配置调料吗,最好的办法,就是偷学,偷学,手里拿到人家不外传的菜品祖传秘制蜜汁,品尝分析,之后自成一派,成为人生赢家(有没有人家的感受),当然这是在厨师界,秘制不外传。
理解毕竟是关乎吃饭的家伙事,被人学会怎么办,在前端,风气不一样,就讲究开源,所以咱赚了,把bt当成一个学习的途径,品尝大牛配置的汤料,阅读优秀的代码,是happy的,废话讲完....
------<!--片头-->------
本文由:小老虎中午喝的蛋花汤,
电脑旁5cm长铅笔,
bt还有normalize赞助
bt的重置模块直接使用的是normalize(他是什么?一个优秀的浏览器默认样式重置组件也好,文件也好)
如果你有兴趣,直接搜索在文件中引入,或者使用sass和compass更加灵活运用它,说起compass就不得不提reset和normalize的关系(这里埋下伏笔)
使用bt做项目,既会引入normalize,他是嵌入在bt文件中的,在源码开头即可见
这里可能会出现代码冗余的现象,也就是说,有些重置并不需要,你也可以修改源代码,除了这个没有其他更好的方法
我在这里对compass的reset模块,和本文主角进行些许对比
重置宗旨“保证所有浏览器的统一”
1.normalize有(下称nm)
页面重置组 | block组 | inline-block组 | 文字格式化组 | 表单重置组 | 表格重置组 |
2.reset有(下称rs)
去边距组 | 去文字样式组 | block组 | 去边框组 |
整体模块:
nm对body和html进行了边距,字体,字号,行高的重置
疑惑:其中定义html字号为10号,body字号定义为14号,明显页面中的字号会继承body的,于是html的字号等于多余(个人之见)
在测试中也是如此,改变html的字号,并不会对页面中的文字产生影响()
html { font-size: 10px; /*是不是10px,无意义*/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-family: sans-serif; /*无意义*/ }
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px; /*是不是14px,继承者的爸爸*/
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
页面中的文字会继承那个呢,请看大屏幕
------------------分隔线--------------------
疑问:正常情况下,会禁用body的字号吗,或许是nm维护者设置的第二道防线
说明:这里html{font-size:10px}设置无意义,
还有html的字体设置{font-falimy:sans-serif;}也无意义,我真的想不出哪里有应用场景
-------<!--尿点-->------
block组:
你说html标签中有哪些是display:block(块级元素)的,div是不是,p是不是,ul ol dl是不是,都是!!然而新元素呢
div在浏览器中,默认是block,浏览器自动添加,看下面的大屏幕,
咱啥都没有干,只在html中添加div还有header,article(没有样式表)
在firebug中发现
神奇:居然自动添加显示属性,里外呼应,正好
于是又出现疑问:既然浏览器会自动默认这些元素为block显示属性,为什么需要再加上去能呢,代码又冗余
article,aside,details,figcaption,figure,footer,header,main,nav,section,summary {display: block;}/*源码*/
再看上面的源码就会发现,有增无减,多了三四个标签,也许这就是需要加上去的理由
再说:列表中的标签大多不需要更改display值,所以为了加强强度,和保证浏览器的统一性,加上了这句话
------<!--尿点-->------
inline-block组:
是啥?摆明了是不想兼容ie6,7,啥,那俩玩意儿连video都不支持,好吧,看来他已经被抛弃
需要ie6 7这俩古董兼容inline-block的话,是这样写的
{display:inline-block; *display:inline; *zoom:1;}
而nm是这样的
audio,canvas,progress,video {display: inline-block;vertical-align: baseline;}
所以,国外就是好,把时间放在更好的属性研究上面
疑问:为什么没有inline组呢,难道是看不起内联样式?
OH,别烦我好吗(待研究)
------<!--尿点-->------
文字格式化组:
并没有说头,个人喜好,随意定制,
原谅我这一生不羁放纵爱自由
表单重置组:
这里只对基本的属性做了重置,看了半天,也说不出一个花来,行高,边距
对不同属性框的重置,搜索框,数字框,单选框,复选框
如果你想有更深的体会的话,还是自行下载bootstrap源代码学习,并且他完全不要钱
表格重置组:
表格的使用场景,布局,数据,反正我就只试过这两个用途
说起布局,我就想到使用表格做表单的布局,说起来有点绕,但是以前有小伙伴说,为了语义化,所以不使用table做表格布局,我当然同意
不过表格输入框这种等于是小布局,就算是使用语义化,也没有适合的标签可以使用
见得最多的是使用div ul ol dl做表单的布局
看大屏幕:
网易注册页,表单使用的是dl,壮观,如果使用table布局呢,我就说,有一次我还用了呢
咱大汽车之家
壮观的tr,不管怎么样,咱之家还是年收入过亿
(以后深入探讨使用table做表单布局)
------<!--没有尿点 end-->------
尾部:normalize是一个好东西,bootstrap也是好东西(词穷)
申明:本文中的观点只是博主的观点,不代表博客园的以及其他大神的见解,
如果有疏漏那也是正常的,欢迎各行业大神
前来交流辩驳!