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类即可。