LoginSignup
5
5

More than 5 years have passed since last update.

Simple Form を Bootstrap 3 に対応させる

Last updated at Posted at 2014-06-18

概要

Simple Form をインストールした。
Bootstrap 3 もちゃんと設定した。
ボタンなどはちゃんと Bootstrap 3 のスタイルが適用されているのだけれども、
テキスト入力のエラーなどのスタイルが適用されていなくてツライ。

原因

Simple Form が Bootstrap 3 に対応していない。

対応

  1. Simple Form のバージョンを上げる。
gem 'simple_form', '>= 3.1.0rc'
    ```

   ```bash
% ./bin/bundle install
    ```

2. 初期化

    conflict すると思うので適宜上書きを。

    ```bash
% ./bin/rails generate simple_form:install --bootstrap
    conflict  config/initializers/simple_form.rb
Overwrite /.../config/initializers/simple_form.rb? (enter "h" for help) [Ynaqdh] Y
       force  config/initializers/simple_form.rb
    conflict  config/initializers/simple_form_bootstrap.rb
Overwrite /.../config/initializers/simple_form_bootstrap.rb? (enter "h" for help) [Ynaqdh] Y
       force  config/initializers/simple_form_bootstrap.rb
       exist  config/locales
    conflict  config/locales/simple_form.en.yml
Overwrite /.../config/locales/simple_form.en.yml? (enter "h" for help) [Ynaqdh] Y
       force  config/locales/simple_form.en.yml
   identical  lib/templates/haml/scaffold/_form.html.haml
===============================================================================

  Be sure to have a copy of the Bootstrap stylesheet available on your
  application, you can get it on http://getbootstrap.com/.

  Inside your views, use the 'simple_form_for' with one of the Bootstrap form
  classes, '.form-horizontal' or '.form-inline', as the following:

    = simple_form_for(@user, html: { class: 'form-horizontal' }) do |form|
===============================================================================
    ```


参考
=====

- [plataformatec/simple_form](https://github.com/plataformatec/simple_form)
- [Update the bootstrap generator to work with Bootstrap 3 · 4963374 · plataformatec/simple_form](https://github.com/plataformatec/simple_form/commit/4963374e7b448b25a98ee34aec1d9bf16a6c9028)
5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5