📌  相关文章
📜  glyphicon 搜索 - Html (1)

📅  最后修改于: 2023-12-03 15:00:59.457000             🧑  作者: Mango

使用 glyphicon 来美化网站搜索 - HTML

Glyphicon 是 Bootstrap 中的一种字体图标集，提供了丰富的各种图标，包括搜索、上下箭头、删除、星星等等。在 HTML 中使用 Glyphicon，可以轻松地让网页的功能更加美观和易用。本文将介绍如何使用 Glyphicon 来美化网站搜索。

步骤1：导入 Bootstrap 和 Glyphicon

要使用 Glyphicon，需要先导入 Bootstrap 和 Glyphicon 相关的 CSS 文件。可以从官网上下载最新版本的 Bootstrap，将其解压后，将 bootstrap.min.css 和 bootstrap.min.js 两个文件复制到自己的项目中。

标记：

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Glyphicon 搜索</title>
      <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>

    <body>

      <!-- 页面内容部分 -->

      <script src="js/bootstrap.min.js"></script>
    </body>
  </html>
步骤2：添加搜索框和按钮

在 HTML 中添加搜索框和按钮，用于用户输入搜索关键词和点击搜索。可以使用 Bootstrap 中的 input 和 button 标签来实现。添加搜索框和按钮的代码如下：

  <div class="form-group">
    <form class="form-inline navbar-form">
      <input type="text" class="form-control" placeholder="搜索...">
      <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-search"></span>
      </button>
    </form>
  </div>
步骤3：美化搜索图标

默认情况下，Bootstrap 提供一个搜索图标，但是这个图标比较简单，不够美观。可以使用 Glyphicon 来替换搜索图标。在上一步中，我们已经使用了 Glyphicon 中的搜索图标，只需要将按钮中的图标部分修改为 <span class="glyphicon glyphicon-search"></span> 即可。

结论

至此，我们已经成功地使用 Glyphicon 来美化了网站搜索，使得搜索框和按钮更加美观和易用。通过这个方法，可以让网站的各种功能更加丰富多彩，为用户提供更好的体验。

# 使用 glyphicon 来美化网站搜索 - HTML

Glyphicon 是 Bootstrap 中的一种字体图标集，提供了丰富的各种图标，包括搜索、上下箭头、删除、星星等等。在 HTML 中使用 Glyphicon，可以轻松地让网页的功能更加美观和易用。本文将介绍如何使用 Glyphicon 来美化网站搜索。

## 步骤1：导入 Bootstrap 和 Glyphicon

要使用 Glyphicon，需要先导入 Bootstrap 和 Glyphicon 相关的 CSS 文件。可以从官网上下载最新版本的 Bootstrap，将其解压后，将 bootstrap.min.css 和 bootstrap.min.js 两个文件复制到自己的项目中。

标记：

```html
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Glyphicon 搜索</title>
      <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>

    <body>

      <!-- 页面内容部分 -->

      <script src="js/bootstrap.min.js"></script>
    </body>
  </html>
步骤2：添加搜索框和按钮

在 HTML 中添加搜索框和按钮，用于用户输入搜索关键词和点击搜索。可以使用 Bootstrap 中的 input 和 button 标签来实现。添加搜索框和按钮的代码如下：

  <div class="form-group">
    <form class="form-inline navbar-form">
      <input type="text" class="form-control" placeholder="搜索...">
      <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-search"></span>
      </button>
    </form>
  </div>
步骤3：美化搜索图标

默认情况下，Bootstrap 提供一个搜索图标，但是这个图标比较简单，不够美观。可以使用 Glyphicon 来替换搜索图标。在上一步中，我们已经使用了 Glyphicon 中的搜索图标，只需要将按钮中的图标部分修改为 <span class="glyphicon glyphicon-search"></span> 即可。

结论

至此，我们已经成功地使用 Glyphicon 来美化了网站搜索，使得搜索框和按钮更加美观和易用。通过这个方法，可以让网站的各种功能更加丰富多彩，为用户提供更好的体验。