12

所以 Bootstrap 3 刚刚问世。我更喜欢它而不是 Bootstrap 2，但我目前正在使用Jasny 的扩展来上传文件。有没有办法挑选该功能并将其与 Bootstrap 3 一起使用？

4

3 回答 3

11

当您只想要文件上传插件时，我基本上可以工作，请参阅：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 文件中更改诸如 input-append 之类的类）。

祝你好运

于 2013-08-08T22:54:06.620 回答
8

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

演示

这是在Bootstrap 3.0html中使用fileupload的标记：

<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可以删除，但这必须进行测试）来改善代码，但这是我现在使用的，因为它很容易实现。

于 2013-08-14T11:33:01.970 回答
5

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

于 2013-09-26T19:44:16.910 回答