bootstrap 基础表单

表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同，而且不同的浏览器对表单控件渲染的风格都各有不同。

☑ LESS版本：对应源文件 forms.less

☑ Sass版本：对应源文件 _forms.scss

对于基础表单，Bootstrap并未对其做太多的定制性效果设计，仅仅对表单内的fieldset、legend、label标签进行了定制

fieldset {

min-width: 0;

padding: 0;

margin: 0;

border: 0;

}

legend {

display: block;

width: 100%;

padding: 0;

margin-bottom: 20px;

font-size: 21px;

line-height: inherit;

color: #333;

border: 0;

border-bottom: 1px solid #e5e5e5;

}

label {

display: inline-block;

margin-bottom: 5px;

font-weight: bold;

}

1、宽度变成了100%

2、设置了一个浅灰色（#ccc）的边框

3、具有4px的圆角

4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化

5、设置了placeholder的颜色为#999

水平表单

Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右）

在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）

/*源码请查阅bootstrap.css文件第1963行~第1991行*/

.form-horizontal .control-label,

.form-horizontal .radio,

.form-horizontal .checkbox,

.form-horizontal .radio-inline,

.form-horizontal .checkbox-inline {

padding-top: 7px;

margin-top: 0;

margin-bottom: 0;

}

.form-horizontal .radio,

.form-horizontal .checkbox {

min-height: 27px;

}

.form-horizontal .form-group {

margin-right: -15px;

margin-left: -15px;

}

.form-horizontal .form-control-static {

padding-top: 7px;

}

@media (min-width: 768px) {

.form-horizontal .control-label {

text-align: right;

  }

}

.form-horizontal .has-feedback .form-control-feedback {

top: 0;

right: 15px;

}

内联表单form-inline

表单控件(输入框input) <input type="email" class="form-control" placeholder="Enter email">

表单控件(下拉选择框select)<select multiple class="form-control">多行选择设置multiple属性的值为multiple

表单控件(文本域textarea)<textarea class="form-control" rows="3"></textarea>

表单控件(复选框checkbox和单选择按钮radio)

表单控件(复选框和单选按钮水平排列)

有时候，为了布局的需要，将复选框和单选按钮需要水平排列。Bootstrap框架也做了这方面的考虑：
1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

表单控件(按钮)

☑ input[type=“submit”]

☑ input[type=“button”]

☑ input[type=“reset”]

☑ <button>

表单控件大小

通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大

表单控件状态(焦点状态)

表单状态的作用：

每一种状态都能给用户传递不同的信息，比如表单有焦点的状态可以告诉用户可以输入或选择东西，禁用状态可以告诉用户不可以输入或选择东西，还有就是表单控件验证状态，可以告诉用户的操作是否正确等。那么在Bootstrap框架中的表单控件也具备这些状态。

焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。

.form-control:focus {

border-color: #66afe9;

outline: 0;

  -webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);

box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);

}

表单控件状态(禁用状态)

<input class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled>

.form-control[disabled],

.form-control[readonly],

fieldset[disabled] .form-control {

cursor: not-allowed;

background-color: #eee;

opacity: 1;

}

表单控件状态(验证状态)

在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名

<div class="form-group has-success">

  <label class="control-label" for="inputSuccess1">成功状态</label>

  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >

</div>

<div class="form-group has-success has-feedback">

  <label class="control-label" for="inputSuccess1">成功状态</label>

  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >

  <span class="glyphiconglyphicon-ok form-control-feedback"></span>

</div>

表单提示信息

<div class="form-group has-success has-feedback">

  <label class="control-label" for="inputSuccess1">成功状态</label>

  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >

  <span class="help-block">你输入的信息是正确的</span>

  <span class="glyphiconglyphicon-ok form-control-feedback"></span>

</div>

按钮

按钮大小

块状按钮 btn-block width:100%

图像

图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：

1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片