表单的样式使用

在这里插入图片描述
在这里插入图片描述
.form-control 写在input标签内
.form-group 表单组件分组,用在父盒子标签里

**

如何让表单内的组件,横向排列(行内排列)?

**
.form-inline 写在form标签内的类
在这里插入图片描述
在这里插入图片描述
**

表单合组(让输入框和提示标签合为一体)

**
在这里插入图片描述
在这里插入图片描述
input-group 写在父标签里面

input-group-addon 写在提示框的标签里面

**

如何让输入框和按钮合为一体?

**
在这里插入图片描述
在这里插入图片描述
input-group-btn

**

如何让输入框和下拉菜单按钮合为一体

**

在这里插入图片描述
在这里插入图片描述
input-group-btn

**

表单响应式自适应的用法(必须和栅格系统连用)

**
在这里插入图片描述
.form-horizontal 写在form标签内,必须和栅格系统连用

control-label 死记硬背,必须写的,让提示文字和输入框对齐

**

复选框的使用?

**
竖着显示复选框
在这里插入图片描述
checkbox 写在父标签里面

横着显示复选框
在这里插入图片描述
checkbox-inline 写在label标签内,让其横着显示

单选框的样式类和复选框的一样,只不过把checkbox-inline换成 radio-inline就可以了

**

下拉框的使用?

**
在这里插入图片描述

**

输入框的校验状态?

**
在这里插入图片描述
在这里插入图片描述
.has-warning、.has-error或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
在这里插入图片描述

**

添加额外的图标(图标其实是文字)?

**
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
has-success
has-warning
has-error
定位的类
form-control-feedback 绝对定位,写在子盒子里,并且继承状态(对,错误,警告)
has-feedback 相对定位,写在父盒子里,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值