Wie man Jasnys Datei Upload mit Bootstrap 3

Question

So Bootstrap 3 kam gerade heraus. Ich bevorzuge es Bootstrap 2, aber ich verwende derzeit Jasny's extension für Datei-Uploads. Gibt es eine Möglichkeit, diese Funktion auszuwählen und sie mit Bootstrap 3 zu verwenden?

Answer 1

Wenn Sie nur die Datei-Upload-Plugin möchte ich im Grunde funktionieren, finden Sie unter: http://bootply.com/72995

Sie das Plugin von herunterladen können: http://bootstrap-server.jasny.net/bootstrap-fileupload.zip Sie werden benötigt, um die Javascript und CSS-Dateien einsehen. Oder Sie könnten herunterladen: die Datei-upload.less und Datei-upload.js Dateien von http://jasny.github.io/bootstrap/

In diesem Handbuch: http://www.bootply.com/migrate-to-bootstrap-3 Ihre HTML kompatibel mit Twitters Bootstrap 3. (ändern Klassen machen wie in Ihrem CSS-Input-hängen Datei auch).

Viel Glück

Answer 2

für ein Projekt benötigt dies so ist dies, wie ich es tat. Die gute Nachricht ist die große Veränderung ist in der HTML, wie es möglich ist, das Plugin zu Bootstrap 3.0 durch Hinzufügen von nur 5 Zeilen und Ändern von 4 anderen in der css des Plugins anzupassen. Hier

DEMO

ist die html Markup für die Verwendung von Fileupload mit Bootstrap 3.0:

<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> 

und die Änderungen an der 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*/ 

sowie

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

Es gibt höchstwahrscheinlich Optimierungen, die getan werden können (einige Klassen in der alten css können gelöscht werden, aber dies würde getestet werden müssen), um den Code zu verbessern, aber das ist, was ich jetzt bin mit, da es recht ist einfach zu implementieren.

Answer 3

wenn Sie mit Datei-Eingabe bootstraped wollen bootstrap3 Sie diese versuchen können
http://www.abeautifulsite.net/blog/2013/08/whipping-file-inputs-into-shape-with-bootstrap-3/