您好,欢迎访问一九零五行业门户网

详解Bootstrap按钮_javascript技巧

描述
bootstrap button(按钮)javascript 插件允许您加强按钮的功能。您可以控制按钮的状态,也可以为组件创建按钮组,比如工具条。
什么是必需的
您必须引用 jquery.js 和 bootstrap-button.js - 这两个 javascript 文件。它们都位于 docs/assets/js 文件夹内。
如何使用它
您可以不编写任何 javascript 只通过标记使用该插件,也可以通过 javascript 启用按钮。
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 禁用按钮
首先看下不同颜色的按钮:
bootstrapdemo 默认按钮 原始按钮 成功按钮 信息按钮 警告按钮 危险按钮 链接按钮
效果:
btn-default / btn-primary /btn-success/ btn-info/ btn-warning/ btn-danger/ btn-link给按钮加上了不同的样式。
按钮大小
鉴于head部分都是相同的,只列出body的内容。
默认按钮 大的默认按钮
原始按钮 小的原始按钮
成功按钮 特别小的成功按钮
信息按钮
块级信息按钮
效果如下所示:
按钮状态
按钮分为active和disabled两种状态、
激活状态:按钮呈现出被按压的外观,即背景颜色变深、深色边框和阴影。
禁用状态:按钮颜色会变淡 50%,并失去渐变
看具体的例子:
默认按钮 激活的默认按钮
原始按钮 激活的原始按钮
成功按钮 激活的成功按钮
信息按钮 激活的信息按钮
默认按钮 禁用的默认按钮
原始按钮 禁用的原始按钮
成功按钮 禁用的成功按钮
信息按钮 禁用的信息按钮
按钮标签
a,input都可以表现的像一个按钮,但是避免跨浏览器不一致,最好使用button标签。
超链接按钮 button按钮
以上内容给大家介绍了bootstrap按钮相关知识,希望大家喜欢。
其它类似信息

推荐信息