BootStrap中的表单大全

BootStrap中的表单大全

表单

基础表单

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

用户名：

密码：

内联表单

通过给最外层元素（form-group的父元素）加上”form-inline”。表示所有表单元素都在一行显示（充足的宽度的情况下）。并且”.form-inline .form-group”展示为内联块元素（inline-block）。并且”.form-inline .form-conldHPbntrol”的宽度是auto。这样可以保证在一行展示。

用户名：

密码：

水平表单

不同于普通表单和内联表单。如果要将label和input表单元素显示在一行，则需要使用”form-horizontal”。该类联合”form-group”使用，就相当于网格系统中的”row”。所以它的子类有”col-md-*”，而label的 “control-label”—-“.form-horizontal .control-label”，有文本右对齐的效果。如果不加这个，label和input的会显得不对齐。

用户名：

密码：

表单大小

控制input大小的是”input-sm”，”input-lg”，它们使input输入框比正常看起来更小或者更大。与此对应的是label中文本的大小。需要在父级”form-group”同时加上”form-group-sm”，”form-group-lg”。如上面一个demo的密码输入框。

输入框

在HTML5中，输入框（input）标签中的type支持了更多的类型。有text、password、datatime、datatime-local、date、month、time、week、number、email、url、search、tel和color。标签上只有赋值了特定的type才能显示正确的样式。有些元素只有在手机上才能显示其效果。

下拉框select

与输入框类似。只是将input改成了select，同时加上了”form-control”类。

请选择：

HTML

css

javascript

java

php

Nodejs

col-md-pull-*是左偏移。

文本域

和上面类似。

textarea：

hello

多选框和单选框

为了使radio和checkbox元素显示在一行，并且和label对齐。bootstrap提供了两种选择。其一：

男      

女      

保密      

HTML      

CSS      

JavaScript      

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

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

男

女

保密

HTML

CSS

JavaScript

表单验证

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”。语义简单清晰。如下：

@gmail.com

$

.00

请选择

搜索

小结

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

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

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

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

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

图片常用的四个样式。

bootstarp内置了很多图标。

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

以上所述是给大家介绍的BootStrap中的表单大全，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。