最近练手修改了下 bootstrap 的 less。是直接修改的 less 文件,总感觉直接修改 less 不是很对,能不能给点关于如何定制 bootstrap 的知道建议。
可以根据自己的想法给点建议。
重载 variables。你可以在自己的 less 或 sass 中去改预定的值,如 @linkColor
, 也可以在官网上设好后下载相应的最终 css,见 [Customize and download] 。(http://twitter.github.com/bootstrap/customize.html)
在你自己的 less 文件里面 import 进来,然后重载掉你需要的 css
@import "twitter/bootstrap" /* 路径貌似这样的吧,不记得了 */
.my-rule { ... }
我是直接修改 less,你可以参考我的 https://github.com/yhben/bootstrap-wombat-ui 和官方的 3.0 对比一下就知道了。有什么疑问可以直接 gtalk 我,[email protected]。:)
#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;
}
@qhwa 有点疑惑的地方,若按照上面你给出的方法去 修改 bootstrap 的话,编译之后的 css linkColor 这些变量会覆盖 Variables.less 中定义的么?刚才试了下 并没有覆盖掉原本的定义。
#13 楼 @lidashuang 和 css 的优先级没有关系的,我是覆盖 less 中的变量 是编译顺序的问题。
#14 楼 @ashchan 应该是这样的 自定义变量需要放在 Variables.less 的下面加载,在编译的时候才能被下面其他的 less 引用到。这样的话就需要新建两个 less 文件,一个作为变量定义文件,另一个是样式重构文件。
多谢各位了。