知识点
基本表单
<input>、<textarea>、<select>设置.form-control类，这些元素将会被设置为 width:100%;height:34px;；
添加<label>与前面这些控件，一起包裹在.form-group中。
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
基本表单
内联表单
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
内联表单中的<input>、<textarea>、<select>这些控件的宽度被设为width:auto;，这个我们在写页面时需要去自定义设置。
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
内联表单
一定要添加 label 标签
如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如 aria-label、aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。
.sr-only
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
input-group-addon与btn-primary
水平排列的表单
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
<label>需要添加.control-label类来调整行高位置，与input等控件相对应显示；
<form class="form-horizontal">
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2 control-label">name</label>
<div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2 control-label">name</label>
<div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2 control-label">name</label>
<div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2 control-label">name</label>
<div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
</div>
</div>
</form>
水平排列的表单
静态控件
如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。具体实例参照下面的实践。
焦点状态
focus
.form-control 元素的 :focus 状态
校验状态
Bootstrap 对表单控件的校验状态，使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式；
还可以针对校验状态为输入框添加额外的图标；只需设置相应的 .has-feedback 类并添加正确的图标；
反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。
实例：TODO：校验状态
控件尺寸
添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺；
用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。
实践
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Resource-type" content="Document"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style>
<!--
.line{border-top:1px solid #afd9ee;margin:20px 0;}
-->
</style>
</head>
<body>
<div class="container">
<!--基本表单格式-->
<p>基本表单</p>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<div class="line"></div>
<!--内联表单 width:auto; 一定要有label元素，label元素添加sr-only类，则该元素会被隐藏-->
<p>内联表单</p>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2" class="sr-only">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe" value="它之前的label元素被隐藏了">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
<br/>
<form class="form-inline">
<div class="form-group">
<lable>价格：</lable>
<div class="input-group">
<div class="input-group-addon">input-group-addon</div>
<input type="text" class="form-control" placeholder="" value=""/>
<div class="input-group-addon">.00</div>
<div class="input-group-btn">input-group-btn</div>
</div>
</div>
</form>
<div class="line"></div>
<!--水平排列的表单-->
<p>水平排列的表单</p>
<form class="form-horizontal">
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2 control-label">name</label>
<div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2 control-label">name</label>
<div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2 control-label">name</label>
<div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2 control-label">name</label>
<div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
</div>
</div>
<div class="clearfix"></div>
</form>
<div class="line"></div>
<!--textarea-->
<p>textarea</p>
<textarea class="form-control" rows="5"></textarea>
<div class="line"></div>
<!--单选与复选-->
<p>单选与复选</p>
<div class="checkbox">
<label>
<input type="checkbox" value="" name="checkbox"/>
复选框按钮
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" name="checkbox" disabled/>
复选框按钮，不可选disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio"/>单选框
</label>
<label>
<input type="radio" name="radio"/>单选框
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="radio" disabled/>单选框不可选
</label>
</div>
<div class="line"></div>
<!--下拉列表（select）-->
<p>下拉列表（select）</p>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="line"></div>
<!--静态控件-->
<p>静态控件</p>
<form class="form-horizontal"><!--单行显示-->
<div class="form-group">
<label class="col-sm-2 control-label">Email</label><!--sr-only-->
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p><!--添加 form-control-static 类来设置p元素与label同行显示-->
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
<form class="form-inline"><!--一行显示-->
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">email@example.com</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>
<div class="line"></div>
<!--校验状态-->
<p>校验状态</p>
<form class="form-horizontal">
<div class="form-group has-success">
<label class="col-xs-2 control-label">has-success</label>
<div class="col-xs-10"><input type="text" value="" name="" class="form-control"/></div>
</div>
<div class="form-group has-warning">
<label class="col-xs-2 control-label">has-warning</label>
<div class="col-xs-10"><input type="text" value="" name="" class="form-control"/></div>
</div>
<div class="form-group has-error">
<label class="col-xs-2 control-label">has-error</label>
<div class="col-xs-10"><input type="text" value="" name="" class="form-control"/></div>
</div>
</form>
<div class="line"></div>
<!--控件尺寸-->
<p>控件尺寸</p>
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
</div>
</body>
</html>
网友评论