表单的样式使用

在这里插入图片描述
在这里插入图片描述
.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 相对定位,写在父盒子里,

猜你喜欢

转载自blog.csdn.net/steve1988717/article/details/84879171
今日推荐