Bootstrap搜索框

发布时间：2023-05-16

一、Bootstrap搜索框代码

Bootstrap是一款强大的前端框架，可以轻松构建响应式网站和Web应用程序。通过使用Bootstrap框架，您可以快速构建自定义搜索框。Bootstrap搜索框使用的HTML代码和样式表在以下链接中提供：

<form action="#" method="post" 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>

此代码使用form标记创建搜索框和按钮。搜索框由class为form-control的表单元素创建，按钮由class属性为btn和btn-outline-success的按钮元素创建。您可以使用样式表对搜索框进行自定义设计。

二、Bootstrap搜索下拉框

除了基本的搜索框外，Bootstrap还提供了一个搜索下拉框的选项。此内容可以使用与基本搜索框相同的HTML代码创建。但是，您需要将下拉菜单包含在组件中，并使用标记class为dropdown等。此外，您还需要添加一个输入框来允许用户在下拉菜单中选择值。以下是一个示例代码：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <form class="px-4 py-3">
      <div class="form-group">
        <label for="exampleDropdownFormEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
      </div>
      <div class="form-group">
        <label for="exampleDropdownFormPassword1">Password</label>
        <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
      </div>
      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="dropdownCheck">
          <label class="form-check-label" for="dropdownCheck">
            Remember me
          </label>
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Sign in</button>
    </form>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">New around here? Sign up</a>
    <a class="dropdown-item" href="#">Forgot password?</a>
  </div>
</div>

三、Bootstrap搜索框模板

Bootstrap还提供了现成的搜索框模板。这个模板可以通过使用简单的HTML代码和CSS样式表从头开始构建。以下是Bootstrap搜索框模板的示例代码：

<form class="example" action="/action_page.php">
  <input type="text" placeholder="Search.." name="search">
  <button type="submit"><i class="fa fa-search"></i></button>
</form>

四、Bootstrap搜索框居中

要将Bootstrap搜索框居中，请使用居中类名。以下是居中搜索框的示例代码：

<div class="container">
  <h2>Centered Search Bar</h2>
  <div class="d-flex justify-content-center">
    <form class="form-inline">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-success" type="submit">Search</button>
    </form>
  </div>
</div>

五、Bootstrap搜索框改长度

Bootstrap搜索框的长度可以通过CSS样式表进行更改。要更改搜索框的长度，请在样式表中使用自定义CSS类并分配给表单元素。以下是更改搜索框长度的示例代码：

<style>
  .search-bar {
    width: 700px;
  }
</style>
<form>
  <input type="text" class="form-control search-bar">
</form>

六、Bootstrap搜索框和登录按钮

如果您需要在同一表单中包含搜索框和登录按钮，请使用Bootstrap的网格系统。以下是组合搜索框和登录按钮的示例代码：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <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>
    <div class="col-md-6">
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Username">
        <input class="form-control mr-sm-2" type="password" placeholder="Password">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Login</button>
      </form>
    </div>
  </div>
</div>

七、Bootstrap框架

Bootstrap是一种流行的开源框架，用于Web开发。它允许开发人员以简单而快速的方式创建漂亮的响应式Web应用程序。Bootstrap是基于HTML、CSS和JavaScript构建的，提供了一些强大的组件和工具，这些组件和工具可以帮助您快速轻松地构建Web页面。

八、Bootstrap框架特点

Bootstrap是一个流行的CSS框架，拥有许多独特的特点。以下是Bootstrap框架的一些主要特点：

  1. 响应式设计：Bootstrap框架提供了针对各种设备（包括移动设备）的响应式设计，因此您可以轻松地创建流畅的Web应用程序和网站。
  2. 内置组件：您可以使用内置的Bootstrap组件，例如导航栏、表格、表单等等，以更快速地构建页面。
  3. 整洁简单的设计语言：Bootstrap采用清晰、简单的设计语言，具有被广泛接受的美学标准。
  4. 容易定制：您可以使用自定义CSS来轻松扩展和修改Bootstrap的默认外观。

九、Bootstrap保存搜索结果

要将搜索结果保存在数据库中，您需要使用服务器端编程语言，例如PHP。以下是搜索表单和PHP代码的示例代码：

<form action="search.php" method="POST">
  <input type="text" name="search" placeholder="Enter Search Term">
  <button type="submit" name="submit">Search</button>
</form>

以下是PHP代码的示例代码来处理搜索表单并将结果保存到数据库中：

<?php
  // Connect to database
  $conn = mysqli_connect("localhost", "root", "", "mydatabase");
  // Collect search term from form
  $search_term = mysqli_real_escape_string($_POST['search']);
  // Search the database
  $query = "SELECT * FROM mytable WHERE column LIKE '%{$search_term}%' ";
  $result = mysqli_query($conn, $query);
  // Loop through results and display them
  while ($row = mysqli_fetch_array($result)) {
      echo "<p>{$row['column']} </p>";
  }
?>

十、Bootstrap框架官网

Bootstrap框架的官方网站为：https://getbootstrap.com/。在官网上，您可以下载Bootstrap框架，查看示例代码和文档，以及获取社区支持和讨论。

推荐文章