Bootstrap 表单美化教程 - 用 Bootstrap 美化你的表单

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