Maison >interface Web >tutoriel CSS >Comment ajouter une icône à une entrée de recherche dans Bootstrap 4 ?
Comment ajouter une icône à une entrée de recherche dans Bootstrap 4 ?
- Linda Hamiltonoriginal
- 2024-12-15 17:13:14592parcourir
Bootstrap 4 - Entrée de recherche avec une icône
La question consiste à intégrer une icône dans une entrée de recherche Bootstrap 4. Le problème se pose car Bootstrap 4 ne prend pas en charge les Glyphicons. Voici une explication détaillée de la façon d'incorporer une icône dans la saisie de recherche à l'aide de diverses techniques :
Groupe de saisie avec append
Cette technique utilise un groupe d'entrée avec un ajout ou un préfixe pour l'icône. L'icône est placée avant ou après le champ de saisie.
<br><div> <input class="form-control py-2" type=" recherche" valeur="recherche"> <span><pre class="brush:php;toolbar:false"><button>
Groupe d'entrée avec texte du groupe d'entrée
Cette technique utilise un groupe d'entrée avec texte de groupe d'entrée pour l'icône. Le texte du groupe d'entrée fournit un espace réservé pour l'icône sans fond gris.
<br><div> <input class="form-control py- 2 border-right-0 border" type="search" value="search"> <span><pre class="brush:php;toolbar:false"><div>
Système de grille (rangée et colonne)< /h3>
Cette technique utilise le système de grille (ligne et colonne) pour créer une entrée de recherche avec une icône. Aucune gouttière n'est utilisée pour éliminer l'espacement entre les colonnes, ce qui permet d'obtenir une disposition transparente.
<br><div> <div class="col"></p> <pre class="brush:php;toolbar:false"><input>
<button>