中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

上一篇：Bootstrap Typeahead 下一篇：Bootstrap 折疊

Bootstrap Button（按鈕）

描述

Bootstrap Button（按鈕）JavaScript 插件允許您加強(qiáng)按鈕的功能。您可以控制按鈕的狀態(tài)，也可以為組件創(chuàng)建按鈕組，比如工具條。

什么是必需的

您必須引用 jquery.js 和 bootstrap-button.js - 這兩個(gè) JavaScript 文件。它們都位于 docs/assets/js 文件夾內(nèi)。

如何使用它

您可以不編寫任何 JavaScript 只通過標(biāo)記使用該插件，也可以通過 JavaScript 啟用按鈕。

實(shí)例

第一個(gè)實(shí)例演示了如何不通過 JavaScript 使用按鈕插件。

實(shí)例

<div class="container">
????<div class="row">
????????<div class="span8">
????????????<h2>Bootstrap 按鈕 JavaScript 插件實(shí)例</h2>
????????????<h3>控制狀態(tài)</h3>
????????????<p><button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">Loading State</button></p>
????????????<h3>單項(xiàng)切換</h3>
????????????<p><button class="btn btn-primary" data-toggle="button">Single Toggle</button></p>
????????????<h3>確認(rèn)框</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>單選框</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>

在線查看實(shí)例

通過 javascript 啟用按鈕

如需通過 JavaScript 啟用按鈕，請使用下面的 JavaScript 代碼，其中 ' .nav-tabs ' 是包含按鈕的 div 的 class。

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

方法

該插件有一些方法?，F(xiàn)在我們將通過用法代碼進(jìn)行討論。

$().button('toggle')

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

該方法切換按鈕狀態(tài)。賦予按鈕被激活時(shí)的狀態(tài)和外觀。使用 'data-toggle="button"' 自動切換按鈕為激活狀態(tài)。

$().button('loading')

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

該方法設(shè)置按鈕狀態(tài)為 loading - 即將按鈕置為禁用狀態(tài)并將文字內(nèi)容切換為 loading。通過使用 'data-loading-text' 屬性可以在按鈕元素上定義 loading 文本。

如果您使用 Firefox 瀏覽器，您將發(fā)現(xiàn)，在頁面加載之后，禁用狀態(tài)不會自動解除，請使用 'autocomplete="off"' 來避免這個(gè)問題。

$().button('reset')

該方法重置按鈕狀態(tài)，并將按鈕上的文本還原為原始值。

$().button(string)

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

該方法重置按鈕狀態(tài)，并將按鈕上的文本重置為傳入的值。

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

點(diǎn)擊這里，下載本教程中使用到的所有 HTML、CSS、JS 和圖片文件。

其他擴(kuò)展
上一篇：Bootstrap Typeahead 下一篇：Bootstrap 折疊