simple_form&bootstrap简单应用

1. 添加gem

     # Gemfile中
     gem 'bootstrap-sass'
     gem 'simple_form' 
   

2. 配置bootstrap

    # assets/stylesheets/application.css.scss中增加
    @import "bootstrap-sprockets";
    @import "bootstrap";
   
    # assets/javascripts/application.js中增加(建议添加上jquery_ujs后）
    //= require bootstrap
   

3. 安装simple_form

    rails g simple_form:install --bootstrap
   

4. 修改一下layouts/application.html.erb

    
      
   
          <% if notice %>
            
   
              ×
              
   <%= notice %>
            
          <% end %>
    
          <%= yield %>
      
    
   

5. rails g scaffold Blog title content:text，然后查看views/blogs/_form.html.erb的内容。

6. 稍微修改一下：

    <%= simple_form_for(@blog) do |f| %>
     <%= f.error_notification %>
   
      
   
        <%= f.input :title, label: '标题', placeholder: "请输入标题", error: "标题不能为空", 
                     input_html: { maxlength: 20 }, hint: '标题最多20个字' %>
        <%= f.input :content, label: '内容', hint: '腹有诗书气自华', error: "内容不能为空" %>
      
    
      
   
        <%= f.button :submit %>
      
    <% end %>
   

---

simple_form

---

一些用法

• collection_radio_buttons：

<%= f.collection_radio_buttons :is_open, [[1, '所有人都能看'] ,[0, '只能自己看']], :first, :last,
checked: (@blog.is_open.nil? ? 0 : @blog.is_open) %>

其中`[[1, '所有人都能看'] ,[0, '只能自己看']]`表示radio的value和text。`:first`表示`value`的值， `:last`表示`text`的值，`checked`表示默认哪一个`radio`被选中。
还可以这样写：

<%= f.collection_radio_buttons :is_open, @blog.all, :id, :title %>

类似的还有`collection_check_boxes`

- `input_html: {value: value}`可以指定`input`中的值

<%= f.input :tag_list, input_html: { value: @blog.tag_list.join(",") }, label: 'tags', placeholder: "输入tags，用‘，’分开." %>

- 预先选择checkbox，使用`checked: ["check001", true]`参数，当然也可以预先选择多个选项。

<%= f.collection_check_boxes :tags, current_user.blogs.tag_counts.all, :name, :name, checked: @blog.tag_list.to_a << true %>

其中`@blog.tag_list.to_a << true`是一个数组，并且最后一个元素为`true`，这样表示`@blog.tag_list.to_a`数组中的所有元素都会被预先选择上

- 不显示`label`，使用`label: false`参数，如果不写`label`参数，会默认生成。