simple_form&bootstrap简单应用

添加gem

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

配置bootstrap

 # assets/stylesheets/application.css.scss中增加
 @import "bootstrap-sprockets";
 @import "bootstrap";

 # assets/javascripts/application.js中增加(建议添加上jquery_ujs后）
 //= require bootstrap

安装simple_form

 rails g simple_form:install --bootstrap

修改一下layouts/application.html.erb

 <body class="controller_name">
   <div class="container master-container">
       <% if notice %>
         <div class="alert alert-success fade in" data-alert="alert">
           <a class="close" data-dismiss='alert' href="#">×</a>
           <p><%= notice %></p>
         </div>
       <% end %>
 
       <%= yield %>
   </div>
 </body>

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

稍微修改一下：

 <%= simple_form_for(@blog) do |f| %>
  <%= f.error_notification %>

   <div class="form-inputs">
     <%= f.input :title, label: '标题', placeholder: "请输入标题", error: "标题不能为空", 
                  input_html: { maxlength: 20 }, hint: '标题最多20个字' %>
     <%= f.input :content, label: '内容', hint: '腹有诗书气自华', error: "内容不能为空" %>
   </div>
 
   <div class="form-actions">
     <%= f.button :submit %>
   </div>
 <% 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`参数，会默认生成。

最后编辑于：2017.11.27 03:46:56

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

simple_form&bootstrap简单应用