用bootstrap美化表单 table class=search_table width=100 tr td form action=method!goodslist method=get input type=hidden name=g value=A
使用Bootstrap可以很容易地美化表单。首先,你需要在头部引入Bootstrap的CSS文件。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
然后,你可以使用Bootstrap的类名来为表单元素添加样式。以下是使用Bootstrap美化后的代码:
<table class="search_table" width="100%">
<tr>
<td>
<form action="method!goodslist" method="get" class="form-inline">
<input type="hidden" name="g" value="Admin">
<input type="hidden" name="m" value="User">
<input type="hidden" name="a" value="index">
<div class="form-group">
<label for="key">筛选:</label>
<input type="text" name="key" class="form-control" value="${key}">
</div>
<div class="form-group">
<select name="catid" id="search-goods-type" class="form-control">
<option value="0" selected>物品类别</option>
<option value="1" <c:if test="${catid == 1}">selected</c:if>>卡类证件</option>
<option value="2" <c:if test="${catid == 2}">selected</c:if>>随身物品</option>
<option value="3" <c:if test="${catid == 3}">selected</c:if>>电子数码</option>
<option value="4" <c:if test="${catid == 4}">selected</c:if>>书籍资料</option>
<option value="5" <c:if test="${catid == 5}">selected</c:if>>衣物饰品</option>
<option value="6" <c:if test="${catid == 6}">selected</c:if>>其他物品</option>
</select>
</div>
<div class="form-group">
<select name="type" id="search-type" class="form-control">
<option value="" selected>事件类型</option>
<option value="lost" <c:if test="${type == 'lost'}">selected</c:if>>寻物信息</option>
<option value="find" <c:if test="${type == 'find'}">selected</c:if>>招领信息</option>
</select>
</div>
<input type="submit" value="查询" class="btn btn-primary">
<input type="reset" value="重置" class="btn btn-default">
</form>
</td>
</tr>
</table>
以上代码使用了Bootstrap的form-inline类来使表单元素在一行显示,并使用了form-group类来为表单元素添加间距和样式。使用form-control类为输入框和下拉列表添加样式。使用btn和btn-primary类为按钮添加样式。
请确保在使用这些样式之前已经正确引入了Bootstrap的CSS和JavaScript文件
原文地址: https://www.cveoy.top/t/topic/hGfO 著作权归作者所有。请勿转载和采集!