“这是我参与8月更文挑战的第29天,活动详情查看: 8月更文挑战”
关于前言
本篇我们主要内容是Bootstrap的样式中的表单元素,如果有兴趣的朋友也可以参考之前的文章一起进行Bootstrap的样式的学习。掘友们通过传送门即可查看。
表单元素
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control
类的 <input>
、<textarea>
和 <select>
元素都将被默认设置宽度属性为 width: 100%;
。 将 label
元素和前面提到的控件包裹在 .form-group
中可以获得最好的排列。
内联表单
为 <form>
元素添加 .form-inline
类可使其内容左对齐并且表现为 inline-block
级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
水平排列的表单
通过为表单添加 .form-horizontal
类,并联合使用 Bootstrap 预置的栅格类,可以将 label
标签和控件组水平并排布局。这样做将改变 .form-group
的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row
了。
被支持的控件
表单布局实例中展示了其所支持的标准表单控件。
输入框
包括大部分表单控件、文本输入域控件,还支持所有 HTML5 类型的输入控件: text
、password
、datetime
、datetime-local
、date
、month
、time
、week
、number
、email
、url
、search
、tel
和 color
。
必须添加类型声明
只有正确设置了 type
属性的输入控件才能被赋予正确的样式。
Copy
<input type="text" class="form-control" placeholder="Text input">
输入控件组
如需在文本输入域 <input>
前面或后面添加文本内容或按钮控件,请参考输入控件组。
文本域
支持多行文本的表单控件。可根据需要改变 rows
属性。
Copy
<textarea class="form-control" rows="3"></textarea>
多选和单选框
多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个。
内联单选和多选框
通过将 .checkbox-inline
或 .radio-inline
类应用到一系列的多选框(checkbox)或单选框(radio)控件上,可以使这些控件排列在一行。
静态控件
如果需要在表单中将一行纯文本和 label
元素放置于同一行,为 <p>
元素添加 .form-control-static
类即可。
焦点状态
我们将某些表单控件的默认 outline
样式移除,然后对 :focus
状态赋予 box-shadow
属性。
禁用状态
为输入框设置 disabled
属性可以禁止其与用户有任何交互(焦点、输入等)。被禁用的输入框颜色更浅,并且还添加了 not-allowed
鼠标状态。
被禁用的 fieldset
为<fieldset>
设置 disabled
属性,可以禁用 <fieldset>
中包含的所有控件。
只读状态
为输入框设置 readonly
属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅(就像被禁用的输入框一样),但是仍然保留标准的鼠标状态。
校验状态
Bootstrap 对表单控件的校验状态,如 error、warning 和 success 状态,都定义了样式。使用时,添加 .has-warning
、.has-error
或 .has-success
类到这些控件的父元素即可。任何包含在此元素之内的 .control-label
、.form-control
和 .help-block
元素都将接受这些校验状态的样式。