Bagaimanakah Saya Boleh Menyesuaikan Butang Input Fail dalam Twitter Bootstrap?

Menyesuaikan Butang Input Fail dalam Twitter Bootstrap

Dalam Twitter Bootstrap, elemen input fail tidak mempunyai reka bentuk butang yang anggun. Walau bagaimanapun, terdapat penyelesaian mudah untuk mencipta butang muat naik yang boleh disesuaikan menggunakan HTML.

Kaedah:

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

Pendekatan ini memanfaatkan atribut HTML5 tersembunyi untuk mencipta fungsi yang kawalan input fail yang muncul sebagai butang. Gaya butang diwarisi daripada kelas butang utama.

Pendekatan Warisan untuk IE Lama:

Untuk penyemak imbas tanpa sokongan atribut tersembunyi (cth., IE8 dan ke bawah), gunakan CSS ini dan HTML:

HTML:

<span class="btn btn-primary 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;
}

Teknik ini memastikan keserasian dengan versi IE yang lebih lama .

Tambahan Maklumat:

Untuk butiran dan contoh lanjut, rujuk artikel komprehensif di:

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyesuaikan Butang Input Fail dalam Twitter Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!