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:

1. Laraskan Jarak Aksara: Tingkatkan jarak aksara untuk memisahkan digit secara visual.
2. Gayakan Sempadan Bawah: Cipta jidar bawah bertitik atau putus-putus untuk mensimulasikan medan yang berasingan.
3. Inilah Coretan Kod

<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!