Bootstrap 4 柵格系統(使用Dreamweaver設定)

1.從堆疊到水平排列

首先，先來基礎練習從手機螢幕尺寸下(576PX)上下堆疊頁面區塊，到電腦螢幕尺寸下(768PX)區塊水平並排的設定。使用單一一組 .col-md-* 柵格類可以建立一個基本的柵格系統，基本的樣式在手機和平板上一開始是堆疊在一起的（超小螢幕到小螢幕此一範圍），在桌面（中等768PX）螢幕設備上變為水平排列。

區塊要居中時，只需加入 container 的類別名稱div，區塊就會依照視窗尺寸居中置放。所有的區塊（如圖A、B、C）必須放在 .row 內。當div套用了 container類別 居中後，再往內安排套用 row類別的div，接著裡面幾個 div套用的寬度類別，總合要是 12 就可以了。

A、B、C三個區塊div均是套用col-md-4類別，【.col-md-4】是指螢幕=768px以上時作用，且寬度皆為4個預設單位寬。

2.在Dreamweaver中設定柵格系統

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

確認游標在body 之下，在【插入】面板（【視窗插入】命令）的【Bootstrap 組件】下拉分類中，按下【Container】即加入div class="container"/div，接著確認游標在 Container 之內，在此要加入並排區塊內容，請直接按下【Grid Row With column】，設定欄數為 3 欄。

STEP2. 依序更改3欄的寬度類別為col-xl-4(在螢幕≥1200px時以四個單位寬並排)，並在 3 欄的 div 之內插入標題與段落內容文字：

切換至【即時】檢視模式即可看見 3 個並排區塊的內容，目前為 3 個 xl-4 的區塊，必須在螢幕寬超過 1200px 時，才會出現並排效果(內容div均是套用col-xl-4類別，【.col-xl-4】是指螢幕=1200px以上時作用，且寬度皆為4個預設單位寬)。

STEP3. 在最下方複製一個內容 div 成為第 4 個內容，在 row 之內會出現 4 個 col-xl-4，切換到【即時】檢視模式時，第 4 個內容便會自動擠至下方而無法並排，請將 4 個內容 div 均更改為 col-xl-3。

STEP4. 另可同時加上 4 種尺寸的編排控制，如下圖示意：

*範例完成檔下載

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

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