新手问题 如何自定义 twtter-bootstrap-rails 样式?

naitnix · 2013年03月06日 · 最后由 topswim 回复于 2013年06月17日 · 6663 次阅读

项目中用到了 twtter-bootstrap-rails,这个是基于 less 的,现在想改变例如背景颜色之类的样式,这个要怎么自己定义呢,看了看 ruby-china 的相关帖子,其中一个是:http://ruby-china.org/topics/5314 ,我看@lgn21st说,只要在 bootstrap 之后加载这个 css 文件就可以了,但是这个 bootstrap-sass 是基于 sass 的,而 twtter-bootstrap-rails 是基于 less 的,如果我要是实现自己定制样式的话,除了引入自己的 css 文件之外的方法,我还想继续使用 twtter-bootstrap-rails 提供的样式变量,并且自定义 less 文件,问题是,我必须知道这些预定义的变量,如果我要生命一个新的变量,可能还需要重新编译,这样很麻烦,不知道有没有人遇到过类似的情况,你们都是怎么解决的?

变量名没变,在 twitter-boptstrap 官网上有,然后按 sass 语法写就 ok

两种方式都能达到自定义目的,一种是简单粗暴的 override 掉 bootstrap 生成的 css。另外一种是让 bootstrap 按照你的方式生成 css。我自己 90% 的情况下会选择前面一种,这样我不依赖 bootstrap 的 less 文件的组织结构。

文档上提供了第二种方法 https://github.com/seyhunak/twitter-bootstrap-rails

If you'd like to alter Bootstrap's own variables, or define your LESS styles inheriting Bootstrap's mixins, you can do so inside bootstrap_and_overrides.css.less:

@linkColor: #ff0000;

@cod7ce 我可以自己定义一个 less 文件,将我自己定义的样式卸载这个文件里,当然是按照 less 格式写,然后在 bootstrap_and_overrides.css.less 中引入这个文件么?

#3 楼 @naitnix 在路上,回家给你粘代码…

#5 楼 @naitnix 有一点很奇怪,既然你这么喜欢用 less,为何要用 sass 化的 bootstrap gem?既然用了 sass 语法的 bootstrap,为啥不用 sass 写?何必给自己找麻烦呢?

#5 楼 @naitnix @naitnix 说的没错,我也觉得没必要使用 less,你都已经使用 sass 化的 bootstrap 了,我以前也用 less,但 rails 自带了 sass 后我就开始使用 sass 了,感觉没有什么太大的区别

我是在 app/assets/stylesheets 中建立了 bootstrap_and_overrides.css.scss 文件,大致内容如下,你参考下

$baseFontSize:12px;
$baseFontFamily:"Lucida Grande","微软雅黑";
$tableBackgroundHover:#FFFFEA;

@import "bootstrap";
@import "bootstrap-responsive";

变量列表:http://twitter.github.com/bootstrap/customize.html#variables

不建议覆盖 通过 id 或自定义类来实现自己的效果

我的有个网站就直接把 bootstrap.css 这个文件改掉了,覆盖还挺麻烦的,而且多了很多多余的 CSS 代码

谢谢各位的帮忙,目前的解决办法就是自己定义个 css 文件,然后在 boottrap 之后加载就可以了,可能方式粗暴了点,但是能起作用就可以了,这样也便于前端小妹妹写 css 了

楼主的问题好像没有解决啊,楼主最后用的是 bootstrap-ass 而不是 twtter-bootstrap-rails。 用 twtter-bootstrap-rails 生成一个文件 bootstrap_and_overrides.css.less。override 的代码是不是应该写在这里呢?为什么我写进去没有效果呢? 比如:我在 bootstrap_and_overrides.css.less 最后加入: .navbar-inner { background-color: #38B0DE; } 还有想问下 #navbar-inner{ background-color: #38B0DE; } 这个前面加#和。有什么区别?

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