Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menambah ikon pada input carian dalam Bootstrap 4?
Bagaimana untuk menambah ikon pada input carian dalam Bootstrap 4?
- Linda Hamiltonasal
- 2024-12-15 17:13:14591semak imbas
Bootstrap 4 - Cari input dengan ikon
Soalan melibatkan penyepaduan ikon ke dalam input carian Bootstrap 4. Isu ini timbul kerana Bootstrap 4 tidak menyokong Glyphicons. Berikut ialah penjelasan terperinci tentang cara untuk memasukkan ikon ke dalam input carian menggunakan pelbagai teknik:
Kumpulan Input dengan Lampiran
Teknik ini menggunakan kumpulan input dengan tambahan atau prepend untuk ikon. Ikon diletakkan sama ada sebelum atau selepas medan input.
<br><div> <input class="form-control py-2" type=" carian" value="search"> <span><pre class="brush:php;toolbar:false"><button>
Kumpulan Input dengan Teks Kumpulan Input
Teknik ini menggunakan kumpulan input dengan teks kumpulan input untuk ikon. Teks kumpulan input menyediakan ruang letak untuk ikon tanpa latar belakang kelabu.
<br><div> <input class="form-control py- 2 border-right-0 border" type="search" value="search"> <span><pre class="brush:php;toolbar:false"><div>
Sistem Grid (Baris & Lajur)< /h3>
Ini teknik menggunakan sistem grid (baris & lajur) untuk mencipta input carian dengan ikon. Tiada longkang digunakan untuk menghapuskan jarak antara lajur, menghasilkan reka letak yang lancar.
<br><div> <div class="col"></p> <pre class="brush:php;toolbar:false"><input>
<button>