Maison >interface Web >tutoriel CSS >Comment ajouter des icônes aux champs de saisie de recherche avec Bootstrap ?
Champ de saisie de recherche avec Icon Bootstrap
Dans cette ère moderne de Bootstrap 5 et au-delà, la personnalisation des champs de saisie de recherche avec des icônes est devenue un jeu d'enfant . Examinons deux approches principales pour incorporer des icônes dans vos entrées de recherche.
Bootstrap 5 Beta
Bootstrap 5 nous fournit la classe input-group, qui s'intègre parfaitement à champs de saisie. Voici comment vous pouvez l'utiliser :
<div class="input-group"> <input class="form-control border-end-0 border rounded-pill" type="text" value="search">
Bootstrap 4 (réponse originale)
Si vous travaillez avec Bootstrap 4, envisagez d'utiliser la classe input-group ainsi :
<div class="input-group col-md-4"> <input class="form-control py-2" type="search" value="search">
Options supplémentaires pour Bootstrap 4 :
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!