Maison  >  Article  >  interface Web  >  Comment ajouter une icône à l'entrée dans le bootstrap

Comment ajouter une icône à l'entrée dans le bootstrap

angryTom
angryTomoriginal
2019-07-20 13:25:175293parcourir

Comment ajouter une icône à l'entrée dans le bootstrap

Tutoriels recommandés : Tutoriel Bootstrap

Exemple de code

<div class="input-group">
    <div class="input-icon-group">
        <input type="text" class="form-control fc-clear" /> 
        <span id="scan" data-role="md" class="md md-center-focus-weak fa-lg input-icon input-icon-md" style="display: inline;"> 
        </span>
    </div>
    <span class="input-group-btn">
        <button class="btn btn-primary" type="button">
            批号        </button>
    </span>
</div>

Rendu :

Comment ajouter une icône à lentrée dans le bootstrap

Interprétation :

1. Tout d'abord, faites-les en Une ligne utilise principalement les attributs "input-group", "input-icon-group" et "input-group-btn"

2. L'effet de faire apparaître les icônes de l'entrée dans l'entrée est principalement "input-icon input-icon-md " fonctionne et "display: inline" fonctionne.

3. Pour que la zone de saisie occupe toute la ligne d'espace au lieu d'avoir une petite largeur, "form-control" fonctionne.

4. Après avoir saisi du texte dans la zone de saisie, l'icône ne sera pas couverte. Ce qui fonctionne, c'est "fc-clear".

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!

Déclaration:
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