在 Dreamweaver CC 中建立 Bootstrap 4 頁面

在Dreamweaver 中要根據 Bootstrap 架構建立 HTML 檔案，可以選擇全新建立一組有著 Bootstrap 架構的檔案，或直接使用現有的檔案來修改。例如在Dreamweaver 中建立檔案後，使用【插入】面板加入 Bootstrap 組件，如收合式面板和導覽列等。

Dreamweaver cc 2018 後的版本預設內建使用的是 Bootstrap 3.4（需更新為Bootstrap 4），請由網站設定（【網站 > 新增或修改網站】命令）的【進階】設定中指定要使用的版本。若使用的是 Dreamweaver cc 2019，預設即為採用 Bootstrap 4。

新增一個網站（【網站 > 新增網站】命令），網站資料夾選擇為要建構 Bootstrap 網站的資料夾（請自行在電腦硬碟中新增資料夾即可），由左側切換至【Bootstrap】即可檢視版本，按下【儲存】完成新增網站設定。

若使用的是 Dreamweaver cc 2019，預設即為採用 Bootstrap 4，即不需版本設定，只需要新增網址即可。

在Dreamweaver執行【檔案>開新檔案】，於【新增文件】交談窗中直接選擇【架構 BOOTSTRAP】、 Bootstrap CSS 選擇【新建】、【設計】不勾選【包含預先建立的版面】項目，按下【建立】後，開啟的即是空白的 Bootstrap 架構頁面。

儲存檔案後，所有與 CSS 與 JS 相關的串聯位址即更新完成，並且自動於定義網站內產生 CSS 與 JS 資料夾。

再次開啟一個新檔，【設計】改勾選【包含預先建立的版面】項目，即可開啟包含了一部分 Bootstrap 預設架構的頁面內容。

開啟的頁面是有包含預設的頁面內容編排，即可先簡單參考頁面內容與預設可使用素材。

儲存檔案，即可預覽包含預設的頁面內容編排。

有興趣了解更多Bootstrap4製作響應式網頁的技巧，可參考筆者的最新著作:
【響應式網頁設計驚嘆號：Dreamweaver CC╳Bootstrap 4╳JavaScript 範例大全】

相關課程 / 優勢多媒體 - RWD響應式網頁設計