从品牌网站建设到网络营销策划，从策略到执行的一站式服务
小编给大家分享一下BootStrap中表单的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
目前创新互联公司已为1000多家的企业提供了网站建设、域名、网站空间、网站托管、服务器托管、企业网站设计、昌邑网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
1.基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control类的 、 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group中可以获得最好的排列。</p><pre><!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="container"> <form role="form"><div class="form-group"> <label for="name">名称</label> <input type="text" class="form-control" id="name" placeholder="请输入名称"> </div> <div class="form-group"> <label for="inputfile">文件输入</label> <input type="file" id="inputfile"> <p class="help-block">这里是块级帮助文本的实例。</p> </div> <div class="checkbox"> <label> <input type="checkbox"> 请打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button> </form> </div> </body> </html></pre><p><img src="/upload/otherpica42/76297.png" alt="BootStrap中表单的示例分析"></p><p>不要将表单组合输入框组混合使用</p><p>不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。</p><p><strong>2.内联表单</strong></p><p>为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。</p><p>可能需要手动设置宽度</p><p>在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。</p><p>一定要添加 label 标签</p><p>如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如aria-label、aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。</p><pre><!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="container"> <form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="汇智网"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="service@hubwiz.com"> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form> </div> </body> </html></pre><p><img src="/upload/otherpica42/76298.png" alt="BootStrap中表单的示例分析"></p><p><strong>3.水平排列的表单</strong></p><p>通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。</p><pre><!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="container"> <form class="form-horizontal" role="form"><div class="form-group"> <label for="firstname" class="col-sm-2 control-label">名字</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="请输入名字"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-2 control-label">姓</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastname" placeholder="请输入姓"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> 请记住我 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登录</button> </div> </div> </form> </div> </body> </html></pre><p><img src="/upload/otherpica42/76299.png" alt="BootStrap中表单的示例分析"></p><p><strong>4.被支持的控件1</strong></p><p>表单布局实例中展示了其所支持的标准表单控件。</p><p>输入框</p><p>包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和 color。</p><p>必须添加类型声明</p><p>只有正确设置了 type 属性的输入控件才能被赋予正确的样式。</p><p>输入控件组</p><p>如需在文本输入域 <input> 前面或后面添加文本内容或按钮控件，请参考输入控件组。</p><p>文本域</p><p>支持多行文本的表单控件。可根据需要改变 rows 属性。</p><pre><textarea class="form-control" rows="3">
5.被支持的控件2
多选和单选框
多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。
设置了 disabled 属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 标签，如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式，请将 .disabled 类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 。
Option one is this and that—be sure to include why it's great Option two is disabled Option one is this and that—be sure to include why it's great Option two can be something else and selecting it will deselect option one Option three is disabled
内联单选和多选框
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
1 2 3 1 2 3
下拉列表（select）
1 2 3 4 5 ...
6.静态控件
如果需要在表单中将一行纯文本和 label 元素放置于同一行，为
元素添加 .form-control-static 类即可。
Email email@example.com 密码 Email Password Confirm identity
7.焦点状态
我们将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予box-shadow 属性。
演示:focus 状态
在本文档中，我们为上面实例中的输入框赋予了自定义的样式，用于演示 .form-control 元素的 :focus 状态。
8.禁用状态
为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态。
被禁用的 fieldset
为
标签的链接功能不受影响
默认情况下，浏览器会将
跨浏览器兼容性
虽然 Bootstrap 会将这些样式应用到所有浏览器上，Internet Explorer 11 及以下浏览器中的
禁用 禁用输入（Fieldset disabled） 禁用选择菜单（Fieldset disabled） 禁止选择
9.只读状态
为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。
10.校验状态
Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
将验证状态传达给辅助设备和盲人用户
使用这些校验样式只是为表单控件提供一个可视的、基于色彩的提示，但是并不能将这种提示信息传达给使用辅助设备的用户 - 例如屏幕阅读器 - 或者色盲用户。
为了确保所有用户都能获取正确信息，Bootstrap 还提供了另一种提示方式。例如，你可以在表单控件的 标签上以文本的形式显示提示信息（就像下面代码中所展示的）；包含一个 Glyphicon 字体图标 （还有赋予 .sr-only 类的文本信息 - 参考Glyphicon 字体图标实例）；或者提供一个额外的 辅助信息 块。另外，对于使用辅助设备的用户，无效的表单控件还可以赋予一个 aria-invalid="true" 属性。
Input with success Input with warning Input with error Checkbox with success Checkbox with warning Checkbox with error
11.添加额外的图标
你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。
反馈图标（feedback icon）只能使用在文本输入框 元素上。
图标、label 和输入控件组
对于不带有 label 标签的输入框以及右侧带有附加组件的输入框组，需要手动为其图标定位。为了让所有用户都能访问你的网站，我们强烈建议为所有输入框添加 label 标签。如果你不希望将label 标签展示出来，可以通过添加 .sr-only 类来实现。如果的确不能添加 label 标签，请调整图标的 top 值。对于输入框组，请根据你的实际情况调整 right 值。
向辅助技术设备传递图标的含义
为了确保辅助技术- 如屏幕阅读器 - 正确传达一个图标的含义，额外的隐藏的文本应包含在 .sr-only 类中，并明确关联使用了 aria-describedby 的表单控件。或者，以某些其他形式（例如，文本输入字段有一个特定的警告信息）传达含义，例如改变与表单控件实际相关联的 的文本。
虽然下面的例子已经提到各自表单控件本身的 文本的验证状态，上述技术（使用 .sr-only 文本 和 aria-describedby) ）已经包括了需要说明的目的。
Input with success (success) Input with warning (warning) Input with error (error) Input group with success @ (success)
12.控件尺寸
通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。
高度尺寸
创建大一些或小一些的表单控件以匹配按钮尺寸。
... ... ...
水平排列的表单组的尺寸
通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal包裹的 label 元素和表单控件快速设置尺寸。
Large label Small label
调整列（column）尺寸
用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。
13.辅助文本
针对表单控件的“块（block）”级辅助文本。
与表单控件相关联的帮助文本
与表单控件相关联的帮助文本 aria-describedby 属性的表单控件关联，这将确保使用辅助技术- 如屏幕阅读器 - 的用户获取控件焦点或进入控制时显示这个帮助文本。
帮助文本实例 一个较长的帮助文本块，超过一行，需要扩展到下一行。本实例中的帮助文本总共有两行。 Input with help text ... 一块帮助文本，突破到一个新的线，可以超越一行。
以上是“BootStrap中表单的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
咨询相关问题或预约面谈，可以通过以下方式与我们联系
