HTML自带的表单没有样式可言,非常难看。
Bootstrap提供了样式优雅大方的表单,拿来即用,非常nice。本篇就来讲解下Bootstrap框架下表单样式的设置方法。
2. HTML表单样式我们先来看下HTML自带的表单是啥样的。
效果如下,样式真是马马虎虎。
如果使用Bootstrap设置表单,只需要将表单控件放入.form-group类的div中,并对表单控件添加.form-control类。
需要注意的是,Boostrap默认表单使垂直表单,即从上往下排列显示。
代码:
效果如下,样式还是非常大气的。
默认的垂直表单看起来并不习惯,绝大多数表单还是习惯使用水平表单的形式,即文字和控件是水平排列的。
可以通过三个步骤,将表单转换为水平表单。
- 为
- 为
- 添加网格类,使标签文字和控件水平排列。
代码如下:
效果如下,非常符合正常表单的使用习惯了。
有时候我们希望表单的元素全部排列在一行上,也就是所谓的内联表单。
为



