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 提供了自定义模块组,你可以在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

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

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

BootStrap 最佳资源合集(转)的更多相关文章

  1. 【Android】开发中个人遇到和使用过的值得分享的资源合集

    Android-Classical-OpenSource Android开发中 个人遇到和使用过的值得分享的资源合集 Trinea的OpenProject 强烈推荐的Android 开源项目分类汇总, ...

  2. 2013年度最强AngularJS资源合集

    原文在这里 2013年度最强AngularJS资源合集 来看我的视频教程,国内第一款完整的AngularJS视频教程http://www.imooc.com/learn/156 司徒正美 写道 htt ...

  3. AngularJS资源合集[备忘]【申明:来源于网络】

    AngularJS资源合集[备忘][申明:来源于网络] 地址:http://blog.csdn.net/allgis/article/details/44646597

  4. 前端,Java,产品经理,微信小程序,Python等资源合集大放送

    为了感恩大家长久以来的关注和支持,小编准备了一些福利,整理了包含前端,Java,产品经理,微信小程序,Python,网站源码,Android应用视频教程,微信公众平台开发教程及材料等资源合集大放送. ...

  5. react-native 入门资源合集

    # 了解react-native React Native enables you to build world-class application experiences on native pla ...

  6. 【JavaScript】 2013年度最强AngularJS资源合集

    http://www.iteye.com/news/28651-AngularJS-Google-resource AngularJS是Google开源的一款JavaScript MVC框架,弥补了H ...

  7. 最强AngularJS资源合集

    AngularJS是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发者可以使用HTML来 ...

  8. Java自学编程学习之路资源合集

    Java Web学习 STEP.1---Java基础最重要 工欲善其事,必先利其器.想要学好Java Web,或者说想要开始学Java Web,Java的基础是必不可少. 基本语法(★★★★★) 数组 ...

  9. 前端 Java Python等资源合集大放送

    如果需要学习视频,欢迎关注[JAVA乐园]微信公众号,回复[领取资源]菜单一键领取以下所有200G干货资源,获取更多有用技术干货.文档资料.所有文档会持续更新,欢迎关注一起成长! 1.vue全套 Vu ...

随机推荐

  1. Nmap使用指南(1)

    Nmap是一款开源免费的网络发现(Network Discovery)和安全审计(Security Auditing)工具.软件名字Nmap是Network Mapper的简称.Nmap最初是由Fyo ...

  2. TCP协议中的三次握手和四次挥手(图解) 转载

    建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看看如何建立连接的. 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资 ...

  3. Web App时代的缓存机制新思路

    Web App常见架构 以WebQQ例,WebQQ这个站点的所有内容都是一个页面里面呈现的,我们看到的类似windows操作系统的框架,是它的顶级容器和框架,由AlloyOS的内核负责统筹和管理,然后 ...

  4. 百度之星复赛Astar Round3

    拍照 树状数组(SB了).求出静止状态下,每个点能看到多少个向右开的船c1[i],多少个向左开的船c2[i]. max{c1[i] + c2[j], (满足i <= j)  }即为答案.从后往前 ...

  5. RedHat 7配置yum源

    卸载自带的yum软件包 rpm -e yum-utils--.el7.noarch --nodeps rpm -e yum-rhn-plugin--.el7.noarch --nodeps rpm - ...

  6. Java源码初学_AbstractList&AbstractCollection

    一.AbstractCollection抽象类:(提供了Collection接口的骨干实现,以减少实现接口所需要的工作) 1.contains方法 contains方法,通过迭代器对于列表的每一个元素 ...

  7. JS获得事件发出者

    因为ff下本身不支持srcElement而是支持target,你这里这么用也是为了兼容浏览器,但是event.srcElement.id这么写会从event.srcElement里找id属性,这样是默 ...

  8. java中在linux下利用jstack检测死锁

    首先,编写一个死锁程序 package deadlock; public class testJstack { final static Object resource_1 = new Object( ...

  9. QQ等级图标排名说明_QQ等级表,QQ最高等级(皇冠) qq到一星要5天

    从2007年11月29日中午12:00开始,在不改变原有计算方式的情况下,加速QQ会员等级升级.QQ会员用户在原有通过每天在线2小时累积活跃天数来获取相应QQ等级增长的基础上,还可以根据QQ会员VIP ...

  10. as中的陷阱

    一.DisplayObject 1.有关width和height 对于一个对象A, 如果您设置了 width 属性,则 scaleX 属性会相应调整,并且会一直保存下来.尤其要注意的是如果A没有任何内 ...