使用bootstrap美化页面

 

Form 的样式，可以参考 http://getbootstrap.com/css/#forms 

<%= form_for @package, html: { class: package_form_class(@package), role: 'form' }  do |s|  %>
  <div class="form-group">
    <%= s.label :title, "名称", class: "col-sm-2 control-label" %>
    <div class="col-sm-3">
      <%= s.text_field :title ,:class =>"form-control" %>
    </div>
  </div>

  <div class="form-group">
    <%= s.label :type, "类型", class: "col-sm-2 control-label" %>
    <div class="col-sm-3">
      <%= s.select 'type', options_for_select(['影视','游戏','应用','软件'],@package.type), {}, :class =>"form-control"%>
    </div>
  </div>

  <div class="form-group">
    <%= s.label :language, "语言", class: "col-sm-2 control-label" %>
    <div class="col-sm-3">
      <%= s.text_field :language ,:class =>"form-control" %>
    </div>
  </div>

  <div class="form-group">
    <%= s.label :version, "版本", class: "col-sm-2 control-label" %>
    <div class="col-sm-3">
      <%= s.text_field :version ,:class =>"form-control" %>
    </div>
  </div>

  <div class="form-group">
    <%= s.label :description, "描述", class: "col-sm-2 control-label" %>
    <div class="col-sm-8">
      <%= s.text_area :description, size: "66x8" ,:class =>"form-control" %>
    </div>
  </div>

  <div class="form-group">
    <%= s.label :url, "下载地址", class: "col-sm-2 control-label" %>
    <div class="col-sm-8">
      <%= s.text_field :url,:size => 10*10 ,:class =>"form-control" %>
    </div>
 </div>

  <div class="form-group">
    <%= s.label :app_icon, "应用图标", class: "col-sm-2 control-label" %>
    <div class="col-sm-10">
      <div class="row">
        <div class="col-xs-6 col-md-2">
          <div class="thumbnail app-image">
            <%= image_tag youku_image_url(@package.app_icon), :width => 150 %>

            <div class="caption clearfix">
              <p class='pull-right'>
                <a href="#" class="btn btn-primary btn-xs" role="button">替换</a>
              </p>
            </div>
          </div>
        </div>
      </div>

      <%= s.hidden_field :app_icon ,:class =>"form-control"%>
    </div>
  </div>

  <div class="form-group">
    <%= s.label :title, "应用截图", class: "col-sm-2 control-label" %>

    <div class="col-sm-10">
      <div class="row">
        <% @package.intro_icons.each_with_index do |icon, index| %>
          <div class="col-sm-6 col-md-4">
            <div class="thumbnail app-image">
              <%= image_tag youku_image_url(icon) %>

              <div class="caption clearfix">
                <h5 class='pull-left'><%= "应用截图 #{index + 1}" %></h5>
                <p class='pull-right'>
                  <a href="#" class="btn btn-primary btn-xs" role="button">替换</a>
                  <a href="#" class="btn btn-danger btn-xs" role="button">删除</a>
                </p>
              </div>
            </div>
          </div>
          <%= hidden_field_tag "package[intro_icons][]", icon, :class =>"form-control"%>
        <% end%>
      </div>
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <%= submit_tag "修改", :class => "btn btn-success" %>
      <%= link_to '返回', packages_path, :class => "btn btn-link" %>
    </div>
  </div>
<% end %>

 

转载于:https://www.cnblogs.com/iwangzheng/p/3786062.html