Bootstrap全局样式 - 表单

知识点

基本表单
、</code>、<code><select></code>设置<code>.form-control</code>类，这些元素将会被设置为 <code>width:100%;height:34px;</code>；<br> 添加<code><label></code>与前面这些控件，一起包裹在<code>.form-group</code>中。</p> <pre><code><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> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 322px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/547034c5d7f44c6c8ab4f715ce02dd17.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/547034c5d7f44c6c8ab4f715ce02dd17.jpg" width="650" height="252" alt="Bootstrap全局样式 - 表单_第1张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> 基本表单 </div> </div> <p><strong>内联表单</strong><br> 为 <form> 元素添加 <code>.form-inline</code> 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。<br> 内联表单中的<code><input></code>、<code><textarea></code>、<code><select></code>这些控件的宽度被设为<code>width:auto;</code>，这个我们在写页面时需要去自定义设置。</p> <pre><code><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> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 605px; max-height: 67px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/359e5afaa013447784daa78bfffe9ec0.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/359e5afaa013447784daa78bfffe9ec0.png" width="605" height="67"></a> </div> </div> <div class="image-caption"> 内联表单 </div> </div> <blockquote> <h6>一定要添加 label 标签</h6> </blockquote> <p>如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 <code>.sr-only</code> 类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如 aria-label、aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。</p> <div class="image-package"> <div class="image-container" style="max-width: 582px; max-height: 64px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/ccddc718a47c48eb866abf4acc65376b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/ccddc718a47c48eb866abf4acc65376b.jpg" width="582" height="64"></a> </div> </div> <div class="image-caption"> .sr-only </div> </div> <pre><code><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> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 398px; max-height: 54px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/2f41e472c39a48dd915ebc60e1fbd60a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/2f41e472c39a48dd915ebc60e1fbd60a.jpg" width="398" height="54"></a> </div> </div> <div class="image-caption"> input-group-addon与btn-primary </div> </div> <p><strong>水平排列的表单</strong><br> 通过为表单添加 <code>.form-horizontal</code> 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 <code>.form-group</code> 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。<br> <code><label></code>需要添加<code>.control-label</code>类来调整行高位置，与input等控件相对应显示；</p> <pre><code> <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> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 137px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/21ccf59fa1ee445783f9bafd264b1a3c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/21ccf59fa1ee445783f9bafd264b1a3c.jpg" width="650" height="77"></a> </div> </div> <div class="image-caption"> 水平排列的表单 </div> </div> <p><strong>静态控件</strong><br> 如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <code><p></code> 元素添加 <code>.form-control-static</code> 类即可。具体实例参照下面的实践。</p> <p><strong>焦点状态</strong><br> </p> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 61px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/3e8fe684f79d493586dd14bd39ca1a0c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/3e8fe684f79d493586dd14bd39ca1a0c.jpg" width="650" height="41"></a> </div> </div> <div class="image-caption"> focus </div> </div> <br> <code>.form-control</code> 元素的 :focus 状态 <p></p> <p><strong>校验状态</strong><br> Bootstrap 对表单控件的校验状态，使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式；<br> 还可以针对校验状态为输入框添加额外的图标；只需设置相应的 .has-feedback 类并添加正确的图标；<br> <em>反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。</em><br> 实例：TODO：校验状态</p> <p><strong>控件尺寸</strong><br> 添加 <code>.form-group-lg</code> 或 <code>.form-group-sm</code> 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺；<br> 用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。</p> <hr> <h2>实践</h2> <pre><code><!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">

单选与复选

复选框按钮

复选框按钮，不可选disabled

单选框 单选框

单选框不可选

下拉列表（select）

1 2 3 4 5

静态控件

Email

[email protected]

Password

Email

[email protected]

Password

Confirm identity

校验状态

has-success

has-warning

has-error

控件尺寸