23

Rails アプリを構築しようとしていますが、simple_form は非常に便利な宝石のようです。問題は、スタイリングを行うために Twitter ブートストラップ css を使用していて、simple_form では html のレイアウトを指定できないことです。

simple_form html をブートストラップ css が必要とするフォーマットに適合させる方法を教えてもらえますか?

4

9 に答える 9

24

注：この回答は、SimpleForm<2.0にのみ適用されます

これから始めましょうconfig/initializers/simple_form.rb：

SimpleForm.form_class = nil
SimpleForm.wrapper_class = 'clearfix'
SimpleForm.wrapper_error_class = 'error'
SimpleForm.error_class = 'help-inline'

次に、label要素と入力の間にスペースがありません。これを追加できます。

label {
  margin-right: 20px;
}

おそらくもっとありますが、それは始まりです。

于 2011-09-04T17:05:17.683 に答える
23

シンプルなフォーム 2.0 はブートストラップ対応です。

rails generate simple_form:install --bootstrap
于 2012-02-24T11:43:44.210 に答える
5

私は最近同じ問題を抱えていて、 bootstrap-sassとformtastic-bootstrapの組み合わせを試しました。これは、formtastic のコードとまったく同じコードで動作し、期待どおりにエラー メッセージも表示します。

bootstrap-sassRails 3.1 Asset Pipeline および Rails 3.0 でも動作します。formtastic-bootstrapはRSpecでテストされているので、これは良い方法だと思います!

于 2011-11-11T08:41:49.937 に答える
4

まさにこれを行うための宝石を書きました。これは simple_form ではありませんが、 twitter_bootstrap_form_forと並べると問題なく動作するはずです。

于 2011-10-13T04:51:17.397 に答える
3

simple_formはcssクラスを許可します（渡す:html => {:class => nil}と「simple_form」クラスのみになります）。
nbこれは2011年7月25日に追加されたため、既存のダウンロードやドキュメントの多くには含まれていません。スタイルを指定するdivでラップすることもできます。

次のようなコードを使用して、個々の要素のスタイルをいつでも設定できます。

<%= f.input :username, :label_html => { :class => 'my_class' } %>

于 2011-08-29T02:04:53.207 に答える
3

完全な構成（config / initializers / simple_form.rb）は次のとおりです。

SimpleForm.setup do |config|
  config.hint_class = 'help-block'
  config.error_class = 'help-inline'
  config.wrapper_class = 'clearfix'
  config.wrapper_error_class = 'error'
  config.label_text = lambda { |label, required| "#{label} #{required}" }
  config.form_class = nil
end
于 2011-11-12T18:02:08.430 に答える
2

私はこれを見つけました、うまくいっているようですhttps://github.com/rafaelfranca/simple_form-b​​ootstrap緊密な統合については知りません

于 2011-11-27T15:34:03.877 に答える
2

SimpleForm 1.5 を使用する場合、gem の作成者が必要な構成手順をここで提供します: https://github.com/plataformatec/simple_form/wiki/Twitter-Bootstrap-integration

于 2011-12-20T09:49:35.967 に答える
0

この Railscast: http://railscasts.com/episodes/329-more-on-twitter-bootstrapでは、simple_form を twitter ブートストラップでカスタマイズする方法を確認できます (3:05 にスキップ)。

ターミナル ：

rails g simple_form:install --bootstrap

model/_form.html.erb :

<%= simple_form_for @product, :html => { :class => 'form-horizontal' } do |f| %>
  <fieldset>
    <legend><%= controller.action_name.capitalize %> Product</legend>

    <%= f.input :name %>
    <%= f.input :price %>

    <div class="form-actions">
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', products_path, :class => 'btn' %>
    </div>
  </fieldset>
<% end %>
于 2013-04-13T17:15:51.017 に答える