Bagaimanakah Saya Boleh Membuat Butang Muat Naik Fail Tersuai dengan Bootstrap?

Butang Muat Naik Fail Tersuai Menggunakan Bootstrap

Walaupun elemen input fail lalai dalam Twitter Bootstrap mungkin tidak mempunyai daya tarikan estetik, adalah mungkin untuk mencipta butang tersuai yang meniru rupa butang biru utama.

Penyelesaian Menggunakan HTML:

Untuk Bootstrap 3, 4 dan 5, penyelesaian HTML mudah tersedia:

<label class="btn btn-default">
    Browse <input type="file" hidden>
</label>

Elemen input tersembunyi ini akan berfungsi sebagai kawalan input fail biasa sambil mengekalkan penggayaan butang tersuai.

Pendekatan Warisan untuk Orang Tua Pelayar:

Jika anda memerlukan keserasian dengan IE8 dan ke bawah, gunakan gabungan HTML/CSS berikut:

HTML:

<span class="btn btn-default btn-file">
    Browse <input type="file">
</span>

CSS:

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

Walaupun kaedah ini melibatkan tambahan CSS, ia memastikan keserasian dengan pelayar IE yang lebih lama.

Nota Tambahan:

Sila ambil perhatian bahawa input fail tersembunyi dalam penyelesaian HTML bergantung pada atribut tersembunyi HTML5. Jika anda memerlukan sokongan untuk penyemak imbas yang lebih lama, anda boleh menggunakan pendekatan warisan.

Untuk mendapatkan maklumat lanjut dan contoh tentang cara memaparkan fail yang dipilih, rujuk sumber berikut:

https:/ /www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Butang Muat Naik Fail Tersuai dengan Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!