Bootstrap相关优质项目推荐
这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
优站精选
Bootstrap 网站实例
Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。
<div class="col-lg-3 col-md-4 col-sm-6" >
<div class="thumbnail" style="height: 350px;" >
<img src="../image/webpack.png">
<div class="caption">
<h3 ><a href="#">Webpack<br><small>是前端资源模块化管理和打包工具</small></a></h3>
<p >Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6" >
<div class="thumbnail" style="height:350px;" >
<img src="../image/react.png">
<div class="caption">
<h3><a href="#">React<br><small>用于构建用户界面的 JavaScript 框架</small></a></h3>
<p>React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6" >
<div class="thumbnail" style="height: 350px;" >
<img src="../image/typescript.png">
<div class="caption">
<h3 ><a href="#">TypeScript <br><small>中文手册</small></a></h3>
<p >TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
</div>
</div>
</div>
<!--第二排-->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/jqueryapi.png">
<div class="caption">
<h3 ><a href="#">jQuery API <br><small>中文手册</small></a></h3>
<p >根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/nextjs.png">
<div class="caption">
<h3><a href="#">Next.js<br><small>中文文档</small></a></h3>
<p >Next.js 是一个轻量级的 React 服务端渲染应用框架。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/preact.png">
<div class="caption">
<h3><a href="#">Preact<br><small>React 轻量替代方案。</small></a></h3>
<p>Preact - 一个只有 3kB 大小的 React 替代品，拥有与 React 相同的 API、组件和虚拟 DOM。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/nodejs.png">
<div class="caption">
<h3><a href="#">Node.js<br><small>中文文档 / 手册</small></a></h3>
<p >Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</p>
</div>
</div>
</div>
<!--第三排-->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/yarn.png">
<div class="caption">
<h3><a href="#">Yarn <br><small>中文手册</small></a></h3>
<p>Yarn 是一个快速、可靠、安全的依赖管理工具。是 NPM 的替代品。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/npm.png">
<div class="caption">
<h3><a href="#">NPM <br><small>中文文档</small></a></h3>
<p>NPM（node package manager）是 Node.js 世界的包管理器。NPM 可以让 JavaScript 开发者在共享代码、复用代码以及更新共享的代码上更加方便。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/vuejs.png">
<div class="caption">
<h3><a href="#">Vue.js<br><small> 中文文档。</small></a></h3>
<p>Vue.js - 是一套构建用户界面的渐进式框架。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/browsersync.png">
<div class="caption">
<h3><a href="#">Browsersync<br><small>浏览器同步测试工具</small></a></h3>
<p>Browsersync 浏览器同步测试工具，很容易与 Web 平台、构建工具和其他 Node.js 项目集成，替代了大量重复测试劳动。</p>
</div>
</div>
</div>
<!--第四排-->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/parcel.png">
<div class="caption">
<h3><a href="#">Parcel <br><small>中文文档</small></a></h3>
<p>Parcel - 极速、零配置的 web 应用打包工具。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/lodash.png">
<div class="caption">
<h3><a href="#">Lodash<br><small>JavaScript 工具库</small></a></h3>
<p>Lodash 是一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库。比相同功能的 Underscore.js 使用更广泛。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/progit.png">
<div class="caption">
<h3><a href="#">Pro Git <br><small>Git 入门到专家指南</small></a></h3>
<p>Pro Git 中文版（第二版）是一本详细的 Git 指南，主要介绍了 Git 的使用基础和原理，让你从 Git 初学者成为 Git 专家。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/codeguide.png">
<div class="caption">
<h3><a href="#">Bootstrap 编码规范<br><small>by @mdo</small></a></h3>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
</div>
</div>
</div>
<!--第五排-->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/rollup.png">
<div class="caption">
<h3><a href="#">Rollup <br><small>新一代的 JavaScript 模块打包工具</small></a></h3>
<p>Rollup 是一个 JavaScript 模块打包工具，可以将小块代码编译成大块复杂的代码。Rollup 对 JavaScript 代码模块使用新的 ES6 标准化格式，如 CommonJS 和 AMD。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/babeljs.png">
<div class="caption">
<h3><a href="#">Babel <br><small>是一个 JavaScript 编译器。</small></a></h3>
<p>Babel 是一个 JavaScript 编译器。Babel 通过语法转换器支持最新版本的 JavaScript 语法。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/underscore.png">
<div class="caption">
<h3><a href="#">Underscore.js<br><small>JavaScript 工具库</small></a></h3>
<p>Underscore.js是一个 JavaScript 工具库，它提供了一整套函数式编程的实用功能，弥补了 jQuery 没有实现的功能，同时又是 Backbone 必不可少的部分。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/gulpjs.png">
<div class="caption">
<h3><a href="#">gulp.js<br><small>基于流的自动化构建工具。</small></a></h3>
<p>gulp.js - 基于流(stream)的自动化构建工具。Grunt 采用配置文件的方式执行任务，而 Gulp 一切都通过代码实现。</p>
</div>
</div>
</div>
<!--第六排-->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/gruntjs.png">
<div class="caption">
<h3><a href="#">Grunt <br><small>项目构建工具</small></a></h3>
<p>Grunt 是基于 Node.js 的项目构建工具。它可以自动运行你所设定的任务。Grunt 拥有数量庞大的插件，几乎任何你所要做的事情都可以用 Grunt 实现。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/eslint.png">
<div class="caption">
<h3><a href="#">ESLint <br><small>JavaScript 代码检查工具</small></a></h3>
<p>ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。ESLint 能够帮你轻松写出高质量的 JavaScript 代码。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/sass.png">
<div class="caption">
<h3><a href="#">Sass <br><small>最流行的 CSS 扩展语言解析器</small></a></h3>
<p>Sass 是一个成熟、稳定、强大的 CSS 扩展语言解析器。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/lesscss.png">
<div class="caption">
<h3><a href="#">LESS <br><small>一种动态样式语言</small></a></h3>
<p>LESS 为 CSS 赋予了动态语言的特性，如变量、继承、运算、函数。LESS 既可以在客户端上运行 (支持 IE 6+、Webkit、Firefox)，也可以借助 Node.js 或者 Rhino 在服务端运行。</p>
</div>
</div>
</div>
<!--第七排-->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/handlebars.png">
<div class="caption">
<h3><a href="#">Handlebars <br><small>一个书写高效率、语义化的模板引擎</small></a></h3>
<p>Handlebars 是一个书写高效率、语义化的模板引擎，与 Mustache 模板兼容。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/stylus.png">
<div class="caption">
<h3><a href="#">Stylus <br><small>CSS 预处理语言</small></a></h3>
<p> Stylus - 富于表现力、健壮、功能丰富的 CSS 预处理语言。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/pug.png">
<div class="caption">
<h3><a href="#">Pug <br><small>Node.js 模板引擎</small></a></h3>
<p>Pug 是一款健壮、灵活、功能丰富的模板引擎，专门为 Node.js 平台开发。Pug 是由 Jade 改名而来。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/liquid.png">
<div class="caption">
<h3><a href="#">Liquid<br><small>Jekyll 的模板语言。</small></a></h3>
<p>Liquid - 最流行的模板语言。Jekyll、Github Pages 都在用。</p>
</div>
</div>
</div>
<!--第八排-->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/zeptojs.png">
<div class="caption">
<h3><a href="#">Zepto.js <br><small>JavaScript 工具库</small></a></h3>
<p>Zepto.js 是一个轻量级、兼容 jQuery 的 JavaScript 工具库。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/ejs.png">
<div class="caption">
<h3><a href="#">EJS <br><small>中文文档</small></a></h3>
<p>EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有再造一套迭代和控制流语法，有的只是普通的 JavaScript 代码而已。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/tailwindcss.png">
<div class="caption">
<h3><a href="#">Tailwind CSS <br><small>中文文档</small></a></h3>
<p>Tailwind CSS 是一个用于快速UI开发的实用工具集 CSS 框架。与 Bootstrap 、Foundation 不同，Tailwind CSS 没有内置的 UI 组件。完全需要开发者根据自身情况来定制设计。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/jekyll.png">
<div class="caption">
<h3><a href="#">Jekyll <br><small>中文文档</small></a></h3>
<p>Jekyll 是一个静态站点生成工具。它将 Markdown （或者 Textile） 以及 Liquid 转化成一个完整的可发布的静态网站。</p>
</div>
</div>
</div>
<!--第九排-->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/hexo.png">
<div class="caption">
<h3><a href="#">Hexo <br><small>中文文档</small></a></h3>
<p>Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/postcss.png">
<div class="caption">
<h3><a href="#">PostCSS <br><small>中文网</small></a></h3>
<p>PostCSS 利用 JavaScript 的强大编程能力对 CSS 代码进行转换。数以百计的 PostCSS 插件可以用来为 CSS 属性添加特定于浏览器厂商的前缀、支持未来 CSS 语法、模块化、代码检测等。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/chartjs.png">
<div class="caption">
<h3><a href="#">Chart.js <br><small>开源的 HTML5 图表工具</small></a></h3>
<p>Chart.js 是为设计和开发人员准备的简单、灵活的 JavaScript 图表工具。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/vuepress.png">
<div class="caption">
<h3><a href="#">VuePress <br><small>基于 Vue 前端开发框架的静态站点生成工具</small></a></h3>
<p>VuePress 是基于 Vue 前端开发框架的静态站点生成工具。</p>
</div>
</div>
</div>
<!--第十排-->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/nunjucks.png">
<div class="caption">
<h3><a href="#">Nunjucks <br><small>模板引擎</small></a></h3>
<p>Nunjucks 是 JavaScript 专用的功能丰富、强大的模板引擎。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/webassembly.png">
<div class="caption">
<h3><a href="#">WebAssembly <br><small>面向 web 应用的编译格式</small></a></h3>
<p>WebAssembly 或者 wasm，是一种新型可移植，具有占用存储小，加载速度快等特点的面向 web 应用的编译格式。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/bundler.png">
<div class="caption">
<h3><a href="#">Bundler <br><small>是 Ruby 世界中最好的 gem 管理工具</small></a></h3>
<p>Bundler 是 Ruby 世界中最好的 gem 管理工具。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/w3schools.png">
<div class="caption">
<h3><a href="#">w3schools<br><small>原版国内镜像</small></a></h3>
<p>w3schools.com 是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！</p>
</div>
</div>
</div>
<!--第十一排-->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/nginx.jpg">
<div class="caption">
<h3><a href="#">Nginx <br><small>中文手册</small></a></h3>
<p>Nginx (engine x) 是一个高性能的HTTP和反向代理服务，也是一个IMAP/POP3/SMTP服务。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/stickup.png">
<div class="caption">
<h3><a href="#">stickUp <br><small>让页面元素“固定”位置</small></a></h3>
<p>stickUp 能让页面目标元素“固定”在浏览器窗口的顶部，即便页面在滚动，目标元素仍然能出现在设定的位置。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/responsive-nav.js.png">
<div class="caption">
<h3><a href="#">Responsive Nav <br><small>响应式导航</small>
</a></h3>
<p>响应式导航（Responsive Nav）是一个很小的JS插件，压缩之后仅有1.7KB，能帮你创建针对小屏幕的可切换式导航</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/unslider.png">
<div class="caption">
<h3><a href="#">Unslider<br><small>jQuery轮播插件</small></a></h3>
<p>Unslider - 一个超小的 jQuery 轮播（slider） 插件。支持主流浏览器、键盘导航、自动调整高度和响应式布局。</p>
</div>
</div>
</div>
<!--第十二排-->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/flat-ui.png">
<div class="caption">
<h3><a href="#">Flat UI <br><small>Metro 风格的 Bootstrap </small></a></h3>
<p>Flat UI 是基于 Bootstrap 做的 Metro 化改造，由<a href="http://designmodo.com/">Designmodo</a>提供。Flat UI包含了很多Bootstrap提供的组件，但是外观更加漂亮。在此强烈推荐！</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/layoutit.png">
<div class="caption">
<h3><a href="#">LayoutIt! <br><small>Bootstrap 可视化布局</small></a></h3>
<p>LayoutIt! 可拖放排序在线编辑的Bootstrap可视化布局系统。由<a href="https://github.com/dodgepudding" target="_blank">4wer</a>同学汉化整理。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/bootstrap-switch.png">
<div class="caption">
<h3><a href="#">Bootstrap Switch <br><small>Bootstrap 开关组件</small></a></h3>
<p>Bootstrap Switch 是对 Bootstrap 控件的扩充。基于选 HTML 中基本的选择框控件实现只有开和关两种状态的单选按钮。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/sco.js.png">
<div class="caption">
<h3><a href="#">Sco.js <br><small>Bootstrap 组件增强版</small></a></h3>
<p>由于大部分的 Bootstrap js 插件是无法扩展的，因此才有了 sco.js，它是对 Bootsrap 中 js 插件的增强实现。</p>
</div>
</div>
</div>
<!--第十三排-->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/icheck.png">
<div class="caption">
<h3><a href="#">iCheck <br><small>增强复选框和单选按钮</small></a></h3>
<p>iCheck 让不同浏览器下的复选框（checkboxes）和单选按钮（radio button）更美观、功能更强。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/bootstrap-wysiwyg.png">
<div class="caption">
<h3><a href="#">bootstrap-wysiwyg<br><small>为Bootstrap定制的可视编辑器</small></a></h3>
<p>bootstrap-wysiwyg 是一个 jQuery Bootstrap 插件（5KB, 200 行代码）可以将任何一个 div 转变成一个 WYSIWYG 富文本编辑器。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/preboot.png">
<div class="caption">
<h3><a href="#">Preboot <br><small>Bootstrap 的前世</small></a></h3>
<p>Preboot 是一组用 less 语法书写的混合（mixin）和变量（variable）的集合，目的是辅助用户书写更优美的CSS。Bootstrap的前身就是Preboot。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/jquery.pin.png">
<div class="caption">
<h3><a href="#">jQuery.Pin <br><small>固定页面元素的 jQuery 插件</small></a></h3>
<p>jQuery.Pin 能将任意页面元素“钉”在某个容器顶部，而且在尺寸小的屏幕上能够自动禁用这种效果。</p>
</div>
</div>
</div>
<!--第十四排-->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/bsie.png">
<div class="caption">
<h3><a href="#">Bsie <br><small>Bootstrap IE6 兼容方案</small></a></h3>
<p>Bsie 弥补了 Bootstrap 对 IE6 的不兼容。目前，bsie 能在 IE6 上支持大部分 bootstrap 的特性，可惜，还有一些实在无法支持...</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/messenger.png">
<div class="caption">
<h3><a href="#">Messenger<br><small>非常酷的弹框(Alert)组件</small></a></h3>
<p>Messenger 是一个非常酷的弹框(Alert)组件，能够非常好的与 Bootstrap 融合，当然，单独使用效果也是非常棒。Messenger 自带4套皮肤。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image//bootstrap-datetimepicker.png">
<div class="caption">
<h3><a href="#">DateTime Picker <br><small>日期时间选择器</small></a></h3>
<p>Bootstrap 日期时间选择器（Bootstrap DateTime Picker）是一个 Bootstrap 组件，能够简化页面上日期、时间的输入</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/jquery-ui-bootstrap.png">
<div class="caption">
<h3><a href="#">jQuery UI Bootstrap <br><small>用 Bootstrap 美化 jQuery UI</small></a></h3>
<p>这套工具让你在使用 jQuery UI 控件时也能充分利用 Bootstrap 的样式，而且不会出现样式不统一的现象，Bootstrap 和 jQuery UI 可以完美融合在一起了！</p>
</div>
</div>
</div>
<!--第十五排-->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/google-bootstrap.png">
<div class="caption">
<h3><a href="#">Google Bootstrap <br><small>Google 风格的 Bootstrap</small></a></h3>
<p>Google 的 UI 素来以简洁著称，现在 Bootstrap 也来 Google Style 一把，喜欢 Google 的就来试试这套 Google Bootstrap 吧！</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/metro-ui-css.png">
<div class="caption">
<h3><a href="#">Metro UI CSS <br><small>Bootstrap 与 Metro 融合</small></a></h3>
<p>Metro UI CSS 是一套用来创建类似于 Windows 8 Metro UI 风格网站的样式。现在，Metro UI CSS 项目在 Bootstrap 的基础上被开发成一个独立的解决方案。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/font-awesome.png">
<div class="caption">
<h3><a href="#">Font Awesome <br><small> Bootstrap 专用图标字体</small></a></h3>
<p>Font Awesome 中包含的所有图标都是矢量的，也就可以任意缩放，避免了一个图标做多种尺寸的麻烦。CSS 对字体可以设置的样式也同样能够运用到这些图标上了。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/simpleicons.png">
<div class="caption">
<h3><a href="#">Simple Icons<br><small>Icon汇</small></a></h3>
<p>Simple Icons -- Icon汇。收集众多网站的 Logo，并提供高质量、不同尺寸的 png 格式图片给广大网友，所有 Icon 版权归其所属公司。</p>
</div>
</div>
</div>
<!--第十六排-->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/bootstrap-form-builder.png">
<div class="caption">
<h3><a href="#">Bootstrap Form Builder<br><small>在线表单构造器</small></a></h3>
<p>Bootstrap 在线表单构造器能够以鼠标拖拽的方式迅速生成一个基于 Bootstrap 的完整表单，减轻了各位码农手写HTML代码的劳动，而且不会出错。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/h5bp.png">
<div class="caption">
<h3><a href="#">HTML5 Boilerplate <br><small>专业的前端模版</small></a></h3>
<p>HTML5 Boilerplate 是一套专业的前端模版，用以开发快速、健壮、适应性强的 app 或网站。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/websafecolors.png">
<div class="caption">
<h3><a href="#">Web Safe Colors <br><small>Web 安全色</small></a></h3>
<p>本表中列出的是 WEB 设计、开发中常用安全色。列于此是为了方便大家参考。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/bootstrap-docs.png">
<div class="caption">
<h3><a href="#">Bootstrap Docs <br><small>Bootstrap 文档全集</small></a></h3>
<p>这里收集了 Bootstrap 从 V1.0.0 版本到现在，整个文档的历史。Bootstrap 本身就是一个传奇，而这些文档就是传奇的见证！</p>
</div>
</div>
</div>
<!--第十七排-->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/git-guide.png">
<div class="caption">
<h3><a href="#">Git Guide <br><small>Git 简易指南</small></a></h3>
<p>Git简易指南 -- 帮助你开始使用 git 的简易指南，木有高深内容，;)。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/grumblejs.png">
<div class="caption">
<h3><a href="#">Grumble.js <br><small>气泡形状的提示（Tooltip）控件</small></a></h3>
<p>一个气泡形状的提示（Tooltip）控件，可以在其围绕的元素周围做360度任意定位。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/cikonss.png">
<div class="caption">
<h3><a href="#">CIKONSS <br><small>纯 CSS 实现的 Icon</small></a></h3>
<p>Cikonss 是纯 CSS 实现的响应式 Icon，兼容 IE8+。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/headroom.png">
<div class="caption">
<h3><a href="#">Headroom.js <br><small>隐藏或展示页面元素</small></a></h3>
<p>Headroom.js 是一个轻量级、纯 JavaScript 组件，用来隐藏或展现页面上的元素，为你的页面留下更多展示内容的空间。</p>
</div>
</div>
</div>
<!--第十八排-->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail" style="height: 350px;" >
<img src="../image/buttons.png" >
<div class="caption">
<h3><a href="#">Buttons <br><small>CSS 按钮样式库</small></a></h3>
<p>Buttons 是一个基于 Sass 和 Compass 构建的CSS按钮（button）样式库，图标采用的是<a href="http://www.bootcss.com/p/font-awesome/" target="_blank">Font Awesome</a>，可以和 Bootstrap 融合使用。
</p>
</div>
</div>
</div>
</div>
</div>
<!--底部-->