在 rails 简单表单附件中使用 bootstrap 字形

Question

大家好，我使用简单的形式。我有一个包含附件的模型。一切正常，除了我在浏览器中得到一个浏览按钮，如下图所示。我想要 bootstrap 附件图标而不是浏览按钮。我怎样才能做到这一点？我的代码在这张图片下面：

<%= simple_form_for Status.new do |f| %>
  <%= f.input :status, as: :text, required: true, autofocus: true %>
  <%= f.input :statachment, as: :file, label: 'Attach here' %>
  <%= f.submit "Post", class: 'btn btn-primary' %>
<% end %>

Answer 1

您可以尝试以下方法

http://markusslima.github.io/bootstrap-filestyle/

只需添加

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

然后

$(":file").filestyle({input: false});

或

 <%= f.input :statachment, as: :file, label: 'Attach here', class: "filestyle", data-input: "false" %>

或使用其他方式

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

浏览量

<span class="btn btn-default btn-file">
    Browse <%= f.input :statachment, as: :file, label: 'Attach here' %>
</span>

并在 css

  .btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

在 rails 简单表单附件中使用 bootstrap 字形

Using bootstrap glyphicon in rails simple form attachment

ruby-on-rails

twitter-bootstrap-rails

glyphicons