RailsでTwitter Bootstrap
今回は、RailsにBootstrapを適用してみました。
公開ファイルは、前回と同じく、以下参照。
■github
https://github.com/dog-ears/demo_ror
■heroku
https://dog-ears-ror.herokuapp.com/
※以下アドレスからユーザー登録可能
https://dog-ears-ror.herokuapp.com/users/new
では、簡単に実行手順など。
■RailsにTwitter Bootstrapの導入と簡易な使い方
http://ruby-rails.hatenadiary.com/entry/20140801/1406818800#twitter-bootstrap-install1
基本上記参考。
一応「execjs」もインストールしました。
#Gemfile gem 'execjs'
インストール方法は、1を選択。
rails g bootstrap:themed Users
conflictが発生します。
_form.html.erb
以外は、そのまま上書きで問題ないですが、
フォームだけは、項目が変わるため、修正が必要。
Simple Formに列挙型インプットを作る方法
<%= f.input :level, as: :select, label: "権限", collection: User.levels.keys %>
で、いけました。
【アイコンについて】
公式いわく、
#/app/assets/stylesheets/bootstrap_and_overrides.css.lessの
// Glyphicons //@import "twitter/bootstrap/glyphicons.less";
部分のコメントアウトを解除すればOKとのこと。
実際にコメントアウトでOKだったのですが・・・、
のちほど、よく分からんバグが発生して、
'twitter-bootstrap-rails’を3.2.2から3.2.0にダウングレードしたところ、
一部のアイコンが□で表示されるようになってしまった・・・。
この問題についは、ちょっと保留します。
【ボタンの文字色がグレーになる件】
■Twitter Bootstrap を使う際に a:link などに color を設定するとボタンの色まで上書きされちゃう問題の対策
http://fivestar.hatenablog.com/entry/2013/11/13/212807
buttons.lessの場所がわからんので、以下ファイルを修正。
#/app/assets/stylesheets/scaffolds.scssa {
color: #000;
↓
a:not(.btn) {
color: #000;
で、bootstrap適応完了。
ついでに、simple_form導入してビューをシンプルに。
また、ransackを使って検索絞り込み機能も追加、
そして、kaminariで、ページングも使えるようにしています。
■Railsのform_for内のコードをすっきりさせるsimple_formの使い方
http://ruby-rails.hatenadiary.com/entry/20140730/1406700205
■Railsでransackを使って検索機能を作成する
http://ruby-rails.hatenadiary.com/entry/20141008/1412774436
■ransackとenum_helpを使った検索フォームでの日本語化
http://319ring.net/blog/archives/3041/
■kaminariをBootstrap3、Rails4.2環境で使う！[Ruby 2.3]
http://morizyun.github.io/blog/kaminari-gem-paginator-rails/
railsは、laravelに比べて、gemがたくさんあって、楽チンですね。
では、今回はここまで。