构建Bootstrap

构建Bootstrap

----最近在看新鲜出炉Bootstrap4,翻到了之前的一篇老文章，讲述了Tweter工程师构建Bootrap的初衷和过程。
如下翻译自Bootstrap 创始人Mark Otto的博客 Building Twitter Bootstrap讲诉了Bootstrap的建立历程。

原文地址:http://alistapart.com/article/building-t...

---

一年半之前，一小部分Twitter的工程师准备着手开发一个用于团队内部管理和分析工具，在围绕这个工具早期开展的一些会议上，咱们决定带着一个更高的目标去建立这样一个可以为Twitter任何一个员工使用的工具，甚至Twitter觉得的人们。所以，咱们打算创建一个系统可以帮助像咱们这样的人在这个基础上建立新的项目，因此Bootstrap就这样构建出来了。

我和Jacob Thornton建立的Bootstrap前端工具被用来帮助设计师和开发者快速高效地搭建网上应用，咱们的目标是建立一个精致的、文档规范的、由HTML、CSS、JavaScript构建的具有灵活组件库，人们可以利用这个库来构建本身的应用，或者在这个库的基础上进行创新。至今，Bootstrap已经扩展到了几十个组件，并且成为了Github上最受欢迎的项目，超过了13,000 的关注者以及2000个分支。

这里我将透露Bootstrap建立的缘由、它是如何被建立的、以及它是如何演变为一个设计系统的。

---

捕捉到机会

Twitter公司内部早期的一些工具设计得不够精致和人性化，以致于没法快速地进行开发而且重复使用，几个团队的成员都认识到了这个问题，并且认为这是一个对如今和将来项目的发展极佳的解决时机，认识到这一点，咱们经过早期的设计和合做造成了了一个大体的计划。
站在一个更高的角度来看，咱们的计划大体是这样的：

1. 这个工具（Bootstrap）的一部分开发者与产品经理以及潜在的用户一块儿工做，来肯定关键的功能和特征。

1. 我经过与开发者一块儿工做来肯定需求，而后在浏览器中实现它，建立可视化语言和寻求互动。在实现第一步以后，咱们仔细讨论了每个组件和衡量了其余选项及实现方法，再开展下一步工做。

2. 以后，咱们开始朝着最初建立的这样一个新的内部工具来设计和编码，这段时间里，咱们快速地执行、测试、迭代每一个新特征。

3. 最后，做为后续的工做，我把这个内部工具集中相同的组件抽出来，把他们添加到共享代码库中（Bootstrap），提炼而且提供文档，供其余项目使用。

这样的方式意味着沟通是构建Bootstrap的关键，大部分设计工做发生在编码，

最终咱们把这个经验总结成：设计师与开发者配对。与开发者的持续沟通启发了Bootstrap，而且推进了Bootstrap一年后的持续发展。从构思理念到简易雏形的编码以及跨学科的合做，这些使得Bootstrap在TWitter公司内部成功地被使用。这个过程促进了Bootstrap的每个特征的开发，随着时间的推移，效果显著。

这种方式构建Bootstrap意味着沟通是关键，大部分设计发生在编码中，当完成Bootstrap的可交付版本的时候，尽量地交换你们的意见变得很是有意义。这使得鼓励开发简洁的组件深刻到一个优秀开发者内心，可是视觉上的精良和指望是一个专业设计者的水准。

---

一个例子

让咱们看一看Bootstrap的一个例子：下拉菜单。为了更好得收纳当前的信息而且为其余工具腾出空间，我须要使用到下拉菜单。许多人都会在他们的应用中用到下拉菜单，每个人都有不一样的实现、交互和视觉设计。那么咱们将会如何使用它呢？有了上面的提纲以后，下面这些特征将会体如今Bootstrap中：

1. 咱们意识到咱们使用了太多了导航连接以及固定顶栏的动做，可伸缩的、多层次的下拉菜单看起来是一个解决方案。

2. 咱们经过合做来确认为何须要这么多的连接和动做，以及为何咱们须要支持多层次。

3. 通过几回的讨论，咱们下定决心从新排列顶栏，移除了一些连接，实现了不支持多层次的下拉菜单。那个时候，这样作意味着须要额外的编码，而且实现起来很复杂，咱们想要避免这些。

4. 接下来，咱们为下拉菜单的：hover写了基本的Html和Css代码，咱们在代码库上优化了视觉上的一些细节，而且抽象出来、编写了文档，加入到Bootstrap中。

5. 在最后一步抽象至Bootstrap时，咱们在动做的触发上选择了点击而不是悬停，咱们发现这有利于避免用户产生困惑和无心识的点击，提供一个更好的体验。

大多数的组件和周围的细节都是经过设计师和开发者配对来设计构建的，经过合做，咱们为每个新的特征或者设计组件的思路逐渐成熟，通过特征讨论和回顾、实现、最后的抽象化和文档化。这使得内部工具的开发至关地流畅，避免了特征的变更和代码的膨胀，并且帮助咱们弄明白了不只仅是如何在Bootstrap中去使用一个组件，而是为何要使用它。

天然而然衍生出了新的特征而且融合到现有特征里，有些功能特征咱们已经须要修改或者移除，咱们遵循一样的步骤：构思、审查、实现、文档化。继续这个例子，咱们收到了大量的围绕下拉菜单，而且从新考虑支持多层次菜单。只从网页应用越
像桌面应用——一样使用多层次下拉菜单，这让咱们以为支持多层次变得颇有意义。咱们收回了早期的决定，但这个过程让我咱们保持坦率的、目的明确的、而且对咱们客户和他们的需求负责。

平行开发

几乎咱们全部的特征都是经过这个流程开发的，致使咱们所作的决定已经超出了仅仅只是构建这样一个工具的范围。咱们与那些没有接触到咱们的工做流程或者没有深入理解的人必须进行有效地沟通。

咱们在忙于建立一个产品路线图和决定一个项目的目标的时候，咱们会积极考虑其余人如何使用相同的组件。对组件的抽象化和文档化串联起了咱们构建Bootstrap的整个流程。整体来说，咱们节省了时间和精力，更清楚地讨论了添加（删除）一些特征，而且使咱们在将来可以应对更大的项目。

在最初的几个星期的开发以后，咱们开始考虑把这个动态文档作成工具包指南风格。咱们经过Bootstarp工做中的沟通来达成咱们的目标，这也使得Bootstrap快速地成长而且每一个人都能使用它。

指南风格的Bootstrap

建立指南型风格的Boostrap的想法很天然地在咱们的设计和开发过程当中冒了出来。Bootstrap帮助咱们用实例文档化容器，并且他们自己支撑整个文档，定义了真正的组件和模板。这也成了设计师的参照点，而且为每个活的组件建立了文档。
构建指南型风格的Bootstrap在早期就改变了Bootstrap的发展方向，它让咱们想去实现项目以外的东西。咱们不想把本身限制在设计开发单个项目，咱们有更大的目标，咱们没有把本身定位成只是想从这个工具中收益，咱们的目标不只仅是在Twitter使用，而是可以被任何的设计者和开发者使用。任何人都能克隆和下载源代码，

知足全部技能水平的开发者

灵活的文档促使咱们不只仅是分享整个框架，而是为全部想使用Bootstrap的人提供一个书面和交互式的文档。容许任何人克隆和下载源代码，使用Inspector或者在浏览器中查看源码。随着工做的推动，“帮助牛b的人干牛b的事”成为了指导咱们工做的准则。这显然与咱们想帮助那些没有理解过程和产品而进行设计开发的人作决定的目标相吻合，不管是在哪一个技术层级或者工做流程的人，人们打开这个文档，就可以使用Bootstrap快速构建本身喜欢的东西。--(未完待续)