表单组

基本样式

去掉label

增加帮助信息

登录账号包含手机、邮箱和会员号。
登录会员的密码口令。

输入框自由宽度

给.input添加.input-auto,输入框即为size的宽度,或给form添加form-auto样式,表单内的输入框都按size的宽度显示。 单独设置

在移动设备上,自动默认为整行显示,如需将单个输入框设置自由宽度,可通过给输入框加.input-auto样式实现。

单独设置.input-auto

整体表单设置.form-auto

添加图标

右侧图标

右侧帮助,提示放在label里,设置.float-right样式,也可以把帮助放在右侧。

登录账号包含手机、邮箱和会员号。
登录会员的密码口令。

水平方向显示

给form添加.form-x,让标签label与输入域field在水平方向上显示。

登录账号包含手机、邮箱和会员号。
登录会员的密码口令。

内联排列

给form添加.form-inline样式,实现输入框的内联模式。



去掉label标签


添加图标


更亲密一些
使用.input-inline样式,可以让一行内的输入框连在一起。


也有垂直方向上连在一起的
使用.input-block样式,可以让一列内的输入框连在一起。

单选多选组合

默认样式
拼图
拼图


按钮组显示单选或多选
使用按钮组的方式显示单选或多选,效果需要用js配合,详细的使用方法请看"js组件"的单选多选。
单选
单选
多选
多选


分行显示
给.input添加.label-block样式,可使内容一行一行显示。
拼图
拼图

输入框组

多个输入框组合,实现输入框前缀及后缀内容。

默认样式
¥


单选或多选

按钮输入框组

默认样式


下拉式按钮

组合案例

¥