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

閱讀時間約 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 範例大全】
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫,並發佈成HTML5+CANVAS+JAVASCRIPT格式,已是最有效率設計製作專業網頁動畫效果的方式,筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧,歡迎一起讓網頁上的內容動起來!
留言0
查看全部
發表第一個留言支持創作者!