2017年8月20日 星期日

快速建立RWD網頁 Bootstrap 套件前言

相信最近大家對Bootstrap套件越來越熟悉,還記得幾年前開始教RWD網頁設計時,在課程中有帶學員如何使用Bootstrap,反應不錯後來就開始繼續教Bootstrap。

剛開始除了教學之外,製作專案時我大部分都是在後台使用Bootstrap,當時網站需要製作RWD的機率還不高,不像現在這個高的需求量。

目前最新版本:v4.0
穩定版:v3.3.7
舊版本:v2.3.2

如果開發客戶是公部門,也就是說還有使用ie8或ie9,建議使用v3.3.7以下
商業網站就可以選擇v4.x或穩定版v3.3.7

目前我教學都還是以v3.3.7為主。

什麼是Bootstrap呢?簡單來說這是前端網頁設計開發的套件,內容包含CSS與JS跟font字型檔,我記得當時V2.0時ICON還是使用圖片,後來V3.x之後開始使用font圖示。至於Javascript應用方面需要搭配jQuery套件。

下載位置:http://getbootstrap.com/

Bootstrap的重點在於Grid System格點排版系統,使用者可以使用既有的規則快速建立網站,當然這需要基本的網頁設計基礎能力,使用工具方面可搭配Emmet製作與文字編輯器使用,軟體方面Dreamweaver 2017 cc有支援,但這幾年Dreamweaver開發網站的使用率偏低,如果有預算問題可以選擇Sublime或Atom、Visual Studio Code。

至於Sublime如何安裝可以看下列兩篇教學
Sublime Text 3 :必要的安裝與設定教學Atom前端編輯-網頁設計教學

沒有留言:

張貼留言