本文主要给大家介绍了bootstrap表单样式的使用知识，非常不错，一起看看吧！
表单
本文主要给大家介绍了bootstrap表单样式的使用知识，非常不错，一起看看吧！
表单
效果图:
在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
1、在元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。
在元素上使用类名“form-horizontal”主要有以下几个作用：
- 设置表单控件padding和margin值。 - 改变“form-group”的表现形式，类似于网格系统的“row”。
在Bootstrap框架中实现这样的表单效果是轻而易举的，你只需要在元素中添加类名“form-inline”即可。 内联表单实现原理非常简单，欲将表单控件在一行显示，就需要将表单控件设置成内联块元素（display:inline-block）。
效果图:
单行输入框，常见的文本输入框，也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式.
效果图:
Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格。
效果图:
文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
效果图:
Bootstrap框架中checkBox和radio有点特殊，Bootstrap针对他们做了一些特殊化处理，主要是checkBox和radio与label标签配合使用会出现一些小问题（最头痛的是对齐问题）。使用Bootstrap框架，开发人员无需考虑太多，只需要按照下面的方法使用即可。
效果图:
有时候，为了布局的需要，将复选框和单选按钮需要水平排列。Bootstrap框架也做了这方面的考虑：
1、如果checkBox需要水平排列，只需要在label标签上添加类名“checkBox-inline”
2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”
效果图:
在Bootstrap框架中的按钮都是采用来实现
效果图:
前面看到的表单控件都正常的大小。可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大
这两个类适用于表单中的input，textarea和select控件.
效果图:
Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”。具体的看下面的代码
效果图:
在Bootstrap框架中，如果fieldset设置了disabled属性，整个域都将处于被禁用状态。
效果图:
据说对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的。
效果图:
在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
很多时候，在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-Feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起：
效果图:
平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个”help-block”样式，将提示信息以块状显示，并且显示在控件底部。
效果图:
以上所述是小编给大家介绍的Bootstrap表单样式的使用。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/bootstrap/45941.html