BootStrap中的表单大全

表单

　　基础表单

　　对于表单中的input、textarea、select，一般我都会加上类”form-control”,它设置元素的默认宽度为100%（并不是绝对，比如下述的内联表单）。并且每个元素（包括label和待输入元素）都会加上”form-group”。它的样式只有一个。margin-bottom:15px。 　　

　　label本身是inline-block的。但是.radio，.checkbox本身却是block的。 　

　　所以用一个label包裹多个单选框或复选框，这样会显得很不专业（haha）。还有，很多的也是很不美观的。So，第二种写法来了。

表单验证

　　has-success：成功，绿色。

　　has-warning：警告，黄色。

　　has-error：错误，红色。

　　在”form-group”上加上对应的样式即可。为了更好的验证，我们还可以继续加上”has-feedback”。然后在input（”form-control”）后面元素同级加上”form-control-feedback”。语义清晰明了。代码如下：

按钮

　　多按钮与按钮风格

　　bootstrap中的按钮风格多样。button、a、input、span、div等都可以成为按钮，只要它具有”btn btn-样式”。但是为了更好的兼容性和可读性最好不要这样用，尽量使用button标签。

　　按钮大小

　　如上述，使用”btn-xs”，”btn-sm”，”btn-lg”可以设置按钮大小。

　　按钮状态

　　如上述，有效的有”active”，”focus”。

图片

　　img-responsive：响应式图片，主要针对响应式设计。 　　img-rounded：圆角。 　　img-circle：圆形。 　　img-thumbnail：缩略图，表现为外层加了一个边框。

图标

　　　bootstart内置了很多小图标。使用方式如下。其实在上面的”form-control-feedback”中已经使用了。其中”glyphicon”是必须的。 　　　

输入框组

　　输入框组是一个”input-group”。我们需要加一些后缀（比如邮箱后缀）和前缀（金钱符号￥、$等）则需要使用到”input-group-addon”或者”input-group-btn”。语义简单清晰。如下： 　

小结

　　“form-horizontal”，”form-inline”都是表单组最外层的标签。

　　一个表单组以”form-group”作为父元素。类似的还有”input-group”，以及以后可能会将的”button-group”。它们都可以设置大小。

”form-group-lg”，”input-lg”，”input-group-lg”，”btn-lg”等。

　　验证样式有”has-error”，”has-success”，”has-warning”。同元素可以加上”has-feedback”。以便让验证更完整。

　　按钮有很多样式，大小可以设置。

　　图片常用的四个样式。

　　bootstarp内置了很多图标。

　　输入框组以”input-group”开头，子元素有”input-group-addon”，”input-group-btn”等等。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!