自强学堂
自强学堂:学习、分享、让你更强!
Bootstrap 教程HTMLCSSJAVASCRIPTJQUERYSQLPHPBOOTSTRAPANGULARXML
 

Bootstrap 按钮

描述

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 启用按钮,请使用下面的 JavaScript 代码,其中 ' .nav-tabs ' 是包含按钮的 div 的 class。

$('.nav-tabs').button()

方法

该插件有一些方法。现在我们将通过用法代码进行讨论。

$().button('toggle')

<button class="btn" data-toggle="button" >…</button>

该方法切换按钮状态。赋予按钮被激活时的状态和外观。使用 'data-toggle="button"' 自动切换按钮为激活状态。

$().button('loading')

<button class="btn" data-loading-text="loading stuff..." >...</button>

该方法设置按钮状态为 loading - 即将按钮置为禁用状态并将文字内容切换为 loading。通过使用 'data-loading-text' 属性可以在按钮元素上定义 loading 文本。

如果您使用 Firefox 浏览器,您将发现,在页面加载之后,禁用状态不会自动解除,请使用 'autocomplete="off"' 来避免这个问题。

$().button('reset')

该方法重置按钮状态,并将按钮上的文本还原为原始值。

$().button(string)

<button class="btn" data-loading-text="loading stuff..." >...</button>

该方法重置按钮状态,并将按钮上的文本重置为传入的值。

<button class="btn" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>

点击这里,下载本教程中使用到的所有 HTML、CSS、JS 和图片文件。

为什么有广告?:广告收入是作者继续投入更多业余时间的动力,也可以补贴服务器等的花费,本站也不会阻止屏蔽广告插件,请大家理解!