1. 表单元素
概念:
form-control
是BootStrap对表单元素设计的基本样式,所有设置了.form-control
类的<input>
、<textarea>
和<select>
元素都将被默认设置宽度属性为100%。- 在
<form>
标签上使用form-inline
可以让表单中的所有元素在一行显示,但是在屏幕小于768px的时候,程序认为是移动端,内联表单会失效。
源码:
<form action="">
<input type="text" class="form-control"/>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<textarea class="form-control"/></textarea>
</form>
复制代码
2. 输入元素
概念:
<input>
支持的type
类型包括:text
、password
、datetime
、datetimelocal
、date
、month
、time
、week
、number
、email
、url
、search
、tel
、color
。- 设置输入元素的尺寸有两种方案:
- 利用
.input-lg
或.input-sm
直接对单行文本框进行调整。 - 设置单行文本框父元素的
.form-group-lg
和.form-group-sm
来调整。
- 利用
<form action="">
<input type="text" class="form-control" value="正常"/>
<input type="text" class="form-control input-lg" value="加大"/>
<input type="text" class="form-control input-sm" value="缩小"/>
</form>
<hr/>
<form action="" class="form-group-lg">
<input type="text" class="form-control" value="整体加大"/>
<input type="text" class="form-control" value="整体加大"/>
<input type="text" class="form-control" value="整体加大"/>
</form>
复制代码
3. 输入元素组合
概念:
- 有时候我们需要将某些文字和某个输入元素合并为一组,集中处理,这时可以将文字和表单放在同一个
<div class="input-group">
中,然后对其中的需要合并的元素设置input-group-addon
,即可完成合并。 input-group-addon
可以组合文字,它支持组合多个。input-group-btn
可以组合按钮,支持组合多个,注意该样式需要设置在按钮的父元素上,不能直接设置在按钮身上。
源码:
<form action="">
<div class="input-group">
<span class="input-group-addon">¥</span>
<input type="text" class="form-control"/>
<span class="input-group-addon">.00</span>
<span class="input-group-addon">元</span>
</div>
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-btn">
<button class="btn btn-success">按钮</button>
</span>
</div>
</form>
复制代码
4. 点按元素
概念:
- 复选框添加样式的方式有两种
- 在所有复选框外围嵌套一层
<div class="checkbox">
,此时复选框水平排列。 - 在每个复选框外层嵌套一层
<div class="checkbox">
,此时复选框竖直排列。
- 在所有复选框外围嵌套一层
- 单选框和复选框一致,将
type="checkbox"
换成type="radio"
即可。
源码:
<!--让多选框竖直排列-->
<form action="">
<div class="checkbox">
<label><input type="checkbox"/>音乐</label>
</div>
<div class="checkbox">
<label><input type="checkbox"/>魔术</label>
</div>
</form>
<hr/>
<!--让多选框水平排列-->
<form action="">
<div class="checkbox">
<label class="checkbox-inline">
<input type="checkbox"/>
<span>音乐</span>
</label>
<label class="checkbox-inline">
<input type="checkbox"/>
<span>魔术</span>
</label>
</div>
</form>
复制代码
一定要在每个元素的外层添加 `<label>` 标签,否则屏幕阅读器将无法正确识别。
5. 表单元素组
概念:
form-group
可以对一堆表单元素进行分组整合,但它只对<input>
类型的元素有效,对<button>
等类型无效。- 一般使用
<div>
来统一控制表单组件,此时<div>
可以添加一个.form-group
来统一管理这个组合,也可以直接在<form>
上添加.form-group
。
源码:
<section style="width: 200px; margin:0 auto;">
<form action="">
<div class="form-group form-group-lg">
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
<div class="form-group form-group-sm">
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
<button class="btn btn-success btn-block">登录</button>
<button class="btn btn-info btn-block">注册</button>
</form>
</section>
复制代码
6. 校验状态
概念:
- 我们可以对表单元素添加一个校验状态,如成功,失败,警告等。
- 我们还可以在表单元素的末尾添加一个校验状态图标,这种图标是字体图标,而非图片,图标的位置应该出现在控件的尾部,此时我们需要使用
has-feedback
和form-control-feedback
的组合来控制图标的相对位置,因为form-control-feedback
会去寻找has-feedback
,然后进行定位。
链接: 更多小图标
代码 | 描述 |
---|---|
<div class="form-group has-success"> |
成功 |
<div class="form-group has-error"> |
失败 |
<div class="form-group has-warning"> |
警告 |
源码:
<form action="">
<div class="form-group has-success has-feedback">
<input class="form-control"/>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<input class="form-control"/>
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<input class="form-control"/>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
</form>
复制代码