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

2020/01/30閱讀時間約 4 分鐘

Bootstrap 內建了以響應式、行動裝置優先的柵格系統（Bootstrap Grid System，又稱網格系統），隨著螢幕尺寸的增加，系統會自動分為最多 12 列。我們只要透過行（row）與列（column）的組合，便能建立好網頁佈局，再將內容放入這些建立好的佈局中，呈現出我們想要的外觀設計。

透過下表，我們可以了解 Bootstrap 的柵格系統如何在多種螢幕設備上運作。

Bootstrap 的柵格系統

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 種尺寸的編排控制，如下圖示意：

(螢幕尺寸>1200px時)

(螢幕尺寸>992px時)

(螢幕尺寸>768px時)

(螢幕尺寸>576px時)

(螢幕尺寸<576px時)

*範例完成檔下載

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

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