我正在尝试构建一个Rails应用程序,而simple_form似乎是一个非常有用的gem。问题在于我正在使用Twitter Bootstrap CSS进行样式设计,而simple_form不允许您指定HTML的布局。
请问有人能告诉我如何将simple_form的HTML格式符合Bootstrap CSS的要求吗?
我正在尝试构建一个Rails应用程序,而simple_form似乎是一个非常有用的gem。问题在于我正在使用Twitter Bootstrap CSS进行样式设计,而simple_form不允许您指定HTML的布局。
请问有人能告诉我如何将simple_form的HTML格式符合Bootstrap CSS的要求吗?
注意:本答案仅适用于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 {
margin-right: 20px;
}
可能还有更多,但这是一个开始。
简单表单2.0支持Bootstrap:
rails generate simple_form:install --bootstrap
bootstrap-sass
还可用于Rails 3.1资产管道和Rails 3.0。 formtastic-bootstrap
经过RSpec测试,因此我认为这是一个不错的选择!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
simple_form允许设置CSS类(传入:html => {:class => nil}
将只显示"simple_form"类)。
注意:此功能于2011年7月25日添加,因此许多现有的下载和文档将没有此功能。您也可以将其包装在指定样式的div中。
您还可以始终使用以下代码为单个元素设置样式
<%= f.input :username, :label_html => { :class => 'my_class' } %>
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 %>