Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What is going on with this article?
@teitei_tk

Railsでtwitter bootstrapをsubmoduleとして管理

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

8
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
teitei_tk
Software Engineer

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
8
Help us understand the problem. What is going on with this article?