最全的 Twitter Bootstrap 開發資源清單

一、元件（用來擴充bootstrap的基本功能）

顯示元件

<a href="https://github.com/willywos/bangbang" target="_blank">bangbang tag input</a>

<a href="http://gregfranko.com/jquery.tocify.js/" target="_blank">tocify</a>

<a href="https://github.com/sorich87/bootstrap-tour" target="_blank">sorich87/bootstrap-tour</a>

<a href="https://github.com/maxwells/bootstrap-tags" target="_blank">bootstrap-tags</a>

<a href="http://bootstrap-arrows.iarfhlaith.com/" target="_blank">bootstrap arrows</a>

<a href="https://github.com/jschr/bootstrap-modal/" target="_blank">bootstrap-modal</a>

<a href="http://exacttarget.github.com/fuelux/#pillbox" target="_blank">pillbox fuel ux</a>

<a href="http://exacttarget.github.com/fuelux/#datagrid" target="_blank">datagrid fuel ux</a>

<a href="http://aozora.github.com/bootmetro/" target="_blank">bootmetro</a>

<a href="https://github.com/gild/bootstrap-tour" target="_blank">bootstrap tour</a>

<a href="https://github.com/rochal/jquery-slimscroll" target="_blank">jquery-slimscroll</a>

<a href="http://html5-ninja.com/preview/index/5#.ujmyfgl26_c" target="_blank">bootstrap html5 video player</a>

<a href="http://botmonster.com/jquery-bootpag/#pro-page-7" target="_blank">bootpag</a>

<a href="https://github.com/blueimp/bootstrap-image-gallery" target="_blank">bootstrap-image-gallery</a>

<a href="http://tableclothjs.com/" target="_blank">tablecloth.js</a>

<a href="https://github.com/samwillis/pagedown-bootstrap" target="_blank">pagedown-bootstrap</a>

<a href="http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/" target="_blank">menu dropdown on hover plugin</a>

<a href="https://github.com/cwspear/twitter-bootstrap-hover-dropdown" target="_blank">twitter bootstrap hover dropdown plugin</a>

<a href="http://ace-subido.github.com/css3-microsoft-metro-buttons/index.html" target="_blank">css3 microsoft modern buttons</a>

<a href="http://jbutz.github.com/bootstrap-lightbox/" target="_blank">lightbox</a>

<a href="http://bl.ocks.org/3012212" target="_blank">d3 bootstrap popovers</a>

<a href="http://nijikokun.github.com/bootstrap-notify/" target="_blank">twitter bootstrap notifications, from nijiko yonskai</a>

<a href="http://bootboxjs.com/" target="_blank">bootbox.js - alert, confirm and flexible dialogs for twitter's bootstrap framework</a>

表單元件

<a href="http://blueimp.github.com/jquery-file-upload/" target="_blank">jquery file upload demo</a>

<a href="https://github.com/sydcanem/bootstrap-contextmenu" target="_blank">bootstrap contextmenu</a>

<a href="http://gregfranko.com/jquery.selectboxit.js/?buffer_share=d9cb8" target="_blank">selectboxit</a>

<a href="http://exacttarget.github.com/fuelux/#spinner" target="_blank">spinner - fuel ux</a>

<a href="http://exacttarget.github.com/fuelux/#search" target="_blank">search fuel ux</a>

<a href="http://jhollingworth.github.com/bootstrap-wysihtml5/" target="_blank">bootstrap-wysihtml5</a>

<a href="http://vincentlamanna.com/bootstrapformhelpers/#selectbox" target="_blank">selectbox form helper</a>

<a href="https://github.com/tcrosen/twitter-bootstrap-typeahead" target="_blank">typeahead extension</a>

<a href="http://fineuploader.com/" target="_blank">fine uploader</a>

<a href="http://vitalets.github.com/x-editable/" target="_blank">x-editable</a>

<a href="http://reactiveraven.github.com/jqbootstrapvalidation/" target="_blank">jqbootstrapvalidation</a>

<a href="http://geersch.github.com/bootstrap-progressbar/" target="_blank">bootstrap-progressbar</a>

<a href="http://arthurgouveia.com/prettycheckable/" target="_blank">prettycheckable</a>

<a href="https://github.com/whitetruffle/chosen-less-bootstrap" target="_blank">chosen-less-bootstrap</a>

<a href="https://github.com/eldarion/bootstrap-ajax" target="_blank">bootstrap ajax</a>

<a href="http://www.larentis.eu/bootstrap_toggle_buttons/" target="_blank">bootstrap toggle buttons</a>

輸入元件

<a href="http://jdewit.github.com/bootstrap-timepicker/" target="_blank">timepicker</a>

<a href="http://exacttarget.github.com/fuelux/#combobox" target="_blank">combobox fuel ux</a>

<a href="http://vincentlamanna.com/bootstrapformhelpers/#timezones" target="_blank">timezone form helpers</a>

<a href="http://vincentlamanna.com/bootstrapformhelpers/#languages" target="_blank">languages form helper</a>

<a href="http://vincentlamanna.com/bootstrapformhelpers/#phone" target="_blank">phone form helper</a>

<a href="http://vincentlamanna.com/bootstrapformhelpers/#states" target="_blank">states form helper</a>

<a href="http://vincentlamanna.com/bootstrapformhelpers/#countries" target="_blank">countries form helper</a>

<a href="https://github.com/dangrossman/bootstrap-daterangepicker" target="_blank">date range picker</a>

<a href="http://www.eyecon.ro/bootstrap-datepicker/" target="_blank">datepicker for bootstrap</a>

<a href="http://www.eyecon.ro/bootstrap-colorpicker/" target="_blank">colorpicker for bootstrap</a>

二、架構內建（将bootstrap內建到你的應用架構或cms中）

asp

<a href="https://github.com/jordanwallwork/bootstrapextensions" target="_blank">asp.net mvc bootstrap extensions</a>

<a href="https://www.nuget.org/packages/twitter.bootstrap" target="_blank">bootstrap for csla</a>

<a href="http://nuget.org/packages/twitter.bootstrap.mvc4" target="_blank">bootstrap for asp.net mvc</a>

java

<a href="https://github.com/l0rdn1kk0n/wicket-bootstrap" target="_blank">wicket-bootstrap</a>

<a href="http://code.google.com/p/struts2-bootstrap/" target="_blank">struts2-bootstrap</a>

<a href="https://github.com/groovydev/twitter-bootstrap-grails-plugin" target="_blank">twitter-bootstrap-grails-plugin</a>

javascript

<a href="http://docs.meteor.com/#bootstrap" target="_blank">meteor - bootstrap package</a>

<a href="http://bootstrap.newbridgegreen.com/" target="_blank">extjs bootstrap theme</a>

<a href="https://github.com/seafoox/node-express-twitter-bootstrap" target="_blank">node-express-twitter-bootstrap</a>

<a href="https://npmjs.org/package/derby-ui-boot" target="_blank">derby-ui-boot</a>

<a href="https://github.com/rvagg/ender-bootstrap" target="_blank">ender-bootstrap</a>

<a href="http://mgcrea.github.com/angular-strap/" target="_blank">angularstrap</a>

<a href="http://rubygems.org/gems/angularjs_scaffold" target="_blank">angularjs_scaffold</a>

joomla

<a href="http://www.themexpert.com/expose" target="_blank">expose framework</a>

<a href="http://extensions.joomla.org/extensions/style-a-design/templating/21856" target="_blank">simple bootstrap integration</a>

<a href="http://www.joostrap.com/" target="_blank">joostrap</a>

php

<a href="https://github.com/holzweg/hwboot" target="_blank">hwboot</a>

<a href="http://www.cniska.net/yii-bootstrap/" target="_blank">yii-bootstrap</a>

<a href="https://github.com/phiamo/mopabootstrapbundle" target="_blank">mopabootstrapbundle</a>

<a href="http://zf-boilerplate.com/" target="_blank">zf-boilerplate</a>

<a href="http://drupal.org/project/bh_bootstrap" target="_blank">bh bootstrap theme</a>

<a href="https://github.com/sjlu/codeigniter-bootstrap" target="_blank">codeigniter-bootstrap</a>

<a href="https://github.com/mtkocak/cakephp-bootstrappifier" target="_blank">cakephp-bootstrappifier</a>

python

<a href="https://github.com/toscawidgets/tw2.bootstrap" target="_blank">tw2.bootstrap</a>

<a href="http://pypi.python.org/pypi/fa.bootstrap/0.3.3" target="_blank">fa.bootstrap</a>

<a href="https://github.com/cridenour/django-twitter-bootstrap" target="_blank">django-twitter-bootstrap</a>

<a href="https://github.com/dyve/django-bootstrap-toolkit" target="_blank">django-bootstrap-toolkit</a>

<a href="http://django-crispy-forms.readthedocs.org/en/d-0/" target="_blank">django crispy forms</a>

<a href="http://www.codingnot.es/bootstrap-your-django-admin-in-3-minutes/" target="_blank">django-admin-bootstrapped</a>

ruby

<a href="https://github.com/sethvargo/bootstrap_forms" target="_blank">bootstrap forms</a>

<a href="https://github.com/nickpad/will_paginate-bootstrap" target="_blank">will paginate bootstrap</a>

<a href="http://railsapps.github.com/" target="_blank">the railsapps project</a>

<a href="https://github.com/mjbellantoni/formtastic-bootstrap" target="_blank">formtastic-bootstrap</a>

<a href="https://github.com/metaskills/less-rails-bootstrap" target="_blank">less-rails-bootstrap</a>

<a href="https://github.com/pokle/sinatra-bootstrap" target="_blank">sinatra-bootstrap</a>

<a href="https://github.com/stouset/twitter_bootstrap_form_for" target="_blank">twitter_bootstrap_form_for</a>

<a href="https://github.com/seyhunak/twitter-bootstrap-rails" target="_blank">twitter-bootstrap-rails</a>

<a href="https://github.com/andycroll/kaminari_themes/" target="_blank">andycroll/kaminari_themes</a>

<a href="https://github.com/robinbrouwer/bootstrap_flash_messages" target="_blank">bootstrap rails flash messages</a>

<a href="https://github.com/hobo/hobo_bootstrap" target="_blank">hobo_bootstrap</a>

wordpress

<a href="http://strappress.com/?utm_expid=58931820-0&amp;utm_referrer=http%25253a%25252f%25252fwpmu.org%25252fstrappress-a-responsive-twitter-bootstrap-theme-for-wordpress%25252f" target="_blank">strappress</a>

<a href="http://320press.com/wpbs/" target="_blank">wp-bootstrap</a>

<a href="http://bootstrapwp.rachelbaker.me/" target="_blank">bootstrapwp</a>

<a href="http://www.rootstheme.com/" target="_blank">roots wordpress theme</a>

<a href="http://en.wp.obenland.it/the-bootstrap/" target="_blank">the bootstrap</a>

<a href="https://github.com/gbuckingham89/wpstrap" target="_blank">wpstrap</a>

三、界面建構（一些用于設計bootstrap布局結構或其他方面的可視化工具）

顯示

<a href="http://gradients.glrzad.com/" target="_blank">css3 gradient generator</a>

<a href="http://www.colorzilla.com/gradient-editor/" target="_blank">css gradient generator</a>

<a href="http://imsky.github.com/holder/" target="_blank">holder.js</a>

<a href="https://github.com/plozi/jqdrawbootstrapgrid" target="_blank">jqdrawbootstrapgrid</a>

架構

<a href="https://github.com/minikomi/bootstrap-form-builder" target="_blank">bootstrap-form-builder</a>

<a href="http://jetstrap.com/" target="_blank">jetstrap</a>

<a href="https://www.easel.io/" target="_blank">easel.io</a>

<a href="http://divshot.com/" target="_blank">divshot</a>

<a href="http://bootsnipp.com/?page=1" target="_blank">bootsnipp.com</a>

主題

<a href="http://www.wrapbootstrap.com/" target="_blank">wrapbootstrap</a>

<a href="http://ckrack.github.com/fbootstrapp/" target="_blank">fbootstrapp</a>

<a href="http://www.boottheme.com/#generatetheme" target="_blank">boottheme</a>

<a href="https://github.com/addyosmani/jquery-ui-bootstrap/" target="_blank">jquery-ui-bootstrap</a>

<a href="http://bootswatcher.com/" target="_blank">bootswatcher</a>

<a href="http://bootswatchr.com/" target="_blank">bootswatchr.com</a>

<a href="http://bootswatch.com/" target="_blank">bootswatch</a>

<a href="http://stylebootstrap.info/" target="_blank">stylebootstrap.info</a>

<a href="http://paintstrap.com/" target="_blank">paintstrap</a>

四、模闆工具

<a href="http://gui.repixdesign.com/#bootstrap" target="_blank">repix bootstrap psd</a>

<a href="http://axutopia.com/twitter-bootstrap/" target="_blank">bootstrap widgets library for axure</a>

<a href="http://psdwrangler.tumblr.com/post/24530125241/bootstrap-grid-templates" target="_blank">grid templates</a>

<a href="https://github.com/talltroym/twitter-bootstrap-omnigraffle-stencil" target="_blank">twitter-bootstrap-omnigraffle-stencil</a>

<a href="http://www.fireworkstoolkits.com/" target="_blank">fireworks for bootstrap</a>

<a href="https://mockupstogo.mybalsamiq.com/projects/web/bootstrap" target="_blank">bootstrap balsamiq components</a>

<a href="https://github.com/mscns/bootgrid" target="_blank">bootgrid.psd</a>

<a href="http://www.smashingmagazine.com/2012/01/03/guideguide-free-plugin-for-dealing-with-grids-in-photoshop/" target="_blank">guideguide</a>

<a href="http://niceux.com/toolbox/" target="_blank">html prototyping toolbox</a>

<a href="http://keynotopia.com/bootstrap/" target="_blank">powerpoint and keynote mockup template kit</a>

五、工具和服務（使bootstrap開發更快、更容易）

開發工具

<a href="https://github.com/devtellect/sublime-twitter-bootstrap-snippets" target="_blank">sublime-twitter-bootstrap-snippets</a>

<a href="https://github.com/thomas-mcdonald/bootstrap-sass" target="_blank">bootstrap sass</a>

<a href="https://github.com/vwall/compass-twitter-bootstrap" target="_blank">compass twitter bootstrap</a>

<a href="http://dojobootstrap.com/" target="_blank">dojo bootstrap</a>

服務

<a href="http://lovebootstrap.com/" target="_blank">i love bootstrap</a>

<a href="http://bootstrapdocs.com/" target="_blank">bootstrapdocs</a>

<a href="http://www.bootstrapcdn.com/?v=10292012225705" target="_blank">bootstrapcdn</a>

六、教程

文章

<a href="http://www.w3resource.com/twitter-bootstrap/tutorial.php" target="_blank">開始使用twitter bootstrap</a>

<a href="http://ruby.railstutorial.org/chapters/filling-in-the-layout#sec-custom_css" target="_blank">ruby on rails教程——整合bootstrap</a>

<a href="http://tutorialzine.com/2012/11/dropbox-photo-crop/" target="_blank">使用twitter bootstrap打造dropbox檔案上傳器</a>

<a href="http://untame.net/2012/10/twitter-bootstrap-part-3-design-a-responsive-contact-page/" target="_blank">設計一個響應式聯系人頁面</a>

<a href="http://untame.net/2012/07/twitter-bootstrap-part-2-design-a-responsive-homepage/" target="_blank">設計一個響應式首頁</a>

<a href="http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/" target="_blank">漂亮的輸入表單</a>

<a href="http://rubysource.com/too-good-to-be-true-twitter-bootstrap-meets-formtastic-and-tabulous/" target="_blank">twitter bootstrap與rails</a>

<a href="http://rubysource.com/how-to-customize-twitter-bootstrap%e2%80%99s-design-in-a-rails-app/" target="_blank">在rails應用程式中定制bootstrap</a>

<a href="http://www.yewchube.com/2011/08/symfony-2-bootstrap-css-form-templates/" target="_blank">symfony 2 bootstrap表單</a>

<a href="http://tutlogik.com/tutorials/php/ajax-modal-register-with-bootstrap-and-codeigniter/" target="_blank">基于bootstrap和codeigniter的ajax模态寄存器</a>

<a href="http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-and-easy-interactive-wireframes-with-bootstrap/" target="_blank">使用bootstrap進行原型設計</a>

<a href="http://www.maurizioconventi.com/2012/06/12/how-to-create-a-lazy-load-carousel-with-twitter-bootstrap/" target="_blank">建立一個延遲加載的圖檔輪播效果</a>

<a href="http://cgeers.com/2012/10/06/single-page-application-with-knockout-js-part-1/" target="_blank">使用knockout.js和bootstrap建構一個單頁面應用</a>

<a href="http://favbulous.com/post/1006/create-custom-icons-for-twitter-bootstrap-easily" target="_blank">自定義圖示集</a>

<a href="http://alittlecode.com/files/jquery-validate-demo/" target="_blank">bootstrap風格的jquery驗證插件</a>

<a href="http://phildionne.github.com/golden-bootstrap/" target="_blank">golden bootstrap</a>

<a href="http://www.adobe.com/devnet/html5/articles/twitter-bootstrap.html" target="_blank">使用twitter bootstrap 風格化你的應用</a>

<a href="http://www.w3resource.com/twitter-bootstrap/modals-tutorial.php" target="_blank">modals教程</a>

<a href="http://stackoverflow.com/questions/9780333/twitter-bootstrap-fluid-vs-fixed-then-add-in-responsive-how-does-it-all-fit-t" target="_blank">流式和固定布局之間的抉擇</a>

<a href="http://antjanus.com/blog/web-design-tips/user-interface-usability/customize-twitter-bootstrap-into-themes/" target="_blank">自定義twitter bootstrap</a>

<a href="http://www.udemy.com/create-an-engaging-website-with-twitter-bootstrap/?affcode=e0cecvlrt34hqgk=#.uccgvmvvdps.twitter" target="_blank">使用twitter bootstrap建立一個引人入勝的網站</a>

<a href="http://magazine.joomla.org/issues/issue-aug-2012/item/818-using-the-twitter-bootstrap-framework-to-build-a-responsive-joomla-template-from-scratch" target="_blank">joomla bootstrap模闆</a>

示範

<a href="https://speakerdeck.com/mdo/designing-bootstrap" target="_blank">bootstrap設計</a>

<a href="https://speakerdeck.com/karrisaarinen/building-with-twitter-bootstrap" target="_blank">使用twitter bootstrap建構</a>

<a href="https://speakerdeck.com/kylefox/typesetting-the-web" target="_blank">web排版</a>

<a href="https://speakerdeck.com/u/mdo/p/designing-bootstrap" target="_blank">bootstrap背景和基礎</a>

視訊

<a href="http://railscasts.com/episodes/329-more-on-twitter-bootstrap" target="_blank">使用twitter bootstrap (pro) - railscasts</a>

<a href="http://railscasts.com/episodes/328-twitter-bootstrap-basics" target="_blank">twitter bootstrap基礎 - railscasts</a>

<a href="http://www.youtube.com/watch?v=1adyqsfl5qq" target="_blank">yui和bootstrap</a>

<a href="http://www.youtube.com/playlist?list=pla615c8c2e86b555e&amp;feature=plcp" target="_blank">twitter bootstrap 101 - youtube</a>

七、javascript擴充（基于bootstrap的javascript/jquery插件）

<a href="http://simsalabim.github.com/sisyphus/" target="_blank">sisyphus.js</a>

<a href="http://cosmos.layervault.com/data-filter-js.html" target="_blank">data filter</a>

<a href="http://cosmos.layervault.com/text-fade-to.html" target="_blank">fadeto</a>

<a href="http://cosmos.layervault.com/image-fade-to.html" target="_blank">fadetosrc</a>

<a href="http://cosmos.layervault.com/haircut.html" target="_blank">haircut</a>

<a href="http://cosmos.layervault.com/typer-js.html" target="_blank">typer</a>

<a href="http://jeromeetienne.github.com/jquery-qrcode/" target="_blank">jquery-qrcode/</a>

<a href="http://gregfranko.com/jquery.selectboxit.js/?examples" target="_blank">selectboxit</a>

<a href="http://dmauro.github.com/keypress/" target="_blank">keypress.js</a>

<a href="http://camanjs.com/" target="_blank">camanjs</a>

<a href="http://airbnb.github.com/infinity/" target="_blank">infinity.js</a>

<b> 原文釋出時間為：2012-12-03</b>

<b>本文來自雲栖社群合作夥伴“linux中國”</b>