<b>阅读目录</b>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label0">七、多值输入组件manifest</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label0_0">1、效果展示</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label0_1">2、源码说明</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label0_2">3、代码示例</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label1">八、文本框搜索组件bootstrap-typeahead</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label1_0">1、效果展示</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label1_1">2、源码说明</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label1_2">3、代码示例</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label2">九、bootstrap步骤组件</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label2_0">1、效果展示</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label2_1">2、源码说明</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label2_2">3、代码示例</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label3">十、按钮加载组件ladda-bootstrap</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label3_0">1、效果展示</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label3_1">2、源码说明</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label3_2">3、代码示例</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label4">十一、开关组件bootstrap-switch</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label4_0">1、效果展示</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label4_1">2、源码说明</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label4_2">3、代码示例</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label5">十二、评分组件bootstrap-star-rating</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label5_0">1、效果展示</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label5_1">2、源码说明</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label5_2">3、代码示例</a>
<a href="http://www.cnblogs.com/landeanfen/p/5603790.html#_label6">十三、总结</a>
<b>正文</b>
关于文本框的多值输入，一直是一个比较常见的需求，今天博主推荐一款好用的多值输入组件给大家，不要谢我，请叫我“红领巾”！
本地多值输入框
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 远程多值输入框
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 （1）本地多值输入
首先需要引用如下几个文件
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 bootstrap的Js和css文件并非必须，本文是为了样式好看，所以将其引用进来。manifest组件不依赖bootstrap，但是依赖jQuery，除此之外还需要引用jquery.manifest.css、jquery.ui.widget.js、jquery.marcopolo.js三个文件。
然后就是html和js的初始化
通过简单如上简单的步骤，上面的效果就可出来，是不是很简单。简单来看看它的一些用法
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 （2）远程多值输入
远程搜索输入的方式，需要我们提供一个url地址，获取数据，然后返回到浏览器。本文为了简单，就直接用源码网站上面的url来展示效果了。
首先需要引用的js文件
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 和上面的相比，多了一个文件jquery.marcopolo.js的引用。
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 至于每一个参数的意义，园友们有需要可以研究下，应该不难理解。博主简单监视了一下这个远程搜索方法的返回值
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 如果有园友打算自己用这个远程的方法，可以参考这个数据格式去实现。
其实关于文本框搜索的功能，很多组件都带有这个功能，比如原来博主用过的jQuery UI里面就有一个autocomplete组件可以实现自动完成。而bootstrap文本框的自动搜索组件，网上也是层出不穷，今天之所以选择这个组件是因为觉得它和bootstrap的风格比较类似，而且组件比较小，简单实用。
本地静态搜索（数据源在本地）
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 远程搜索（数据源通过ajax请求远程获取）
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 <a href="https://github.com/tcrosen/twitter-bootstrap-typeahead" target="_blank">源码地址</a>
首先需要引用的文件：主要包含一个css和一个js文件。需要jQuery和bootstrap的支持。
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 然后组件的初始化
数据源在本地
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 数据源通过ajax请求获取
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 后台对应的测试方法
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 常用属性：
display：显示的字段名称
val：实际的值
items：搜索结果默认展示的个数。默认值为8
source：本地数据源，格式为数组。
ajax：ajax请求的对象，可以直接为一个string的url，也可是object对象。如果是object对象，url这个就不说了，triggerLength的属性表示输入几个字符触发搜索。
常用事件：
itemSelected：选中搜索值的时候触发。
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 参数item表示选中的对象，参数val表示选中项的实际值，text表示选中项的显示值。
关于bootstrap步骤组件，上篇介绍过一个ystep这个小组件，它在查看任务的进度方面能起到一定的作用，但是对于一些复杂的业务，需要按照当前的步骤处理相应的业务这个方面它就有点无能为力了。今天博主就介绍一款效果相当不错的步骤组件，有了这个组件，程序员再也不用担心复杂的步骤设计了。
一睹风采
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 按照步骤进行“上一步”、“下一步”
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 更多步骤
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 这个组件是博主在网上找到的，看了下很多的样式和用法都是bootstrap里面的，唯一需要引用一个js和一个css文件。暂时未找到源码出处，如果有知道源码出处的可以告诉博主，博主再加上，为了尊重作者的劳动成果博主一定尊重原创！
需要引用的文件
bs-is-fun.css和brush.js这两个文件需要引用，组件需要jQuery和bootstrap的支持。
然后就是组件的初始化。
（1）箭头
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 如果是静态的步骤，只需要以上一段html代码即可看到上图中的箭头步骤效果。这里的active样式表示步骤已经经过的样式。
（2）正方形
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 （3）圆形
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 （4）进度条
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 （5）上一步、下一步
上图中的“上一步”、“下一步”是在bootstrap的modal组件里面自己定义的，还是把代码贴出来，供大家参考。
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 当然，还需要注册两个按钮的点击事件
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 逻辑可能并不完善，如果正式使用需要测试。
关于按钮加载，博主早就想找一个合适的组件去优化，如果不处理，肯定存在重复操作的可能。今天来看下这么一个小东西吧。
初见
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 自定义颜色、大小、进度条
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 <a href="https://github.com/msurguy/ladda-bootstrap" target="_blank">源码地址</a>
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 组件初始化：初始化4个按钮
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 代码释疑：应该不难理解，初始化组件主要涉及的代码 var l = Ladda.create(this); l.start(); ，这里的this表示当前点击的按钮的对象（注意这里是dom对象而不是jQuery对象），然后请求结束后调用 l.stop(); 关闭加载。
（1）data-style所有选项如下，有兴趣可以去试试，看看都是些什么效果：
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 （2）如果需要调整按钮的大小，组件内置了data-size属性，data-size所有选项如下：
（3）如果需要设置按钮的颜色，通过<code>data-spinner-color</code>
（4）按钮的进度条的设置
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 主要通过instance.setProgress(progress);这一句来设置当前执行的进度，progress的取值在0到1之间。当然，以上只是测试进度效果的代码，在正式项目中这里需要计算当前请求执行的情况来动态返回进度。
在bootstrap中文网的首页上面，你就能找到这么一个组件
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 初始效果
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 五花八门的属性以及事件
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 组件依赖于JQuery和bootstrap
然后就是和html和js的初始化
size属性并非必须，如果你使用默认的样式，参数可以不传。
常用的属性
size：开关大小。可选值有'mini', 'small', 'normal', 'large'
onColor：开关中开按钮的颜色。可选值有'primary', 'info', 'success', 'warning', 'danger', 'default'
offColor：开关中关按钮的颜色。可选值'primary', 'info', 'success', 'warning', 'danger', 'default'
onText：开关中开按钮的文本，默认是“ON”。
offText：开关中关按钮的文本，默认是“OFF”。
onInit：初始化组件的事件。
onSwitchChange：开关变化时的事件。
常用的事件和方法可以直接查看文档，官方提供了很详细的说明。
某东、某宝上面的评分大家应该都有了解，无意中发现了一块bootstrap风格的评分组件，觉得有点意思，以后做电商、社区、论坛系统或许用得着，就来分享分享。
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 <a href="https://github.com/kartik-v/bootstrap-star-rating" target="_blank">源码下载</a>
此组件需要jQuery和bootstrap样式的支持
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 直接通过html初始组件
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）七、多值输入组件manifest八、文本框搜索组件bootstrap-typeahead九、bootstrap步骤组件十、按钮加载组件ladda-bootstrap十一、开关组件bootstrap-switch十二、评分组件bootstrap-star-rating十三、总结 组件通过class="rating"这一个来进行初始化。这里几个参数应该很好理解：
value：表示组件初始化的时候默认的分数
min：最小分数
max：最大分数
step：每次增加的最小刻度
data-size：星星的大小
data-stars：星星的个数
通过 $("#input-21a").val() 即可得到当前的评分数。
通过这两篇给大家分享了下bootstrap的十二款组件，博主相信这些里面肯定有些你能够用上，可能有些并不常用，但留着以后或许能用上呢！或许有园友会觉得天天去扒别人的组件没啥意思，也没啥技术含量，或许是的，但博主觉得如果将这些东西整理成一套完善的bootstrap组件库，对于以后是非常有用的，这十二款组件只是博主组件库的一部分，还有很多没有抽离出来，有需要的园友可以联系博主。至此，bootstrap组件的总结暂时告一段落，后面将会分享下ko的一些封装。如果你觉得本文能够帮到你，可以推荐下，博主一定继续努力！
本文转自懒得安分博客园博客，原文链接：http://www.cnblogs.com/landeanfen/p/5603790.html，如需转载请自行联系原作者
