もはやエンジニアがWebサービスを立ち上げる時になくてはならない、﹃Twitter Bootstrap﹄や、そのBootstrapのテーマ﹃Bootswatch﹄。僕もほぼ欠かさず使っています。
今回は以前書いた情報がちょっと古くなっていたので、忘備録を兼ねて書き直しです。
🎂 (1) Bootstrap CDNを使う方法
これが一番簡単です。基本的には、﹃Bootstrap CDN﹄に書いてあるコードをheaderに貼り付けるだけです。バージョンアップとともにURLが変わるので、最新は本家のサイトからコピーしてきてください。 一応イメージが湧くようにコードを書いておきます。Bootstrap/Bootswatch/Font-Awesomeを使えるようにします。app/view/layouts/application.
haml
の場合はこちら。
%link{:href=>"//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css", :rel=>"stylesheet"} |
これを使う場合の問題としては、海外のCDNっぽくってレスポンスがやや悪かったり、たまに落ちてうまくテーマが表示されなくなってしまう点です。さっと試したいときにお勧めです。
👽 (2) Gemを使う方法
Gem﹃scottvrosenthal/twitter-bootswatch-rails﹄を使う方法を紹介します。Gemfile
に次のGemを追加して、bundle instal
l
を実行。
# Twitter Bootstrap |
続いてターミナルで次のコマンドを実行すると自動でよしなにやってくれます。
(readable
の部分はbootswatchのテーマ名です)
rails g bootswatch:install readable |
あとはできあがったERB(haml)とcss、JavaScriptを
拙著ですが、Bootsrap3に対応したテーマをまとめています。さらにひと味改造したい人にはすごくお勧め!
app/views/layouts/application.
haml(ERB).html
に移植して使うなり、デフォルト側にコピーして使うなりすれば簡単に使えます!
![fpu_tmp_1354612489.2232_0be82c](/img/2014-04-17-bootswatch-rails-setup_1.jpg)
🚌 お勧めテーマまとめ
Bootstrap3 の無料テーマ・格安有料テーマまとめのまとめ拙著ですが、Bootsrap3に対応したテーマをまとめています。さらにひと味改造したい人にはすごくお勧め!
🍄 参考リンク
bootswatchをRailsで使う🐠 変更来歴
(04/17 08:50) 全面書き直し🖥 VULTRおすすめ