简体   繁体   中英

Rails Bootstrap 2.3.1 Navbar Color

I'm already trying for hours but I can't figure out how to change the navbar color and the navbar text color in my rails bootstrap project. I've read about .navbar-inner in some css files but nothing I write in any file seems to have any effect. Maybe it's because of a newer version of bootstrap? Could someone please give me a step by step solution?

I've tried to change the "bootstrap_and_override.css / .css.less" files but nothing happened. Do I have to compile the .css.less file or something like that? Thank you very much!

Here is my gemfile if its relevant:

source 'https://rubygems.org'
ruby '2.0.0'

gem 'rails', '3.2.13'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'


gem 'bcrypt-ruby', '3.0.1'
#gem 'bootstrap-sass', '2.1'
gem 'faker', '1.0.1'
gem 'will_paginate', '3.0.3'
gem 'bootstrap-will_paginate', '0.0.6'
gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"

gem 'json'

group :development do
    gem 'sqlite3'
end

group :production do
    gem 'pg'
    gem 'coffee-rails', '~> 3.2.1'
    gem 'uglifier'
end

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'uglifier'
  gem 'therubyracer'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  # gem 'therubyracer', :platforms => :ruby

end

gem 'jquery-rails'

You have to customize the variable as instructed here: http://getbootstrap.com/2.3.2/customize.html#variables

Specifically, put this in the stylesheets section of your assets folder under whatever file you're using as the yourstylefile.css.sass.

$navbarBackgroundHighlight: coloryouwant; /* This changes the nag background color */
$navbarText: coloryouwant; /* This changes the text color */

*Make sure that this code appears ABOVE your @imports of bootstrap. Better to just stick it at the very top of the yourstylefile.css.sass just to be safe.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM