bootstrap基础知识（二）－－表单

二）表单

默认表单：

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

在<form>元素上使用类名“form-horizontal”主要有以下几个作用：

1、设置表单控件padding和margin值。

2、改变“form-group”的表现形式，类似于网格系统的“row”。

内联表单：

在<form>元素中添加类名“form-inline”

如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中，如：

<label class="sr-only" for="exampleInputEmail2">Email address</label>

</div>

<inputtype="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">

</div>

输入框：

常见的文本输入框，也就是input的type属性值为text。

如果是email，type中写email

使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式

为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”

下拉菜单（select）：

其余与原始相同

多行选择设置multiple属性的值为multiple

需要添加类名“form-control”

如：
<form role="form">

</select>

</div>

</select>

</div>

</form>

表单控件(文本域textarea)：

与原始表单用法相同，rows设置高度，cols设置宽度

如果textarea添加类名：“form-control”

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

默认为竖直排列

与原始使用方法相同，但是如果checkbox和radio同时使用，会出现无法对齐，可以使用以下方法解决：
<form role="form">

<label>

记住密码

</label>

</div>

<label>

喜欢

</label>

</div>

<label>

不喜欢

</label>

</div>

</form>

复选框和单选按钮水平排列：
1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”

2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

按钮

<button class="btn" href=“#">Default</button>

表单空间大小控制：

1、input-sm:让控件比正常大小更小

2、input-lg:让控件比正常大小更大

</div>

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

在相应的表单控件上添加属性“disabled”
如：

如果fieldset设置了disabled属性，整个域都将处于被禁用状态。

据说对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的

…

</fieldset>

</form>

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

使用的时候只需要在form-group容器上对应添加状态类名。

1、.has-warning:警告状态（黄色）

2、.has-error：错误状态（红色）

3、.has-success：成功状态（绿色）

如果需要小图标：只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起，而且必须在表单中添加了一个 span 元素：

表单提示信息：

使用了一个”help-block"样式，将提示信息以块状显示，并且显示在控件底部

如：

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

还提供了一个行内提示信息，其使用了类名“help-inline”。一般让提示信息显示在控件的后面，也就是同一水平显示。

基本按钮：

<button class=“btn” type=“button”></button>

1)默认按钮

先通过基础类名“.btn”定义了一个基础的按钮风格，然后通过“.btn-default”定义了一个默认的按钮风格。

<button class=“btn btn-default” type=“button”></button>[原本是白色，鼠标上去之后变成灰色，且伴有阴影效果]

2）多标签支持

一般制作按钮除了使用<button>标签元素之外，还可以使用<input type="submit">和<a>标签等。同样，在Bootstrap框架中制作按钮时，除了刚才所说的这些标签元素之外，还可以使用在其他的标签元素上，唯一需要注意的是，要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果。

注意：虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格，但个人并不建议这样使用，为了避免浏览器兼容性问题，个人强烈建议使用button或a标签来制作按钮。

3)定制风格

<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>

<button class="btn btn-success" type="button">成功按钮.btn-success</button>

<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>

<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>

4)按钮大小

那么在实际使用中，这几个类名可以配合按钮中其他颜色类名一起使用，但唯一一点不能缺少“.btn”类名：

<button class="btn btn-primary btn-xs" type=“button">超小型按钮.btn-xs</button>

5）块状按钮

使按钮充满整个容器，实用类名：btn-block

例如：

<button class="btnbtn-primary btn-xs btn-block" type=“button">超小型按钮.btn-xs</button>

6）按钮活动状态

活动状态主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）几种。

7）按钮禁用状态

和input等表单控件一样，在Bootstrap框架的按钮中也具有禁用状态的设置。禁用状态与其他状态按钮相比，就是背景颜色的透明度做了一定的处理，opcity的值从100%调整为65%。方法1：在标签中添加disabled属性

<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>

方法2：在元素标签中添加类名“disabled”

<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>

区别：

添加“disabled”样式不能禁止按钮默认行为（如重置或提交）

添加“disabled”属性能够禁止默认行为

8)图像

只需要在<img>标签上添加对应的类名：

1、img-responsive：响应式图片，主要针对于响应式设计

2、img-rounded：圆角图片

3、img-circle：圆形图片

4、img-thumbnail：缩略图片

在实际使用的时候，需要通过其他的方式来处理图片大小。比如说控制图片容器大小。（注意不可以通过css样式直接修改img图片的大小，这样操作就不响应了）

9）自带小图标

给元素添加“glyphicon”类名

如：

<span class="glyphicon glyphicon-cloud”></span>

bootstrap基础知识（二）－－表单

猜你喜欢