<div class="container mt-5">
    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Search..." aria-label="Search" aria-describedby="search-button">
      <button class="btn btn-outline-primary" type="button" id="search-button-google">Google</button>
      <button class="btn btn-outline-primary" type="button" id="search-button-bing">Bing</button>
      <button class="btn btn-outline-primary" type="button" id="search-button-yahoo">Yahoo</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<p>在上面的代码中,我们使用了 Bootstrap 的 'input-group' 和 'input-group-append' 类来创建一个搜索框和附加的搜索按钮。搜索框使用了 'form-control' 类来应用 Bootstrap 的表单样式。</p>
<p>每个搜索按钮都添加了 'btn' 和 'btn-outline-primary' 类,其中 'btn-outline-primary' 类为按钮添加了轮廓和主题颜色。</p>
<p>你可以根据需要修改按钮的文本和 'id' 属性,以便在后续的 JavaScript 代码中进行处理。</p>
Bootstrap 5 搜索框:添加多个搜索引擎按钮

原文地址: https://www.cveoy.top/t/topic/Qi0 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录