新手问题 如何更改 bootstrap navbar 的颜色

LinuxGit · December 17, 2012 · Last by subsky replied at June 09, 2013 · 90540 hits

我做完了 railstutorial 的例子,开发环境时 navbar 也是黑色的,可是在 production 模式后变成白色了。 找到了http://stackoverflow.com/questions/9869610/navbar-color-in-twitter-bootstrap, 我在 custom.css.scss 中添加了

.navbar-inner {
  background-color: #000;
}

重新 rake assets:precompile 启动还是图上的颜色。求指教。

将导航条

<div class="navbar navbar-fixed-top">
...
</div>

添加一个 class,改为

<div class="navbar navbar-inverse navbar-fixed-top">
...
</div>

好像是 bootstrap 版本的问题 (现在默认为白色)

#1 楼 @siyang1982 😘 谢谢,你的方法管用。 我的以前版本是 bootstrap-sass 2.0.4,现在是 2.1。想知道常规的做法是这样吗?在 Doc 发现一个 less 变量@navbarBackground,直接放在 custom.css.scss 好像也不起作用。

试试在 bootstrap_and_overrides.css.less 中加入类似以下的这些呢 @navbarBackground: #555; @navbarBackgroundHighlight: #888; @navbarText: #eee; @navbarLinkColor: #eee; 更多的参数去这个地址找找 https://github.com/twitter/bootstrap/blob/master/less/variables.less

#3 楼 @clark 😊网站开发没什么基础,less 还没用过,我照教程都是用的 scss,用到 less 变量都是用$引用的。刚添加 less 结尾文件到目录 precompile 时,rake aborted! cannot load such file -- less 我之后添加了

$navbarBackground: #555;
$navbarBackgroundHighlight: #888;
$navbarText: #eee;
$navbarLinkColor: #eee;

到 custom.css.scss 也不起作用。

#2 楼 @LinuxGit 我用的是 compass_twitter_bootstrap

你试试在 import bootstrap 前置初始值

$navbarBackgroundHighlight: #000

注意是设置变量,而不是直接设置.navbar-inner的样式,而且必须在 import 前面 原因可参考源码 https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_variables.scss

@LinuxGit 我也是新手,一起学习,^_^ bootstrap 的使用在 railscast 上有两篇介绍的 还有这篇介绍可以看看,里头也有讲到 scss 的 http://railsapps.github.com/twitter-bootstrap-rails.html

#5 楼 @siyang1982 😄太感谢你了,忘了优先级。我一直放在@import “bootstrap”后面改的变量,怪不得没效果。

#6 楼 @clark 😄 嗯。http://railsapps.github.com这个教程收藏过竟然忘了看。多谢。

navbar 有个反显属性(navbar-inverse),例如: ' class="navbar navbar-inverse navbar-fixed-top"'

You need to Sign in before reply, if you don't have an account, please Sign up first.