社区学习工具库休闲

简体中文

首页 > web前端 > css教程 > 如何在 Bootstrap 4 中的搜索输入中添加图标？

如何在 Bootstrap 4 中的搜索输入中添加图标？

Linda Hamilton

发布： 2024-12-15 17:13:14

原创

590 人浏览过

How to add an icon to a search input in Bootstrap 4?

Bootstrap 4 - 使用图标搜索输入

问题涉及将图标集成到 Bootstrap 4 搜索输入中。出现此问题是因为 Bootstrap 4 不支持 Glyphicons。以下是如何使用各种技术将图标合并到搜索输入中的详细说明：

带有附加的输入组

此技术使用带有图标附加或前缀的输入组。图标放置在输入字段之前或之后。

<br><div> <input class="form-control py-2" type="搜索”值=“搜索”> <span><pre class="brush:php;toolbar:false"><button>

登录后复制

带有输入组文本的输入组

;

该技术利用一个输入组图标的输入组文本。 input-group-text 为没有灰色背景的图标提供占位符。

<br><div> <input class=" form-control py- border-right-0 value="search"> <span><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

登录后复制

网格系统（行和列）< /h3>

此技术使用网格系统（行和列）创建带有图标的搜索输入。无装订线用于消除列之间的间距，从而实现无缝布局。

<br><div> <div class="col">
<pre class="brush:php;toolbar:false"><input>

登录后复制

<button>

登录后复制

带前缀的输入组

与带有append的输入组类似，这个技术利用带有输入组前置的输入组。图标放置在前缀中，位于输入字段之前。

<br><div> <span class="input-group-prepend"><pre class="brush:php;toolbar:false"><div>

登录后复制

<button>

登录后复制

的选择技术取决于所需的外观和功能。这些示例演示了使用 Bootstrap 4 将图标集成到搜索输入中的几种方法，从而提供了设计和实现的灵活性。

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

来源：php.cn

上一篇：如何使用 jQuery 高效获取隐藏 Div 内元素的高度？下一篇：访问具有渐变效果的 CSS 动画！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

如何在 Bootstrap 4 中的搜索输入中添加图标？

Bootstrap 4 - 使用图标搜索输入 问题涉及将图标集成到 Bootstrap 4 搜索输入中。出现此问题是因为 Bootstrap 4 不支持 Glyphicons。以下是如何使用各种技术将图标合并到搜索输入中的详细说明：

带有附加的输入组

带有输入组文本的输入组

网格系统（行和列）< /h3> 此技术使用网格系统（行和列）创建带有图标的搜索输入。无装订线用于消除列之间的间距，从而实现无缝布局。 <br><div> <div class="col"> <pre class="brush:php;toolbar:false"><input>登录后复制

Bootstrap 4 - 使用图标搜索输入

问题涉及将图标集成到 Bootstrap 4 搜索输入中。出现此问题是因为 Bootstrap 4 不支持 Glyphicons。以下是如何使用各种技术将图标合并到搜索输入中的详细说明：

网格系统（行和列）< /h3>

此技术使用网格系统（行和列）创建带有图标的搜索输入。无装订线用于消除列之间的间距，从而实现无缝布局。

<br><div> <div class="col"> <pre class="brush:php;toolbar:false"><input>
登录后复制