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がたくさんあって、楽チンですね。 では、今回はここまで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です