【Rails】Bootstrapを導入する

bootstrap

エンジニアのみでWebサービスなどを作成した際に困るデザインの部分、こちらをより簡単にしてくれるBootstrapを紹介します。

Bootstrapとは

「Bootstrap」は、HTMLの知識を持った人なら、Webページを簡単に作成できるCSSフレームワークとよばれるツールの中の1つです。

Bootstrapを利用すると、今まで時間のかかっていたレイアウトもすぐにできます。

Bootstrap3徹底解説

BootstrapWebサイトWebアプリケーションを作成するフリーソフトウェアツール集である。 タイポグラフィフォームボタンナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。

GitHubで最も人気があり[2]アメリカ航空宇宙局MSNBCなどに採用されている。

Wikipedia

RubyOnRailsでBootstrapを使用するには?

最初の項目で引用している通りにBootstrapとはCSSフレームワークの一つ事です。特別なソフトを別に導入したりするわけじゃないので直接導入することも出来ます。

わかってしまえば簡単なんですが初めて導入する場合にここで混乱する事が結構あると思っています。自分も最初はよくわからない事が多くて悩みました。

2015年7月に調べた時点でわかっている導入方法を説明します。

CSSとJavascriptを直接参照する

Bootstrap本体はこちらからダウンロード出来ます。

Bootstrap本家ダウンロード

  1. ダウンロードしたzipファイルの解凍
  2. 解凍したフォルダを各対応したフォルダに振り分ける、今回はappフォルダにbootstrapを追加して配置します

・fonts – app/assets/fonts

・css – app/assets/css

・js?- app/assets/js

fontsだけは手動で参照してくれるように設定が必要です

/config/application.rb

 

CDNを使用して参照する

こちらの参照先もBootstrap本家に書いてあります。

以下のコードをheadタグに追加して下さい。

gemを使用する

gemを使用する場合でもBootstrapを設定してくれるgemが複数のあるのでどれにするか検討が必要です。

  1. twitter-bootstrap-rails
  2. twitter-bootstrap3-rails
  3. bootstrap-sass
  4. sass-bootstrap-defunct
  5. less-rails-bootstrap

実際にはまだあるかもしれませんがまだ把握が全然出来ていません。個人的には最初の導入時にここでかなり混乱しました。何がどう違うのかは次の記事で説明出来ればと思っていますので今回はbootstrap-sassを使用した場合の設定方法だけを取り上げます。

ちなみに今回はRails4にBootstrapを追加する場合の作業です。

最後に

読まれて内容が理解出来た方なら分かっている事かもしれませんが、タイトルにRailsにと書きましたが直接参照系の手順だった場合はRailsに限定されません。当然ただのHTMLでも適応は可能です。

広告