22

Twitter Bootstrap 3.0.0 フォームを包括的にサポートする Rails 4 互換のフォームビルダー gem はありますか?

これは、私が「包括的な」サポートと見なすもののベンチマークです。

  • 3 つのレイアウトすべて (基本、水平、インライン) のサポート
  • 基本的な入力タイプ (input、textarea、select など) のサポート
  • スタックとインラインの両方のチェックボックス/ラジオ ボタンのサポート
  • すべての入力状態のサポート (フォーカス、無効、検証)
  • ヘルプ テキスト/エラー メッセージのサポート
  • input-append/prepend のサポート (TWBS3 では input-group と呼ばれるようになりました)。
  • date_select (インライン選択ボックス) など、Rails 固有のフォーム「要素」を処理するためのサポート

TWBS3 フォームの詳細については、TWBS3ドキュメントとWIP github issueを参照してください。

simple_formとtwitter_bootstrap_form_forの両方を見てきましたが、どちらも進歩していますが、現時点ではどちらも十分な解決策を提供していないようです。

シンプルなフォルム

基本的なレイアウトの解決策があるように見えますが、TWBS3 で必要な追加のグリッド マークアップが原因で、水平方向のフォームは現在不可能であることがわかります。

https://github.com/plataformatec/simple_form/pull/864 https://github.com/plataformatec/simple_form/issues/857

の Twitter ブートストラップ フォーム

このプル リクエストは有望に見えますが、使用されているマークアップとクラスに不正確さが見られます。

https://github.com/stouset/twitter_bootstrap_form_for/pull/84

4

3 に答える 3

5

https://github.com/potenza/bootstrap_formをチェックアウトしましたか? Bootstrap 3 のサポートを追加したばかりで、非常に軽量です。

ほぼすべての要件をサポートしていますが、現在、日付と時刻の選択はデフォルトでスタックされているため、適切なソリューションに取り組んでいます.

erb でのフォームの例を次に示します。

<%= bootstrap_form_for(@user) do |f| %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.check_box :remember_me %>
  <%= f.submit "Log In" %>
<% end %>

そして出力：

<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
  <div class="form-group">
    <label for="user_email">Email</label>
    <input class="form-control" id="user_email" name="user[email]" type="email">
  </div>
  <div class="form-group">
    <label for="user_password">Password</label>
    <input class="form-control" id="user_password" name="user[password]" type="password">
  </div>
  <div class="checkbox">
    <label for="user_remember_me">
      <input name="user[remember_me]" type="hidden" value="0">
      <input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> Remember me
    </label>
  </div>
  <input class="btn btn-default" name="commit" type="submit" value="Log In">
</form>
于 2013-12-23T22:40:42.863 に答える
1

最近これを試してみたところ、simple_form を機能させるためのハックがいくつかありました。数週間後に単純なフォームをもう一度確認してください。その間に、マークアップを手動で作成するか、更新されるまで simple_form を使用して厄介なフォームを使用することができます。

ここで進行状況を監視できます: https://github.com/rafaelfranca/simple_form-b​​ootstrap /pull/28

于 2013-09-25T11:14:14.853 に答える