bootstrap表单控件样式介绍
1、bootstrap为了方便用户的开发，可以编写自定义样式，这样一来，就有可能造成一些浏览器的不兼容。文本样式定义：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<!-- 此时表示根据设备的大小调整页面的显示宽度 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
<html>
<body>
<div class="container">
<div class="row">
<div class="col-md-10">
<form action="" class="form-horizontal">
<fieldset>
<legend>用户登录</legend>
<div class="form-group">
<label class="col-md-2 control-label" for="title">新闻评论:</label>
<div class="col-md-5">
<input id="title" class="form-control" type="text" placeholder="请输入注册评论标题" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="note">内容:</label>
<div class="col-md-5">
<textarea rows="3" cols="30" class="form-control" style="resize:none;""
id="note" name="note" placeholder="请输入注册评论内容"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-md-offset-2">
<button type="submit" class="btn btn-primary">登录</button>
<button type="submit" class="btn btn-default">重置</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
2、实现下拉列表：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<!-- 此时表示根据设备的大小调整页面的显示宽度 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
<html>
<body>
<div class="container">
<div class="row">
<div class="col-md-10">
<form action="" class="form-horizontal">
<fieldset>
<legend>用户地址</legend>
<div class="form-group">
<label class="col-md-2 control-label" for="title">省份:</label>
<div class="col-md-4">
<select id="province" name="province" class="form-control">
<option value="001">北京</option>
<option value="002">河北省</option>
</select>
</div>
<label class="col-md-2 control-label" for="note">城市:</label>
<div class="col-md-4" >
<select id="province" name="province" class="form-control">
<option value="1001">北京市</option>
<option value="1002">天津市</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-md-offset-2">
<button type="submit" class="btn btn-primary">登录</button>
<button type="submit" class="btn btn-default">重置</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
3、所有的控件都可以使用".form-control“样式定义显示风格。
定义单选按钮样式:单选按钮和复选按钮必须在组件上外加一个层元素，在这个层里面设置使用样式：
<div class="form-group">
<label class="col-md-2 control-label" for="sex">性别:</label>
<div class="col-md-4">
<div class="radio-inline">
<label><input type="radio" name="sex" id="sex">男</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="sex" >女</label>
</div>
</div>
</div>
4、查看程序的运行结果：
5、定义复选框：
<div class="form-group">
<label class="col-md-2 control-label" for="sex">技能:</label>
<div class="col-md-4">
<div class="checkbox-inline">
<label><input type="checkbox" name="" id="">编程开发</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="" >前端开发</label>
</div>
</div>
</div>
6、查看复选框程序的运行结果：
