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 Hamilton
Libérer: 2024-12-15 17:13:14
original
600 Les gens l'ont consulté

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

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><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><button>
Copier après la connexion
Copier après la connexion



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><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>
Copier après la connexion

Copier après la connexion



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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><input>
Copier après la connexion


<button>
Copier après la connexion



Groupe d'entrée avec préfixe

Similaire au groupe d'entrée avec append, cette technique utilise un groupe d'entrée avec input-group-prepend. L'icône est placée dans le préfixe, situé avant le champ de saisie.

<br><div> <span class="input-group-prepend"> </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>
Copier après la connexion
Copier après la connexion


<button>
Copier après la connexion
Copier après la connexion



Le choix de la technique dépend de l’apparence et de la fonctionnalité souhaitées. Ces exemples démontrent plusieurs méthodes pour intégrer une icône dans une entrée de recherche à l'aide de Bootstrap 4, offrant une flexibilité dans la conception et la mise en œuvre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Article précédent:Comment puis-je obtenir efficacement la hauteur d'un élément dans une division cachée à l'aide de jQuery ? Article suivant:Accédez aux animations CSS avec Gradienty !
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal