轉自:http://www.w3cplus.com/source/the-best-bootStrap-resources.html
Twitter BootStrap是一款優秀的前端的框架,稱得上是前端的一個框架利器。Web前端開發者每天都在與HTML、CSS、JavaScript打交道,然而不少人都是在周而復始的寫模板、樣式和交互效果,前沒有想過如何將這些重複的工作整合在一起。Twitter推出的BootStrap能夠幫助Web前端開發者擺脫這種重複的勞動。
最近在各羣討論BootStrap相關的話題也明顯增多,有很多Web前端人員在開始或者已接觸、並在使用BootStrap。爲了能幫助大家更好的學習和使用Bootstrap這個優秀框架,我今天整理了一份我收藏的相關資源,這篇文章可以說是學習BootStrap的一個最好最全的資源,其中包含了八個BootStrap代碼生成器、九個BootStrap工具、四個優秀的BootStrap主題、十一個BootStrap自帶的JavaScript庫和11篇優秀的BootStrap教程。希望這些資源大家會喜歡。
BootStrap主題生成器
1、Bootstrap Custom Build
Bootstrap提供了自定義模塊組,你可以在Bootstrap官網中自定義需要的組件(無需將整個bootstrap下載下來),這樣可以減去你不需要的bootstrap組件代碼。同時可以根據自己的設計需求,自定義bootstrap中的變量參數,比如說色系、Grids系統等。
2、StyleBootstrap.info
與Bootstrap自帶自定義組件工具相比,這個工具更簡單,通過界面化的操作,可以讓你自己定義一套適合自己設計需求的主題功能,比如說“Navbar”、“body”、“typography”、“button”、“forms”、“miscellaneous”等。
3、Beautiful Buttons for Twitter Bootstrappers
這是一個簡單的小工具,只做一件事:幫助您設計漂亮的按鈕使用Twitter的引導。它不會徹底改變你的使用引導方式,但它是很有趣的。
4、Bootstrap Generator
基於Bootstrap主題的引導,通過這個簡單的工具,定製你自己需要的設計風格,並且可以輕鬆的導出你需要的CSS代碼。
5、BootTheme
BootTheme是一款強大的在線製作Bootstrap主題的工具,可以自己Bootstrap中的各類參數,而且還能實時的觀測你設置參數和變量對主題的影響和效果,最後還可以直接下載你定製好的Bootstrap主題代碼。
6、Twitter Bootstrap Button Generator
這是一款小工具,主要功能是用來定製Bootstrap的Buttons效果,如果你需要使用Bootstrap的Button效果,這個工具能給你帶來很大的方便。簡單易用。
7、BootSwatch
BootSwatch是一款可視化在線編輯BootStrap主題的工具。
8、Bootstrap ThemeRoller
一個方便和直觀的應用程序,他提供了一個直觀的界面,用來幫助你定製你最喜歡的Bootstrap主題設計效果。
Bootstrap工具
1、jQuery UI Bootstrap
收集了一些美麗的BootStrap UI插件
2、Font Awesome
BootStrap的ICON庫
3、Bootboxjs
Bootboxjs是一個簡單的js庫,簡單快捷幫你製作一個Bootstrap的彈出框效果。
4、Colorpicker and Datepicker
Pretty straight forward, it's a colorpicker and datepicker that matches the bootstrap style.
5、jQuery Mobile Boostrap
一個基於BootStrap的jQuery Mobile主題。
6、Sass Twitter Bootstrap
Bootstrap一個強大的CSS預處理器。
7、Bootstrap PSD
Bootstrap一些UI效果擴展,你完全可以根據設計圖配合一定的生成器。定製你需要的Bootstrap。
8、Bootstrap Fireworks
使用在Fireworks製作工作是的一個bootstrap擴展插件。
9、jQuery Bootstrap
jQuery Bootstrap不僅僅是另一個CSS框架,他還可以讓你改變你的樣式。
BootStrap主題
1、DarkStrap
一個黑色系的BootStrap主題
2、FB Boostrap
一個Facebook色系的BootStrap主題
3、Kickstrap
完整版的BootStrap主題,而且在其基礎上進行過擴展,還有其他更大的優勢。
4、BootMetro
BootStrap與Metro UI結合的一個主題。
BootStrap JavaScript Library
1、Modals bootstrap-modal.js
BootStrap製作彈出框的插件庫。
2、Dropdowns bootstrap-dropdown.js
BootStrap製作下拉菜單的庫。
3、ScrollSpy bootstrap-scrollspy.js
BootStrap製作滾動條位置配合菜單項的插件庫。
4、Togglable tabs bootstrap-tab.js
BootStrap製作tabs菜單的庫。
5、Tooltips bootstrap-tooltip.js
BootStrap製作tip提示框的插件庫。
6、Popovers bootstrap-popover.js
BootStrap製作Popovers提示框的插件庫。
7、Alert messages bootstrap-alert.js
BootStrap製作信息欄的插件庫。
8、Buttons bootstrap-button.js
BootStrap製作按鈕的插件庫。
9、Collapse bootstrap-collapse.js
BootStrap製作手風琴的插件庫。
10、Carousel bootstrap-carousel.js
BootStrap製作slidershow的插件庫。
11、Typeahead bootstrap-typeahead.js
BootStrap製作文本自動補全的插件庫。
BootStrap Tutorials
1、CSS——Bootstrap From Twitter
2、Twitter Bootstrap:前端框架利器
3、Building Twitter Bootstrap
4、Twitter Bootstrap 101: Introduction
5、Sample App with Backbone.js and Twitter Bootstrap
6、Twitter Bootstrap tutorial
7、Adding Twitter's Bootstrap CSS to your Rails app
8、5 Incredibly Useful Tools Built Into Twitter Bootstrap
9、Twitter Bootstrap 2: Bootstrap Goes Responsive
10、Bootstrap Your Application Using Twitter Bootstrap
11、Bootstrap Tutorial for Blog Design.
2012年12月08日更新
12、Custom Twitter Bootstrap Button Generator
13、Font Custom
14、Love Bootstrap
2013年01月21日更新
14、Bootstrap Magic
特別聲明:上述資源如有碰到打不開站點,請開啓您的VPN設置,因爲大多數資源都是外文,有可能會在國內打不開。
2013年03月20日更新
15、Fuel UX
特別聲明:上述資源如有碰到打不開站點,請開啓您的VPN設置,因爲大多數資源都是外文,有可能會在國內打不開。