20 款最棒的 jQuery Bootstrap 插件

Twitter Bootstrap是最流(liu)行的(de)(de)前端框架之一，作為開(kai)發者用作建立有(you)效和有(you)用的(de)(de)Web應用的(de)(de)手段，它(ta)可(ke)被(bei)看作是網(wang)絡發展的(de)(de)中堅力量。它(ta)功能很豐(feng)富：使用12列響應網(wang)格，眾多(duo)組(zu)件(jian)，JavaScript插件(jian)，排版，表(biao)格控(kong)件(jian)，甚至可(ke)以基于網(wang)頁來(lai)定制自己的(de)(de)Bootstrap 。 

在本文中(zhong)，我們(men)(men)收集了給開發者的(de)20個最佳(jia)的(de) jQuery的(de)Bootstrap 插件，這(zhe)將有助(zhu)于您創建有創新和有用(yong)(yong)的(de)網站和應用(yong)(yong)程序。我們(men)(men)希(xi)望(wang)你會(hui)發現列表中(zhong)的(de)插件能對你接下來的(de)項目很(hen)好地派(pai)上用(yong)(yong)場。好好享受(shou)！

1. Bootstrap File Input

Bootstrap3.x 的(de)(de)一個(ge)增強版(ban)的(de)(de)HTML 5 文(wen)件(jian)選擇控件(jian)，可(ke)以對圖片(pian)文(wen)件(jian)和文(wen)本(ben)文(wen)件(jian)進行預(yu)覽，以及其他功能(neng)。該(gai)插(cha)件(jian)增強了這些插(cha)件(jian)，并且將組(zu)件(jian)的(de)(de)初始(shi)化簡(jian)化為一個(ge)簡(jian)單的(de)(de)HTML文(wen)件(jian)字段。它同時還(huan)提供了多個(ge)文(wen)件(jian)預(yu)覽的(de)(de)功能(neng)包(bao)括(kuo)圖片(pian)和文(wen)本(ben)文(wen)件(jian)。

2. PNotify

PNotify 是一個由SciActive 開發的(de) JavaScript的(de)通(tong)知(zhi)插件，曾用名Pines Notify。它的(de)設計理念是提供(gong)一個極度(du)靈活而又非(fei)(fei)常(chang)容(rong)易實現和(he)(he)使用。它可以提供(gong)非(fei)(fei)阻(zu)塞(sai)的(de)通(tong)知(zhi)。允許用戶在不關閉它的(de)情況(kuang)下點擊(ji)通(tong)知(zhi)后面的(de)元(yuan)素(su)。 PNotify 使用了(le)Bootstrap 和(he)(he) jQuery UI來(lai)定義(yi)(yi)樣(yang)式，這意味著(zhu)可以非(fei)(fei)常(chang)容(rong)易的(de)對它進行自定義(yi)(yi)主題樣(yang)式。

3. Pongstagr.am

Pongstagr.am是(shi)一個(ge)jQuery插件(jian)，它允許在你(ni)的網站使用Bootstrap 前端的風格和模(mo)態插件(jian)顯示你(ni)Instagram媒體。 在大多數情況下，Instagram的API，只(zhi)要(yao)求使用一個(ge)client_id。一個(ge)簡單(dan)的client_id通過特(te)定的應用程序，關(guan)聯到服務(wu)器，腳本 或程序。 然而，一些(xie)請求需要(yao)身(shen)份(fen)驗證 —— 特(te)別(bie)是(shi)涉及(ji)用戶利益(yi)時(shi)。

4. X-editables

X-editable 支(zhi)持Twitter Bootstrap，jQuery UI的或(huo)純jQuery的就地(di)編輯(ji)。 這個庫(ku)允許(xu)你在你網頁上創(chuang)建(jian)可(ke)(ke)(ke)編輯(ji)元(yuan)素。 它(ta)同(tong)時包(bao)括彈出和(he)(he)內(nei)嵌模式(shi)。 它(ta)是(shi)bootstrap可(ke)(ke)(ke)編輯(ji)插(cha)件的新方式(shi)，大力地(di)重構和(he)(he)完善過。  它(ta)支(zhi)持像文字(zi)，區域文本，選擇，日期，日期ui和(he)(he)清單的輸(shu)入類型(xing)。 它(ta)支(zhi)持客戶(hu)端和(he)(he)服務器端驗(yan)證。容器位置是(shi)完全可(ke)(ke)(ke)定制(zhi)的。 用戶(hu)可(ke)(ke)(ke)以通過單擊(ji)，雙擊(ji)或(huo)手動切換。它(ta)工作于IE7+和(he)(he)所有(you)的現代瀏(liu)覽器。

5. ColorPicker

一個時鐘分割的時間拾取器的Boostrap的jQuery插件。同時支持(chi)桌(zhuo)面和移動設備(bei)。也可以很(hen)好運行(xing)在觸屏設備(bei)上(shang)。大部分瀏覽器都支持(chi)，包括IE9+。但是(shi)它應該在IE8上(shang)看起來和表現得足夠好。 

6. Bootstrap FileStyle

Bootstrap Filestyle是一(yi)個(ge)基于jQuery組(zu)件庫，并且(qie)可以(yi)Twitter Bootstrap化(hua)的(de)(de)插件，用來(lai)風格(ge)化(hua)表單的(de)(de)文(wen)件字(zi)段。這(zhe)個(ge)插件以(yi)一(yi)個(ge)有趣的(de)(de)方(fang)式來(lai)展示發送(song)的(de)(de)文(wen)件，以(yi)如(ru)此的(de)(de)有吸引力的(de)(de)一(yi)種形式，簡(jian)單而高(gao)效。

7. Bootstrap Progressbar

Bootstrap Progressbar 是(shi)一個(ge)擴展了基本的(de)Twitter的(de)引導進(jin)度(du)條(tiao)的(de)jQuery插件。它提供了已(yi)經存在的(de)CSS過渡混(hun)合(he)JavaScript動畫進(jin)度(du)條(tiao)的(de)能力。 此外，您可以在進(jin)度(du)條(tiao)上顯示當前進(jin)度(du)信息(xi)，或者通過回調(diao)函數獲取值。 

8. Bootstrap Star Rating

一(yi)個簡(jian)單但(dan)(dan)強大的jQuery的星(xing)星(xing)投票的Bootstrap 插件，它(ta)支(zhi)持高級的功能，像小數星(xing)星(xing)填充和支(zhi)持RTL輸入。主要是通過利用純CSS-3的風格來(lai)呈現控件進(jin)行開發。該插件使(shi)用Bootstrap標(biao)記和默(mo)認風格，但(dan)(dan)它(ta)可以用其它(ta)任意CSS標(biao)記覆(fu)蓋(gai)。

9. Bootstrap Growl

非(fei)常(chang)簡單(dan)的(de)jQuery插件，可以讓標準的(de)Bootstrap 提示變成進(jin)入懸(xuan)停(ting)時“咆(pao)哮般”提示。 它具(ju)有(you)許多的(de)功(gong)能，比如(ru)它使用標準的(de)Twitter Bootstrap 提示，包括'info'，'error'，和'success'的(de)風(feng)格，還支持(chi)連續(xu)多個咆(pao)哮般調(diao)用，層疊在一個列表。

10. jQuery Pagination Plugin

這個(ge)jQuery插件可以簡化Bootstrap分頁的使(shi)用(yong)。它使(shi)用(yong)相應的類(lei)：.pagination（更改這個(ge)），.active 和 .disabled.

11. Bootstrap Tabcordion

一(yi)個(ge)簡單(dan)的(de)jQuery插件(jian)，它把一(yi)組Bootstrap 的(de)選項卡成Bootstrap 風琴折疊。它可以配(pei)置運行容器或視窗的(de)大小轉變(bian)，來提供響(xiang)應式的(de)很贊的(de)時髦的(de)富UI。

12. Bootstrap ColorPicker Sliders

Bootstrap 3優化的高(gao)級(ji)響應式的顏色選(xuan)擇器，使用色樣(yang)并支持人(ren)類感(gan)知(zhi)的亮度。適用于所有的現(xian)代(dai)瀏覽(lan)器和觸(chu)屏設備。 

13. Bootstrap Tour

Twitter Bootstrap Popovers通過快速簡便的方(fang)法來建立你們的產品教(jiao)程。 此庫不依(yi)賴于完整的Bootstrap 程序包。 唯一的依(yi)賴是tooltip 和popover  文件(jian)。Bootstrap Tour 保存了當前(qian)步驟，如果用(yong)戶已經讀完，不會再次顯示教(jiao)程。

14. Bootstrap Markdown

Simple Markdown作為編輯(ji)工具運行。Bootstrap-Markdown的設計可以很容易地集成(cheng)到你的bootstrap 項目。 它(ta)對外暴(bao)露了有用的API，可讓您完全(quan)沉浸(jin)于該插件。

15. Bootstrap Lightbox

一(yi)個基于bootstrap模(mo)態插件的燈箱插件 。

16. Bootpag

bootpag是一(yi)個動態(tai)分(fen)頁jQuery插件。與Twitter Boostrap或任何其他的html頁面都好使。

17. Summernote

Summernote是一個(ge)建(jian)立在jQuery和(he)Bootstrap之上的(de)簡單，簡潔和(he)靈活(huo)的(de)所見即所得編(bian)輯器。同時支持Bootstrap的(de)2個(ge) 活(huo)躍版本（2和(he)3），并為所有主要操作配備鍵盤快捷鍵。功(gong)能(neng)強大的(de)API，提供了(le)大量的(de)自定(ding)義設計的(de)選項(xiang)（寬，高，活(huo)躍項(xiang)......）和(he)功(gong)能(neng)。

18. Date Range Picker Plugin

這(zhe)個Twitter Bootstrap 的日期(qi)(qi)范(fan)圍(wei)選擇(ze)器插件(jian)創建一個下拉菜單，用(yong)戶可(ke)以(yi)從中選擇(ze)一個日期(qi)(qi)范(fan)圍(wei)。用(yong)來創建改進的報表UI。如果調(diao)用(yong)時(shi)不(bu)帶任何選項(xiang)，它(ta)將會出現(xian)兩(liang)個日歷，用(yong)來選擇(ze) 開始和結束日期(qi)(qi)。或者你(ni)可(ke)以(yi)提供日期(qi)(qi)范(fan)圍(wei)列表，用(yong)戶可(ke)以(yi)從中選擇(ze)而不(bu)是從日歷中選擇(ze)日期(qi)(qi)。

19. Bootstrap Image Gallery

Bootstrap Image Gallery 是blueimp Gallery 的(de)(de)擴(kuo)(kuo)展(zhan)， 一個支(zhi)持觸屏，響應式和可(ke)定制的(de)(de)圖片和圖片庫。它(ta)用來顯(xian)示(shi)顯(xian)示(shi)的(de)(de)圖像(xiang)和視頻，使用了Bootstrap框(kuang)架的(de)(de)模態對話框(kuang)，支(zhi)持滑動功能，鼠(shu)標和鍵盤導航， 過渡效(xiao)果(guo)，全屏支(zhi)持和按需加載內容 ， 并且可(ke)以擴(kuo)(kuo)展(zhan)到顯(xian)示(shi)額外(wai)內容類(lei)型。

20. jQDrawBootstrapGrid

一個簡單的jQuery插件，用作Twitter bootstrap布局的畫網格列。在非流動布局情況(kuang)下(container-fluid, row fluid)也(ye)好使。

英文原文：