<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，如需轉載請自行聯系原作者
