Rumah > Artikel > hujung hadapan web > Bagaimana untuk Mencipta Medan Input OTP Berparti Menggunakan Penggayaan Bootstrap?
Mengasingkan Medan Input dengan Teknik Penggayaan
Objektifnya adalah untuk mereka bentuk antara muka pengguna yang serupa dengan yang digambarkan dalam imej yang disediakan, di mana OTP empat digit boleh dimasukkan dalam medan diskret. Walaupun kaedah konvensional melibatkan penciptaan empat medan input berasingan, mungkin terdapat pendekatan penggayaan alternatif untuk mencapainya.
Bootstrap to the Rescue
Rangka kerja Bootstrap menawarkan penyelesaian penggayaan yang mengubah medan input tunggal menjadi medan terbahagi, memberikan rupa input berbilang. Begini cara untuk menggunakannya:
<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>
Atas ialah kandungan terperinci Bagaimana untuk Mencipta Medan Input OTP Berparti Menggunakan Penggayaan Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!