如何使用 Bootstrap 新增圖示來搜尋輸入欄位？

使用圖示Bootstrap 搜尋輸入欄位

在Bootstrap 5 及更高版本的現代時代，使用圖示自訂搜尋輸入欄位已變得輕而易舉。讓我們深入研究將圖標合併到搜尋輸入的兩種主要方法。

Bootstrap 5 Beta

Bootstrap 5 為我們提供了 input-group 類別，它與輸入欄位。以下是如何使用它：

<div class="input-group">
  <input class="form-control border-end-0 border rounded-pill" type="text" value="search">

Bootstrap 4（原始答案）

如果您正在使用Bootstrap 4，請考慮使用input-group 類別還有：

<div class="input-group col-md-4">
  <input class="form-control py-2" type="search" value="search">

Bootstrap 的其他選項4:

• 邊框操作： 使用Bootstrap 實用程式（如0 或border-left-0）建立輸入，其中圖示看似浮動在欄位內.
• 輸入群組文字：利用透明背景的input-group-text來實現相同的效果。
• 網格系統：利用沒有裝訂線間距的網格系統（行和列）在輸入和圖示之間創建無縫過渡。

以上是如何使用 Bootstrap 新增圖示來搜尋輸入欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！