HTML 在文本框旁边使用Bootstrap放置搜索图标

在本文中，我们将介绍如何使用Bootstrap来在HTML文本框旁边放置搜索图标。Bootstrap是一个流行的前端开发框架，它提供了许多预定义的样式和组件，方便我们在页面上实现各种功能。

阅读更多：HTML 教程

使用Bootstrap的文本框组件

在开始之前，我们首先需要引入Bootstrap的CSS和JavaScript文件。可以从官方网站上下载并在HTML文件中引入这些文件，或者使用CDN（内容分发网络）来引用它们。

接下来，我们可以使用Bootstrap提供的文本框组件来创建一个搜索框。文本框组件包括一个输入框和一个按钮。我们可以使用<input>标签创建输入框，使用<button>标签创建按钮，并使用Bootstrap的类来设置它们的样式。

下面是一个例子：

<div class="input-group">
  <input type="text" class="form-control" placeholder="搜索">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">
      <i class="fa fa-search"></i>
    </button>
  </div>
</div>

在这个例子中，我们使用了Bootstrap的input-group类来创建一个输入框组。input-group类会将输入框和按钮放在同一行，并添加一些间距和样式。

输入框使用了Bootstrap的form-control类来设置样式。form-control类会将输入框的宽度设置为100%并添加一些边框和阴影效果。

按钮使用了Bootstrap的btn和btn-primary类来设置样式。btn类会将按钮设置成一个圆角矩形，并添加一些颜色和边框样式。btn-primary类会将按钮的背景色设置为主题色。

在按钮的<button>标签内，我们使用了一个图标来表示搜索。这里使用了Font Awesome图标库提供的搜索图标，可以在项目中引入Font Awesome的CSS文件，并使用<i>标签来插入图标。

使用自定义样式调整搜索图标的位置

有时，我们可能希望调整搜索图标的位置，使其更适应我们的设计。Bootstrap提供了一些自定义样式来实现这一点。

例如，我们可以使用input-group-prepend类将搜索图标放在输入框的前面，而不是后面。我们只需将input-group-append类改为input-group-prepend类，即可实现这个效果。

下面是一个例子：

<div class="input-group">
  <div class="input-group-prepend">
    <button class="btn btn-primary" type="button">
      <i class="fa fa-search"></i>
    </button>
  </div>
  <input type="text" class="form-control" placeholder="搜索">
</div>