kzen.dev
Lebih
Question

Cara menggunakan unggahan file Jasny dengan Bootstrap 3

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?

Bass Jobsen
Bass Jobsen
Pertanyaan edit 9 Agustus 2013 в 8:15
Pemrograman
file-upload
twitter-bootstrap-3
twitter-bootstrap
Solution / Answer

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

11
Kecerdasan buatan untuk mengurai produk dari halaman mana pun
productapi.dev

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.

DEMO

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.

edsioufi
edsioufi
Jawaban edit 14 Agustus 2013 в 11:38
8
Kecerdasan buatan untuk mengurai produk dari halaman mana pun
productapi.dev

jika Anda hanya ingin input file bootstrap dengan bootstrap3, Anda dapat mencoba ini
http://www.abeautifulsite.net/blog/2013/08/whipping-file-inputs-into-shape-with-bootstrap-3/

4