代码释疑：应该不难理解，初始化组件主要涉及的代码 var l = Ladda.create(this);   l.start(); ，这里的this表示当前点击的按钮的对象（注意这里是dom对象而不是jQuery对象），然后请求结束后调用 l.stop(); 关闭加载。

（1）data-style所有选项如下，有兴趣可以去试试，看看都是些什么效果：

data-style="expand-left" data-style="expand-right" data-style="expand-up" data-style="expand-down" data-style="zoom-in" data-style="zoom-out" data-style="slide-left" data-style="slide-right" data-style="slide-up" data-style="slide-down" data-style="contract"

（2）如果需要调整按钮的大小，组件内置了data-size属性，data-size所有选项如下：

data-size="xs" data-size="s" data-size="l"

（3）如果需要设置按钮的颜色，通过data-spinner-color

data-spinner-color="#FF0000"

（4）按钮的进度条的设置

　　　　Ladda.bind('button', { callback: function (instance) { var progress = 0; var interval = setInterval(function () { progress = Math.min(progress + Math.random() * 0.1, 1); instance.setProgress(progress); if (progress === 1) { instance.stop(); clearInterval(interval); } }, 200); } }); });

主要通过instance.setProgress(progress);这一句来设置当前执行的进度，progress的取值在0到1之间。当然，以上只是测试进度效果的代码，在正式项目中这里需要计算当前请求执行的情况来动态返回进度。

十一、开关组件bootstrap-switch

在bootstrap中文网的首页上面，你就能找到这么一个组件

1、效果展示

初始效果

五花八门的属性以及事件

2、源码说明

Bootstrap-Switch源码地址：https://github.com/nostalgiaz/bootstrap-switch

Bootstrap-Switch文档以及Demo：

3、代码示例

需要引用的文件

组件依赖于JQuery和bootstrap

然后就是和html和js的初始化

$(function () { $('input[type=checkbox]').bootstrapSwitch({ size: "large" }); })

size属性并非必须，如果你使用默认的样式，参数可以不传。

常用的属性

常用的事件和方法可以直接查看文档，官方提供了很详细的说明。

十二、评分组件bootstrap-star-rating

某东、某宝上面的评分大家应该都有了解，无意中发现了一块bootstrap风格的评分组件，觉得有点意思，以后做电商、社区、论坛系统或许用得着，就来分享分享。

1、效果展示

2、源码说明

源码下载

3、代码示例

 此组件需要jQuery和bootstrap样式的支持

直接通过html初始组件

data-symbol=5

组件通过class="rating"这一个来进行初始化。这里几个参数应该很好理解：

通过 $("#input-21a").val() 即可得到当前的评分数。

十三、总结

通过这两篇给大家分享了下bootstrap的十二款组件，博主相信这些里面肯定有些你能够用上，可能有些并不常用，但留着以后或许能用上呢！或许有园友会觉得天天去扒别人的组件没啥意思，也没啥技术含量，或许是的，但博主觉得如果将这些东西整理成一套完善的bootstrap组件库，对于以后是非常有用的，这十二款组件只是博主组件库的一部分，还有很多没有抽离出来，有需要的园友可以联系博主。至此，bootstrap组件的总结暂时告一段落，后面将会分享下ko的一些封装。如果你觉得本文能够帮到你，可以推荐下，博主一定继续努力！

欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利