如何使用 Bootstrap 樣式建立分區 OTP 輸入欄位？

使用樣式技術隔離輸入欄位

目標是設計一個與所提供的圖像中描述的使用者介面類似的使用者介面，其中可以在離散欄位中輸入四位OTP。雖然傳統方法涉及創建四個單獨的輸入字段，但可能有另一種樣式方法可以實現此目的。

Bootstrap 來救援

Bootstrap 框架提供了樣式解決方案它將單個輸入字段轉換為分區字段，使其呈現出多個輸入的外觀。使用方法如下：

1. 調整字元間距：增加字元間距以在視覺上分隔數字。
2. 風格化底部邊框： 建立點線或虛線底部邊框來模擬單獨的欄位。
3. 這是程式碼片段

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

以上是如何使用 Bootstrap 樣式建立分區 OTP 輸入欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！