V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
thonatos
V2EX  ›  问与答

Web 前端框架 Bootstrap 与 Uikit 的选择 or 自建?

  •  
  •   thonatos · 2014-08-07 13:29:55 +08:00 · 12929 次点击
    这是一个创建于 3759 天前的主题,其中的信息可能已经有所发展或是发生改变。
    Rt:Web前端框架Bootstrap与Uikit的选择or自建?

    开始的时候图方便,使用bootstrap做前端框架(Dist),
    逐渐的因为需要问题,下载LESS/SASS文件修改变量来实现自定义。
    而现在的这个问题出现的原因是看到了UIKIT,故而有这样的考虑,拿出来讨论一下。

    >Bootstrap:

    Bootstrap的便捷不言而喻,但凡对前端有所接触的人基本都知道,但个性化定制则需要修改源文件:

    // Core variables and mixins
    @import "bootstrap/variables";
    @import "bootstrap/mixins";

    有时候有特殊需要,还要改navbar.scss等等,每次去修改源码,这种方式始终不是自己比较喜欢的。

    >>Bootstrap的使用:

    1.下载源码(scss/less)
    2.修改配置(variables)
    3.修改样式(*.less/*.scss)
    4.生成样式

    >Uikit:

    Uikit的使用同上有类似之处(Dist),但是自定义的方式就明显不一样了。(dist不在讨论范围内~)

    >>Uikit的使用:

    1.下载源码(github上整个项目下载了吧~)
    2.自建主题(theme/custom/theme-name
    3.配置样式(辅助theme/default/下的内容,然后自定义)
    4.添加样式(uikit.less 中 @import “*.less”)
    5.grunt

    此时会在theme/custom/theme-name生成自己主题文件,html中调用即可。

    >>优势:不修改源码,重用,同一份源码(不改动源码,只添加主题),可以生成多套样式。

    >讨论

    说到底,使用前端框架的最根本原因,是可以便捷生成响应式页面,使用一些通用的模块(nav..)
    两种方式各有千秋,bootstrap的自定义,基于站点或者主题时候,显然没有关系,uikit的优势上面也有说到,怎么选择,是根据自己的需求。

    这里也不算是提问吧,主要是想看看大家的看法~
    17 条回复    2014-08-08 21:35:43 +08:00
    chon
        1
    chon  
       2014-08-07 13:41:44 +08:00
    bootstrap也不一定要修改源码吧,自己重新写个CSS覆盖相应的class就行了。
    hellojinjie
        2
    hellojinjie  
       2014-08-07 13:46:12 +08:00
    第一次看到 UIkit。。

    果然好牛,,感觉就是 boostrap + jquery-ui
    scarlex
        3
    scarlex  
       2014-08-07 14:06:49 +08:00
    我习惯全部自己写...
    jacob
        4
    jacob  
       2014-08-07 14:09:32 +08:00
    如果什么都自己写还要框架做什么??,我很好奇
    thonatos
        5
    thonatos  
    OP
       2014-08-07 14:47:49 +08:00
    @chon 覆盖嘛?可以像uikit那样来做?如果可以的话,求指导一下,感谢~
    loading
        6
    loading  
       2014-08-07 14:49:42 +08:00 via Android
    @chon +1
    我也是这样用的!
    thonatos
        7
    thonatos  
    OP
       2014-08-07 14:50:34 +08:00
    @jacob 框架的好处是有一些通用的参考吧,自定义的地方,还是需要自己去写的嘛
    thonatos
        8
    thonatos  
    OP
       2014-08-07 14:52:05 +08:00
    @hellojinjie 是什么不要紧吧,关键是如果便于使用,毕竟造轮子这种事,不做还是不错的。
    66beta
        9
    66beta  
       2014-08-07 15:39:52 +08:00   ❤️ 1
    小项目用框架,可以节省2/3的时间~
    chon
        10
    chon  
       2014-08-07 16:36:02 +08:00   ❤️ 1
    @thonatos 直接添加新的style,跟bootstrap中的class名称一样就可以。
    hdlifes
        11
    hdlifes  
       2014-08-07 16:47:54 +08:00   ❤️ 1
    在用twbs,保持通用的组件结构不变,个性化的都用单独的样式去覆盖或者在原有基础上增强。修改的部分主要是已声明的变量。

    楼主说的“4.添加样式(uikit.less 中 @import “*.less”)”,这个也是在 default 的基础上复制再覆盖而来的各个组件吧?
    jsonline
        12
    jsonline  
       2014-08-07 16:49:18 +08:00   ❤️ 1
    I hate Bootstrap.
    Yien
        13
    Yien  
       2014-08-07 17:24:32 +08:00 via iPhone
    make
    explon
        14
    explon  
       2014-08-07 17:32:09 +08:00
    性化定制要改源码? 你来 wenda.wecenter.com 看看吧
    lygmqkl
        15
    lygmqkl  
       2014-08-07 17:34:05 +08:00   ❤️ 1
    bootstrap + backbone, I always use it.
    qq5775548
        16
    qq5775548  
       2014-08-07 20:26:52 +08:00   ❤️ 1
    我用的是LESS,一般 bootstrap + lesshat 自定义编写样式覆盖就OK鸟 表示完全没鸭梨
    thonatos
        17
    thonatos  
    OP
       2014-08-08 21:35:43 +08:00
    @explon 显然是需要的,其他的说话我认可,但是直接覆盖并不能对全局生效,对于一些全局的内容,必然是要改动的。例如flatui,只靠覆盖的做法是做不到的,对吧~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2030 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 16:14 · PVG 00:14 · LAX 08:14 · JFK 11:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.