摘要：為了更好得收納當前的信息并且為其他工具騰出空間，我需要使用到下拉菜單。經過幾次的討論，我們下定決心重新排列頂欄，移除了一些鏈接，實現了不支持多層次的下拉菜單。繼續這個例子，我們收到了大量的圍繞下拉菜單，并且重新考慮支持多層次菜單。

----最近在看新鮮出爐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公司內部早期的一些工具設計得不夠精致和人性化，以至于無法快速地進行開發并且重復使用，幾個團隊的成員都認識到了這個問題，而且認為這是一個對現在和未來項目的發展極佳的解決時機，認識到這一點，我們通過早期的設計和合作形成了了一個大致的計劃。
站在一個更高的角度來看，我們的計劃大致是這樣的：

這個工具（Bootstrap）的一部分開發者與產品經理以及潛在的用戶一起工作，來確定關鍵的功能和特征。

我通過與開發者一起工作來確定需求，然后在瀏覽器中實現它，創建可視化語言和尋求互動。在實現第一步之后，我們仔細討論了每一個組件和衡量了其他選項及實現方法，再開展下一步工作。

之后，我們開始朝著最初創建的這樣一個新的內部工具來設計和編碼，這段時間里，我們快速地執行、測試、迭代每個新特征。

最后，作為后續的工作，我把這個內部工具集中相同的組件抽出來，把他們添加到共享代碼庫中（Bootstrap），提煉并且提供文檔，供其他項目使用。

這樣的方式意味著溝通是構建Bootstrap的關鍵，大部分設計工作發生在編碼，

最終我們把這個經驗總結成：設計師與開發者配對。與開發者的持續溝通啟發了Bootstrap，并且推動了Bootstrap一年后的持續發展。從構思理念到簡易雛形的編碼以及跨學科的合作，這些使得Bootstrap在TWitter公司內部成功地被使用。這個過程促進了Bootstrap的每一個特征的開發，隨著時間的推移，效果顯著。

這種方式構建Bootstrap意味著溝通是關鍵，大部分設計發生在編碼中，當完成Bootstrap的可交付版本的時候，盡可能地交換大家的意見變得非常有意義。這使得鼓勵開發簡潔的組件深入到一個優秀開發者心里，但是視覺上的精良和期望是一個專業設計者的水準。

讓我們看一看Bootstrap的一個例子：下拉菜單。為了更好得收納當前的信息并且為其他工具騰出空間，我需要使用到下拉菜單。許多人都會在他們的應用中用到下拉菜單，每一個人都有不同的實現、交互和視覺設計。那么我們將會如何使用它呢？有了上面的提綱之后，下面這些特征將會體現在Bootstrap中：

我們意識到我們使用了太多了導航鏈接以及固定頂欄的動作，可伸縮的、多層次的下拉菜單看起來是一個解決方案。

我們通過合作來確認為什么需要這么多的鏈接和動作，以及為什么我們需要支持多層次。

經過幾次的討論，我們下定決心重新排列頂欄，移除了一些鏈接，實現了不支持多層次的下拉菜單。那個時候，這樣做意味著需要額外的編碼，并且實現起來很復雜，我們想要避免這些。

接下來，我們為下拉菜單的：hover寫了基本的Html和Css代碼，我們在代碼庫上優化了視覺上的一些細節，并且抽象出來、編寫了文檔，加入到Bootstrap中。

在最后一步抽象至Bootstrap時，我們在動作的觸發上選擇了點擊而不是懸停，我們發現這有利于避免用戶產生困惑和無意識的點擊，提供一個更好的體驗。

大多數的組件和周圍的細節都是通過設計師和開發者配對來設計構建的，通過合作，我們為每一個新的特征或者設計組件的思路逐漸成熟，經過特征討論和回顧、實現、最后的抽象化和文檔化。這使得內部工具的開發相當地流暢，避免了特征的變動和代碼的膨脹，而且幫助我們弄明白了不僅僅是如何在Bootstrap中去使用一個組件，而是為什么要使用它。

自然而然衍生出了新的特征并且融合到現有特征里，有些功能特征我們已經需要修改或者移除，我們遵循同樣的步驟：構思、審查、實現、文檔化。繼續這個例子，我們收到了大量的圍繞下拉菜單，并且重新考慮支持多層次菜單。只從網頁應用越
像桌面應用——同樣使用多層次下拉菜單，這讓我們覺得支持多層次變得很有意義。我們收回了早期的決定，但這個過程讓我我們保持坦率的、目的明確的、并且對我們客戶和他們的需求負責。

幾乎我們所有的特征都是通過這個流程開發的，導致我們所做的決定已經超出了僅僅只是構建這樣一個工具的范圍。我們與那些沒有接觸到我們的工作流程或者沒有深刻理解的人必須進行有效地溝通。

我們在忙于創建一個產品路線圖和決定一個項目的目標的時候，我們會積極考慮其他人如何使用相同的組件。對組件的抽象化和文檔化串聯起了我們構建Bootstrap的整個流程。總體來講，我們節省了時間和精力，更清楚地討論了添加（刪除）一些特征，并且使我們在未來能夠應對更大的項目。

在最初的幾個星期的開發之后，我們開始考慮把這個動態文檔做成工具包指南風格。我們通過Bootstarp工作中的溝通來達成我們的目標，這也使得Bootstrap快速地成長并且每個人都能使用它。

創建指南型風格的Boostrap的想法很自然地在我們的設計和開發過程中冒了出來。Bootstrap幫助我們用實例文檔化容器，而且他們本身支撐整個文檔，定義了真正的組件和模板。這也成了設計師的參照點，并且為每一個活的組件創建了文檔。
構建指南型風格的Bootstrap在早期就改變了Bootstrap的發展方向，它讓我們想去實現項目之外的東西。我們不想把自己限制在設計開發單個項目，我們有更大的目標，我們沒有把自己定位成只是想從這個工具中收益，我們的目標不僅僅是在Twitter使用，而是能夠被任何的設計者和開發者使用。任何人都能克隆和下載源代碼，

靈活的文檔促使我們不僅僅是分享整個框架，而是為所有想使用Bootstrap的人提供一個書面和交互式的文檔。允許任何人克隆和下載源代碼，使用Inspector或者在瀏覽器中查看源碼。
隨著工作的推進，“幫助牛b的人干牛b的事”成為了指導我們工作的準則。這顯然與我們想幫助那些沒有理解過程和產品而進行設計開發的人做決定的目標相吻合，無論是在哪個技術層級或者工作流程的人，人們打開這個文檔，就能夠使用Bootstrap快速構建自己喜歡的東西。
--(未完待續)