web-dev-qa-db-ja.com

Bootstrap 3でJasnyのファイルアップロードを使用する方法

したがって、Bootstrap 3が出てきたばかりです。Bootstrap 2よりも好みますが、現在ファイルのアップロードに Jasnyの拡張子 を使用しています。その機能をチェリーピックして、Bootstrap 3？

twitter-bootstrapfile-uploadtwitter-bootstrap-3
11
emersonthis

ファイルアップロードプラグインのみが必要な場合、基本的には機能します。以下を参照してください 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- あなたのHTMLをTwitterのBootstrap 3。 cssファイルのinput-appendも同様です）。

幸運を

11
Bass Jobsen

これはプロジェクトに必要だったので、これが私がやった方法です。良いニュースは、主要な変更がHTMLにあることです。プラグインをBootstrap 3.0に適合させるには、プラグインのcssで5行のみを追加し、他の4行を変更します。

[〜＃〜] 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の一部のクラスは削除できますが、これをテストする必要があります）が、これは、実装が非常に簡単なので、今使用しているものです。

8
edsioufi

bootstrap3でブートストラップされたファイル入力のみが必要な場合は、これを試すことができます
http://www.abeautifulsite.net/blog/2013/08/whipping-file-inputs-into-shape-with-bootstrap-3/

4
patie