深入学习Bootstrap表单

本文知识点借鉴来自nofollow" target="_blank" href="http://www.runoob.com/bootstrap/bootstrap-forms.html">http://www.runoob.com/bootstrap/bootstrap-forms.html，里面写的比较详细还给出了例子，这里总结一下重点方便记忆。

一、表单布局

1.垂直表单（默认）

向父

元素添加 role="form"。 把标签和控件放在一个带有 class .form-group 的

中。这是获取最佳间距所必需的。 向所有的文本元素 、 和 <select> <a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a> class .form-control。 </p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;"> <form action="#" role="form"> <div class="form-group"> <lable>姓名：<input class="form-control" type="text"/></lable> <lable>性别：<input class="form-control" type="text"/></lable> </div> </form> </pre> </div> <p><span style="color: #800000"><h3>2.内联表单 </h3></p> <p>向 <form> <a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a><a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a> class .form-inline； <a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>宽度。 使用 class .sr-only，您可以隐藏内联表单的<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>。</p> <p><span style="color: #800000"><h3>3.水平表单 </h3></p> <p> 向父 <form> 元素<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a> class .form-horizontal。 把<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>和控件放在<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>带有 class .form-group 的 <div> 中。 向<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a><a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a> class .control-label。 </p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;"> <form action="#" role="form" class="form-horizontal"> <div class="form-group"> <lable class="control-label col-lg-2">姓名：</lable> <div class=" col-lg-10"><input class="form-control" type="text"/></div> <p><lable class="control-label col-lg-2">性别：</lable><br /> <div class="col-lg-10"><input class="form-control " type="text"/></div> </p> </div> </form> </pre> </div> <p><h3>二、<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>的表单控件 </h3></p> <p><h3><span style="color: #800000">1.输入框（Input） </h3></p> <p><lable>姓名：<input class="form-control" type="text"/></lable> </p> <p><span style="color: #800000"><h3>2.文本框（Textarea） 可改变 rows <a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a> </h3></p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;"> <div class="form-group"> <textarea rows="8" class="form-control">