# 利用Bootsrap在Github Pages快速建立個人履歷網站 (2)Bootstrap及其相關概念簡介 ## Bootstrap的由來 Bootstrap 原名 Twitter Blueprint，由 Twitter 的兩位工程師所開發，本意是製作一套可以保持一致性的工具和框架。一開始僅是專門for Twitter內部工程師使用，但是實在是太好用了，它讓群組內的開發工作的效率大增，於是Twitter乾脆將它公開提供給公眾使用，沒有幾年的時間，它便如野火燎原般成為最受歡迎的前端網頁設計工具。 > Twitter開發者Mark Otto說：「我和幾個開發者一起設計建立一個新的內部使用的工具，然後我們發現有機會可以做更多的事。從那之後，我們發現我們設計的工具比別人設計的更強壯。幾個月之後，我們做出了Bootstrap的原型，在公司內分享文件、設計和資源。」 ## Bootstrap是什麼 :::info Bootstrap 是目前最受歡迎的 HTML、CSS 與 JavaScript \*前端 \*框架之一，用來開發 \*響應式、行動優先的網頁，使用者無須撰寫 CSS 或 JavaScript 程式碼，就可以設計出響應式網頁。 ::: ### 網頁前端?後端? 學習寫網站時，應該很常聽到網頁前端、後端這兩個用語，直覺地去觀察這兩字，一定第一個發現的是一前一後，用一個網路上很常舉到的例子，**早餐店**。 #### 當你到早餐店櫃台點餐時，就是前端，點完餐後，廚房開始做菜，廚房的部分就是後端。 再來粗略的解釋，==前端處理看的到的部分，後端反之，也就是我們俗稱的伺服器。== (由於主題安排，我們並不會講解到後端的部分，前面所提到的HTML等，也都是前端的範疇。) > 更多資料: https://noootown.wordpress.com/2016/03/23/frontend-backend-breakfast/ ### 網頁框架(framework)? 是一種電腦軟體框架，用來支援動態網站、網路應用程式及網路服務的開發。這種框架有助於減輕網頁開發時共通性活動的工作負荷，例如許多框架提供資料庫存取介面、標準模板以及會話管理等，可提昇程式碼的可再用性。 ==「框架」其實就是一種提升開發效率、降低維護難度的開發架構。== 這篇主題bootstrap，就是現在主流的前端框架之一。 ### 響應式網頁設計(RWD)? 響應式網頁設計 (RWD，Responsive Web Design) 指的是一種網頁設計方式。目的是==根據使用者的瀏覽器環境 ( 例如寬度、長度或行動裝置的方向等 )，自動調整網頁的版面配置==，以提供最佳的顯示結果，換句話說，只要設計單一版本的網頁，就能完整顯示在 PC、平板電腦、智慧型手機等裝置。 講簡單點，==統一設計在同一個地方，一個設定，就可以讓所有不同解析度環境觀看網頁達到最佳化。而不用每個解析度尺寸都從頭設計一次。== ## 總結 **在本文階段，可以將Bootstrap想成是一個能夠助於網頁開發的工具，就是讓你能更輕鬆透過Bootstrap的設計方法及語法，打造漂亮且不管手機、各尺寸的桌上型電腦、平板都能觀看的網頁。** 參考資料: http://ch-tseng.blogspot.com/2014/08/twitter-bootstrap.html ### 系列文連結 [利用Boostrap在Github Pages快速建立個人履歷網站 (1)HTML、CSS、Javascript簡介](/@qTxKwC5AQiqDJnAMV1oc2w/S1minPtX8) [利用Bootsrap在Github Pages快速建立個人履歷網站 (2)Bootstrap及其相關概念簡介](/hPdsmw48Q0SPODtNI28_vg) [利用Boostrap在Github Pages快速建立個人履歷網站 (3)實作前端](/NN1vUAovQN2YQmHaXdy9TA) [利用Boostrap在Github Pages快速建立個人履歷網站 (4)Github Pages](/SOYZM3qDR1W-ufjei193oA)