关于---构建 Twitter BootStrap---文章

一年半前，我所在的Twitter内部小组开始着手改良团队内部使用的分析管理工具。项目早期，大家围绕这一产品开了一些会议。之后，我们有了更大的野心: 为什么不把这个工具箱的用户群可以扩展到整个Twitter公司，甚至更广呢？我们说干就干，先着手规划一个基础系统，让我们这类人可以在它之上建立新项目，Bootstrap就从构思中跳了出来。

我和Jacob ThorntonBootstrap创建这个前端工具箱，是想帮助设计和开发人员能够快速有效地创建神奇的在线应用。我们的目标是提供精致，文档良好，可扩展的库，它由使用HTML，CSS和JavaScript搭建的灵活的组件构成，其他人可以基于这个库进行构建，改革创新自己的项目。今天，它已发展到包括几十个组件，并在GitHub上有超过13,000关注者（watcher）和2,000开发分支（fork）, 成为那里最流行的项目。

在这里，我们将阐明Bootstrap的诞生的原因，制作流程，以及它是如何成长设计系统的。

这是个好机会

以前Twitter的一些内部工具，设计上不够精致和易用，而且发现难以用它们进行开发或快速迭代。不同团队的人都认识到这个问题，对于目前和将来的项目来说这是个极好的解决时机。有了此共识，我们在开始时就制定了在设计和开发间相互协作的粗略流程。

从更高的视角来看，我们的流程开始时是这个样子：

1 几个内部工具开发者与产品经理及工具的潜在用户一起工作，来确定关键的功能（functionality）和特性（feature）。

2 我与开发者合作，来确定我们的需求，接着设计这些，让它们在浏览器中能够有一致的视觉表达方式，探究其互动行为。得到首个实现后，在继续前进之前，我们讨论了每个组件，仔细权衡其它意见和实现。

3 之后，我们为原来规划的新内部工具项目，设计和编写分离的组件。这段时间内，我们快速实现，测试，并迭代每个新特性。

4 最后，作为后续工作，我把这些相同的组件，从内部工具项目中提取出来并加入到共享代码库(Bootstrap)，提炼它们并增加文档，供其他项目使用。

最终总结出一个核心理念： 设计师与开发者结对。与开发者的持续互动启发了Bootstrap，并推动了一年多的开发。从白板想法到编写粗略的原型，跨职业的合作让Bootstrap成功地在Twitter内部应用起来。这个过程几乎影响每个Bootstrap特性的开发，随着时间的推移，效果越来越好。

建立Bootstrap，沟通是关键，大多数设计工作体现在代码中。Bootstrap最终交付的毕竟是代码，尽可能地频繁沟通我们的想法就是最值得做的事情。好的开发者要把这句话放在心里: 简洁组件是好的，但可见的完美和统一要达到专业设计师的水准。

一个例子



图1：第一版Bootstrap的悬停触发下拉菜单。

先来看看Boostrap的一个特性：下拉菜单。为了收纳当前会话的信息，让出工具的其它区域，得要用下拉菜单。不计其数的人在他们的应用程序中使用下拉菜单，每个都用了不同的实现，不一样的交互和视觉设计，那我们要如何着手呢？按照上面的纲要，特性就像下面这样来到Boostrap中：

5 我们认识到正在使用的固定顶栏有太多的导航链接和动作；可以伸展开并有多层结构的下拉菜单似乎可以解决这个问题。

6 我们一起来确定这么多的链接和动作要占据一开始的位置和需要支持多层的理由。

7 讨论过后，我们决定重新安排顶栏，删除一些链接，实现没有多层支持的下拉菜单。当时这样做的意思是避免额外的代码搅乱我们的实现。

8 下一步，我们写了下拉菜单中基本的HTML和CSS部分，悬停 :hover。我们在工具的代码库内推敲视觉细节，然后将它们提炼到Bootstrap并添加文档。

9 进行到Bootstrap提炼的最后一步，我们选择点击，而不是靠悬停来触发行为。我们发现，这样可以让用户避免迷惑和意外点击，提供更好的体验。

大多数组件和许多周边细节的精细设计和构建都是设计师与开发人员组对儿参与的。我们添加新特性或设计组件最终形成这样的流程，想法，讨论和功能的审查，实施，最后提炼和文档化。靠着这个流程，我们才能比较顺利开发内部工具，避免特性蔓生和代码膨胀，帮我们搞明白并记录下来不仅有如何使用一个组件，还有为什么要使用这特定的Bootstrap组件的理由。

这样新特性从自然已有的延伸出来。如果有特性需要进行修改或删除，我们按照同样的流程：想法，审查，实现和文档化。继续这个例子，围绕下拉菜单，我们已收到大量反馈，并考虑重新支持多层。由于Web应用程序的行为越来越象桌面，使用多级下拉菜单就很有意义，支持多层是合理的要求。当然，我们可以简单地推倒我们先前的决定，但这个流程让我们对用户和他们的需求保持诚实，中肯和负责的态度。

并行开发

几乎所有的特性都是在这个流程下开发的，这表明我们决定要超越只是构建一个工具的重要决定。并行开发意味着我们要和没有接触到我们的流程或不了解我们工作的人进行有效的沟通。

虽然我们都忙于创建产品路线图，确定单个项目的目标，我们也会积极考虑别人如何使用相同的组件。组件的提炼和文档化, 成为我们构建这个工具和Bootstrap串联起来流程的一部分。总的来说，我们节省了时间和精力，更清楚地讨论增加（有时删除）特性的意义，并调整自己应对未来更大的项目。

开发几个星期后，我们就开始把这个活的文档作为“风格指南形式的工具包。”我们已达成的目标是通过Bootstrap传达我们的工作，这使Bootstrap迅速成长,任何人都可用。

作为风格指南的Bootstrap

创建风格指南型Bootstrap的想法很自然的在我们的设计和开发过程冒了出来。Bootstrap帮助我们用活的构建实例把组件文档化，而且由他自己支撑起这些文档，定义了真正的组件和模板。它成了我们设计师分享指南的单一参考点，并为每个活的组件创建了一组文档。

Bootstrap早期发展受到作为风格指南构建方式影响。这带来了项目之上的超然视角，在要实现我们想要的特性时，帮助我们正视现实。我们不把自己局限在设计一个单一项目，我们有更大的抱负，不想让我们或那些可能从这工具中受益的人只把它留在回忆中。我们开发这工具不仅是为Twitter，也为了任何设计师或开发人员。

迎合所有技能水平

活的文档化方法给了我们机会，不仅分享整个工具包，而且提供给使用Bootstrap的人书面和交互式的文档。这种做法迎合了所有技能水平的人，允许任何人克隆或下载源代码，使用Inspector 或在浏览器中查看代码。

随着开发的进展，这成为我们的工作指导原则之一，“帮助了不起的人做了不起的东西。”成了我们升华后的信条。这吻合了我们的目标--为那些有没有洞察到原来的过程或产品的人清楚阐明设计和开发的决定。无论处在何种技术水平或工作流程，我们需要人能够打开这个活的文档，可以使用Bootstrap快速，方便地构建他们喜欢的东西。

通过合作演进

在开始时，Bootstrap只包括排版，表格和表单，色彩指南，以及一些图形资源。这是如何使用公司范围内设计规则的形象的最佳实践指南。当时，我们只需要更加个性化的CSS reset和公司资源来在开发中带来一些优雅的风格。



图2：我们的工具包的原始功能之一，是个色彩选择指南。

随着越来越多的伙伴和有前景的应用程序加入，更多的特性要求被提了出来。随着时间的推移，我们完成了许多组件，包括固定顶栏，标签导航，下拉菜单，扩展表单，还有更多。在整个过程中，每个新的组件添加进来都促进了设计师和开发人员之间的合作。这合作产生了许多有益的和令人兴奋的话题和功能。



图3：我们最初的版本发布仅支持最新的浏览器，包含很少的组件。

今天，Bootstrap包括几十个组件，还有更多计划中的，而且用我们早期发布的流程很清晰的定义了它们的需求和特性。Jacob和我通过管理特性要求，跟踪问题和bug来迭代开发工具包。我们一起努力评估每个新的项目，衡量其对社区的用处。我们只实现那些不让用户迷惑，不会让框架不必要地膨胀的特性。在这儿有个流程，使人们公平地评估对于项目新特性是不是必要和可以带来魔力的。我们的合作已经远远超出了单个项目的范围，囊括了所有曾参与进来的人，特别是Bootstrap项目中。

总结

Bootstrap在现实世界中的首演，是在Twitter的的第一次Hackweek。一周之内，我帮少数人在他们的项目中使用Bootstrap加速开发，但不知道这个工具包将来会变得多有效和普遍。当所有的小组在公司前面展示自己的想法时，其中许多人使用Bootstrap。他们使用Bootrap创建的项目，感觉就像一个家族，有着一致的设计和实现。在几乎没有一个专门的设计师帮助下，一个简单，精心设计，文档化的工具包，节约了大家无数时间。

换句话说， 它成功了。

现今,该项目已开源到GitHub上，我们的成功将继续帮助极客们加速网络开发。Bootstrap的开发流程依然不变，但已演进到利用GitHub的wiki和问题跟踪系统进行不断反馈循环，更好地与那些使用工具包的人进行沟通。正因如此，我们推出了一系列的版本发布，还有更多次在计划中。我们的下个主要版本是V2, 需要更多努力，添加一个可靠的网格系统，扩展JavaScript插件，除去无数错误，并改善文档。

没有并行开发和团队协作，就没有Bootstrap，我们创造的会是另一种一次性工具。在公司内部，像Bootstrap的项目开始改变我们的合作方式。整个队伍提出的要求从“搞得更漂亮些”或“来个构建吧” 切换到“我们如何解决这个问题”，Bootstrap就是这样茁壮成长起来的。合作的流程，帮助我们更有效地工作，在同事间建立起更多的信任。

小团体的设计师和开发人员的前瞻和专注，使我们能够改进开发流程，建立可扩展的前端工具包，帮助成千上万的人启动他们喜欢的项目。

作者 Mark Otto
插图 Kevin Cornell

关于作者

Mark Otto 在位于San Francisco的Twitter工作， 是Twitter.com的设计师. 他在业余时间设计和维护 Bootstrap帮助了不起的人做了不起的东西. 关注他的 Twitter 或者 Blog.

原文链接：http://www.alistapart.com/articles/building-twitter-bootstrap/

原文链接：http://www.ituring.com.cn/article/details/1123