zoukankan      html  css  js  c++  java
  • 虎说: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也是好东西(词穷)

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

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

    前来交流辩驳!

  • 相关阅读:
    bzoj 4446: [Scoi2015]小凸玩密室【树形dp】
    bzoj 4403: 序列统计【lucas+组合数学】
    bzoj 3745: [Coci2015]Norma【分治】
    bzoj 3232: 圈地游戏【分数规划+最小割】
    Codeforces 1000 (A~E)
    bzoj 4753: [Jsoi2016]最佳团体【01分数规划+二分+树上背包】
    bzoj 3872: [Poi2014]Ant colony【树形dp+二分】
    bzoj 2067: [Poi2004]SZN【贪心+二分+树形dp】
    洛谷 P1314 聪明的质监员【二分+前缀和】
    bzoj 4622: [NOI 2003] 智破连环阵【dfs+匈牙利算法】
  • 原文地址:https://www.cnblogs.com/hu-w/p/5355129.html
Copyright © 2011-2022 走看看