深入学习Bootstrap表单

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

一、表单布局

1.垂直表单（默认）

        向父 <form> 元素添加 role="form"。
        把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
        向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

<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> 

2.内联表单

向 <form> 标签添加 class .form-inline；       
默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。
使用 class .sr-only，您可以隐藏内联表单的标签。

 3.水平表单        

    向父 <form> 元素添加 class .form-horizontal。       
    把标签和控件放在一个带有 class .form-group 的 <div> 中。       
    向标签添加 class .control-label。

<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>     <lable class="control-label col-lg-2">性别：</lable>    <div class="col-lg-10"><input class="form-control " type="text"/></div>   </div>  </form> 

 二、支持的表单控件

1.输入框（Input）

<lable>姓名：<input class="form-control" type="text"/></lable> 

2.文本框（Textarea）  可改变 rows 属性

<div class="form-group">   <textarea rows="8" class="form-control">     </textarea>   </div> 

3.复选框（Checkbox）和单选框（Radio）        
    当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。       
    对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。