最全的 Twitter Bootstrap 开发资源清单

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,由Twitter的设计师Mark Otto和Jacob Thornton合作开发。Bootstrap提供了优雅的HTML和CSS规范,它由动态CSS语言LESS写成,与CSS框架Blueprint存在很多相似之处。Bootstrap推出后颇受欢迎,一直是GitHub上的热门开源项目。

之前瑞克互动也介绍了很多Bootstrap相关的模板、工具等文章,仅供参考:

7个超赞的Bootstrap3主题构建

8 个Bootstrap 3.x案例教程

bootstrap 3.x高品质主题模板

12款相关Bootstrap设计工具

Bootstraphero网站搜集了大量关于Bootstrap的开发资源,本文列举如下(关于资源的介绍请参阅原文或资源链接),并由乱炖翻译整理。

一、组件 Components

用来扩展Bootstrap的基本功能
Additional Bootstrap specific addons to supplement the base Bootstrap features

显示组件 Display

表单组建 Form

  • JQUERY FILE UPLOAD DEMO
    File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery.
  • BOOTSTRAP CONTEXTMENU
    A context menu extension of Twitter Bootstrap made for everyone’s convenience.
  • SELECTBOXIT
    Replace ugly and hard to use HTML select boxes with gorgeous and feature rich drop downs.
  • SPINNER – FUEL UX
    Wait indicator for form submissions
  • SEARCH FUEL UX
    Search input control for Twitter Bootstrap
  • PILLBOX FUEL UX
    Pillbox container (often used for tags) control
  • BOOTSTRAP-WYSIHTML5
    Create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap
  • SELECTBOX FORM HELPER
    Allows for select box filtering, default selection and better styling
  • TYPEAHEAD EXTENSION
    Additional functionality beyond the stock Bootstrap typeahead – callback on select, local or remote data source
  • FINE UPLOADER
    A user-friendly file-uploading experience over the web
  • X-EDITABLE
    In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
  • JQBOOTSTRAPVALIDATION
    A JQuery validation plugin for bootstrap forms.
  • PRETTYCHECKABLE
    Replaces the default checkboxes and radio inputs for better looking ones.
  • CHOSEN-LESS-BOOTSTRAP
    Chosen (the select box awesomefier) – now for Bootstrap and LESS
  • BOOTSTRAP AJAX
    Plugin designed to work with Twitter Bootstrap to enable declarative AJAX support.
  • BOOTSTRAP TOGGLE BUTTONS
    Bootstrap checkbox’s restyled as on/off style toggle buttons

输入组建Input

 


二、框架集成 Framework Integrations

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

ASP

Java

Javascript

Joomla

  • 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

PHP

  • 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.

Perl

Python

Ruby

WordPress

  • 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

显示 Display

架构 Structure

  • 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.

主题 Theme

  • 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


五、工具和服务 Tools and Services

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

开发工具 Devtools

  • 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

服务 Services

  • 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

文章 Articles

演示 Presentations

视频 Videos


七、JavaScript扩展 Javascript Addons

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

 

此条目发表在 资源 分类目录,贴了 , 标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>