前端利器之Bootstrap

原文鏈接

作者：果果

工欲善其事，必先利其器，話說在前端開發中，如何快速的搭建一個網站頁面呢？

還記得我們以前寫過的《Web語言的淺顯理解-HTML、CSS、JavaScript》這篇文章嗎？發現我們自己寫了不少Html、CSS，結果界面還是超級的丑，要是想搭建一個讓人看著顯得很專業的網站，還不知道要寫到啥時候去......

不過，在程序的世界裡，最不缺的就是輪子，凡是你能想到的需求，基本都有人已經想到，並已經提供成組件開放出來了，就像你突然想到了一個主意說，做這個一定能發財，走向人生巔峰，百度上搜一下就知道不靠譜或者已有很多人嘗試，並且已經有人成功了。

在前端世界，有個叫Bootstrap的傢伙，是twitter開源出來的一套前端框架，利用Ta可以快速開發網站界面，他的特點就是比自己從頭寫簡單，直觀，方便，快捷，省勁。

首先我們到官網下載Bootstrap，Ta下載下來就是一個Zip壓縮包，解壓縮後有三個目錄，分別為js，img，和css，並且包含了幾個文件，如圖：

其中名稱中帶min的是編譯和壓縮後的文件，這個就是Bootstrap提供的庫，我們也是利用這些文件中定義好的組件，CSS，JavaScript插件來完成網站的構建，其中img下放的是一系列常用圖標，css目錄裡面是Bootstrap幫你定義好的樣式，如果你自己不修改默認樣式，他保證這裡面有一套默認皮膚，js中就是它的一些邏輯控制和插件。

我來抄寫一兩個小Demo吧，其實本質上就是利用Bootstrap所定義好的樣式來完成網站的搭建，首先看個麵包屑的實現：

看看麵包屑長什麼樣子呢？看到了嗎，已經帶了默認的樣式，都是Bootstrap幫你定義好的。

再來做個進度條：

我們看到，只是利用到了幾個簡單的CSS樣式，就簡單的做出了麵包屑以及進度條的樣式，當然還有好多的組件可以利用，包括下拉列表，導航，標籤，縮略圖，警告框，按鈕組等樣式可以自由組合和使用。

我們看看PC網站上常見的輪播：

這三個簡單的小功能，只要利用別人做好的輪子，分分鐘就實現了，實現一個簡單的幾個大banner圖片的官網，也是分分鐘的事兒。

Bootstrap中文網開源項目免費 CDN 服務

Jekyll ? 簡單的博客、靜態網站工具

https://www.fordfound.org/

這幾個網站都是用Bootstrap做的，可以簡單參考下。

如果是個創業公司，對設計要求不高，只打磨MVP原型的時候，Bootstrap真的是一個不錯的選擇。

如果沒有設計師，又想做一個顯得比較專業的網站，鄭重向你推薦Bootstrap。

如果想寫點代碼，又想快速來點成就感，向你推薦Bootstrap。

閱讀原文