bootstrap搜索栏设计

Bootstrap是一个流行的前端框架，可以帮助快速构建响应式、移动优先的网站。对于搜索栏的设计，Bootstrap提供了方便的组件来简化开发。以下是使用Bootstrap创建搜索栏的基本步骤：

1. 引入Bootstrap CSS和JS文件：

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
   <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

2. 使用`<form>`和`<div class="form-group">`容器：

   <div class="form-group">
     <div class="input-group">
       <input type="text" class="form-control search-input" placeholder="搜索...">
       <span class="input-group-btn">
         <button class="btn btn-primary search-button" type="submit">搜索</button>
       </span>
     </div>
   </div>

3. 对于更现代的外观，你可以利用Bootstrap的主题颜色体系（如`.btn-secondary`），并且通过调整类名来自定义样式。

4. 可选地，你还可以添加一些额外的CSS来自定义布局和样式，例如添加圆角 (`border-radius`) 或者更改图标等。

<style>
.search-input {
  border-radius: 5px;
}
</style>