【问题标题】:Using bootstrap glyphicon in rails simple form attachment在 Rails 简单表单附件中使用引导 glyphicon
【发布时间】:2016-04-04 13:18:54
【问题描述】:

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

<%= 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 %>

【问题讨论】:

    标签: ruby-on-rails glyphicons twitter-bootstrap-rails


    【解决方案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;
    }
    

    【讨论】:

    • 感谢 Rajarshi 的帮助
    • 不客气阿迪亚
    • 如果它对你有帮助,那么你就接受我的回答……以便将来下一个可以使用它
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-12-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-07-29
    相关资源
    最近更新 更多