Bootstrap表单控件

---

1.我们切换到bootstrap的中文网，找到被支持的控件。

注意“只有正确设置了type属性的输入空间才能被赋予正确的样式”这句话。比如说，要格式化文本，它是这样格式化的。

我们可以通过行和列来指定文本域的宽度。

---

2.表单控件实例

2.1textarea

在ch06中新建一个demo04.html，在里面添加一个文本域。form-control表示这个文本域占容器的100%。

<form class="form-horizontal" role="from">

<div class="form-group">

 <label class=" col-sm-2 control-label">用户名:</label>

     <div class="col-sm-8">

 <textarea rows="4" cols="20" class="form-control"></textarea>

    </div>

</div>

从运行结果我们可以看出设置列是不起任何作用的。

那么，设置行会不会起作用呢？

我们将这个文本域设置成8行

 <textarea rows="8" cols="20" class="form-control"></textarea>

运行一下，我们发现对于这个文本域我们设置form-control它就占满整个容器，设置多少列实际上是不起任何作用的，所以我们可以将它删除。而设置行是起作用的。

2.2下拉表单select

运行效果如下，系统默认给它做了一些样式。

当然，我们也可以做多选，对于标记了multiple属性的<select>控件来说，默认显示多选项。

此时的运行结果就变成了多选模式了。这就是html5所支持了一些特性。

2.3多选和单选框

运行效果：

这样做你不太好控制这个文本和这个组件之间的距离，当屏幕的分辨率发生改变时。

所以bootstrap给我们定义了使用单选框和多选框的标准。在使用checkbox和radio时大家一定要注意，都按它这个标准来做。

<div class="radio">

<label><input type="radio" name="sex" value="M" />男</label>

</div>

我们看一下运行效果，bootstrap自动给我们做了这个文本和组件之间的距离。

同样我们可以来设置多选框

   <div class="checkbox">

<label><input type="checkbox" />中国</label>

   </div>

  <div class="checkbox">

  <label><input type="checkbox" />中国</label> 

   </div>

   <div class="checkbox">

 <label><input type="checkbox" />中国</label>   

   </div>

运行效果：

如果要进行“选中”，就可以添加一个checked属性。

运行效果（默认是垂直排列的）：

2.3checkbox&radio

如果我们想要得到的是水平排列的效果，我们可以用"checkbox-inline"这个属性进行设置（当然你也可以用“radio-inline”）。

<div class="checkbox">

<label class="checkbox-inline">  <input type="checkbox" > 1</label>

<label class="checkbox-inline">  <input type="checkbox"> 2</label>

<label class="checkbox-inline">  <input type="checkbox" > 3</label>

运行效果：

2.4input

不带label文本的Checkbox和radio就很简单了，就是在这个<label>内没有文字，输入框（input）正是你所期望的。

2.5静态控件

如果需要在表单中将一行纯文本和label元素放置于同一行，为<p>元素添加.form-control-static类即可。