Wie füge ich mit Bootstrap Symbole zu Sucheingabefeldern hinzu?

Sucheingabefeld mit Symbol-Bootstrap

In dieser modernen Ära von Bootstrap 5 und höher ist das Anpassen von Sucheingabefeldern mit Symbolen ein Kinderspiel geworden . Lassen Sie uns in zwei Hauptansätze eintauchen, um Symbole in Ihre Sucheingaben zu integrieren.

Bootstrap 5 Beta

Bootstrap 5 stellt uns die Eingabegruppenklasse zur Verfügung, die sich nahtlos in integrieren lässt Eingabefelder. So können Sie es verwenden:

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

Bootstrap 4 (Originalantwort)

Wenn Sie mit Bootstrap 4 arbeiten, sollten Sie die Verwendung der Eingabegruppenklasse in Betracht ziehen sowie:

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

Zusätzliche Optionen für Bootstrap 4:

• Randmanipulation: Verwenden Sie Bootstrap-Dienstprogrammklassen wie border-right-0 oder border-left-0, um Eingaben zu erstellen, bei denen das Symbol scheinbar im Feld schwebt .
• Eingabegruppentext: Verwenden Sie Eingabegruppentext mit transparentem Hintergrund, um dasselbe zu erreichen Wirkung.
• Rastersystem: Nutzen Sie das Rastersystem (Zeile und Spalte) ohne Zwischenräume, um nahtlose Übergänge zwischen der Eingabe und dem Symbol zu schaffen.

Das obige ist der detaillierte Inhalt vonWie füge ich mit Bootstrap Symbole zu Sucheingabefeldern hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!