Bagaimanakah Saya Boleh Menyesuaikan Penampilan Butang Muat Naik Fail Bootstrap Twitter?

Menyesuaikan Butang Muat Naik Fail Bootstrap Twitter

Walaupun tiada gaya khusus untuk butang muat naik fail dalam Twitter Bootstrap, terdapat beberapa kaedah untuk meningkatkan penampilannya.

Satu penyelesaian, terpakai untuk Bootstrap versi 3, 4 dan 5, memanfaatkan atribut tersembunyi HTML5 untuk mencipta kawalan input fail berfungsi yang menyerupai butang:

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

Pendekatan ini bergantung pada atribut tersembunyi, yang Bootstrap 4 meniru dengan CSS untuk keserasian. Untuk Bootstrap 3, CSS tambahan ini mungkin diperlukan:

[hidden] {
  display: none !important;
}

Pendekatan Warisan untuk IE Lama:

IE8 dan ke bawah memerlukan struktur HTML/CSS yang berbeza:

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

.btn-file {
  /* ... */
}

.btn-file input[type=file] {
  /* ... */
}

Nota:

• Lama IE tidak membenarkan input fail dicetuskan apabila klik label.
• CSS mengimbangi dengan memanjangkan input fail agar sepadan dengan rentang dan kemudian menyembunyikannya.

Untuk butiran dan contoh lanjut, rujuk kepada catatan blog oleh Abeautifulsite: https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/

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