Twitter bootstrap 如何使用Jasny'；s文件上传与引导3

所以Bootstrap3刚刚问世。我更喜欢它而不是Bootstrap 2，但我目前正在使用它上传文件。有没有一种方法可以选择该特性并将其用于Bootstrap3

当您只需要文件上传插件时，我基本上可以工作，请参见：

您可以从下载插件：您将获得所需的javascript和css文件。 或者您也可以从下载：file-upload.less和file-upload.js文件

使用本指南：使您的html与Twitter的Bootstrap3兼容。（在css文件中也更改类似input append的类）

---

祝你好运

一个项目需要这个，所以我就是这样做的。好消息是，

HTML

中的主要变化是，只需在插件的

css

中添加5行，修改其他4行，就可以使插件适应Bootstrap3.0

以下是将fileupload与Bootstrap 3.0一起使用的

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>

以及

/*==================================*/
/*.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

中的一些类可以删除，但这需要测试）改进代码，但这是我目前正在使用的，因为它很容易实现。

如果您只想使用bootstrap3进行Bootstrap文件输入，您可以尝试此方法

鉴于bootstrap3中的大量更改，不太可能有简单的方法。我想，如果Bootstrap3这么简单的话，Jasny的网站上已经有了Bootstrap3的支持。你可以尝试使用“定制”页面只下载文件上传脚本，并将其添加到你的Bootstrap3项目中。这个插件（重命名为“文件输入”）现在也可用于Bootstrap3.0。我刚刚使用了原始的bootstrap-fileupload.css，它工作正常。你遇到了什么需要调整css的问题？。选中“选择文件”左边框：它不是圆形的。这是由“以及”固定的。此外，请尝试选择一个文件名较长的文件，并调整窗口大小，以便出现溢出。这是固定的css的补充。@Emerson还解决了溢出适应新的方式控制反应在引导3（动态全宽而不是固定宽度）。酷。我会查出来的。文件对话框不能用那个html为我打开吗？

/*==================================*/
/*.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;
}
/*==================================*/