Heim > Artikel > Web-Frontend > Wie erstelle ich ein partitioniertes OTP-Eingabefeld mithilfe des Bootstrap-Stils?
Isolieren von Eingabefeldern mit Styling-Techniken
Das Ziel besteht darin, eine Benutzeroberfläche ähnlich der im bereitgestellten Bild dargestellten zu entwerfen, wobei a Vierstellige OTP können in diskreten Feldern eingegeben werden. Während bei herkömmlichen Methoden die Erstellung von vier separaten Eingabefeldern erforderlich ist, gibt es möglicherweise einen alternativen Styling-Ansatz, um dies zu erreichen.
Bootstrap to the Rescue
Das Bootstrap-Framework bietet eine Styling-Lösung Dadurch wird ein einzelnes Eingabefeld in ein partitioniertes Feld umgewandelt, sodass es wie mehrere Eingaben aussieht. So verwenden Sie es:
<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>
Das obige ist der detaillierte Inhalt vonWie erstelle ich ein partitioniertes OTP-Eingabefeld mithilfe des Bootstrap-Stils?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!