編者按：考慮到英文原文的長度以及可讀性，十大前端開發框架將分成上下兩部分呈現給大家。上半部分著重講的是Bootstrap家族框架，第二節將會跟大家分享更多其他的框架。
隨著網際網路的不斷成熟以及我們越來越多的用各種移動端的裝置訪問網際網路，Web設計師和Web開發者的工作也變得越來越複雜。
十年前，一切都還簡單得多。那個時候，大部分使用者都是坐在桌子前通過一個大大的顯示器來瀏覽我們的網頁。960畫素是當時比較合理的網頁寬度。那些年我們的開發工作主要就是跟十幾個桌面瀏覽器打交道，並通過新增幾個瀏覽器的hack，來相容詭異的舊版本 IE 瀏覽器。時至今日，隨著過去五六年間手持電子裝置的突飛猛進，一切都變了樣。我們看到各種尺寸的智慧手機和平板層出不窮，電子閱讀器，以及電視裝置上的瀏覽器等也不斷湧現。這種裝置的多樣性正在與日俱增。
可以預見，在不遠的將來，相對於使用桌上型電腦，越來越多的人會使用移動裝置來訪問網際網路。事實上，已經有相當數量的一部分人只通過智慧手機上網。這意味著，我們這些Web設計師和開發者需要知道如何在龐大的移動端王國裡呈現以及適配我們的產品，這至關重要。在撰寫本文的時候，儘管我們還沒徹底搞明白如何將桌面端呈現的全部內容在手持裝置中呈現同樣的效果，但是用於實現這一目標的技術以及工具正在變得越來越好。
在不知道瀏覽裝置螢幕大小的時候，最主要的策略就是使用響應式網頁設計。它是一種根據裝置瀏覽視窗的尺寸大小來輸出相應頁面佈局的方法。小型移動裝置（如智慧手機以及平板電腦）上的大多數瀏覽器會預設將一個網頁縮小到適應自己的螢幕尺寸，然後使用者可以通過縮放以及滾動等方法瀏覽整個網頁。這種方法在技術上是可行的，但是從使用者體驗的角度上講卻比較糟糕。小螢幕上文字太小閱讀不方便，連結太小難以點選，縮放以及滾動的操作多多少少會讓人在閱讀的時候分心。
響應式網頁設計利用同樣的HTML文件來適配所有的終端裝置，響應式網頁設計會根據裝置螢幕的大小載入不同的樣式，從而在不同的終端裝置上呈現最優的網頁佈局。舉個例子，當你在大螢幕桌面瀏覽器中檢視一個網頁的時候，網頁的內容可能是分為很多列的，並且有常見的導航條。如果你在小螢幕的智慧手機上檢視同樣的頁面，你會發現頁面的內容呈現在同一列中，並且導航按鈕足夠大，點選起來很方便。你可以在Media Queries這個網站上看到很多響應式網頁設計的案例。在你的瀏覽器中隨便點開一個設計案例，然後改變瀏覽器視窗的大小，你會看到網頁的佈局會根據視窗大小相應變化。
到目前為止，我們可以看出，響應式網頁設計可以有效地幫助我們應對日益增長的終端裝置多樣性。那麼在我們設計網頁的時候有哪些實際可用的工具以及技術可以用來實現響應式網頁設計呢？我們每個人都需要成為web大師才能駕馭這門技術麼？或者是利用我們已經掌握的web基本知識就已經足夠了？目前有什麼工具可以幫到我們麼？
這時候前端開發框架華麗登場。響應式網頁設計實現起來並不困難，但是要讓它在所有的目標裝置上都正常運作會有一點小棘手。框架可以讓這一工作變得簡單。利用框架，你可以花最少的力氣建立響應式且符合標準的網站，一切都很簡單並且具有一致性。使用框架有很多好處，比如說簡單快速，以及在不同的裝置之間的一致性等等。框架最大的優勢就是簡單易用，即使只掌握少量的web知識，你也可以毫無障礙的使用它們。
簡而言之，如果你認真對待目前的web開發工作，那麼使用框架進行開發就不是可選項而是必須要做的事情。你的站點必須高度靈活以適應不同的瀏覽器，平板，智慧手機以及其他各種各樣的手持裝置。
一個前端開發框架其實就是一系列產品化的HTML/CSS/JavaScript元件的集合，我們可以在設計中使用它們。前端開發框架有很多，其中有一些寫得很棒。為了大家的使用便利，下文列舉了目前最強大應用最廣泛的幾款前端開發框架。記住，這些框架並不僅僅是CSS 柵格之類的一些東西，它們包括的是整套的前端開發框架。
1. Bootstrap
Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美，直觀並且給力的web設計工具包，可以用來開發跨瀏覽器相容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI元件，柵格系統以及一些常用的JavaScript外掛。
Bootstrap是用動態語言LESS寫的，主要包括四部分的內容：
- 腳手架——全域性樣式，響應式的12列柵格佈局系統。記住Bootstrap在預設情況下並不包括響應式佈局的功能。因此，如果你的設計需要實現響應式佈局，那麼你需要手動開啟這項功能。
- 基礎CSS——包括基礎的HTML頁面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎CSS為這些要素提供了優雅，一致的多種樣式。
- 元件——收集了大量可以重用的元件，如下拉選單（dropdowns），按鈕組（button groups），導航皮膚（navigation control）——包括：tabs,pills,lists標籤，麵包屑導航（breadcrumbs）以及頁碼（pagination），縮圖(thumbnails)，進度條（progress bars），媒體物件（media objects）等等。
- JavaScript——包括一系列jQuery的外掛，這些外掛可以實現元件的動態頁面效果。外掛主要包括模態視窗（modals），提示效果（tool tips），“泡芙”效果（popovers），滾動監控（scrollspy），旋轉木馬(carousel)，輸入提示(typeahead)，等等。
Bootstrap已經足夠強大，能夠實現各種形式的 Web 介面。為了更加方便地利用Bootstrap進行開發，很多工具和資源可以用來配合使用，下面列舉了其中的一部分工具和資源。
- jQuery UI Bootstrap —— 對於jQuery和Bootstrap愛好者來說這是個非常好的資源，能夠把 Bootstrap的清爽介面元件引入到jQuery UI中。
- jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題類似，這是一個為jQuery mobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅訪問，那麼這個資源對你來說很方便易用。
- Fuel UX —— 它為Bootstrap新增了一些輕量的JavaScript控制元件。Fuel UI 安裝，修改，更新以及優化都很簡單方便。
- StyleBootstrap.info —— Bootstrap提供了自己的幾種介面風格，StyleBootstrap提供了更多的配色選項，並且你可以給每個元件都應用不同的配色。
- BootSwatchr —— 利用這個工具你可以立刻檢視主題修改後的效果。對於每一次變動的效果，這個應用都會生成一個唯一的URL方便你與他人分享，你也可以在任意時刻修改你的主題。
- Bootswatch —— 提供大量免費的Bootstrap主題。
- Bootsnipp —— 線上前端框架互動元件製作工具，是一個供給設計師和開發者的基於Bootstrap HTML/CSS/JavaScript 架構的免費元素。
- LayoutIt —— 通過介面拖放生成器簡便快捷地建立基於Bootstrap的前端程式碼。通過拖放動作將Bootstrap風格的元件加入到你的個人設計裡並且可以方便地修改他們的屬性，簡單便捷。
2. Fbootstrapp
Fbootstrapp基於Bootstrap並且提供了跟Facebook iframe apps和設計相同的功能。包含用於所有標準元件的基本的CSS和HTML，包括排版、表單、按鈕、表格、柵格、導航等等，風格與Facebook類似。
3. BootMetro
BootMetro框架的靈感來自於Metro UI CSS，基於Bootstrap 框架構建，用於建立Windows 8 的Metro風格的網站。它包括所有Bootstrap的功能，並新增了幾個額外的功能，比如頁面平鋪，應用程式欄等等。
4. Kickstrap
Kickstrap是Bootstrap的一個變體。它基於Bootstrap，並在它的基礎上新增了許多app，主題以及附加功能。這使得這個框架可以單獨地用於構建網站，而不需要額外安裝什麼。你需要做的僅僅是把它放到你的網站上，然後用就可以了。
App 是一些頁面載入完成之後載入執行的JavaScript和CSS打包檔案。預設載入的app有Knockout.js, Retina.js, Firebug Lite, and Updater，你也可以自行新增更多的app。
選擇不同的主題可以讓你的網站在眾多Bootstrap構建的類似網站中顯得與眾不同。
附加功能是一些用來擴充套件Bootstrap UI 庫的附件，它們的語法基本相同或者相似。
下半部分的內容…
這一部分我們主要總結了Bootstrap相關的一些框架。在下半部分，我們會介紹更多其他的框架。