Bootstrap表单Form全面解析

前端之家收集整理的这篇文章主要介绍了Bootstrap表单Form全面解析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

在进行自己的后台改版时,大体布局都使用了bootstrap,剩下的表单部分没理由不去使用它,对于表单的美化和布局,bootstrap做的也是很不错的,有大气的边框,多功能的按钮及宏观的表单布局,一切都是那么的完整与完美!

普通表单

我们需要将表单元素包裹到form-group类里,一般以

来进行存放,而在它内容表单元素名称一般放在label标签里,而input标签的类名为form-control,值得注意的是,你的checkBox和radio等元素需要写在自己的div里。

例如下面的表单

Box">

运行之后的效果

水平排放的表单

需要你的表单元素需要水平排放,可以在表单上添加类.form-inline,这种表单一般在元素比较少时比较适用

例如

Box">

普通表单+元素水平排放

这种表单用的是最多的,在一般用户注册,填写资料时,经常可以见到如下的表单效果

实现这种表单使用了.form-horizontal类,每行元素被包裹在

即可

Box">

我们通过代码也可以看到,在进行表单布局时,也可以用

col-sm和col-sm-offset进行栅格布局

以上所述是小编给大家介绍的Bootstrap表单Form全面解析。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Bootstrap相关文章