127
123

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.

[Rails 4.x][Bootstrap] Rails 4.x で Bootswatch を使う方法

Posted at

前置き

製作中の Webサイト を、とりあえずいい感じのレイアウトにして、完成形のイメージ(や目の保養)にする為に、よく Bootstrap が使われています。
Bootswatch は Bootstrap のテーマで、やっぱりいい感じのレイアウトがまとまっています。

Screen Shot 2014-05-28 at 11.34.34.png

Screen Shot 2014-05-28 at 11.35.03.png

この中のテーマの1つを Rails 4 で利用する方法をメモします。

Gemfile

gem 'twitter-bootswatch-rails', '~> 3.1.1'
gem 'twitter-bootswatch-rails-helpers'
gem 'execjs'
gem 'less-rails'

インストール

テーマを適応させます。
今回は lumen というテーマを選択しました。
テーマに関してはこちらから自由に選べます。

rails g bootswatch:install lumen
rails g bootswatch:import lumen
rails g bootswatch:layout lumen

Stylesheet

application.css を編集します。
lumen のところは選択したテーマ名を入力。

app/assets/stylesheet/application.css
/*
 *= require_self
 *= require lumen/loader
 *= require lumne/bootswatch
*/

Javascript

application.js を編集します。
lumen のところは選択したテーマ名を入力。

app/assets/javascript/application.js
//= require jquery
//= require jquery_ujs
//= require lumen/loader
//= require lumen/bootswatch

使い方

以上で使えるようになると思います。
使い方としては、bootswatchのサイトから、各テーマのページに移って、そこに記載してあるパーツひとつひとつにマウスオーバーすると、コードが表示されるようになるので、それを利用したらいいかと思います。

Screen Shot 2014-05-28 at 11.50.59.png

Screen Shot 2014-05-28 at 11.51.07.png

詳細

その他、設定に関する詳細は、以下を見るといいかと思います。
https://github.com/scottvrosenthal/twitter-bootswatch-rails

参考

Bootswatch ドキュメント
Bootswatch サイト
[Bootstrap/BootswatchをRails 4.1に導入!|酒と泪とRubyとRailsと]
(http://morizyun.github.io/blog/bootswatch-rails-setup/)
bootswatchをRailsで使う | Qiita

127
123
1

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
127
123

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?