witter 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 Custom Build

Bootstrap 提供了自定义模块组,你可以在Bootstrap官网中自定义需要的组件(无需将整个bootstrap下载下来),这样可以减去你不需要的 bootstrap组件代码。同时可以根据自己的设计需求,自定义bootstrap中的变量参数,比如说色系、Grids系统等。

2、StyleBootstrap.info

StyleBootstrap.info

与 Bootstrap自带自定义组件工具相比,这个工具更简单,通过界面化的操作,可以让你自己定义一套适合自己设计需求的主题功能,比如说 “Navbar”、“body”、“typography”、“button”、“forms”、“miscellaneous”等。

3、Beautiful Buttons for Twitter Bootstrappers

Beautiful Buttons for Twitter Bootstrappers

这是一个简单的小工具,只做一件事:帮助您设计漂亮的按钮使用Twitter的引导。它不会彻底改变你的使用引导方式,但它是很有趣的。

4、Bootstrap Generator

Bootstrap Generator

基于Bootstrap主题的引导,通过这个简单的工具,定制你自己需要的设计风格,并且可以轻松的导出你需要的CSS代码。

5、BootTheme

BootTheme

BootTheme是一款强大的在线制作Bootstrap主题的工具,可以自己Bootstrap中的各类参数,而且还能实时的观测你设置参数和变量对主题的影响和效果,最后还可以直接下载你定制好的Bootstrap主题代码。

6、Twitter Bootstrap Button Generator

Twitter Bootstrap Button Generator

这是一款小工具,主要功能是用来定制Bootstrap的Buttons效果,如果你需要使用Bootstrap的Button效果,这个工具能给你带来很大的方便。简单易用。

7、BootSwatch

BootSwatch

BootSwatch是一款可视化在线编辑BootStrap主题的工具。

8、Bootstrap ThemeRoller

Bootstrap ThemeRoller

一个方便和直观的应用程序,他提供了一个直观的界面,用来帮助你定制你最喜欢的Bootstrap主题设计效果。

Bootstrap工具

1、jQuery UI Bootstrap

jQuery UI Bootstrap

收集了一些美丽的BootStrap UI插件

2、Font Awesome

Font Awesome

BootStrap的ICON库

3、Bootboxjs

Bootboxjs

Bootboxjs是一个简单的js库,简单快捷帮你制作一个Bootstrap的弹出框效果。

4、Colorpicker and Datepicker

Colorpicker and Datepicker

Pretty straight forward, it\’s a colorpicker and datepicker that matches the bootstrap style.

5、jQuery Mobile Boostrap

jQuery Mobile Boostrap

一个基于BootStrap的jQuery Mobile主题。

6、Sass Twitter Bootstrap

Sass Twitter Bootstrap

Bootstrap一个强大的CSS预处理器。

7、Bootstrap PSD

Bootstrap PSD

Bootstrap一些UI效果扩展,你完全可以根据设计图配合一定的生成器。定制你需要的Bootstrap。

8、Bootstrap Fireworks

Bootstrap Fireworks

使用在Fireworks制作工作是的一个bootstrap扩展插件。

9、jQuery Bootstrap

jQuery Bootstrap

jQuery Bootstrap不仅仅是另一个CSS框架,他还可以让你改变你的样式。

BootStrap主题

1、DarkStrap

DarkStrap

一个黑色系的BootStrap主题

2、FB Boostrap

FB Boostrap

一个Facebook色系的BootStrap主题

3、Kickstrap

Kickstrap

完整版的BootStrap主题,而且在其基础上进行过扩展,还有其他更大的优势。

4、BootMetro

BootMetro

BootStrap与Metro UI结合的一个主题。

BootStrap JavaScript Library

1、Modals bootstrap-modal.js

Modals bootstrap-modal.js

BootStrap制作弹出框的插件库。

2、Dropdowns bootstrap-dropdown.js

Dropdowns bootstrap-dropdown.js

BootStrap制作下拉菜单的库。

3、ScrollSpy bootstrap-scrollspy.js

ScrollSpy bootstrap-scrollspy.js

BootStrap制作滚动条位置配合菜单项的插件库。

4、Togglable tabs bootstrap-tab.js

Togglable tabs bootstrap-tab.js

BootStrap制作tabs菜单的库。

5、Tooltips bootstrap-tooltip.js

Tooltips bootstrap-tooltip.js

BootStrap制作tip提示框的插件库。

6、Popovers bootstrap-popover.js

Popovers bootstrap-popover.js

BootStrap制作Popovers提示框的插件库。

7、Alert messages bootstrap-alert.js

Alert messages bootstrap-alert.js

BootStrap制作信息栏的插件库。

8、Buttons bootstrap-button.js

Buttons bootstrap-button.js

BootStrap制作按钮的插件库。

9、Collapse bootstrap-collapse.js

Collapse bootstrap-collapse.js

BootStrap制作手风琴的插件库。

10、Carousel bootstrap-carousel.js

Carousel bootstrap-carousel.js

BootStrap制作slidershow的插件库。

11、Typeahead bootstrap-typeahead.js

Typeahead bootstrap-typeahead.js

BootStrap制作文本自动补全的插件库。

BootStrap Tutorials

1、CSS——Bootstrap From Twitter

CSS——Bootstrap From Twitter

2、Twitter Bootstrap:前端框架利器

Twitter Bootstrap:前端框架利器

3、Building Twitter Bootstrap

Building Twitter Bootstrap

4、Twitter Bootstrap 101: Introduction

Twitter Bootstrap 101: Introduction

5、Sample App with Backbone.js and Twitter Bootstrap

Sample App with Backbone.js and Twitter Bootstrap

6、Twitter Bootstrap tutorial

Twitter Bootstrap tutorial

7、Adding Twitter\’s Bootstrap CSS to your Rails app

Adding Twitter\'s Bootstrap CSS to your Rails app

8、5 Incredibly Useful Tools Built Into Twitter Bootstrap

Adding5 Incredibly Useful Tools Built Into Twitter Bootstrap

9、Twitter Bootstrap 2: Bootstrap Goes Responsive

Twitter Bootstrap 2: Bootstrap Goes Responsive

10、Bootstrap Your Application Using Twitter Bootstrap

Bootstrap Your Application Using Twitter Bootstrap

11、Bootstrap Tutorial for Blog Design.

Bootstrap Tutorial for Blog Design.

2012年12月08日更新

12、Custom Twitter Bootstrap Button Generator

Custom Twitter Bootstrap Button Generator

13、Font Custom

Font Custom

14、Love Bootstrap

Love Bootstrap

2013年01月21日更新

14、Bootstrap Magic

Love Bootstrap

特别声明:上述资源如有碰到打不开站点,请开启您的VPN设置,因为大多数资源都是外文,有可能会在国内打不开。

2013年03月20日更新

15、Fuel UX

Fuel UX

来源: http://www.w3cplus.com/source/the-best-bootStrap-resources.html

转载自: http://www.wojilu.com/forum/topic/5063

版权声明:本文为JoannaQ原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/JoannaQ/p/3690780.html