Bootstrap Button（按钮）JavaScript 插件允许您加强按钮的功能。您可以控制按钮的状态，也可以为组件创建按钮组，比如工具条。
什么是必需的
您必须引用 jquery.js 和 bootstrap-button.js - 这两个 JavaScript 文件。它们都位于 docs/assets/js 文件夹内。
如何使用它
您可以不编写任何 JavaScript 只通过标记使用该插件，也可以通过 JavaScript 启用按钮。
Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：
以下样式可用于<a>, <button>, 或 <input> 元素上：
类
描述
.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
禁用按钮
首先看下不同颜色的按钮：
<html lang="en"> <head> <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码--> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="关键词一，关键词二"> <meta content="网站描述内容"> <meta content="Yvette Lau"> <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> <title>BootstrapDemo</title> <!--css js 文件的引入--> <link type="text/css" href="https://www.jb51.net/bootstrap-3.3.5-dist/css/bootstrap.min.css"> </head> <body> <!-- 标准的按钮 --> <button type="button">默认按钮</button> <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> <button type="button">原始按钮</button> <!-- 表示一个成功的或积极的动作 --> <button type="button">成功按钮</button> <!-- 用于要弹出信息的按钮 --> <button type="button">信息按钮</button> <!-- 表示应谨慎操作的动作 --> <button type="button">警告按钮</button> <!-- 表示一个危险动作的按钮 --> <button type="button">危险按钮</button> <!-- 让按钮看起来像一个链接，但同时保持按钮的行为 --> <button type="button">链接按钮</button> </body> </html>
效果：
btn-default / btn-primary /btn-success/ btn-info/ btn-warning/ btn-danger/ btn-link给按钮加上了不同的样式。
按钮大小
鉴于head部分都是相同的，只列出Body的内容。
<body> <!-- 标准的按钮 --> <button type="button">默认按钮</button> <button type="button">大的默认按钮</button> <br/><br/> <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> <button type="button">原始按钮</button> <button type="button">小的原始按钮</button> <br/><br/> <!-- 表示一个成功的或积极的动作 --> <button type="button">成功按钮</button> <button type="button">特别小的成功按钮</button> <br/><br/> <!-- 用于要弹出信息的按钮 --> <button type="button">信息按钮</button><br/><br/> <button type="button">块级信息按钮</button> </body>
效果如下所示：
按钮状态