新手问题 如何定制 Bootstrap

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

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

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

共收到 16 条回复

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我, leofml2012@gmail.com 。:)

#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 编译顺序应该就是优先级吧

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