发布于 2016-11-25 14:35:08 | 96 次阅读 | 评论: 0 | 来源: 网络整理
Bootstrap Button（按钮）JavaScript 插件允许您加强按钮的功能。您可以控制按钮的状态，也可以为组件创建按钮组，比如工具条。
您必须引用 jquery.js 和 bootstrap-button.js - 这两个 JavaScript 文件。它们都位于 docs/assets/js 文件夹内。
您可以不编写任何 JavaScript 只通过标记使用该插件，也可以通过 JavaScript 启用按钮。
第一个实例演示了如何不通过 JavaScript 使用按钮插件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Example of Bootstrap Button JavaScript Plugin</title>
<link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="span8">
<h2>Example of Bootstrap Button JavaScript Plugin</h2>
<h3>Control state</h3>
<p><button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">Loading State</button></p>
<h3>Single toggle</h3>
<p><button class="btn btn-primary" data-toggle="button">Single Toggle</button></p>
<h3>Checkbox</h3>
<p><div class="btn-group" data-toggle="buttons-checkbox">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Right</button>
</div></p>
<h3>Radio</h3>
<p><div class="btn-group" data-toggle="buttons-radio">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Right</button>
</div></p>
</div>
</div>
</div>
<!--Except 'Control state', other buttons require only jquery.js and bootstrap-button.js JavaScript files-->
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/assets/js/bootstrap-transition.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js"></script>
</body>
</html>
如需通过 JavaScript 启用按钮，请使用下面的 JavaScript 代码，其中 ' .nav-tabs ' 是包含按钮的 div 的 class。
$('.nav-tabs').button()
该插件有一些方法。现在我们将通过用法代码进行讨论。
<button class="btn" data-toggle="button" >…</button>
该方法切换按钮状态。赋予按钮被激活时的状态和外观。使用 'data-toggle="button"' 自动切换按钮为激活状态。
<button class="btn" data-loading-text="loading stuff..." >...</button>
该方法设置按钮状态为 loading - 即将按钮置为禁用状态并将文字内容切换为 loading。通过使用 'data-loading-text' 属性可以在按钮元素上定义 loading 文本。
如果您使用 Firefox 浏览器，您将发现，在页面加载之后，禁用状态不会自动解除，请使用 'autocomplete="off"' 来避免这个问题。
该方法重置按钮状态，并将按钮上的文本还原为原始值。
<button class="btn" data-loading-text="loading stuff..." >...</button>
该方法重置按钮状态，并将按钮上的文本重置为传入的值。
<button class="btn" data-complete-text="finished!" >...</button>
<script>
$('.btn').button('complete')
</script>