bootstrap表单双排_Bootstrap

Bootstrap 表单

简介

在本教程中，您将学习如何使用 Bootstrap 2.0 工具包来创建表单。

Bootstrap 已经为 input、textarea 和 select 等表单控件定义样式，支持列表和复选框，为禁用的表单控件定义样式，包括每个表单控件的错误、警告、成功状态。

自版本 2.0 起，Bootstrap 提供了四中类型的表单布局 -

垂直(默认)

搜索

内联

水平

在 Bootstrap 的上一个版本中，表单布局默认是水平布局。但是，自版本 2.0 起，垂直布局是默认布局。

创建垂直表单布局

为 bootstrap.css 中 .form-vertical class 的 Bootstrap 默认表单布局(即垂直表单)定义样式。但是由于这是默认表单布局，在通过默认布局创建表单的时候，不需要规定 .form-vertical class。下面的实例演示一个通过 Bootstrap 2.0 默认表单布局创建的表单。

.well class 用于创建表单的容器(当然，它还有其他用途)。这个 class 可在 bootstrap.css 中行号 1650 到 1663 找到。对于这个布局，输入框是块级的(block level)。下面的实例演示如何使用 Bootstrap 创建一个默认表单布局。

实例

标签名称

相关帮助文档 ！

选中我

提交

在线查看

创建搜索表单布局

使用位于 bootstrap.css 中行号为 962 到 1003 (这些行也包含了 .form-inline 的样式)的 .form-search class，来创建一个搜索表单。对于这个布局，输入框是块级的(block level)。下面是一个实例：

实例

搜索

在线查看

创建内联表单布局

使用位于 bootstrap.css 中行号为 962 到 1003 (这些行也包含了 .form-search 的样式)的 .form-inline class，来创建一个内联表单。对于这个布局，输入框是内联的(inline)。下面是一个实例：

实例

记住我

登录

在线查看

创建水平表单布局

使用位于 bootstrap.css 中的 .form-horizontal class，来创建一个水平表单。对于这个布局，输入框是块级的(block level)。下面是一个实例：

实例

Bootstrap 支持的控件

文本输入

除了自由格式文本，一些HTML5基于文本的输入像这样呈现。

确认框

选中选项，确认此项正确。

选择列表

something

2

3

4

5

多选

1

2

3

4

5

文件上传

文本区域

保存修改

取消

在线查看

Bootstrap 表单控件的浏览器状态

当输入字段获得焦点或者输入字段被禁用或者字段只读时，Bootstrap 已经为这些定义样式。在 bootstrap.css 中从行号 677 到 697，为获得焦点的输入框和输入域元素定义了样式。

首先，Webkit "outline" 作为 ":focus" 的值使用，但是现在已经变为 " box-shadow"。

下面是一个实例，展示了获得焦点的输入框、只读的输入框、禁用的输入框、禁用的复选框和禁用的按钮的样式如何改变。

实例

Bootstrap支持的控件

焦点输入

除了自由格式文本，一些HTML5基于文本的输入像这样呈现。

只读输入

除了自由格式文本，一些HTML5基于文本的输入像这样呈现。

禁用输入

除了自由格式文本，一些HTML5基于文本的输入像这样呈现。

确认框 (禁用)

选中选项，确认此项正确。

保存修改 (禁用按钮)

取消

在线查看

为表单验证定义样式

Bootstrap 2.0 可以为验证表单时的错误、警告、成功状态定义样式。这是很好的特性，由于当用户提交表单数据发生错误时，或者需要生成一个警告时，甚至是通知用户已经成功提交数据时，需要向用户展示不同的样式。

这里有一个实例：

实例

表单验证错误，警告或成功

输入错误

请纠正错误

输入警告

出现一些错误

成功输入

成功输入

选择成功

1

2

3

4

5

选择成功

在线查看