Rails + Capybara で Bootstrap2 から Bootstrap3 アップグレード時のメモ

メモ

• bootstrap2 -> 3
• simple_form 3.0.0 -> 3.1.0.rc1（Bootstrap3に対応したとのこと）
• yamm2 -> 3 (megamenu)
• これにまとまってる感じなので粛々とクラスを付け替える感じ
  • http://matome.naver.jp/odai/2137510540117012201
• 手強いのは非表示まわりと toggle ですかねえ

やったこと

• gem upgrade
• bootstrap/responsive を削除
• span* を col-xs-* に変更
• i.icom-xxx を span.glyphicon-xxx に変更。中でごにょってると探すの大変なとこもありそう
  • ※ i は Bootstrap3 でも使えます...
• row-fluid, container-fluid から -fluid を削除
• text-error を text-danger に変更
• alert-error -> alert-danger に変更
• btn-mini -> btn-xs に変更

megamenu

• Yamm2 -> Yamm3 （http://geedmo.github.io/yamm3/ を見ながら）
  • yamm.css を 3 用に変更
  • menu で yamm 系クラスを 3 用に変更

kaminari

# bootstrap2
%div.pagination
  %ul

# bootstrap3
%div
  %ul.pagination

simple_form

• 3.1.0.rc1で Bootstrap3 に対応したそうなので upgrade
• ↓をみながら対応
• https://github.com/plataformatec/simple_form/commit/4963374e7b448b25a98ee34aec1d9bf16a6c9028
• 自分達のアプリ用の wrapper 作ってデフォルトをそれにした col-sm-* あたりを調整

  config.wrappers :my_application_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label, class: 'col-sm-2 control-label'

    b.wrapper tag: 'div', class: 'col-sm-4' do |ba|
      ba.use :input, class: 'form-control'
      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end

  config.default_wrapper = :millefeuille_form

• config/initializers/simple_form.rb

# bootstrap2
config.label_class = 'control-label'

# bootstrap3
config.label_class = nil

• .field_with_errors -> .has-error に変更

toggle

• .toggle() とかしてたところを .collapse('toggle') にする
• デフォを .hide にしていたものは .collapseにする
• capybara で hidden_field の要素に visible: false をつける

# bootstrap2
find("#target_id").set('hoge')

# bootstrap3
find("#target_id", visible: false).set('hoge')

• visible については upinetree さんのこちらの記事を
  • 非表示要素はCapybaraのfindで検索対象になるのか

modal

• .hide を削除して class を追加

# bootstrap2
.modal.hide.fade{ ... }
  .modal-header

# bootstrap3
.modal.fade{ ... }
  .modal-dialog
    .modal-content
      .modal-header

select2

• 3.5.2 -> 3.5.7
• application.css に *= require select2-bootstrap を追加
• （Bootstrap3 のデフォルトのセレクトボックスは、フラットじゃないのであれですが）フラットな感じにしたい場合は、 http://fk.github.io/select2-bootstrap-css/ の CSS を読み込むようにしましょう

bootstrap-datepicker-rails

• 1.1.1.9 -> 1.3.0.2

# bootstrap2
*= require bootstrap-datepicker

# bootstrap3
*= require bootstrap-datepicker3

bootstrap-select-rails

• github のマスターだと対応しているっぽい

gem 'bootstrap-select-rails', git: '[e-mail]:Slashek/bootstrap-select-rails.git'

参考になるかも

• "Example application with SimpleForm and Twitter Bootstrap" http://simple-form-bootstrap.plataformatec.com.br/
• "How to use Bootstrap 3 input group in Simple Form" https://github.com/plataformatec/simple_form/wiki/How-to-use-Bootstrap-3-input-group-in-Simple-Form