Dalam pekerjaan sehari -hari, fungsi unggahan dan unduhan file adalah bagian yang sangat diperlukan. Kerangka kerja gaya front-end bootstrap juga lebih sering digunakan. Sekarang, berdasarkan templat gaya Bootstrap yang kuat, sesuaikan gaya untuk mengunduh file.
Di masa depan, kami akan menggunakan kerangka kerja MVC Spring untuk mengimplementasikan semua kode yang diunggah oleh file, jadi tetaplah disini.
Mari kita lihat contoh gambar terlebih dahulu: contoh ini termasuk unduh gaya file sampel dan unggah gaya file.
Cukup unggah kode terlebih dahulu, dan akhirnya jelaskan:
<Div ID = "File"> <label for = ""> pilih file: </label> <div> <input id = "lefile" type = "file" style = "display: none"> <span onclick = "$ ('input [id = lefile]'). klik ();" style = "kursor: pointer; latar belakang-warna: #e7e7e7"> <i> </i> browse </span> <input id = "photocover" type = "text"> <span style = "kursor: pointer; pointer-events: auto;"> </span> </div> </div>Teknologi utama yang terlibat adalah: bootstrap; Pointer-Events of CSS3; html5
1. Gaya Upload File Dasar HTML5
<input type = "file" name = "file">
Gaya ini akan menampilkan efek yang berbeda sesuai dengan browser yang berbeda.
2. Ikon Font
Anda dapat menggunakan ikon font Glyphicons Built in Bootstrap, atau ikon font font yang mengagumkan. Untuk tutorial penggunaan tertentu, silakan merujuk ke situs web resmi:
Glyphicons: http://v3.bootcss.com/components/#glyphicons
Font Luar Biasa: http://fontawesome.io/
Dalam contoh ini, dua ikon digunakan, <i> <i>
Atau <i> <i>
3. CSS3: Events Pointer
Di Bootstrap, pointer-events dari .Form-control-feedback diatur ke tidak ada, yang menyebabkan elemen dipilih saat mengklik tombol sampel unduhan, dan sekarang diatur ke otomatis.
tata bahasa:
Pointer-Events: Auto | tidak ada | Terlihat Dinyam | visibleFill | Visiblestroke | terlihat | dicat | Isi | Stroke | semua
Nilai default: Auto
Berlaku untuk: Semua elemen
Warisan: Ya
Animasi: Tidak
Hitung Nilai: Tentukan Nilai
Nilai:
Auto: Kinerja yang sama dengan properti Events pointer tidak ditentukan. Nilai yang sama seperti yang terlihat pada konten SVG
Tidak ada: Elemen tidak akan pernah menjadi target untuk acara mouse . Namun, ketika properti pointer-events dari elemen keturunannya menentukan nilai-nilai lain, acara mouse dapat menunjuk ke elemen keturunan, dalam hal ini acara mouse akan memicu pendengar acara elemen induk pada penangkapan atau urutan menggelembungkan.
Nilai lain hanya dapat diterapkan pada SVG.
4. Tombol untuk mengunggah file ------- Penggunaan kotak kombo Bootstrap
Penggunaan .input-group dan .input-group-addon.
Untuk rendering CSS tertentu, periksa sendiri kode sumber bootstrap.
5. Implementasi Tombol Sampel Unduh --- Lihat Gaya Prompt Kesalahan Formulir Bootstrap
Penggunaan .has-feedback dan .Form-control-feedback
Jika Anda belum belajar cukup, Anda dapat mengklik di sini untuk belajar dan kemudian melampirkan topik yang indah kepada Anda: Tutorial Pembelajaran Bootstrap
Di atas adalah semua tentang artikel ini, dan saya harap akan sangat membantu bagi semua orang untuk belajar pemrograman bootstrap.