按钮插件--按钮状态切换，玩转Bootstrap（JS插件篇）教程-慕课网

4-9 按钮插件--按钮状态切换

本节编程练习不计算学习进度，请电脑登录imooc.com操作

按钮插件--按钮状态切换

使用 data-toggle 属性还可以激活按钮的行为状态，实现在激活和未激活之间进行状态切换。例如，下面代码可以激活按钮行为特性，单击时将按钮激活，再单击可以让按钮恢复到默认状态：

<button type="button" data-toggle="button" class="btn btn-primary">确认</button>

默认状态效果：

点击后的效果：

再次点击的效果：

注意，这里自定义属性是 data-toggle="button"，而不是 data-toggle="buttons"。

任务

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>按钮插件--按钮状态切换</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>body{padding:10px;margin:10px}</style>
</head>
<body>
<div class="btn-group" data-toggle="button">
    <button type="button" data-toggle="button" class="btn btn-primary">确认</button>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>