虎说:bootstrap源码解读(重置模块)

------------

开场show:前不生“不犹豫”,后半生“不后悔”。今天又逃课,我不后悔
素材:推特公司的前端框架bootstrap(下称bt),解读源码(当然你也可以在官网分分钟下载一个源码包应用学习)
介绍:不介绍,著名的流行的框架,总有一大推的介绍
思考(或许会打自己脸):bt给我的感觉就像是人家写好的模板,虽然是顶级公司写的,但总感觉很别扭,就像厨师使用的是大师配置好,现成的高汤,料汁,只是在应用层。优秀的前端不应该自己配置调料吗,最好的办法,就是偷学,偷学,手里拿到人家不外传的菜品祖传秘制蜜汁,品尝分析,之后自成一派,成为人生赢家(有没有人家的感受),当然这是在厨师界,秘制不外传。
理解毕竟是关乎吃饭的家伙事,被人学会怎么办,在前端,风气不一样,就讲究开源,所以咱赚了,把bt当成一个学习的途径,品尝大牛配置的汤料,阅读优秀的代码,是happy的,废话讲完....

------------
本文由:小老虎中午喝的蛋花汤,
电脑旁5cm长铅笔,
bt还有normalize赞助

871918-20160405135753875-451464896.jpg

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);<br>   
font-family: sans-serif;         /*无意义*/}<br>body {<br>  
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;<br>  
font-size: 14px;          /*是不是14px,继承者的爸爸*/<br>  
line-height: 1.42857143;<br>  color: #333;<br>  
background-color: #fff;<br>}

页面中的文字会继承那个呢,请看大屏幕

871918-20160405133106375-947647707.jpg

------------------分隔线--------------------

871918-20160405133120312-1255376255.jpg

疑问:正常情况下,会禁用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中发现

871918-20160405135050359-986511101.jpg
871918-20160405135102187-762884269.jpg

神奇:居然自动添加显示属性,里外呼应,正好
于是又出现疑问:既然浏览器会自动默认这些元素为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做表单的布局
看大屏幕:

871918-20160405144802062-572264168.jpg

网易注册页,表单使用的是dl,壮观,如果使用table布局呢,我就说,有一次我还用了呢

871918-20160405145004812-1060270284.jpg

咱大汽车之家

壮观的tr,不管怎么样,咱之家还是年收入过亿
(以后深入探讨使用table做表单布局)
------------

尾部:normalize是一个好东西,bootstrap也是好东西(词穷)

申明:本文中的观点只是博主的观点
如果有疏漏那也是正常的,欢迎各行业大神
前来交流辩驳!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,629评论 1 92
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,689评论 3 184
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,199评论 0 8
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,201评论 0 17
  • ——世事轮回,因缘际会,红尘一行,皆是定数。 茫茫人海,有些人只消一眼便可知是红尘擦肩还是命中注定。 就像和姑第一...
    季淮安阅读 709评论 9 6