Question

所以Bootstrap 3刚刚问世。我更喜欢Bootstrap 2，但我目前正在使用Jasny's extension进行文件上传。有没有办法挑选该功能并将其与Bootstrap 3一起使用？

Answer 1

如果您只想要文件上传插件我将基本工作，请参阅：http://bootply.com/72995

您可以从以下网址下载插件：http://bootstrap-server.jasny.net/bootstrap-fileupload.zip您将获得所需的javascript和css文件。或者您可以从http://jasny.github.io/bootstrap/

下载：file-upload.less和file-upload.js文件

使用本指南：http://www.bootply.com/migrate-to-bootstrap-3使您的html与Twitter的Bootstrap 3兼容。（在您的css文件中更改输入附加类等）。

祝你好运

Answer 2

对于一个项目需要这个，所以我就是这样做的。好消息是主要的变化是HTML，因为可以通过在插件的css中仅添加5行并修改4个其他内容来使插件适应Bootstrap 3.0。

DEMO

以下是使用Bootstrap 3.0 fileupload 的html标记：

<div class="form-group">
    <div class="fileupload fileupload-new" data-provides="fileupload">
        <div class="input-group">
            <div class="form-control uneditable-input"><i class="icon-file fileupload-exists"></i> 
                <span class="fileupload-preview"></span>
            </div>
            <div class="input-group-btn">
                <a class="btn btn-default btn-file">
                    <span class="fileupload-new">Select file</span>
                    <span class="fileupload-exists">Change</span>
                    <input type="file" class="file-input"/></a>
                <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remove</a>
            </div>
        </div>
    </div>
</div>

以及bootstrap-fileupload.css的更改：

.fileupload .uneditable-input {
  display: inline-block;
  margin-bottom: 0px;
  vertical-align: middle;
  cursor: text;
  overflow: hidden;                 /*Added this line*/
  max-height: 34px;                 /*Added this line*/
}
.fileupload .fileupload-preview {   /*Added this line*/
  line-height: 21px;                /*Added this line*/
}                                   /*Added this line*/

以及

/*==================================*/
/*.fileupload-new .input-append .btn-file {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}*/
/*change to this:*/
.fileupload-new .input-group .btn-file {
  -webkit-border-radius: 0 3px 3px 0 !important;
  -moz-border-radius: 0 3px 3px 0 !important;
  border-radius: 0 3px 3px 0 !important;
}
/*==================================*/

最有可能的优化可以完成（可以删除旧css中的某些类，但必须对其进行测试）以改进代码，但这就是我现在使用的，因为它很容易实现。

Answer 3

如果您只想使用bootstrap3输入引导文件，可以试试这个http://www.abeautifulsite.net/blog/2013/08/whipping-file-inputs-into-shape-with-bootstrap-3/

如何使用Bootstrap 3上传Jasny的文件

3 个答案: