前端开发

本文主要讲解的是表单，这个其实对于做过网站的人来说，并不陌生，而且可以说是最为常用的提交数据的Form表单。

本文主要来讲解以下内容：

1.基本案例

2.内联表单

3.水平排列的表单

4.被支持的控件

5.静态控件

6.控件状态

7.控件尺寸

8.帮助文本

9.总结

基本案例

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的、和<select>元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。</p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <form role="form"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <div class="form-group"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <label for="exampleInputEmail1">Email address</label></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </div></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <div class="form-group"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <label for="exampleInputPassword1">Password</label></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </div></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <div class="form-group"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <label for="exampleInputFile">File input</label></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <input type="file" id="exampleInputFile"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <p class="help-block">Example block-level help text here.</p></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </div></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <div class="checkbox"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <label></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <input type="checkbox"> Check me out    </label></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </div></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <button type="submit" class="btn btn-default">Submit</button></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </form></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; color: rgb(0, 0, 0); text-align: center; background-color: rgb(245, 250, 255);"> <img alt="" border="0" height="309" src="http://static.nbla.cn/Uploads/image/2017-03-30/14908744724884.png?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" style="margin: 0px; padding: 0px; border: 1px solid rgb(153, 153, 153); font-family: inherit; font-size: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; vertical-align: middle; color: transparent; display: inline-block; width: 600px; height: auto;" width="982"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> 两个文本框的宽度的确为100%。并且有三个form-group。</p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <strong>内联表单</strong></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> 为左对齐和inline-block级别的控件设置.form-inline，可以将其排布的更紧凑。</p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> 需要设置宽度：在Bootstrap中,input、select和textarea默认被设置为100%宽度。为了使用内联表单，你需要专门为使用到的表单控件设置宽度。</p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> 一定要设置label:如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。对于这些内联表单,你可以通过为label设置.sr-only已将其隐藏。</p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <form class="form-inline" role="form"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <div class="form-group"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <label class="sr-only" for="exampleInputEmail2">Email address</label></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </div></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <div class="form-group"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <label class="sr-only" for="exampleInputPassword2">Password</label></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </div></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <div class="checkbox"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <label></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <input type="checkbox"> Remember me    </label></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </div></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <button type="submit" class="btn btn-default">Sign in</button></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </form></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; color: rgb(0, 0, 0); text-align: center; background-color: rgb(245, 250, 255);"> <img alt="" border="0" src="http://static.nbla.cn/Uploads/image/2017-03-30/14908744728076.png?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" style="margin: 0px; padding: 0px; border: 1px solid rgb(153, 153, 153); font-family: inherit; font-size: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; vertical-align: middle; color: transparent; display: inline-block; width: 600px; height: auto;"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <strong>水平排列的表单</strong></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> 通过为表单添加.form-horizontal，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再使用.row了。</p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <form class="form-horizontal" role="form"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <div class="form-group"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <div class="col-sm-10"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </div></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </div></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <div class="form-group"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <div class="col-sm-10"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </div></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </div></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <div class="form-group"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <div class="col-sm-offset-2 col-sm-10"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <div class="checkbox"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <label></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <input type="checkbox"> Remember me        </label></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </div></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </div></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </div></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <div class="form-group"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <div class="col-sm-offset-2 col-sm-10"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <button type="submit" class="btn btn-default">Sign in</button></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </div></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </div></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> </form></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; color: rgb(0, 0, 0); text-align: center; background-color: rgb(245, 250, 255);"> <img alt="" border="0" height="244" src="http://static.nbla.cn/Uploads/image/2017-03-30/14908744723314.png?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" style="margin: 0px; padding: 0px; border: 1px solid rgb(153, 153, 153); font-family: inherit; font-size: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; vertical-align: middle; color: transparent; display: inline-block; width: 600px; height: auto;" width="958"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <strong>被支持的控件</strong></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> 在表单布局案例中展示了其所支持的标准表单控件。</p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <strong>Input</strong></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> 大部分表单控件、文本输入域控件。包括HTML5支持的所有类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。</p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> 注意：有正确设置了type的input控件才能被赋予正确的样式。</p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> 文本框示例</p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <input type="text" class="form-control" placeholder="Text input"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; color: rgb(0, 0, 0); text-align: center; background-color: rgb(245, 250, 255);"> <img alt="" border="0" src="http://static.nbla.cn/Uploads/image/2017-03-30/14908744728250.png?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" style="margin: 0px; padding: 0px; border: 1px solid rgb(153, 153, 153); font-family: inherit; font-size: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; vertical-align: middle; color: transparent; display: inline-block; width: 600px; height: auto;"></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <strong>Textarea</strong></p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> 支持多行文本的表单控件。可根据需要改变rows属性。</p> <p style="margin: 0px 0px 15px; padding: 0px; border: 0px; font-family: 'Segoe UI', Tahoma, Arial; font-size: 14px; font-stretch: inherit; line-height: 27px; vertical-align: baseline; text-indent: 2em; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255);"> <h1>textarea</h1> <textarea class="form-control" rows="3">

Checkbox 和 radio

Checkbox用于选择列表中的一个或多个选项，而radio用于从多个选项中只选择一个。

默认外观(堆叠在一起)

Inline checkboxes

通过将.checkbox-inline 或 .radio-inline应用到一系列的checkbox或radio控件上，可以使这些控件排列在一行。

1

2

3

同理Radio是一样的，只需要添加一下样式即可。

Select

1

2

3

4

5

1

2

3

4

5

静态控件

在水平布局的表单中，如果需要将一行纯文本放置于label的同一行，为

元素添加.form-control-static即可。

控件状态

控件状态

通过为控件和label设置一些基本状态，可以为用户提供回馈。

输入焦点

我们移除了某些表单控件的默认outline样式，并对其:focus状态赋予了box-shadow样式。

被禁用的输入框

为输入框设置disabled属性可以防止用户输入，并能改变一点外观，使其更直观。

被禁用的fieldset

为