Maison > Article > interface Web > Comment créer un champ de saisie OTP partitionné à l'aide du style Bootstrap ?
Isolation des champs de saisie avec des techniques de style
L'objectif est de concevoir une interface utilisateur similaire à celle représentée dans l'image fournie, où un L'OTP à quatre chiffres peut être saisi dans des champs discrets. Alors que les méthodes conventionnelles impliquent la création de quatre champs de saisie distincts, il peut exister une approche alternative de style pour y parvenir.
Bootstrap à la rescousse
Le framework Bootstrap offre une solution de style qui transforme un seul champ de saisie en un champ partitionné, lui donnant l'apparence de plusieurs entrées. Voici comment l'utiliser :
<code class="css">#partitioned { padding-left: 15px; letter-spacing: 42px; border: 0; background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%); background-position: bottom; background-size: 50px 1px; background-repeat: repeat-x; background-position-x: 35px; width: 220px; outline : none; }</code>
<code class="html"><input id="partitioned" type="text" maxlength="4" /></code>
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!