二、框架集成 Framework Integrations

将bootstrap集成到你的应用框架或cms中
Means and Methods of Integrating Bootstrap into your Application Framework or CMS

• ASP.NET MVC BOOTSTRAP EXTENSIONS
  CSS and component helpers for ASP.NET MVC
• BOOTSTRAP FOR CSLA
  CSLA integration for Twitter Bootstrap
• BOOTSTRAP FOR ASP.NET MVC
  Quickly add Twitter Bootstrap to an MVC 4 application.

• WICKET-BOOTSTRAP
  Wicket-Bootstrap is based on Twitter’s toolkit (bootstrap) and the Apache Wicket Framework.
• STRUTS2-BOOTSTRAP
  A Plugin for simple Twitter Bootstrap integration into Struts2.
• TWITTER-BOOTSTRAP-GRAILS-PLUGIN
  Provides Twitter Bootstrap CSS framework resource files within Grails.

• METEOR – BOOTSTRAP PACKAGE
  Optional package to add Bootstrap support within Meteor
• EXTJS BOOTSTRAP THEME
  Twitter Bootstrap Theme for ExtJS 4
• NODE-EXPRESS-TWITTER-BOOTSTRAP
  NodeJS Boostrap using Express / EJS / Twitter Bootstrap / Responsive CSS3
• DERBY-UI-BOOT
  A Derby component library based on Twitter Bootstrap.
• ENDER-BOOTSTRAP
  Twitter Bootstrap for Ender
• ANGULARSTRAP
  Bootstrap directives for AngularJS
• ANGULARJS_SCAFFOLD
  A rails plugin for scaffolding views using Angular.js, Twitter bootstrap and font awesome.

• EXPOSE FRAMEWORK
  Theme Development Toolset for Joomla using Bootstrap
• SIMPLE BOOTSTRAP INTEGRATION
  Integrates the Bootstrap library and also makes it easy to install the various Bootstrap plugins within Joomla.
• JOOSTRAP
  Premium Joomla Bootstrap templates, code snippets, discussions and more

• YIIBOOSTER – SITE
  YiiBooster is YiiBootstrap on ‘roids.
• HWBOOT
  EZPublish CMS Design and Template for Twitter Bootstrap
• YII-BOOTSTRAP
  Bringing together the Yii PHP framework and Twitter’s Bootstrap
• MOPABOOTSTRAPBUNDLE
  MopaBootstrapBundle is a collection of code to integrate twitter’s bootstrap as easy as possible into your symfony2 project.
• ZF-BOILERPLATE
  Zend Framework Boilerplate – Bootstrap included in default
• BH BOOTSTRAP THEME
  A basic port of Twitter’s Bootstrap development framework to Drupal 7
• CODEIGNITER-BOOTSTRAP
  Kick starts the development process of the web development process by including Twitter Bootstrap into CodeIgniter
• CAKEPHP-BOOTSTRAPPIFIER
  Use Bootstrap with CakePHP without the need for FormHelper hacks.

• HTML::FORMHANDLER::WIDGET::THEME::BOOTSTRAP
  Renders form messages using Bootstrap formatting and classes within Catalyst
• MOJOLICIOUS-BOILERPLATE
  YAML config for Mojolicious, Configurable application menu based on user type Unified user notification through messages displayed
• DANCER-LAYOUT-BOOTSTRAP
  Bootstrap layouts for the Perl Dancer framework

• TW2.BOOTSTRAP
  ToscaWidgets 2 library that makes excessive use of the Twitter Bootstrap CSS Framework.
• FA.BOOTSTRAP
  Pyramid – Twitter Bootstrap integration
• DJANGO-TWITTER-BOOTSTRAP
  Provide a base Django project which handles the build process of Twitter Bootstrap 2.1 via django-compress
• DJANGO-BOOTSTRAP-TOOLKIT
  Django Toolkit for integration with Twitter’s Bootstrap
• DJANGO CRISPY FORMS
  Control the rendering behavior of Django forms in a DRY way with Bootstrap
• DJANGO-ADMIN-BOOTSTRAPPED
  Bootstrap your Django admin in 3 minutes, without changing your existing codebase.

• BOOTSTRAP FORMS
  A Rails generator that makes working with Bootstrap forms even easier on Rails
• WILL PAGINATE BOOTSTRAP
  Integrates the Twitter Bootstrap pagination component with the will_paginate pagination gem.
• THE RAILSAPPS PROJECT
  A website for open source Ruby on Rails example applications and Rails tutorials.
• FORMTASTIC-BOOTSTRAP
  A Formtastic form builder that creates markup suitable for the Twitter Bootstrap framework.
• LESS-RAILS-BOOTSTRAP
  Hooks into less-rails to provide both compiled and LESS CSS source files from the Twitter Bootstrap project within the Rails 3.1 asset pipeline.
• SINATRA-BOOTSTRAP
  Boilerplate application of a Sinatra and Twitter Bootstrap application
• TWITTER_BOOTSTRAP_FORM_FOR
  A Rails FormBuilder DSL that makes it easier to include Bootstrap stylings within your form.
• TWITTER-BOOTSTRAP-RAILS
  Integrates Bootstrap CSS toolkit for Rails 3.1 Asset Pipeline (Rails 3.2 supported)
• ANDYCROLL/KAMINARI_THEMES
  Bootstrap Themes for the Kaminari Pagination gem
• BOOTSTRAP RAILS FLASH MESSAGES
  Bootstrap alerts and Rails flash messages combined in one easy-to-use gem.
• HOBO_BOOTSTRAP
  Bootstrap based theme for Hobo 2.0

• STRAPPRESS
  A responsive WordPress theme with all the Twitter Bootstrap components and interactions.
• WP-BOOTSTRAP
  Bootstrap in a WordPress theme a 320press project.
• BOOTSTRAPWP
  A solid base for custom theme development on WordPress with Bootstrap
• ROOTS WORDPRESS THEME
  Rapidly create sites with HTML5 Boilerplate & Bootstrap from Twitter
• THE BOOTSTRAP
  WordPress Theme, with a great image and gallery handling, based on Bootstrap from Twitter.
• ALIEN SHIP
  Alien Ship is meant to be a foundation on which to build, it is fully integrated with Bootstrap.
• WPSTRAP
  WP Strap is an open-source WordPress theme using the Bootstrap framework from Twitter.

三、界面构建 Interface Builders

一些用于设计bootstrap布局结构或其他方面的可视化工具
Visual Tools for designing the structure or other aspects of a Bootstrap layout

• TWITTER BOOTSTRAP BUTTON GENERATOR WITH FAMFAMFAM ICONS
  Bootstrap buttons, but with the FamFam Iconset replacing glyphicons
• CSS3 GRADIENT GENERATOR
  Extensive gradient builder for setting Bootstrap values
• CSS GRADIENT GENERATOR
  A powerful Photoshop-like CSS gradient editor from ColorZilla.
• TWITTER BOOTSTRAP BUTTON GENERATOR
  Make slick looking buttons easily.
• HOLDER.JS
  Client side image placeholders
• JQDRAWBOOTSTRAPGRID
  A simple jQuery plugin that draws grid columns to a twitter bootstrap layout. Very helpful for debugging.

• BOOTSTRAP-FORM-BUILDER
  Drag and drop form builder for twitter bootstrap.
• JETSTRAP
  The Bootstrap Interface Builder
• EASEL.IO
  Design & build in your browser. (It’s the fastest way to ship.)
• DIVSHOT
  The Interface Builder for Web Apps
• BOOTSNIPP.COM
  Gallery of free HTML snippets for Twitter Bootstrap.

• WRAPBOOTSTRAP
  Theme marketplace for Twitter Bootstrap
• FBOOTSTRAPP
  A toolkit designed to kickstart development of facebook iframe apps in both relevant sizes
• BOOTTHEME
  Web Design Tool and Theme Generator for Twitter Bootstrap
• JQUERY-UI-BOOTSTRAP
  The beauty of Twitter’s Bootstrap to jQuery UI widgets.
• BOOTSWATCHER
  The Twitter Bootstrap Themer
• BOOTSWATCHR.COM
  BootSwatchr is a visual tool for creating a custom Bootstrap theme from the ground up.
• BOOTSWATCH
  Set of open source themes for Bootstrap
• STYLEBOOTSTRAP.INFO
  Element style picker for Bootstrap customization
• PAINTSTRAP
  Generate Bootstrap themes using the color scheme

四、模板工具 Mockup Tools

Stencils and Templates for Drawing and Mockup Applications

• REPIX BOOTSTRAP PSD
  Includes all base elements layered in Photoshop for typography, buttons, grids, navigation, and more used in the original CSS3 Bootstrap v2 framework from Twitter
• BOOTSTRAP WIDGETS LIBRARY FOR AXURE
  Free Axure Widgets Library for Twitter Bootstra
• GRID TEMPLATES
  A set of grids in photoshop and illustrator based on the bootstrap scaffolding, these are the default responsive grids available on the bootstrap site.
• TWITTER-BOOTSTRAP-OMNIGRAFFLE-STENCIL
  Make it easy to mockup web sites or web applications in OmniGraffle for Bootstrap
• FIREWORKS FOR BOOTSTRAP
  Fireworks elements of Twitter Bootstrap
• BOOTSTRAP BALSAMIQ COMPONENTS
  A symbols library for the mockup/drawing app Balsamiq
• BOOTGRID.PSD
  A simple .psd for quickly and easily mocking up Twitter Bootstrap designs.
• GUIDEGUIDE
  Photoshop Plugin For Dealing With Grids
• HTML PROTOTYPING TOOLBOX
  A set of layouts that NiceUX uses to speed up their prototyping process for Twitter Bootstrap
• POWERPOINT AND KEYNOTE MOCKUP TEMPLATE KIT
  Prototype Bootstrap-based apps using your favorite presentation tool.

五、工具和服务 Tools and Services

使bootstrap开发更快、更容易
Additional items to make Bootstrap Development Easier and Faster

• BOOTUI
  Desktop application for generating Bootstrap templates
• FONTCUSTOM.COM
  Generate custom icon webfonts from the comfort of the command line.
• SUBLIME-TWITTER-BOOTSTRAP-SNIPPETS
  A bunch of nicely described and categorized Twitter Bootstrap code snippets for Sublime Text editor.
• BOOTSTRAP SASS
  A Sass-powered version of Twitter’s Bootstrap, ready to drop right into your Sass powered applications.
• COMPASS TWITTER BOOTSTRAP
  Twitter Bootstrap converted for Rails + Compass
• DOJO BOOTSTRAP
  Bootstrap, but with Dojo instead of jQuery

• I LOVE BOOTSTRAP
  An unofficial site showcasing the very best sites using Bootstrap
• BOOTSTRAPDOCS
  Twitter Bootstrap Documentation Archive
• BOOTSTRAPCDN
  Bootstrap, FontAwesome and Bootswatch hosted on NetDNA’s Content Delivery Network

六、教程 How Tos

Tutorials and Instructions on using Bootstrap

• 开始使用TWITTER BOOTSTRAP – GETTING STARTED WITH A TWITTER BOOTSTRAP TUTORIAL
  This will equip you to build web apps and sites using Twitter Bootstrap.
• Ruby on Rails教程——整合Bootstrap – RUBY ON RAILS TUTORIAL – INTEGRATING BOOTSTRAP
  Section of the larger Rails Tutorial going into specifics of integrating bootstrap-sass.
• 使用Twitter Bootstrap打造Dropbox文件上传器 – DROPBOX FILE UPLOADER WITH TWITTER BOOTSTRAP
  HowTo create a simple application that allows people to attach a photo from their Dropbox account, crop an area with the Jcrop plugin, and download the result.
• 设计一个响应式联系人页面 – DESIGN A RESPONSIVE CONTACT PAGE
  How to use responsive form elements to create a Bootstrap based contact page
• 设计一个响应式主页 – DESIGN A RESPONSIVE HOMEPAGE
  A very real world project, a single page site or splash page that works on mobile, built with Bootstrap
• 漂亮的输入表单 – PRETTY FILE INPUT FIELD IN BOOTSTRAP
  Bootstrap leaves the file input to the browser default, this article goes through the steps to integrate it better.
• Twitter Bootstrap与Rails – TWITTER BOOTSTRAP MEETS FORMTASTIC AND TABULOUSRUBYSOURCE
  a detailed, step by step tutorial that will take you through the process of writing a new Rails 3.1 app that uses Twitter Bootstrap with Formtastic and Tabulous
• 在Rails应用程序中定制Bootstrap – HOW TO CUSTOMIZE BOOTSTRAP WITHIN A RAILS APP
  Twitter Bootstrap provides a tremendous amount of useful CSS support that would take a long time to reimplement
• Symfony 2 Bootstrap表单 – SYMFONY 2 BOOTSTRAP FORMS
  How to create your own form templates with Symfony2 and Bootstrap
• 基于Bootstrap和Codeigniter的Ajax模态寄存器 – AJAX MODAL REGISTER WITH BOOTSTRAP AND CODEIGNITER
  Create a cool looking Ajax registration modal using the power of Bootstrap, CodeIgniter, and jQuery
• 使用Bootstrap进行原型设计 – USE BOOTSTRAP FOR PROTOTYPING
  Quick and Easy Interactive Wireframes with Bootstrap
• 创建一个延迟加载的图片轮播效果 – HOW TO CREATE A LAZY LOAD CAROUSEL
  A lazy load carousel delays loading of images in order to make the page load faster. It loads the images only if needed.
• 使用Knockout.Js和Bootstrap构建一个单页面应用 – BUILD A SINGLE PAGE APPLICATION WITH KNOCKOUT.JS AND BOOTSTRAP
  Tutorial on how to fit all the necessary code – HTML, JavaScript and CSS on one single page, hence the name.
• 自定义图标集 – CUSTOM ICON SET TUTORIAL
  How to Create a Custom Icon Set for Bootstrap
• Bootstrap风格的jQuery验证插件 – JQUERY VALIDATE W/ BOOTSTRAP
  How to integrate the jQuery validate plugin with Bootstrap Styles
• GOLDEN BOOTSTRAP
  Golden Bootstrap is a bunch of less written css rules giving you the divine power of using golden ratio sized columns with Bootstrap.
• 使用Twitter Bootstrap 风格化你的应用 – STYLING YOUR APPS WITH TWITTER BOOTSTRAP
  An introduction using Twitter Bootstrap and its key important features to style your apps quickly and easily.
• Modals教程 – MODALS TUTORIAL
  How to create and customize Modal windows using Twitter Bootstrap with several examples and explanations.
• 流式和固定布局之间的抉择 – HOW TO DECIDE BETWEEN FLUID AND FIXED
  Fluid vs Fixed (and responsive) decision making
• 自定义Twitter Bootstrap – HOW TO: CUSTOMIZE TWITTER BOOTSTRAP TO NOT LOOK BOOTSTRAP-Y
  Please! if you do use Bootstrap for just about everything be courteous to your audience and change up some of the basic variables so it doesn’t look all the same!
• 使用Twitter Bootstrap创建一个引人入胜的网站 – CREATE AN ENGAGING WEBSITE WITH TWITTER BOOTSTRAP BY CHRIS CONVERSE
  How to build a responsive, interactive, and visually engaging web page with simple and flexible HTML, CSS and JavaScript
• Joomla Bootstrap模板 – HOWTO JOOMLA BOOTSTRAP TEMPLATE
  HowTo Using the Twitter Bootstrap Framework to build a responsive Joomla! Template from Scratch

• Bootstrap设计 – DESIGNING BOOTSTRAP
  Presentation by Bootstrap Creator Mark Otto on how the principles of design are reflected in Bootstrap
• 使用Twitter Bootstrap构建 – BUILDING WITH TWITTER BOOTSTRAP
  We dive in to the principles of using Bootstrap effectively in your design and development process – and how not use it.
• Web排版 – TYPESETTING THE WEB
  Not strictly Bootstrap, but awesome: You’ll learn basic typeface anatomy & terminology, typesetting techniques
• Bootstrap背景和基础 – DESIGNING BOOTSTRAP
  Understand the background and underpinnings of Bootstrap from the source themselves.

• 使用Twitter Bootstrap (Pro) – #329 MORE ON TWITTER BOOTSTRAP (PRO) – RAILSCASTS
  How to display flash messages, add form validations with SimpleForm, customize layout with variables, and switch to using Sass.
• Twitter Bootstrap基础 – #328 TWITTER BOOTSTRAP BASICS – RAILSCASTS
  learn how to include Bootstrap into Rails with the twitter-bootstrap-rails gem.
• YUI和Bootstrap – YUI AND BOOTSTRAP
  YUI contributor Jay Shirley (@jshirley) talks about his project to provide an alternative JavaScript implementation for Twitter Bootstrap based on YUI.
• TWITTER BOOTSTRAP 101 – YOUTUBE
  A 17 Video series on how to get started and customize Twitter Bootstrap

七、JavaScript扩展 Javascript Addons

基于Bootstrap的JavaScript/jQuery插件
Useful Bootstrap Compatible Javascript Addons

• METEOR – BOOTSTRAP PACKAGE
  Optional package to add Bootstrap support within Meteor
• EXTJS BOOTSTRAP THEME
  Twitter Bootstrap Theme for ExtJS 4
• NODE-EXPRESS-TWITTER-BOOTSTRAP
  NodeJS Boostrap using Express / EJS / Twitter Bootstrap / Responsive CSS3
• DERBY-UI-BOOT
  A Derby component library based on Twitter Bootstrap.
• ENDER-BOOTSTRAP
  Twitter Bootstrap for Ender
• SISYPHUS.JS
  Gmail like client side form draft saves.
• DATA FILTER
  Filters elements by data attribute
• FADETO
  Fades text using snappy CSS3 transitions
• FADETOSRC
  Fades between images using CSS3
• HAIRCUT
  Trims text down to fit into its container
• TYPER
  An easy-to-use jQuery plugin that types
• ANGULARSTRAP
  Bootstrap directives for AngularJS
• JQUERY-QRCODE/
  Pure browser qrcode generation with jQuery
• JQBOOTSTRAPVALIDATION
  A JQuery validation plugin for bootstrap forms.
• ANGULARJS_SCAFFOLD
  A rails plugin for scaffolding views using Angular.js, Twitter bootstrap and font awesome.
• SELECTBOXIT
  A jQuery Select Box Plugin for Mobile, Tablet, and Desktop
• KEYPRESS.JS
  A Javascript library for capturing input
• CAMANJS
  Image Manipulation in Javascript – manipulate images using HTML5 canvas and Javascript
• INFINITY.JS
  Speeds up scrolling through long lists and keeps infinite feeds smooth and stable for users