在 Dreamweaver 中要根據 Bootstrap 架構建立 HTML 檔案，可以選擇全新建立一組有著 Bootstrap 架構的檔案，或直接使用現有的檔案來修改。例如在Dreamweaver 中建立檔案後，使用【插入】面板加入 Bootstrap 組件，如收合式面板和導覽列等。
1.新增一個空白的 Bootstrap 4 頁面
Dreamweaver cc 2018 後的版本預設內建使用的是 Bootstrap 3.4（需更新為 Bootstrap 4），請由網站設定（【網站 > 新增或修改網站】命令）的【進階】設定中指定要使用的版本。若使用的是 Dreamweaver cc 2019，預設即為採用 Bootstrap 4。
STEP1.新增一個網站（【網站 > 新增網站】命令），網站資料夾選擇為要建構 Bootstrap 網站的資料夾（請自行在電腦硬碟中新增資料夾即可），由左側切換至【Bootstrap】即可檢視版本，按下【儲存】完成新增網站設定。
若使用的是 Dreamweaver cc 2019，預設即為採用 Bootstrap 4，即不需版本設定，只需要新增網站即可。
STEP2.
在Dreamweaver執行【檔案>開新檔案】，於【新增文件】交談窗中直接選擇【架構 BOOTSTRAP】、 Bootstrap CSS 選擇【新建】、【設計】不勾選【包含預先建立的版面】項目，按下【建立】後，開啟的即是空白的 Bootstrap 架構頁面。
儲存檔案後，所有與 CSS 與 JS 相關的串聯位址即更新完成，並且自動於定義網站內產生 CSS 與 JS 資料夾。
2.包含預先建立的版面
STEP3.
再次開啟一個新檔，【設計】改勾選【包含預先建立的版面】項目，即可開啟包含了一部分 Bootstrap 預設架構的頁面內容。
開啟的頁面是有包含預設的頁面內容編排，即可先簡單參考頁面內容與預設可使用素材。
