ブートストラップ3でJasnyのファイルをアップロードする方法

Question

ブートストラップ3がリリースされました。私はブートストラップ2にそれを好むが、私は現在ファイルのアップロードのためにJasny's extensionを使用しています。その機能をチェリーピックアップしてBootstrap 3で使用する方法はありますか？あなただけのファイルアップロードプラグインを希望する場合

Answer 1

私は、基本的に動作表示されます。http://bootstrap-server.jasny.net/bootstrap-fileupload.zipあなたが必要なJavaScriptとCSSファイルを得ます：http://bootply.com/72995

次の場所からプラグインをダウンロードすることができます。 それとも、ダウンロードできる：http://jasny.github.io/bootstrap/

使用このガイドからのファイルupload.lessとファイルupload.jsファイル：あなたのCSSの入力は、追加のようhttp://www.bootply.com/migrate-to-bootstrap-3は、Twitterのブートストラップ3（チェンジ・クラスを使用してHTMLが互換性を持たせるためにファイルも）。

幸運

Answer 2

これはプロジェクトに必要なので、これはどのように行ったのですか。良いニュースは、HTMLに大きな変更があります。プラグインをブートストラップ3.0に適用するには、プラグインのcssに5行だけを追加し、他の4つを変更することが可能です。ここで

DEMO

ブートストラップ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> 

と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

あなたはブートストラップ3の変化の大きな数を考えると、この
http://www.abeautifulsite.net/blog/2013/08/whipping-file-inputs-into-shape-with-bootstrap-3/