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

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

一、多标签支持

一般制作按钮除了使用标签元素之外，还可以使用和标签等。

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

button标签按钮

a标签按钮

span标签按钮

二、定制风格

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

基础按钮.btn

默认按钮.btn-default

&lthttp://;button class="btn btn-primary" type="button">主要按钮.btn-primary

成功按钮.btn-success

警告按钮.btn-warning

危险按钮.btn-danger

链接按钮.btn-link

三、按钮大小

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

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

大型按钮.btn-lg

正常按钮

小型按钮.btn-sm

四、块状按钮

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

大型按钮.btn-lg

正常按钮

小型按钮.btn-sm

超小型按钮.btn-xs

五、按钮禁用状态

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

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

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

两者的主要区别是：

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

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

通过disabled属性禁用按钮

通过添加类名disabled禁用按钮

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

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

成功状态

你输入的信息是正确的

警告状态

请输入正确信息

错误状态

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

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

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