Heim >Web-Frontend >CSS-Tutorial >Wie füge ich in Bootstrap 4 ein Symbol zu einer Sucheingabe hinzu?
Wie füge ich in Bootstrap 4 ein Symbol zu einer Sucheingabe hinzu?
- Linda HamiltonOriginal
- 2024-12-15 17:13:14591Durchsuche
Bootstrap 4 – Sucheingabe mit einem Symbol
Die Frage betrifft die Integration eines Symbols in eine Bootstrap 4-Sucheingabe. Das Problem entsteht, weil Bootstrap 4 keine Glyphicons unterstützt. Hier finden Sie eine ausführliche Erklärung, wie Sie mithilfe verschiedener Techniken ein Symbol in die Sucheingabe integrieren können:
Eingabegruppe mit Anhängen
Diese Technik verwendet ein Eingabegruppe mit einem Anhang oder einem Voranhang für das Symbol. Das Symbol wird entweder vor oder nach dem Eingabefeld platziert.
<br><div> <input class="form-control py-2" type=" search" value="search"> <span><pre class="brush:php;toolbar:false"><button>
Eingabegruppe mit Eingabegruppentext
Diese Technik verwendet eine Eingabegruppe mit Eingabegruppentext für das Symbol. Der Eingabegruppentext bietet einen Platzhalter für das Symbol ohne grauen Hintergrund.
<br><div> <input class="form-control py- 2 border-right-0 border" type="search" value="search"> <span><pre class="brush:php;toolbar:false"><div>
Rastersystem (Zeile und Spalte)< /h3>
Diese Technik nutzt das Rastersystem (Zeile und Spalte), um Erstellen Sie eine Sucheingabe mit einem Symbol. Es werden keine Zwischenräume verwendet, um den Abstand zwischen den Spalten zu eliminieren, was zu einem nahtlosen Layout führt.
<br><div> <div class="col"></p> <pre class="brush:php;toolbar:false"><input>
<button>