【魔改经验分享二】简单三步，让你的表格排版更加高大上！

前言

simple_form 缺省的表格排版太清汤寡水:P。

找到一个bootsnipp"Register Page Design...." ->http://bootsnipp.com/snippets/featured/register-page-design。

虽说是给Register用的，但是改一改，可以让new/edit 大变样哦。

上图。

之前：

before.png

之后：

table.png

是不是瞬间好看很多？

手把手步骤

bootsnip.png

第一步：复制CSS

CSS: 把CSS 里的内容 copy 到 app/assets/stylesheets/jobs.scss。

第二步：复制HTML

HTML： 把HTML 的内容copy到 app/views/jobs/index.html.erb，

第三步 : 更改HTML， 使用jobs.scss里面新增的style class

<h1> Add a job </h1>

 <%= simple_form_for @job do |f| %>

 <%= f.input :title %>
 <%= f.input :description %>
 
   <%= f.submit "Submit" %>
 <% end %>

更改为：

    <div class="row main">
      <div class="main-center">
      <h1> Add a job </h1>
          <%= simple_form_for @job do |f| %>
          <div class="form-inputs">
            <div class="cols-sm-10">
                <%= f.input :title, required: true, autofocus: true %>
            </div>
            <div class="cols-sm-10">
                <%= f.input :description %>
            </div>
       
          <div class="form-actions">
            <%= f.button :submit, "提交" %>
          </div>
          <% end %>

      </div>
      </div>

就这么简单。
同学，试一试呗！

----------------- 我是分割线----------------------------------------------------

如有问题，请直接留言。
喜欢我的文章，请关注我的微信公众号 爱莉莎的雪月花。

mini_爱莉莎的雪月花.png

喜欢我分享，可以去我的网站奇妙工作网.
http://qimiao.herokuapp.com/, 看看效果！ ^_.
喜欢我的设计，请投我一票，你的鼓励，如冬日初升的太阳，温暖感人。

投票.png

谢谢你的阅读。