RailsでTwitterBootstrap

Rails4.0でBootstrap導入のあれこれ~bootstrap-sass simple_form kaminari dataTables

投稿日:2013年12月31日 更新日:

この記事は、Rails3.2でTwitterBootstrap導入のあれこれをRails4で書きなおしたものです。本記事中に記載がない場合、元記事の方に参照リンクがあったりするかもしれませんので、必要に応じて参照してください。

また、TwitterBootstrap自体のカスタマイズについては、SASS/SCSSでButtonをカスタマイズするならSassy Buttonsが簡単を参照してください。最後の方に、TwitterBootstrap自体のカスタマイズについて少し書いていました。

bootstrap-sass

github.com/twbs/bootstrap-sass

Gemfile

bootstrapのバージョンは3.0.3

application.js

application.css

または、base.css.scssを作成

 layout/application.html.erb

getbootstrap.com/css/#overview-doctypeを参考に

langを設定したり、モバイルのズームをリセットするmetaタグを書いたり、containerで囲んだり

 

simple_form

Gemfile

generate

scaffold

バリデーションを設定しておく

 

普通のテーブル

ScreenClip

フォームも普通 ボタンが寂しい

ScreenClip

通知も普通

ScreenClip

ダイアログも普通

ScreenClip

 

バリデーションも普通

ScreenClip

 

 

ボタンの設定

config/initializers/simple_form.rb

今はbtn btn-defaultの2つのクラスをつける必要があるので

config以下を変えた時はサーバを再起動する

ScreenClip

このフォームの決定ボタンは青いボタンを使いたいので

_form.html.erb

ScreenClip

 

通知

とりあえずapplication.html.erbに書いた

ScreenClip

 

モーダル

base.js.coffeeをつくった

ScreenClip

ホリゾンタルフォーム

Bootstrapのサンプルがこれ

①formにクラスform-horizontalをつける

initializer/simple-form.rb

 

②その下にパーツごとにdiv.form-groupをつくる

initializers/simple-form-bootstrap.rb

 

③ラベルにクラスcol-sm-2をつける

initializers/simple-form.rb

 

④インプットテキストなどをラップするdivにクラスcol-sm-10をつける

initializers/simple-form-bootstrap.rbの:bootstrapのなか

 

⑤ボタンの場合はラップするdivにクラスcol-sm-offset-2 col-sm-10をつける

こっちは_form.html.erbを直接

ScreenClip

 

バリデーション

まずはアラートから

simple-form.rbのalert-errorをalert-dangerに変える

ScreenClip

次にフォームのパーツ

form-groupにクラスhas-errorを与えると、その下のcontrol-label、form-control、help-blockが書き換えられる

そこで、simple-form-bootstrap.rbでクラスhas-errorでラップするようにしてやる

help-inlineをhelp-blockになおしてやる

そして、インプットの方にはデフォルトでform-controlを与える

form-controlはwidth:100%なのでこうなる

ScreenClip

scssでwidthをautoにしてやる

ScreenClip

グリッドシステムで入れ子構造にしてみる

 

こんな感じにできた

ScreenClip

良記事発見:Rails4: Simple_formをBootstrap3に対応させて使う。

現在は公式でBootstrap3に対応したぽい Update the bootstrap generator to work with Bootstrap 3

kaminari

Gemfile

 

generate

準備など

db/seeds.rbに書いて、 rake db:seed

コントローラーとビュー

 

うまく表示されない

ScreenClip

テーマの修正

divで囲まなくてもulにpaginationクラスをつければ良くなったから

app/views/kaminari/paginator.html.erb

できた

ScreenClip

jquery-datatables

tableにbootstrapを適用

ScreenClip

Gemfile

github.com/rweng/jquery-datatables-rails

application.js

application.css

tableにidかクラスをつける

tasks.js.coffee

できた

kaminariとかぶっているので下のページネーションで抽出した25個のデータがテーブルに読み込まれたデータになる

モデルをTask.allとかに戻しておく

ScreenClip

TurboLinksはオフにしないとうまく動かなかった

TurboLinksに対応させる

www.brianmcquay.com/tag/turbolinks

 

ソートを一部無効にする

Show、Edit、Destroyのところの並び替え表示が消えた

ScreenClip

 

 

Rails4.0でもajaxなデータテーブルを使う~ajax-datatables

 

-RailsでTwitterBootstrap
-, , ,

執筆者:

関連記事

no image

kaminari + Twitter Bootstrap2テーマでFirst,Prev,Next,Lastだけおかしい場合

前につくったTwitter Bootstrap2用のkaminariテーマをコピーして使おうとしたら表題の通り、First,Prev,Next,Lastがおかしい あと…も表示されない G …

Rails4とBootstrap3.3まわりのgem~simple_form、sassy-buttons、zurui-sass-rails、font-awesome-rails

By: Sam Howzit – CC BY 2.0 目次1 bootstrap-sass2 4色ほど指定するだけでTwitter Bootstrapの配色を良い感じにしてくれるSass3 …

Rails4でつかえるインラインエディタを試してみた〜X-editable-rails

目次1 x-editable2 bootstrapを導入3 x-editable-rails4 サンプルアプリ x-editable 文字をダブルクリックして編集できるやつ x-editable vi …

RailsにTwitter Bootstrapを設定する~twitter-bootstrap-rails

環境 ruby 1.9.3  & rails 3.2.8 適当なscaffoldを作っておく

  github.co …

Rails3.2+jQueryUI1.10でjQuery-UI-Bootstrapのデモ画面を出すところまでやった

なにかいつの間にかかっこいい感じのサイトになってた addyosmani.github.com/jquery-ui-bootstrap/ jquery-ui-bootstrap.github.io/j …