用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/bNrh 著作权归作者所有。请勿转载和采集!