您现在的位置:首页 >> 前端 >> 内容

Bootstrap按钮介绍

时间:2016/1/4 9:22:55 点击:

  核心提示:Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示:以下样式可用于,, 或元素上: 类 描述 .btn 为按钮添加基本样式 .btn-default 默认/标准按钮...

Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示:

以下样式可用于,

 

描述
.btn 为按钮添加基本样式
.btn-default 默认/标准按钮
.btn-primary 原始按钮样式(未被操作)
.btn-success 表示成功的动作
.btn-info 该样式可用于要弹出信息的按钮
.btn-warning 表示需要谨慎操作的按钮
.btn-danger 表示一个危险动作的按钮操作
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg 制作一个大按钮
.btn-sm 制作一个小按钮
.btn-xs 制作一个超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 按钮被点击
.disabled 禁用按钮

首先看下不同颜色的按钮:

 

 




效果:

Bootstrap按钮介绍

btn-default / btn-primary /btn-success/ btn-info/ btn-warning/ btn-danger/ btn-link给按钮加上了不同的样式。

 

按钮大小

 

鉴于head部分都是相同的,只列出Body的内容。

 












效果如下所示:

Bootstrap按钮介绍

 

按钮状态

按钮分为active和disabled两种状态、

激活状态:按钮呈现出被按压的外观,即背景颜色变深、深色边框和阴影。

禁用状态:按钮颜色会变淡 50%,并失去渐变

 

看具体的例子:

















Bootstrap按钮介绍

 

按钮标签

a,input都可以表现的像一个按钮,但是避免跨浏览器不一致,最好使用Button标签。

 


超链接按钮

 

Bootstrap按钮介绍

 

 

Tags:BO OO OT TS 
作者:网络 来源:Yvette Lau