可支持表单控件
Bootstrap支持所有的标准表单控件，同时对不同表单标签进行优化和扩展。
（1）输入框—input
Bootstrap支持大部分常用输入型表单控件，包括所有HTML5支持的控件，如：text-password、datetme、datetime-local、date等，使用这些表单控件时，必须指明type属性值。
<body>
<input type = "text" placeholder = "文本框默认值" >
</body>
（2）文本区域—textarea
对于多行文本框，则使用文本区域，该表单控件支持多行文本，可以根据需要设置rows属性，来定义多行文本框显示的行数。
<body>
<textarea rows = "10"></textarea>
</body>
（3）单选按钮和复选框
单选按钮（type=“radio”）是一个圆形的选择框，多个单选按钮可以合并为一个单选按钮组，单选按钮组的name值必须相同，单选按钮同一时刻只能选中一个。一般包含默认值，否则不符合逻辑，使用checked属性可以定义选中的按钮。
复选框（type=“checkbox”）可以同时选中多个，每个复选框都是一个独立的对象，且必须有一个唯一的名字（name）。与单选按钮一样，使用checked属性标识选中状态，该属性是一个boolean值。
下面的案例中，分别设计了1个复选框和2个单选按钮：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单选按钮和复选框</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body class="container">
<label class="checkbox">
<input type="checkbox" value="cb"> 复选框
</label>
<label class="radio">
<input type="radio" name="gender" id="male" value="male" checked> 男
</label>
<label class="radio">
<input type="radio" name="gender" id="female" value="female" checked> 女
</label>
</body>
</html>
默认它们是垂直顺序进行排序的，通过将.checkbox-inline或者.radio-inline可以使它们一行排列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行排列</title>
</head>
<body>
<label class="checkbox-inline">
<input type="checkbox" value="cb"> 复选框
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="male" value="male" checked> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="female" value="female" checked> 女
</label>
</body>
</html>
（4）下拉框
select标签和option标签配合使用，可以用来设计下拉菜单或者列表框，select可以包含任意数量的option标签或optgroup标签，optgroup标签负责对option标签进行分组，optgroup中的内容不能被选中，它的值也不能被提交给服务器，它用于在一个层叠式选择菜单中为选项分类，label属性是必须的，在浏览器中，它的值是一个不可选的伪标题。
select标签同时定义菜单和列表，两者的区别：
- 菜单是节省空间的方式，正常状态下只能看到一个选项，单击下拉按钮打开菜单后能看到全部的选项
- 列表显示一定数量的选择，如果超出了整个数量，出现滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<h3><small>下拉菜单</small></h3>
<select name="选择城市">
<optgroup label="江苏">
<option value="nj">南京</option>
<option value="sz">苏州</option>
</optgroup>
<optgroup label="安徽">
<option value="hy">怀远</option>
<option value="bb">蚌埠</option>
</optgroup>
</select>
<h3><small>列表</small></h3>
<select name="选择城市" multiple>
<optgroup label="江苏">
<option value="nj">南京</option>
<option value="sz">苏州</option>
</optgroup>
<optgroup label="安徽">
<option value="hy">怀远</option>
<option value="bb">蚌埠</option>
</optgroup>
</select>
</body>
</html>
默认风格
Bootstrap根据表单设计流行趋势，优化了表单对象的默认风格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>默认风格</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<h3><small>用户登录</small></h3>
<form action="" method="post">
<label for="username">用户名：</label>
<input type="text" id="username">
<label for="userPwd">密 码：</label>
<input type="password" id="userPwd">
<label for="validate">验证码：</label>
<input type="text" id="validate">
<img src="./images/getcode.jpg" alt="验证码：3731">
<label for="keepLogin">
<input type="checkbox" id="keepLogin">记住我的登录信息
</label>
<button type="submit" class="btn_login">登录</button>
<a href="#" class="reg">用户注册</a>
</form>
</body>
</html>
为了避免对其他插件的表单样式产生影响，Bootstrap3.0放弃了Bootstrap2.0的默认样式：统一所有表单控件垂直分布，设计标签label左侧对齐并在控件之上，添加手形光标样式；设置文本框圆角、灰边、激活时蓝色晕边，通过padding和margin属性设置表单控件的内补白和边距。
布局风格
表单控件
在默认情况下，单独的表单控件会被Bootstrap3.0自动赋予一些全局样式。如果为input、textarea和select标签添加.form-control类样式，则被默认设置为100%。将label和这些控件包裹在.form-group中可以获得最好的排列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单控件</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<h3><small>用户登录</small></h3>
<form action="" method="post">
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" id="username" class="form-control">
</div>
<div class="form-group">
<label for="userPwd">密 码：</label>
<input type="password" id="userPwd" class="form-control">
</div>
<div class="form-group">
<label for="validate">验证码：</label>
<input type="text" id="validate" class="form-control">
<img src="./images/getcode.jpg" alt="验证码：3731">
</div>
<div class="form-group">
<label for="keepLogin">
<input type="checkbox" id="keepLogin">记住我的登录信息
</label>
</div>
<div class="form-group">
<button type="submit" class="btn_login">登录</button>
<a href="#" class="reg">用户注册</a>
</div>
</form>
</body>
</html>
在Bootstrap3.0中input、select和textarea默认被设置为100%宽度。为了使用内联样式，用户需要专门为使用到的表单控件设置宽度。如果没有为每个输入控件设置label标签，屏幕阅读器将无法正确识读。对于这些内联表单，可以通过为label设置.sr-only类样式将其隐藏。
行内布局
通过为form标签引入form-inline类，可以设计整个表格结构以行内显示。该规则只适用于浏览器窗口至少在768px宽度时，窗口宽度太小会使表单折叠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内布局</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<h3><small>用户登录</small></h3>
<form action="" method="post" class="form-inline">
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" id="username" class="form-control">
</div>
<div class="form-group">
<label for="userPwd">密 码：</label>
<input type="password" id="userPwd" class="form-control">
</div>
<div class="form-group">
<label for="validate">验证码：</label>
<input type="text" id="validate" class="form-control">
<img src="./images/getcode.jpg" alt="验证码：3731">
</div>
<div class="form-group">
<label for="keepLogin">
<input type="checkbox" id="keepLogin">记住我的登录信息
</label>
</div>
<div class="form-group">
<button type="submit" class="btn_login">登录</button>
<a href="#" class="reg">用户注册</a>
</div>
</form>
</body>
</html>
水平布局
为表单添加.form-horizontal，并使用Bootstrap3.0栅格列类，可以将label和控件组水平并列布局，这样讲改变.form-group的行为，使其表现为栅格系统中的行（row）效果，因此不再使用.row类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平布局</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<h3><small>用户登录</small></h3>
<form action="" method="post" class="form-horizontal">
<div class="form-group">
<label for="username" class="col-xs-2 text-right">用户名：</label>
<div class="col-xs-10">
<input type="text" id="username" class="form-control">
</div>
</div>
<div class="form-group">
<label for="userPwd" class="col-xs-2 text-right">密 码：</label>
<div class="col-xs-10">
<input type="password" id="userPwd" class="form-control">
</div>
</div>
<div class="form-group">
<label for="validate" class="col-xs-2 text-right">验证码：</label>
<div class="col-xs-10">
<input type="text" id="validate" class="form-control">
<img src="./images/getcode.jpg" alt="验证码：3731">
</div>
</div>
<div class="form-group">
<div class="col-xs-11 col-xs-offset-1">
<label for="keepLogin">
<input type="checkbox" id="keepLogin">记住我的登录信息
</label>
</div>
</div>
<div class="form-group">
<div class="col-xs-11 col-xs-offset-1">
<button type="submit" class="btn_login">登录</button>
<a href="#" class="reg">用户注册</a>
</div>
</div>
</form>
</body>
</html>
在上面代码中，我们可以把<form class=“form-horizontal” >视为栅格系统的外包含框（<div class=“container” >），把< div class=“form-group”>视为栅格系统的行（<div class=“row”>），然后在<div class=“form-group”>中添加多列布局。
外观风格
Bootstrap通过各种样式类，为用户提供了更多定制表单样式的途径和方法。
定义大小
Bootstrap提供了两种指定表单控件大小的途径：相对高度和网格宽度。
相对高度
相对高度是一组与关键字相关联的类：.input-lg和.input-sm将创建大一些或者小一些的表单控件以匹配按钮尺寸：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对高度</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<label><input type="text" class="form-control input-sm" placeholder="input-sm"></label>
<label><input type="text" class="form-control" placeholder="正常大小"></label>
<label><input type="text" class="form-control input-lg" placeholder="input-lg"></label>
</body>
</html>
网格宽度
使用栅格系统中的列包裹input或者其任何父元素，都可以很容易地为其设置宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网格宽度</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-sm-2">
<input type="text" class="form-control" placeholder=".col-sm-2">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder=".col-sm-4">
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder=".col-sm-6">
</div>
</div>
</body>
</html>
定制不可编辑的样式控件
通过设置disabled属性，可以设计不可编辑的表单控件，防止用户输入，并能改变外观：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>不可编辑的表单</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<label>
<input type="text" class="form-control" placeholder="禁止使用" disabled>
</label>
</body>
</html>
当为fieldset设置disabled属性时，可以禁用fieldset中包含的所有控件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>禁止表单组</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<fieldset class="row" disabled>
<div class="col-xs-2">
<input type="text" placeholder="col-xs-2" class="form-control">
</div>
<div class="col-xs-4">
<input type="text" placeholder="col-xs-4" class="form-control">
</div>
<div class="col-xs-6">
<input type="text" placeholder="col-xs-6" class="form-control">
</div>
</fieldset>
</body>
</html>
a标签的连接功能不受影响，这个class只改变<a class=“btn btn-default”>按钮的外观，并不能禁用其功能，建议通过JavaScript代码禁用链接功能。另外，IE9及以下浏览器中的fieldset并不支持disable属性，建议在这些浏览器上通过JavaScript代码来禁用fieldset。
定义帮助文本
为提示框引入help-block类样式，可用于表单控件的块级帮助文本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>块帮助文本</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<input type="text" class="form-control"><span class="help-block">块解释文本</span>
</body>
</html>
定制静态控件
在水平布局的表单中，如果需要将一行纯文本放置于label的同一行，为p元素添加.form-control-static即可：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>静态控件</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">邮箱地址：</label>
<div class="col-xs-10">
<p class="form-control-static">example@163.com</p>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">用户名：</label>
<div class="col-xs-10">
<input type="password" class="form-control">
</div>
</div>
</form>
</body>
</html>
状态风格
表单控件存在多种状态：读写、焦点、禁止、有效、验证等，针对不同的状态，提供不同的样式类，以方便用户辨析。Bootstrap增设了验证状态类样式，主要包括：
- error：错误
- warning：警告
- success：成功
使用时，添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在次元素之内的.control-label、.from-control和.help-block都将接收这些校验状态的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>状态风格</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<form action="" class="form">
<div class="form-group has-success">
<label for="inputSuccess" class="control-label">成功</label>
<input type="text" class="form-control" id="inputSuccess">
</div>
<div class="form-group has-warning">
<label class="control-form" id="inputWarning">警告</label>
<input id="inputWarning" type="text" class="form-control">
</div>
<div class="form-group has-error">
<label for="inputError" class="control-label">错误</label>
<input type="text" id="inputError" class="form-control">
</div>
</form>
</body>
</html>
3603
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
