iyaozhen
V2EX  ›  问与答

Bootstrap 样式权重问题

  •  1
     
  •   iyaozhen · Sep 22, 2014 · 4964 views
    This topic created in 4289 days ago, the information mentioned may be changed or developed.
    一直在用Bootstrap前端框架,不过在使用中遇到一个问题:
    Bootstrap的样式一般都会有两个class和一个标签来定义样式(甚至更多),比如下面这个导航栏的文字颜色:


    如果改这个(字体颜色变成白色),我需要叠两个class(自定义或Bootstrap自己的)来覆盖样式,或者用“!important”来粗暴的覆盖。总觉得不是太合适,大家是怎么解决这个问题的。
    13 replies    2015-01-02 08:50:19 +08:00
    explon
        1
    explon  
       Sep 22, 2014 via iPhone
    两个 class 是标准写法
    muzuiget
        2
    muzuiget  
       Sep 22, 2014
    这其实就是 CSS 的问题,选择器越具体权重越高,只能这样。

    要么你就修改 bootstrap 的 less 源码,自己编译一份。
    iyaozhen
        3
    iyaozhen  
    OP
       Sep 22, 2014
    @explon 可否详细说下,根据我以前的理解,不是应该采用尽量小的权重吗?
    iyaozhen
        4
    iyaozhen  
    OP
       Sep 22, 2014
    @muzuiget 嗯,这个我知道。额,就只能多写class覆盖嘛。。。
    guoxinwei
        5
    guoxinwei  
       Sep 22, 2014
    @muzuiget 我在汽车达人的做法是,在bootstrap上面叠加一份自己的less代码,专存自己修改了bootstrap样式的less代码,然后在bootstrap.less中按顺序import自己的less代码。最后编译bootstrap.less,就会生成自己的样式啦!而且还不容覆盖bootstrap的样式,可以不断升级bootstrap。
    arbipher
        6
    arbipher  
       Sep 22, 2014
    bootstrap可以自己customize的,自己编译sass或者less。

    另一种省事的途径就是在网站上costomize
    http://getbootstrap.com/customize
    各种尺寸和样式都能自定义,
    第一次compile之后会重定向到
    http://getbootstrap.com/customize/?id=YOUR_ID_HERE
    收藏这个页面,之后访问能保留之前的编译参数
    sm0king
        7
    sm0king  
       Sep 23, 2014
    用三个 或者 前面加一个ID
    不要用 !important 会造成很大的困扰~
    计算权重有一个算法,记不太清了,可以查一下。
    oott123
        8
    oott123  
       Sep 23, 2014 via Android
    我用的 dirty 方法是在 body 上加一个 ID
    然后剩下的样式全部以这个 id 打头…
    zioc
        9
    zioc  
       Sep 23, 2014
    其实 如果你的界面离bootstrap很远就不建议用bs,bs是快速建站用的。

    用之前先改一下bs整体的颜色、间距。。然后就不改它代码 另写一份 用ID去覆盖
    cismous
        10
    cismous  
       Sep 23, 2014
    bs = Bootstrap
    首先不建议用 !important
    原因一样,感觉不太好,之前也看过相关文章,其中有提到尽量不用,所以能不用就不要用了。

    至于你提到叠加2个类,如果用sass,less的话,写起来很顺手,所以没关系的吧
    实在不行了,自己写,弃用bs

    题外话,bs越来越臃肿了,平常编译自己所需的部分,因为有很多用不上,就像jquery一样,看了源码,才发现其实有很多没用上!
    yangzh
        11
    yangzh  
       Sep 23, 2014
    @oott123 不 dirty 啊,我觉得挺合理的。就是有时候可能多此一举什么的。
    iyaozhen
        12
    iyaozhen  
    OP
       Sep 23, 2014
    一般自己也会给重要的DIV一个id,改样式的带上id。而且用id的话jquery定位元素的时候也很快。
    pertersonvv
        13
    pertersonvv  
       Jan 2, 2015
    @arbipher 可以在本地自定义吧?
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2487 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 50ms · UTC 11:01 · PVG 19:01 · LAX 04:01 · JFK 07:01
    ♥ Do have faith in what you're doing.