Bagaimana Menggayakan Input Carian Dengan Ikon dalam Bootstrap?

Menggayakan Input Carian dengan Ikon dalam Bootstrap

Bootstrap 4 telah menghapuskan sokongan untuk glyphicons, tetapi masih terdapat cara untuk memasukkan ikon ke dalam input carian . Berikut ialah beberapa pendekatan:

Menggunakan Kumpulan Input:

• Bootstrap 5:

<div class="input-group">
  <input class="form-control border-end-0 border rounded-pill" type="text" value="search">

• Bootstrap 4:

<div class="input-group col-md-4">
  <input class="form-control py-2" type="search" value="search">

Letakkan Ikon Di Dalam Input:

<input class="form-control py-2 border-right-0 border" type="search" value="search">

Menggunakan Teks Kumpulan Input tanpa Latar Belakang:

<input class="form-control py-2 border-right-0 border" type="search" value="search">

Pilihan Lain:

• Sistem Grid:

<div class="row no-gutters">
  <div class="col">
    <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search">

• Prepend Ikon:

<div class="input-group">
  <span class="input-group-prepend">
    <div class="input-group-text bg-transparent border-right-0">
      <i class="fa fa-search"></i>
    </div>
  </span>
  <input class="form-control py-2 border-left-0 border" type="search" value="...">

Atas ialah kandungan terperinci Bagaimana Menggayakan Input Carian Dengan Ikon dalam Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!