Bootstrap 搜索框代码示例:简单易用,快速实现
以下是一个简单的搜索框示例:
<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 组件来增强搜索框的功能,例如下拉菜单或自动完成。
原文地址: https://www.cveoy.top/t/topic/neIw 著作权归作者所有。请勿转载和采集!