Bootstrap Button(按钮)JavaScript 插件允许您加强按钮的功能。您可以控制按钮的状态,也可以为组件创建按钮组,比如工具条。
您必须引用 jquery.js 和 bootstrap-button.js - 这两个 JavaScript 文件。它们都位于 docs/assets/js 文件夹内。
您可以不编写任何 JavaScript 只通过标记使用该插件,也可以通过 JavaScript 启用按钮。
第一个实例演示了如何不通过 JavaScript 使用按钮插件。
< div class = "container" > < div class = "row" > < div class = "span8" > < h2 >Bootstrap 按钮 JavaScript 插件实例</ h2 > < h3 >控制状态</ h3 > < p >< button id = "fat-btn" data-loading-text = "loading..." class = "btn btn-primary" >Loading State</ button ></ p > < h3 >单项切换</ h3 > < p >< button class = "btn btn-primary" data-toggle = "button" >Single Toggle</ button ></ p > < h3 >确认框</ 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 > |
如需通过 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 > |