如何使用 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 实用程序类，如 border-right -0 或 border-left-0 创建图标看似漂浮在字段内的输入。
• 输入组文本： 利用具有透明背景的 input-group-text 来实现相同的效果
• 网格系统：利用无装订线间距的网格系统（行和列）在输入和图标之间创建无缝过渡。

以上是如何使用 Bootstrap 添加图标来搜索输入字段？的详细内容。更多信息请关注PHP中文网其他相关文章！