Rails

Railsでtwitter bootstrapをsubmoduleとして管理

More than 3 years have passed since last update.


submoduleとして登録

RailsRoot/vendorに追加します。

$ cd /path/to/railsApp/vendor/

$ git submodule add git://github.com/twitter/bootstrap.git bootstrap


build bootstrap

githubにもありますが、ソースコードからtwitter bootstrapを利用する場合は、gruntでcompileします。

まだインストールしていない場合はインストール

$ npm install -g grunt-cli

他に必要なものは、Gruntfile.jsに定義されているので、そのままビルド

$ cd /path/to/railsApp/vendor/bootstrap/

$ npm install

ビルド後、/path/to/railsApp/vendor/bootstrap/dist/にcompileされたjs・css、fontsがあることを確認


シンボリックリンクの設定

vendor/assets/*にシンボリックリンクを貼っていく


JavaScript

$ cd /path/to/railsApp/vendor/assets/javascripts/

$ ln -s ../../bootstrap/dist/js/* .


stylesheets

$ cd /path/to/railsApp/vendor/assets/stylesheets/

$ ln -s ../../bootstrap/dist/css/* .


fonts

$ cd /path/to/railsApp/vendor/assets/

$ ln -s ../../bootstrap/dist/fonts .


各ファイルの読み込み設定

実際に使用するために、app/assets/*に各ファイルの設定をしていく


JavaScript


app/assets/javascripts/application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files

// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap


stylesheets


app/assets/stylesheets/application.css

/*

* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*= require bootstrap
*/



fonts


config/application.rb

require File.expand_path('../boot', __FILE__)

require 'rails/all'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module Example
class Application < Rails::Application
# Settings in config/environments/* take precedence over those specified here.
# Application configuration should go into files in config/initializers
# -- all .rb files in that directory are automatically loaded.

# Set Time.zone default to the specified zone and make Active Record auto-convert to this zone.
# Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
# config.time_zone = 'Central Time (US & Canada)'

# The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
# config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
# config.i18n.default_locale = :de

config.assets.paths << "#{Rails}/vender/assets/fonts"
end
end



最後にプリコンパイル

$ bundle exec rake assets:precompile Rails_ENV=development


参考

Ruby on RailsにてBootstrap3のサンプルページを作成する