在”form-group”上加上对应的样式即可。为了更好的验证，我们还可以继续加上”has-feedback”。然后在input（”form-control”）后面元素同级加上”form-control-feedback”。语义清晰明了。代码如下：
<form action=""> <div> <label for="">用户名：</label> <div> <input type="text" /> <span></span> </div> </div> <div> <label for="">密码：</label> <div> <input type="text" /> <span></span> </div> </div> <div> <label for="">邮箱：</label> <div> <input type="text" /> <span></span> <span>格式正确</span> </div> </div> </form>
按钮
多按钮与按钮风格
bootstrap中的按钮风格多样。button、a、input、span、div等都可以成为按钮，只要它具有”btn btn-样式”。但是为了更好的兼容性和可读性最好不要这样用，尽量使用button标签。
<button>按钮</button> <button>按钮</button> <button>按钮</button> <button>按钮</button> <button>按钮</button> <button>按钮</button> <button>按钮</button> <!--btn-block使按钮独占一行--> <button>按钮</button> <button>按钮</button> <button>按钮</button> <button>按钮</button> <button>按钮</button> <button>按钮</button> <button>按钮</button>
按钮大小
如上述，使用”btn-xs”，”btn-sm”，”btn-lg”可以设置按钮大小。
按钮状态
如上述，有效的有”active”，”focus”。
图片
img-responsive：响应式图片，主要针对响应式设计。
img-rounded：圆角。
img-circle：圆形。
img-thumbnail：缩略图，表现为外层加了一个边框。
图标
bootstart内置了很多小图标。使用方式如下。其实在上面的”form-control-feedback”中已经使用了。其中”glyphicon”是必须的。
<span></span>
输入框组
输入框组是一个”input-group”。我们需要加一些后缀（比如邮箱后缀）和前缀（金钱符号￥、$等）则需要使用到”input-group-addon”或者”input-group-btn”。语义简单清晰。如下：
<!--邮箱--> <div> <input type="text" /> <span>@gmail.com</span> </div> <!--货币--> <div> <span>$</span> <input type="text"> <span>.00</span> </div> <!--单选--> <div> <span> <input type="radio"/> </span> <input type="text"/> </div> <!--多选--> <div> <span> <input type="checkbox"/> </span> <input type="text" /> </div> <!--淘宝输入框组--> <div> <div> <button data-toggle="dropdown"> 请选择<span></span> </button> <ul> <li><a href="javascript:void(0)">宝贝</a></li> <li><a href="javascript:void(0)">店铺</a></li> </ul> </div> <input type="text" /> <span> <button>搜索</button> </span> </div>
小结
“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中的表单大全，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: