5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Bootstrap/Bootswatchを適応させてみよう![Rails編]

Last updated at Posted at 2015-01-13

俺の名はケンヤ。難事件をいくつも迷宮入りさせたニート。しかし ある時謎の組織に入社し薬を飲まされ身体が縮んでBraianになっちゃった。

Bootswatch

早速やってみましょう!

まずはアプリを新規作成するためターミナルで
rails new app
を打ちこむ。

次にGemfileに下記を入れアプリにBootswatch/bootstrapを適用させる。
gem 'therubyracer', platforms: :ruby(有効化) gem 'less-rails' (追記) gem 'twitter-bootswatch-rails', '~> 3.2.0’ (追記) gem 'twitter-bootswatch-rails-helpers’ (追記)

再びターミナルで入力
bundle install

rails g bootswatch:install Bootswatchのテーマ名

rails g bootswatch:import Bootswatchのテーマ名

rails g bootswatch:layout Bootswatchのテーマ名

config/initializer/assets.rbに下記を追加
Rails.application.config.assets.precompile += %w( テーマ名.css ) Rails.application.config.assets.precompile += %w( テーマ名.js )

aplication.cssやapplication.jsに下記を追加
[aplication.js]
//= require テーマ名/loader //= require テーマ名/bootswatch

[application.css]
*= require_self *= require テーマ名/loader *= require テーマ名/bootswatch

最後

あとは出来上がったerb、をもとにcss、javascriptを貼付けて使うだけ

参考文献

ありがとうございましたー!!

参考

http://morizyun.github.io/blog/bootswatch-rails-setup/
http://qiita.com/wantata222/items/fba52115ba53eeee59c5

簡単カスタマイズ参考

http://coliss.com/articles/build-websites/operation/work/bootstrap-live-customizer.html
http://qiita.com/maruyam-a/items/c5642a4cb279be75a1b2
http://qiita.com/ppworks/items/071969ae01198b337ad2
http://easyramble.com/how-to-customize-twitter-bootstrap.html

5
5
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
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?