twitter-bootstrap 如何在 Bootstrap 3 中使用 Jasny 的文件上传
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18132896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use Jasny's file upload with Bootstrap 3
提问by emersonthis
So Bootstrap 3 just came out. I prefer it to Bootstrap 2 but I am currently using Jasny's extensionfor file uploads. Is there a way to cherry-pick that feature and use it with Bootstrap 3?
所以 Bootstrap 3 刚刚问世。与 Bootstrap 2 相比，我更喜欢它，但我目前正在使用Jasny 的扩展来上传文件。有没有办法挑选该功能并将其与 Bootstrap 3 一起使用？
采纳答案by Bass Jobsen
When you only want the file upload plugin i will work basically, see: http://bootply.com/72995
当您只想要文件上传插件时，我将基本工作，请参阅：http: //bootply.com/72995
You could download the plugin from: http://bootstrap-server.jasny.net/bootstrap-fileupload.zipYou will got the javascript and css files needed. Or you could download: the file-upload.less and file-upload.js files from http://jasny.github.io/bootstrap/
您可以从以下位置下载插件：http://bootstrap-server.jasny.net/bootstrap-fileupload.zip您将获得所需的 javascript 和 css 文件。或者您可以从http://jasny.github.io/bootstrap/下载：file-upload.less 和 file-upload.js 文件
Use this guide: http://www.bootply.com/migrate-to-bootstrap-3to make your html compatible with Twitter's Bootstrap 3. (change classes like input-append in your css file too).
使用本指南：http: //www.bootply.com/migrate-to-bootstrap-3使您的 html 与 Twitter 的 Bootstrap 3 兼容。（也在您的 css 文件中更改诸如 input-append 之类的类）。
Good luck
祝你好运
回答by edsioufi
Needed this for a project so this is how I did it. The good news is the major change is in the HTML, as it is possible to adapt the plugin to Bootstrap 3.0 by adding only 5 lines and modifying 4 other in the cssof the plugin.
一个项目需要这个，所以我就是这样做的。好消息是主要的变化在 中HTML，因为可以通过仅添加 5 行并修改css插件中的其他 4 行来使插件适应 Bootstrap 3.0 。
Here is the htmlmarkup for using fileuploadwith Bootstrap 3.0:
这是在Bootstrap 3.0 中html使用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>
and the changes to the bootstrap-fileupload.css:
以及对 的更改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*/
as well as
也
/*==================================*/
/*.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;
}
/*==================================*/
There are most probably optimizations that can be done (some classes in the old csscan be deleted, but this would have to be tested) to ameliorate the code but this is what I am using for now as it is quite easy to implement.
很可能可以进行优化（旧中的某些类css可以删除，但必须进行测试）以改进代码，但这是我现在正在使用的，因为它很容易实现。
回答by patie
if you want only bootstraped file input with bootstrap3 you can try this
http://www.abeautifulsite.net/blog/2013/08/whipping-file-inputs-into-shape-with-bootstrap-3/
如果你只想用 bootstrap3 引导文件输入，你可以试试这个
http://www.abeautifulsite.net/blog/2013/08/whipping-file-inputs-into-shape-with-bootstrap-3/
