communauté

Articles Sujets Questions et réponses

Apprendre

Cours Dictionnaire de programmation

Bibliothèque d'outils

Outils de développement Code source du site Web Bibliothèques PHP Effets spéciaux JS Matériel du site Web Plugins d'extension

Loisirs

Téléchargement du jeu Tutoriels de jeu

Français

简体中文 English 繁体中文 日本語 한국어 Melayu Français Deutsch

Login

singup

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

591 Les gens l'ont consulté

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>

<button>

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!