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
-, , ,

執筆者:

関連記事

Rails3.2.11でTwitterBootstrapのモーダルをフォームに使う例

  Rails3.2でTwitterBootstrap導入のあれこれ sass-rails-bootstrapとsimple_formを使っている Rails3.2でCoffeeScript …

SASS/SCSSでButtonをカスタマイズするならSassy Buttonsが簡単

By: Meike Schönhütte – CC BY 2.0[/caption]   jaredhardy.com/sassy-buttons/ 目次1 Railsでのインス …

RailsにTwitter Bootstrapのフォームを設定する~simple_form

環境 RailsにTwitter Bootstrapを設定する~twitter-bootstrap-rails github.com/plataformatec/simple_form 目次1 Gem …

Rails3.2でページネーションをTwitter Bootstrapに対応させる~kaminari

github.com/amatsuda/kaminari 目次1 Gemfile & bundle2 設置3 テーマの作成 Gemfile & bundle [crayon-58840 …

RedcarpetでTOC表示

By: epSos .de – CC BY 2.0 目次1 Redcarpet2 Redcarpetの使い方3 TOCを表示する4 できた5 Bootstrapのaffixとscrolls …