虎说: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也是好东西(词穷)

 

申明:本文中的观点只是博主的观点,不代表博客园的以及其他大神的见解,

如果有疏漏那也是正常的,欢迎各行业大神

前来交流辩驳!

 

posted @ 2016-04-05 15:02  小老虎的牙  阅读(1300)  评论(0编辑  收藏  举报