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

Search Input Field with Icon Bootstrap

In this modern era of Bootstrap 5 and beyond, customizing search input fields with icons has become a breeze. Let's dive into two primary approaches to incorporate icons into your search inputs.

Bootstrap 5 Beta

Bootstrap 5 provides us with the input-group class, which seamlessly integrates with input fields. Here's how you can use it:

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

Bootstrap 4 (Original Answer)

If you're working with Bootstrap 4, consider using the input-group class as well:

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

Additional Options for Bootstrap 4:

• Border Manipulation: Use Bootstrap utility classes like border-right-0 or border-left-0 to create inputs where the icon seemingly floats inside the field.
• Input Group Text: Utilize input-group-text with a transparent background to achieve the same effect.
• Grid System: Leverage the grid system (row and col) with no gutter spacing to create seamless transitions between the input and the icon.

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