Bootstrap CSS布局之表单

Bootstrap CSS布局之表单

1. 表单

表单是html网页交互很重要的部分，同时也是BootSTrap框架中的核心内容，表单提供了丰富的样式(基础、内联、横向)

表单的元素

input textarea select checkbox radio(checkbox和radio是input的特殊类型)

其他标签

form fieldset legend

1.1.基础表单

用户登录

姓名

密码

记住密码

登录

1.2.内联表单

用户登录

姓名

密码

记住密码

登录

1.3.横向表单

用户登录

姓名

密码

1.4.表单控件

input元素：

使用input元素的时候，必须声明type类型，否则可能引起问题。

select元素：

多行选择设置multiple=”multiple”

textarea元素：

textarea元素定义了rows数字即可定义大文本框的高度，colsjGRvRK宽度。但是textarea应用了form-control央视，则cols无效。

checkbox和radio(是两个特殊的type)

注意使用的时候，每个input外部用label包住，并且在最外层用容器元素宝珠，并应用相应的.checkbox和.radio样式。

//使用

学习前端

男生

女生

//源码

//让单选框和复选框都能左右和上下居中

.radio,

.checkbox {

position: relative;

display: block;

margin-top: 10px;

margin-bottom: 10px;

}

//内部有label的话，内联显示

.radio label,

.checkbox label {

min-height: 20px;

padding-left: 20px;

margin-bottom: 0;

font-weight: normal;

cursor: pointer;

}

同时可以内联显示，在labelshang添加checkbox-inline或者radio-inline

1.5.空间状态

焦点状态、禁用状态、验证提示状态

焦点状态：

当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。

禁用状态：

对 添加 disabled 属性来禁用 内的所有控件。

验证提示状态：

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

–对文字、边框和阴影设置的颜色不同

输入长度不够!

输入不符合要求！

输入文本符合要求！

//相对定位，用于设置input元素的父容器的定位方式

.has-feedback {

position: relative;

}

//右内边距的设置，以便可以显示小图标

.has-feedback .form-control {

padding-right: 42.5px;

}

//设置小图标的显示方式

.form-control-feedback {

position: absolute;//绝对定位

top: 0;

right: 0;//右对齐

z-index: 2;

display: block;

width: 34px;

height: 34px;

line-height: 34px;

text-align: center;

pointer-events: none;

}

.input-lg + .form-control-feedback,

.input-group-lg + .form-control-feedback,

.form-group-lg .form-control + .form-control-feedback {

width: 46px;

height: 46px;

line-height: 46px;

}

.input-sm + .form-control-feedback,

.input-group-sm + .form-control-feedback,

.form-group-sm .form-control + .form-control-feedback {

width: 30px;

height: 30px;

line-height: 30px;

}

.has-success .help-block,

.has-success .control-label,

.has-success .radio,

.has-success .checkbox,

.has-success .radio-inline,

.has-success .checkbox-inline,

.has-success.radio label,

.has-success.checkbox label,

.has-success.radio-inline label,

.has-success.checkbox-inline label {

color: #3c763d;

}

.has-success .form-control {

border-color: #3c763d;

-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

}

.has-success .form-control:focus {

border-color: #2b542c;

-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;

box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;

}

.has-success .input-group-addon {

color: #3c763d;

background-color: #dff0d8;

border-color: #3c763d;

}

.has-success .form-control-feedback {

color: #3c763d;

}

1.6.空间大小

input-lg/input-sm

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。