Bootstrap 4 搜索栏 - HTML

Bootstrap是一个流行的前端框架之一，它可以帮助程序员快速构建响应式和现代化的用户界面。在这篇文章中，我们将介绍如何使用Bootstrap 4来创建一个搜索栏。

准备工作

在开始之前，您需要确保您已经安装了Bootstrap 4。您可以从官方网站https://getbootstrap.com/docs/4.0/getting-started/download/下载最新版本的Bootstrap 4。

HTML代码

下面是一个基本的HTML搜索栏代码示例，您可以将其复制并粘贴到您的网站中。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">My Website</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0 ml-auto">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

代码解析

上面给出的代码包括一个导航栏和一个搜索栏，下面是对这些元素的解析：

• nav：这是一个导航栏容器，在这里我们使用Bootstrap 4的navbar组件。

• navbar-brand：这个元素是用来展示网站的标志或者品牌，比如我们这个例子中的“My Website”。

• navbar-toggler：这是一个用于打开和关闭导航栏的按钮。

• collapse：这个类用于同时控制导航栏和搜索栏的显示和隐藏。

• form-inline：这个类用于示范搜索栏并使其与导航栏水平对齐。

• form-control：这个类用于定义文本框的样式。

• btn：这是一个Bootstrap 4的按钮类，我们在这里使用了btn-outline-success类来展示一个轮廓按钮，按钮的文字是“Search”。

结论

现在，您已经了解如何使用Bootstrap 4创建一个搜索栏。您可以根据需要自定义这个例子，例如更改颜色、添加其他元素等等。如果您有进一步的问题或想了解更多有关Bootstrap 4的信息，请访问官方文档https://getbootstrap.com/docs/4.0/components/navbar/。