Bootstrap 按钮 · Bootstrap教程

Bootstrap 按钮

本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：

Class	描述
btn	默认的/标准的按钮。
btn-primary	提供额外的视觉效果，标识一组按钮中的原始动作。
btn-success	表示一个成功的或积极的动作。
btn-info	信息警告消息的上下文按钮。
btn-warning	表示应谨慎采取的动作。
btn-danger	表示一个危险的或潜在的负面动作。
btn-link	并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为。

下面的实例演示了上面所有的按钮 class：




   Bootstrap 实例 - 按钮选项
      
   



























结果如下所示：



按钮大小
下表列出了获得各种大小按钮的 class：



Class
描述




.btn-lg
这会让按钮看起来比较大。


.btn-sm
这会让按钮看起来比较小。


.btn-xs
这会让按钮看起来特别小。


.btn-block
这会创建块级的按钮，会横跨父元素的全部宽度。



下面的实例演示了上面所有的按钮 class：



   Bootstrap 实例 - 按钮大小
      
   




   
   


   
   


   
   


   
   


   
   





结果如下所示：



按钮状态
Bootstrap 提供了激活、禁用等按钮状态的 class，下面将进行详细讲解。
激活状态
按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。
下表列出了让按钮元素和锚元素呈激活状态的 class：



元素
Class




按钮元素
添加 .active class 来显示它是激活的。


锚元素
添加 .active class 到  按钮来显示它是激活的。



下面的实例演示了这点：



   Bootstrap 实例 - 按钮激活状态
      
   




   
   


   
   





结果如下所示：



禁用状态
当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。
下表列出了让按钮元素和锚元素呈禁用状态的 class：



元素
Class




按钮元素
添加 disabled 属性 到 


锚元素
添加 disabled class 到  按钮。 注意：该 class 只会改变  的外观，不会改变它的功能。在这里，您需要使用自定义的 Javascript 来禁用链接。



下面的实例演示了这点：



   Bootstrap 实例 - 按钮禁用状态
      
   




   
   


   
   


   
      链接
   
   
      禁用链接
   


   
      原始链接
   
   
      禁用的原始链接
   





结果如下所示：



按钮标签
您可以在 、






结果如下所示：

Class	描述
.btn-lg	这会让按钮看起来比较大。
.btn-sm	这会让按钮看起来比较小。
.btn-xs	这会让按钮看起来特别小。
.btn-block	这会创建块级的按钮，会横跨父元素的全部宽度。

元素	Class
按钮元素	添加 .active class 来显示它是激活的。
锚元素	添加 .active class 到按钮来显示它是激活的。

元素	Class
按钮元素	添加 disabled 属性到
锚元素	添加 disabled class 到按钮。注意：该 class 只会改变的外观，不会改变它的功能。在这里，您需要使用自定义的 Javascript 来禁用链接。

Bootstrap 按钮 · Bootstrap教程

Bootstrap教程相关栏目本月热门文章