详解Bootstrap按钮

详解Bootstrap按钮

描述

Bootstrap Button（按钮）javascript 插件允许您加强按钮的功能。您可以控制按钮的状态，也可以为组件创建按钮组，比如工具条。

什么是必需的

您必须引用 jquery.js 和 bootstrap-button.js - 这两个 javaScript 文件。它们都位于 docs/assets/js 文件夹内。

如何使用它

您可以不编写任何 JavaScript 只通过标记使用该插件，也可以通过 JavaScript 启用按钮。

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

以下样式可用于, , 或 元素上：

类

描述http://

.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

禁用按钮

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

默认按钮

原始按钮

成功按钮

信息按钮

警告按钮

危险按钮

链接按钮

效果：

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

按钮大小

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

默认按钮

大的默认按钮

原始按钮

小的原始按钮

<br/>

成功按钮

特别小的成功按钮

信息按钮

块级信息按钮

效果如下所示：

按钮状态

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

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

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

看具体的例子：

默认按钮

激活的默认按钮

原始按钮

激活的原始按钮

成功按钮

激活的成功按钮

信息按钮

激活的信息按钮

<br/>

默认按钮

禁用的默认按钮

原始按钮

禁用的原始按钮

成功按钮

禁用的成功按钮

信息按钮

禁用的信息按钮

按钮标签

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

超链接按钮

button按钮

以上内容给大家介绍了Bootstrap按钮相关知识，希望大家喜欢。

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