Bootstrap 按钮(Button)插件.pdfVIP

Bootstrap 按钮 （Button ）插件 Bootstrap 按钮 （Button ）插件 按钮 （Button ）在 Bootstrap 按钮 ⼀章中介绍过。通过按钮 （Button ）插件，您可以添 加进⼀些交互，⽐如控制按钮状态， 者为其他组件 （如⼯具栏）创建按钮组。 如果您想要单独引⽤该插件的功能，那么您需要引⽤ button.j s 。 者，正如 Bootstrap 插件概览 ⼀章中所提到，您可以引⽤ bootstrap.js 压缩版的 bootstrap.min.js。 加载状态 如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading- text= Loading... 作为其属性即可，如下⾯实例所⽰： !DOCTYPE htmlhtmlhead titleBootstrap 实例 - 按钮 （Button）插件加载状态/title link href= /bootstrap/css/bootstrap.min.css rel= stylesheet script src= /scripts/jquery .min.js /script script src= /bootstrap/js/bootstrap.min.js /script/headb type= button 加载状态/buttonscript $(function() { $( .btn ).click(function(){ $(this).button(loading).delay(1000).queue(function() { // $(this).button(reset); }); }); }); /script/body/html 结果如下所⽰： 单个切换 如需激活单个按钮的切换 （即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle= button 作为其属性即可，如下⾯实例所⽰： !DOCTYPE htmlhtmlhead titleBootstrap 实例 - 按钮 （Button）插件单个切换/title link href= /bootstrap/css/bootstrap.min.css rel= stylesheet script src= /scripts/jquery .min.js /script script src= /bootstrap/js/bootstrap.min.js /script/headb data-toggle= button 单个切换/button/body/html 结果如下所⽰： 复选框 （Checkbox ） 您可以创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle= buttons 来添 加复选框组的切换。 !DOCTYPE htmlhtmlhead titleBootstrap 实例 - 按钮 （Button）插件复选框/title link href= /bootstrap/css/bootstrap.min.css rel= stylesheet script src= /scripts/jquery .min.js /script script src= /bootstrap/js/bootstrap.min.js /script/headb label class= btn btn-primary input type= checkbox 选项 1 /label label class= btn btn-primary input type= checkbox 选项 2 /label label class= btn btn-primary input type= checkbox 选项 3 /label/div/body/html 结果如下所⽰： 单选按钮 （Radio ） 类似地，您可以创建单选按钮组，并通过向 btn-group 添加 data 属性 data- toggle= buttons 来添加单选按钮组的切换。 !DOCTYPE htmlhtmlhe