以下是一个简单的搜索框示例:

<form class='form-inline'>
  <div class='form-group'>
    <label for='search-input' class='sr-only'>Search</label>
    <input type='text' class='form-control' id='search-input' placeholder='Search'>
  </div>
  <button type='submit' class='btn btn-primary'>Submit</button>
</form>

这里使用了 Bootstrap 的表单组件和按钮组件。.form-inline 类可以使表单元素在同一行内排列,.form-group 类可以将输入框和标签组合在一起。<label> 标签的 .sr-only 类可以隐藏标签但仍保留屏幕阅读器的可访问性。

你可以根据需要修改输入框的样式,例如添加 .form-control-lg 类来创建一个更大的输入框。你还可以修改按钮的样式,例如使用 .btn-outline-secondary 类来创建一个带边框的次要按钮。

此外,你还可以使用其他 Bootstrap 组件来增强搜索框的功能,例如下拉菜单或自动完成。

Bootstrap 搜索框代码示例:简单易用,快速实现

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

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