Bootstrap 4 搜索框介绍

Bootstrap 4 搜索框是一个常用的 UI 组件，可用于网站或应用程序的顶部导航栏中。它可以帮助用户快速找到他们需要的信息。Bootstrap 4 搜索框具有以下特点：

• 响应式设计，适合不同的设备。
• 可以使用图标或文本来表示搜索按钮。
• 支持输入实时搜索提示，提高搜索效率。
• 可以与其他 Bootstrap 4 组件相结合，如下拉菜单等。

基本示例

以下是一个简单的 Bootstrap 4 搜索框示例，其中包含一个输入框和一个搜索按钮：

<form class="form-inline my-2 my-lg-0">
  <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>

上述代码使用了 Bootstrap 4 中的表单、输入框和按钮组件。其中，form-inline 类用于创建内联表单，mr-sm-2 类用于设置输入框的右边距，btn-outline-success 类用于创建轮廓样式的绿色按钮。

搜索框位置

通常情况下，搜索框会被放置在网站或应用程序的顶部导航栏中。以下是一个带搜索框的顶部导航栏示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <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="#">Link</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <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>

上述代码使用了 Bootstrap 4 中的导航栏组件。其中，navbar 类用于创建顶部导航栏，navbar-brand 类用于创建导航栏品牌，navbar-toggler 类用于创建响应式的导航栏切换按钮，navbar-nav 类用于包含导航链接的列表，form-inline 类用于创建内联表单。

实时搜索提示

Bootstrap 4 搜索框还支持实时搜索提示功能。可以使用 jQuery 插件 typeahead.js 或 Bootstrap 4 Typeahead 来实现此功能。

以下是一个使用 typeahead.js 实现实时搜索提示功能的 Bootstrap 4 搜索框示例：

<form class="form-inline my-2 my-lg-0">
  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" data-provide="typeahead" autocomplete="off" data-source='["Apple", "Banana", "Orange", "Pineapple", "Mango"]'>
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/typeahead.js@0.11.1/dist/typeahead.jquery.min.js"></script>
<script>
  $('[data-provide="typeahead"]').typeahead();
</script>

上述代码首先包含了 typeahead.js 和 jQuery 库。然后，在 input 元素中添加了 data-provide="typeahead" 和 data-source 属性，分别表示使用 typeahead 插件和数据源。最后，在 script 标签中使用 $('[data-provide="typeahead"]').typeahead(); 来初始化 typeahead 插件。

总结

Bootstrap 4 搜索框是一个常用的 UI 组件，它具有响应式设计、实时搜索提示、与其他组件相结合等特点。开发者可以根据自己的需求来选择不同的实现方式。