bootstrap 表单form

 

http://www.runoob.com/bootstrap/bootstrap-forms.html

http://w3c.3306.biz/bootstrap_v3/

 

Bootstrap 提供了下列类型的表单布局：

• 垂直表单（默认）
• 内联表单
• 水平表单

 

垂直或基本表单

下面列出了创建基本表单的步骤：

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

 

 

 

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。

 

 

水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

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

 

form-group: 会为div获取最佳间距。如果是.form-inline，那么会在一行布局两个.form-group

col-sm-2， col-sm-offset-2用在form-group类型的div里面的其他元素，用来控制内部的布局。不要把他们用在form-group的div元素上，来视图控制form-group的div元素的大小，没用。

form-control:   代表是form表单的控件，input，select，text等都是form的控件

control-label： 控件的标签，主要用在<label>上

想要特意换行，加个空的<div class="form-group"></div>

 

支持的表单控件

Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。

 

表单控件尺寸

<form class="form-horizontal" role="form" id="addForm">

<div class="form-group, row">
　　<div class="col-sm-2">
　　　　<label class="control-label">源流地址<i class="red">*</i></label>
　　</div>
　　<div class="col-sm-9">
　　　　<input type="text" name="inputSrc" class="form-control" placeholder="http://10.121.33.36/live/test.flv">
　　</div>
</div>

只有当form-horizontal时， col-sm-*才能控制控件的宽度尺寸

使用div的col-sm-*来控制大小

 

 

$("form").serialize()           表单序列化，会把带有name属性的input, select等控件的value值进行序列化成a=a&b=b的格式