Bootstrap表单Form全面解析

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

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

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

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

rush:js;">

Box"> Box"> Check me out

运行之后的效果

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

例如

rush:js;">

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

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

即可

rush:js;"> form class="form-horizontal">

Box"> Box"> Remember me

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

！

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

Bootstrip HTML 查询搜索常用格式模版 <form class=&...

如何在按钮上加红色数字您可以使用Bootstrap的badge组件来在...

让两个按钮左右排列

要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它...

是的，可以将status设置为布尔类型，这样可以在前端使用复选...

Bootstrap 按钮总结

前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自...

Python学习-day52-bootstrap

起步导入：<linkrel="stylesheet"href="b...

相关文章