Small Steps Everyday

Bootstrap3を使うために、Gemfileに追記をしたら、Proxy環境のRailsで bundle install にエラーがでました。 Gemfileへの追記 gem "twitter-bootstrap-rails", github: "seyhunak/twitter-bootstrap-rails", branch: 'bootstrap3' 実行エラー $ bundle install : fatal: Unable to look up github.com (port 9418) (Name or service not known) : MacのVagrant環境は大丈夫だったんだけどな。。Proxyって難しい。で、Proxy系のトラブルシューティングを探してやってみたけど治らず…。しばらく格闘しつつ、エラーの内容をよーく見ると、 Git error: command `git clone 'git://github.com/seyhunak/twitter-bootstrap-rails.git' とあることに気が付きました。あれ？ clone は出来るはずなんだけどな。そういえば、アドレスが https://xx に成ってない。Gemfileの書き方って、ほかにもあるのかな？と思って、編集してみました。 gem "twitter-bootstrap-rails", :git => 'https://github.com/seyhunak/twitter-bootstrap-rails.git', branch: 'bootstrap3' これで上手く行きました。エラーの内容、ちゃんと読まないとダメですね。。この反省、何回目だろう…。 参考 Gemfileでのgem指定色々

twitter-bootstrap-railsをインストールした環境 で、Bootstrap3のテーマをBootswatchに公開されているテーマに上書きします。 環境 Rails 4.0.2 Bootstrap 3.x 手順 vendor/assets/stylesheets/bootswatch を作成します。 $ mkdir vendor/assets/stylesheets/bootswatch [Bootswatch][2]で気に入ったテーマを選び、上記フォルダに variables.less と bootswatch.less をダウンロードします。 $ wget -P vendor/assets/stylesheets/bootswatch http://bootswatch.com/flatly/variables.less $ wget -P vendor/assets/stylesheets/bootswatch http://bootswatch.com/flatly/bootswatch.less 私はFlatlyが気に入りました。 app/assets/stylesheets/bootstrap_and_overrides.css.less に @import の記述を追加します。 @import "twitter/bootstrap/bootstrap"; @import "bootswatch/variables.less"; // 追加 @import "bootswatch/bootswatch.less"; // 追加 これで完了です。Webを表示させて、テーマが反映されている事を確認します。 参考 twitter-bootstrap-railsでbootswatchを使う http://bootswatch.com/

Rails4 に bootstrap3 を適応してみます。 Twitter Bootstrap for Rails を使います。 Twitter Bootstrap for Rails インストール Gemfileに以下の内、記述の無いものを追加します gem "therubyracer" gem "less-rails" gem "twitter-bootstrap-rails", github: "seyhunak/twitter-bootstrap-rails", branch: 'bootstrap3' branch:masterのseyhunak/twitter-bootstrap-railsは、Bootstrap 2.x 用のようです。Bootstrap 3.x を使うには、別のbranch:bootstrap3を使います。 初め、これに気づかずに、bootswatchのテーマが反映できずハマりました。。 bundle install を実行します bootstrap ジェネレータを使って、assetsへincludeを追加します rails generate bootstrap:install less layoutsとviewsを生成します rails g bootstrap:layout application fluid 最後の引数を fluid にするとレスポンシブデザインになるようです。固定したい場合は fixed を指定します。 既存の/app/views/layouts/aplication.html.erbを上書いていいか聞いてくるので、既存のファイルをバックアップしておいて、 y （上書き）を選択しました。 変わりました！ガッツリ雰囲気変わりました。成功だと思います。 参考 Twitter Bootstrap for Rails 3.x - 4 Asset Pipeline RailsアプリにBootstrapを適用させる