masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

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 Hamilton

Lepaskan： 2024-12-15 17:13:14

asal

590 orang telah melayarinya

How to add an icon to a search input in Bootstrap 4?

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><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><button>

Salin selepas log masuk

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><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

Salin selepas log masuk

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><input>

Salin selepas log masuk

<button>

Salin selepas log masuk

Kumpulan Input dengan Prepend

Serupa dengan input kumpulan dengan append, teknik ini menggunakan kumpulan input dengan input-group-prepend. Ikon diletakkan dalam prepend, terletak sebelum medan input.

<br><div> <span class="input-group-prepend"> </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

Salin selepas log masuk

<button>

Salin selepas log masuk

Pilihan teknik bergantung pada rupa dan fungsi yang diingini. Contoh ini menunjukkan beberapa kaedah untuk menyepadukan ikon ke dalam input carian menggunakan Bootstrap 4, memberikan fleksibiliti dalam reka bentuk dan pelaksanaan.

Atas ialah kandungan terperinci Bagaimana untuk menambah ikon pada input carian dalam Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Mendapatkan Ketinggian Elemen Di Dalam Div Tersembunyi Dengan Cekap Menggunakan jQuery? Artikel seterusnya：Akses Animasi CSS dengan Kecerunan!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2194

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2341

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1963

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...