Wie füge ich in Bootstrap 4 ein Symbol zu einer Sucheingabe hinzu?-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Wie füge ich in Bootstrap 4 ein Symbol zu einer Sucheingabe hinzu?

Linda Hamilton

Dec 15, 2024 pm 05:13 PM

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

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></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><p><br></p></div><br>

Rastersystem (Zeile und Spalte)

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">
<pre class="brush:php;toolbar:false"><input>

<button></button>

Eingabegruppe mit Voranstellung

Diese Technik ähnelt der Eingabegruppe mit Anhängen verwendet eine Eingabegruppe mit vorangestellter Eingabegruppe. Das Symbol wird im Präfix vor dem Eingabefeld platziert.


  

  
<button></button>




Die Auswahl von Die Technik hängt von der gewünschten Optik und Funktionalität ab. Diese Beispiele demonstrieren mehrere Methoden zum Integrieren eines Symbols in eine Sucheingabe mithilfe von Bootstrap 4 und bieten Flexibilität bei Design und Implementierung.

Das obige ist der detaillierte Inhalt vonWie füge ich in Bootstrap 4 ein Symbol zu einer Sucheingabe hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

Zwei Bilder und eine API: alles, was wir für die Wiederbelebung von Produkten brauchenApr 15, 2025 am 11:27 AM

Ich habe kürzlich eine Lösung gefunden, um die Farbe eines Produktbildes dynamisch zu aktualisieren. Mit nur einem Produkt können wir es auf unterschiedliche Weise zeigen, um zu zeigen

Wöchentliche Plattformnachrichten: Auswirkungen von Code von Drittanbietern, passive gemischte Inhalte, Länder mit den langsamsten VerbindungenApr 15, 2025 am 11:19 AM

In der Roundup in dieser Woche wird Lighthouse beleuchtet, die Drittanbieter-Skripte, unsichere Ressourcen auf sicheren Websites und viele Länderverbindungsgeschwindigkeiten blockiert werden

Optionen zum Hosting Ihrer eigenen nicht-javaScript-basierten AnalysenApr 15, 2025 am 11:09 AM

Es gibt eine Menge Analyseplattformen, mit denen Sie Besucher- und Nutzungsdaten auf Ihren Websites verfolgen können. Vielleicht vor allem Google Analytics, das weit verbreitet ist

Es ist alles in der KopfApr 15, 2025 am 11:01 AM

Der Dokumentkopf ist vielleicht nicht der glamouröseste Teil einer Website, aber was darauf einfließt

Was ist Super () in JavaScript?Apr 15, 2025 am 10:59 AM

Was passiert, wenn Sie ein JavaScript sehen, das Super () aufruft. In einer Kinderklasse verwenden Sie Super (), um den Konstruktor und Super des Elternteils anzurufen. zugreifen

Vergleich der verschiedenen Arten von nativen JavaScript -PopupsApr 15, 2025 am 10:48 AM

JavaScript verfügt über eine Vielzahl von integrierten Popup-APIs, die eine spezielle Benutzeroberfläche für die Benutzerinteraktion anzeigen. Berühmt:

Warum sind zugängliche Websites so schwer zu erstellen?Apr 15, 2025 am 10:45 AM

Ich habe neulich mit einigen Front-End-Leuten darüber gesprochen, warum so viele Unternehmen zugängliche Websites erstellen. Warum sind Websites so schwer zugänglich?