新手问题 如何定制 Bootstrap

bpw11320 · 2013年03月21日 · 最后由 lidashuang 回复于 2013年03月21日 · 4567 次阅读

最近练手修改了下 bootstrap 的 less。是直接修改的 less 文件,总感觉直接修改 less 不是很对,能不能给点关于如何定制 bootstrap 的知道建议。

可以根据自己的想法给点建议。

less 不会,但是我用的 scss。进来学习一下。

重载 variables。你可以在自己的 less 或 sass 中去改预定的值,如 @linkColor, 也可以在官网上设好后下载相应的最终 css,见 [Customize and download] 。(http://twitter.github.com/bootstrap/customize.html)

#2 楼 @ashchan 官方提供的定制功能相对于简单一些,有些需要修改的地方 例如 row/span navbar 等 需要按照自己的想法去重新修改。所以对于其他的 less 组件也有需要修改到的地方。若是重载文件 去修改的话 是不是每修改一个文件都需要把其文件重载过来?这样总感觉还不如修改本文件 (less) 比较方便。

@Saito 给点建议。

#3 楼 @bpw11320 当然可以直接去修改 less,不过这种作法是侵入性的,意味着你很难在以后的维护中去更新 bootstrap 本身(当然 costomize 下来的也有这个问题,但因为你改的只是那些 variables,你只要把这些记下来,每次 costomize 的时候再填一遍就行了)。

其实更一般的作法是,不去改 bootstrap,只在自己的样式中针对不同的部位定义新样式去覆盖默认样式。

在你自己的 less 文件里面 import 进来,然后重载掉你需要的 css

@import "twitter/bootstrap" /* 路径貌似这样的吧,不记得了 */
.my-rule { ... }

#6 楼 @qhwa #5 楼 @ashchan

是否这样,定义一个 less 重载所有需要修改的 less 文件,然后针对需要修改的 class 变量等 重新定义。不侵入 bootstrap 原本的 less 本身,为以后升级 bootstrap 版本提供方便?

我是直接修改 less,你可以参考我的 https://github.com/yhben/bootstrap-wombat-ui 和官方的 3.0 对比一下就知道了。有什么疑问可以直接 gtalk 我,[email protected]。:)

#8 楼 @yhben 我想你的这种定制 类似于 bootstrap-google-ui、bootstrap-jquery-ui 这种基于 ui 的重构?和我的想法还是有一定的区别的。不过非常感谢,提供了另一种思路,多谢了。 :)

#7 楼 @bpw11320 是的,这是我的 application.css.less

/*
 *= require_self
 *= require_tree .
*/


@import "twitter/bootstrap/bootstrap";


/* twitter bootstrap variables */
@linkColor:                     #0066CC;
@btnBackground:                 #F5F5F5;
@btnBackgroundHighlight:        #D6D6D6;
@btnPrimaryBackground:          #747788;
@btnPrimaryBackgroundHighlight: #494C58;
@btnBorder:                     #E8E8E8;
@navSidbarBg:                   #E3E5E6;

/* my app variables */
@proj-list-box-width:           206px;


body {
    background: #FBFBFB;
    font-family: 'Helvetica Neue',Arial,sans-serif;
    overflow-y: scroll;
}

#10 楼 @qhwa 非常感谢的。

@qhwa 有点疑惑的地方,若按照上面你给出的方法去 修改 bootstrap 的话,编译之后的 css linkColor 这些变量会覆盖 Variables.less 中定义的么?刚才试了下 并没有覆盖掉原本的定义。

css 有优先级,你自己定优先级高的,把 bootstrap 的覆盖了

#12 楼 @bpw11320 , #10 楼 @qhwa 可能要把自定义的 variables 放在 @import "twitter/bootstrap/bootstrap"; 之前才有用。

#13 楼 @lidashuang 和 css 的优先级没有关系的,我是覆盖 less 中的变量 是编译顺序的问题。

#14 楼 @ashchan 应该是这样的 自定义变量需要放在 Variables.less 的下面加载,在编译的时候才能被下面其他的 less 引用到。这样的话就需要新建两个 less 文件,一个作为变量定义文件,另一个是样式重构文件。

多谢各位了。

#15 楼 @bpw11320 编译顺序应该就是优先级吧

需要 登录 后方可回复, 如果你还没有账号请 注册新账号