全面解析Bootstrap表单使用方法（表单按钮）

作者：傻籽 字体：[增加 减小] 类型：转载 时间：2015-11-24 我要评论

这篇文章全面解析了Bootstrap表单的使用方法，本文重点介绍Bootstrap表单按钮，感兴趣的小伙伴们可以参考一下

一、多标签支持

一般制作按钮除了使用<button>标签元素之外，还可以使用<input type="submit">和<a>标签等。

同样，在Bootstrap框架中制作按钮时，除了刚才所说的这些标签元素之外，还可以使用在其他的标签元素上，唯一需要注意的是，要在制作按钮的标签元素上添加类名“.btn”。

?

1 2 3 4 5

< button class = "btn btn-default" type = "button" >button标签按钮</ button > < input type = "submit" class = "btn btn-default" value = "input标签按钮" /> < a href = "##" class = "btn btn-default" >a标签按钮</ a > < span class = "btn btn-default" >span标签按钮</ span > < div class = "btn btn-default" >div标签按钮</ div >

二、定制风格

　　在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现。

?

1 2 3 4 5 6 7

<button class= "btn" type= "button" >基础按钮.btn</button> <button class= "btn btn-default" type= "button" >默认按钮.btn- default </button> <button class= "btn btn-primary" type= "button" >主要按钮.btn-primary</button> <button class= "btn btn-success" type= "button" >成功按钮.btn-success</button> <button class= "btn btn-warning" type= "button" >警告按钮.btn-warning</button> <button class= "btn btn-danger" type= "button" >危险按钮.btn-danger</button> <button class= "btn btn-link" type= "button" >链接按钮.btn-link</button>

三、按钮大小

　　在Bootstrap框架中，对于按钮的大小，也是可以定制的。　　

　　在Bootstrap框架中提供了三个类名来控制按钮大小：

?

1 2 3

< button class = "btn btn-primary btn-lg" type = "button" >大型按钮.btn-lg</ button > < button class = "btn btn-primary" type = "button" >正常按钮</ button > < button class = "btn btn-primary btn-sm" type = "button" >小型按钮.btn-sm</ button >

四、块状按钮

　　Bootstrap框架中提供了一个类名“.btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。

?

1 2 3 4

<button class= "btn btn-primary btn-lg btn-block" type= "button" >大型按钮.btn-lg</button> <button class= "btn btn-primary btn-block" type= "button" >正常按钮</button> <button class= "btn btn-primary btn-sm btn-block" type= "button" >小型按钮.btn-sm</button> <button class= "btn btn-primary btn-xs btn-block" type= "button" >超小型按钮.btn-xs</button>

 

五、按钮禁用状态

　　在Bootstrap框架中，要禁用按钮有两种实现方式：

　　方法1：在标签中添加disabled属性

　　方法2：在元素标签中添加类名“disabled”

　　两者的主要区别是：

　　“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等.

　　在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

?

1 2	<button class= "btn btn-primary btn-lg btn-block" type= "button" disabled= "disabled" >通过disabled属性禁用按钮</button> <button class= "btn btn-primary btn-block disabled" type= "button" >通过添加类名disabled禁用按钮</button>

今天再为大家补充一点新知识：Bootstrap表单提示信息

平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<form role= "form" >   <div class= "form-group has-success has-feedback" >   <label class= "control-label" for = "inputSuccess1" >成功状态</label>   <input type= "text" class= "form-control" id= "inputSuccess1" placeholder= "成功状态" >   <span class= "help-block" >你输入的信息是正确的</span>   <span class= "glyphicon glyphicon-ok form-control-feedback" ></span>   </div>   <div class= "form-group has-warning has-feedback" >   <label class= "control-label" for = "inputWarning1" >警告状态</label>   <input type= "text" class= "form-control" id= "inputWarning1" placeholder= "警告状态" >   <span class= "help-block" >请输入正确信息</span>   <span class= "glyphicon glyphicon-warning-sign form-control-feedback" ></span>   </div>   <div class= "form-group has-error has-feedback" >   <label class= "control-label" for = "inputError1" >错误状态</label>   <input type= "text" class= "form-control" id= "inputError1" placeholder= "错误状态" >     <span class= "glyphicon glyphicon-remove form-control-feedback" ></span>   </div> </form>

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是针对Bootstrap表单按钮的详细介绍，之后还有更多内容会不断更新，希望大家继续关注