Jadi Bootstrap 3 baru saja keluar. Saya lebih suka Bootstrap 2 tetapi saat ini saya menggunakan ekstensi Jasny untuk mengunggah file. Apakah ada cara untuk memilih fitur tersebut dan menggunakannya dengan Bootstrap 3?
Jika Anda hanya ingin plugin unggah file i akan bekerja pada dasarnya, lihat: http://bootply.com/72995
Anda dapat mengunduh plugin ini dari: http://bootstrap-server.jasny.net/bootstrap-fileupload.zip Anda akan mendapatkan file javascript dan css yang dibutuhkan. Atau Anda dapat mengunduh: file file-upload.less dan file-upload.js dari http://jasny.github.io/bootstrap/
Gunakan panduan ini: http://www.bootply.com/migrate-to-bootstrap-3 untuk membuat html Anda kompatibel dengan Bootstrap 3 dari Twitter (ubah kelas seperti input-append di file css Anda juga).
Selamat mencoba
Saya membutuhkannya untuk sebuah proyek, jadi inilah cara saya melakukannya. Kabar baiknya adalah perubahan utama ada pada HTML
, karena dimungkinkan untuk menyesuaikan plugin ke Bootstrap 3.0 dengan menambahkan hanya 5 baris dan memodifikasi 4 baris lainnya pada css
plugin.
Berikut ini adalah markup html
untuk menggunakan fileupload dengan 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>
dan perubahan pada 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*/
serta
/*==================================*/
/*.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;
}
/*==================================*/
Kemungkinan besar ada pengoptimalan yang dapat dilakukan (beberapa kelas di css
yang lama dapat dihapus, tetapi hal ini harus diuji) untuk memperbaiki kode, tetapi inilah yang saya gunakan untuk saat ini karena cukup mudah untuk diimplementasikan.