LoginSignup
8
8

More than 5 years have passed since last update.

Railsでtwitter bootstrapをsubmoduleとして管理

Posted at

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のサンプルページを作成する

8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8