形式

基本示例

单个窗体控件自动接受一些全局样式。所有文本 <输入>, <文本区域>,以及 <选择> 带有的元素 。形式控制 被设置为 宽度:100%; 默认情况下。将标签和控件包装在 。形式组 最佳间距。

此处为块级帮助文本示例。

内嵌表单

增加 。表格内联 敬你的 《表单》 用于左对齐和内联块控件。 这只适用于至少768像素宽的视口中的表单。

水平形式

使用Bootstrap预定义的网格类在水平布局中对齐标签和表单控件组,方法是添加 。表单-水平 到表单。这样做会改变 。形式组的行为类似于网格行,因此不需要 。排

支持的控件

示例表单布局中支持的标准表单控件示例。

输入

最常见的表单控件,基于文本的输入字段。包括对所有HTML5类型的支持: 文本, 密码, 日期时间, 日期时间-本地, 日期, , 时间, , 数字, 电子邮件, 全球资源定位器(Uniform Resource Locator), 搜索, 电话,以及 颜色

文本区域

支持多行文本的表单控件。变化 属性。

复选框和单选按钮

复选框用于选择列表中的一个或多个选项,而单选按钮用于从多个选项中选择一个选项。

默认(堆叠)


内嵌复选框

使用 。复选框-内嵌 或者 。无线电直列式 出现在同一行的控件的一系列复选框或单选按钮上的类。

选择

使用默认选项,或添加 多个的 一次显示多个选项。


静态控制

当需要在水平窗体内的窗体标签旁边放置纯文本时,请使用 。表单-控件-静态 上的类 < p >

email@example.com

输入焦点

我们删除默认设置 概述 样式,并将 箱形阴影 代替…的位置 :聚焦

演示 :聚焦 状态

上面的输入示例在我们的文档中使用自定义样式来演示 :聚焦 在a上陈述 。形式控制

验证状态

Bootstrap包括表单控件上错误、警告和成功状态的验证样式。要使用,请添加 。已经-警告, 。有错误,或者 。已经成功 到父元素。任何的 。控制标签, 。形式控制,以及 。帮助块 将接收验证样式。

控制尺寸

使用以下类设置高度 。输入-lg,并使用网格列类设置宽度 。科尔-lg-*

高度尺寸

创建与按钮大小匹配的更高或更矮的表单控件。边框半径可通过以下方式更改 。边框半径 班级。

列尺寸

在网格列或任何自定义父元素中换行输入,以轻松实现所需的宽度。

帮助文本

表单控件的块级帮助文本。

一个帮助文本块,可换行并可能超出一行。