使用 Bootstrap 設計回應式網站

Bootstrap 是開發行動優先的回應式網站時，常見且免費的 HTML、CSS 及 JavaScript 架構。架構中包含按鈕、表格、導覽、影像轉盤，以及其他可用於網頁之元素的回應式 CSS 和 HTML 範本。還有一些選擇性 JavaScript 外掛程式可供使用，讓即使只有基本編碼知識的開發人員也能開發絕佳的回應式網站。

Dreamweaver 可讓您建立 Bootstrap 文件，同時可編輯使用 Bootstrap 建立的現有網頁。無論是完整設計的 Bootstrap 檔案或進行中的作品，您都可以在 Dreamweaver 中編輯它們，不只編輯程式碼，還可以使用即時檢視編輯、視覺 CSS 設計工具、視覺媒體查詢和 Extract 等視覺編輯的功能進行設計變更。

我曾在 Dreamweaver 中使用流變格線。如何開始使用 Bootstrap？

當您建立流變格線文件後，Dreamweaver 會自動套用適當的類別，使您的網頁具有回應功能。您只需要專注於您的內容，並決定它們如何依不同的表單係數重新排列。

同樣地，在 Bootstrap 文件中，您只需要專注於內容和設計，您網頁的回應功能是由與 Bootstrap 架構密切整合的 Dreamweaver 處理。

Dreamweaver 目前支援 Bootstrap 3.4.1 和 4.4.1 版：

「Bootstrap 3.4.1 包含行動優先的回應式流變格線系統，可隨著裝置或檢視區大小的增加而相應地擴充至最多 12 欄。它包含了用於簡單版面選項的預先定義類別，以及用於產生更多語意版面的功能強大的 Mixin。」- Bootstrap 文件。

「Bootstrap 4.4.1 進行了多項重大變更，其中包含強大的行動優先 Flexbox 格線，可建置各種形狀和比例的版面，這歸功於一個 12 欄系統、五個預設回應層、Sass 變數和 Mixin，以及數十個預先定義的類別。」- Bootstrap 文件。

若要在 Dreamweaver 中開始使用 Bootstrap 文件，請考慮使用 Bootstrap 初學者範本。Dreamweaver 提供了大量的範本可供您建立不同類型的網站，例如，電子商務或作品集網站。

我可以在 Dreamweaver 中將現有的流變格線文件轉換至 Bootstrap 文件嗎？

不行，沒有直接的方法將現有的流變格線文件轉換為 Bootstrap 文件。不過，在 Dreamweaver 中建立及設計 Bootstrap 文件時的用戶體驗與建立及設計流變格線文件類似。例如，您可以直接從「新增文件」對話方塊建立 Bootstrap 文件，立即開始使用。當您建立三個 Bootstrap 適用之基本表單係數 (行動裝置、平板電腦和桌上型電腦) 的流變格線文件時，可以從建立基本螢幕大小 (小型、中型、大型和超大型) 的文件開始進行。當您按一下 Bootstrap 文件中的項目時，所顯示的版面編輯選項看起來也會類似流變格線文件的選項。

我是否可將舊網站匯入 Dreamweaver 最新版本？

是，您可將舊網站匯入 Dreamweaver 最新版本。當這麼做時，Dreamweaver 會在 site root/css/ 資料夾中尋找 Bootstrap CSS 檔案。

• 若網站有 Bootstrap 3 版的 CSS 檔案，在「管理網站 > 進階設定 > Bootstrap」中的 Bootstrap 版本會設定為「3.4.1」。
• 若網站有 Bootstrap 4 版的 CSS 檔案，在「管理網站 > 進階設定 > Bootstrap」中的 Bootstrap 版本會設定為「4.4.1」。
• 若網站的 site root/css 路徑中沒有 Bootstrap CSS 檔案，在「管理網站 > 進階設定 > Bootstrap」中的 Bootstrap 版本會設定為「4.4.1」。

建立 Bootstrap 文件

您可以使用「新增文件」對話方塊中的下列其中一個選項，開始設計您的 Bootstrap 網站：

• Bootstrap 初學者範本 (「初學者範本 > Bootstrap 範本」) - 如果您想要快速地著手，而不想要面臨從頭配置頁面的麻煩，請使用這個選項。您可以只編輯文字並視需要取代資源，您的回應式網站便就緒可供使用了。如需詳細資訊，請參閱「使用 Bootstrap 初學者範本」。
• 根據 Bootstrap 架構建立 HTML 文件 (「新增文件 > HTML > Bootstrap」) - 如果您想要在 Dreamweaver 中使用 CSS 和 Bootstrap 組件堆疊建置網站，請使用這個選項。如需詳細資訊，請參閱「根據 Bootstrap 架構建立 HTML 文件」。
  

使用 Bootstrap 初學者範本

Bootstrap 初學者範本讓您在片刻間就可以建立熱門主題的網頁。此架構中的所有相依檔案都會自動儲存。

根據 Bootstrap 架構建立 HTML 文件

您可以根據 Bootstrap 架構建立 HTML 文件，開始建置您的回應式網站。您可以選擇建立一組 Bootstrap 架構檔案或使用現有的檔案。在建立文件後，您可以在 Dreamweaver 中使用「插入」面板加入 Bootstrap 組件，例如收合式面板和轉盤。或者，如果您有 Photoshop 構圖，可以使用 Extract 將影像、字體、樣式、文字和其他元素帶進 Bootstrap 文件中。

開啟 Bootstrap 檔案

您可以使用下列方法之一開啟 Bootstrap 檔案：

• 按一下「檔案 > 開啟」，並瀏覽至 Bootstrap HTML 檔案。
• (建議) 建立 Dreamweaver 網站，並將網站資料夾指向包含所有 Bootstrap 檔案的資料夾。

當您在 Dreamweaver 中開啟 Bootstrap HTML 檔案時：

• 列會以灰色虛線標示 (圓角)
• 欄會以藍色虛線標示

如果 CSS 檔案名稱包含「bootstrap」，Dreamweaver 會辨識與任何 Bootstrap HTML 檔案相關聯的 CSS 檔案。CSS 檔案參考可以是下列任何或所有項目：

• 本機路徑：

  迷你化或非迷你化的 CSS 檔案存在於本機。例如：

  <link href="css/bootstrap.css" rel="stylesheet"> 或
  <link href="css/bootstrap.min.css" rel="stylesheet">

• 遠端路徑：

遠端迷你化或非迷你化 CSS 檔案。例如：

<link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
<link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">

• CDN

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_version_number>/css/bootstrap.min.css" rel="stylesheet">

隱藏、取消隱藏和管理隱藏的 Bootstrap 元素

有時候當您在某個檢視區時，可能需要在另一個檢視區中顯示元素，此時您可能會想要為了設計目的而隱藏元素。 

若要隱藏 Bootstrap 元素，以滑鼠右鍵按一下並選取「隱藏元素」。檢視會暫時隱藏元素。

若要檢視和取消隱藏已隱藏的元素，請按一下滑鼠右鍵並選取「管理隱藏的元素」。隱藏元素會出現灰色、雜湊背景。按一下眼睛圖示以取消隱藏元素。

新增 Bootstrap 組件

「插入」面板的「Bootstrap 組件」選項會列出您可以在 Dreamweaver 中加入至網頁的所有 Bootstrap 組件。根據連結至 HTML 頁面的 Bootstrap.css 檔案內的 Bootstrap 版本，其個別組件都會列在「插入」面板。例如，在 Bootstrap 4.0.0 版中，您會看到額外的組件，如卡片和標誌。同樣地，字形圖示、面板、色管和縮圖組件只有 Bootstrap 3.3.7 版提供。根據所用的 Bootstrap 版本，您會在「插入」面板中看到相應的組件。此外，微調控制項僅在 Bootstrap v4.4.1 中可用。

「插入」面板中的組件是根據以下條件填入：

• 成為焦點的文件：「插入」面板中的組件會根據連結至該文件的 Bootstrap 檔案中的 Bootstrap 版本來填入。 
• 網站偏好設定中的版本：若是非 Bootstrap 文件，Dreamweaver 會在「網站偏好設定 > 進階 > Bootstrap」中尋找版本。系統會根據此選項中的版本，填入適當的組件。依據預設，新網站的版本為 4.4.1。
• 儲存檔案的位置：對於不是任何網站一部分的非 Bootstrap 文件，「插入」面板會顯示 4.4.1 版組件。

若要新增組件，將它從面板拖曳至網頁。置放該組件之前，請注意視覺輔助工具，例如即時輔助線、準確插入 (使用 DOM)，以及定位小幫手。使用這些輔助工具，將組件迅速且精準地放置在網頁上。如需有關如何在網頁中插入元素的詳細資訊，請參閱「插入面板總覽」。

新增列

按一下所要的列，您想要在此位置後新增列。然後，按一下「新增列」圖示。Bootstrap 列以及兩個子欄元素 (各有六欄) 隨即加入。

新增列的程式碼如下所示：

<div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>

其中 * 代表 Dreamweaver 中目前的螢幕大小。

新增欄

選取所要的欄，然後按一下「新增欄」圖示。選取的欄會複製，但不含其子系。

所有的空白欄被指派 20px 最小高度。不過，這個高度實際上不會加入至頁面，在即時檢視中顯示只是讓您更容易在欄內插入元素。

複製列與欄

按一下您想要複製的列或欄，然後按一下右下角的複製圖示。整個列或欄會連同其內容一起複製。

調整欄大小及位移

調整欄大小及位移相當重要，特別是當您正在建立各種檢視區的互動式設計時。 

調整欄大小

按一下所需的欄，並拖曳右邊的控點以調整大小。若是 Bootstrap 4.0.0 版文件，當您調整欄大小時，系統會加入 col-*-n 類別，其中 * 代表目前的媒體查詢 (sm、md、ld、xl)，而 n 代表它佔用的欄數。若是「超小型」螢幕大小，系統會加入 col-n 類別。

若是 Bootstrap 3.3.7 版文件，當您調整欄大小時，系統會加入 col-*-n 類別，其中 * 代表目前的媒體查詢 (xs、sm、md 或 lg)，而 n 代表它佔用的欄數。

Dreamweaver 會偵測目前的螢幕大小，並加入適當的類別。若要調整欄大小以符合特定的檢視區，請使用右下角的選項或 Scrubber，變更檢視區大小。然後適當調整欄大小。

位移欄

按一下所需的欄，並拖曳左邊的控點以位移欄。位移會顯示為雜湊的區域。若是 Bootstrap 4.0.0 版文件，當您位移欄時，系統會加入 offset-*-n 類別，其中 * 代表目前的媒體查詢 (sm、md、lg 或 xl)，而 n 代表它佔用的欄數。

若是 Bootstrap 3.3.7 版文件，當您位移欄時，系統會加入 col-*-offset-n 類別，其中 * 代表目前的媒體查詢 (xs、sm、md 或 lg)，而 n 代表它位移的欄數。

Dreamweaver 會偵測目前的螢幕大小，並加入正確的類別。若要位移欄以符合特定的檢視區，請使用右下角的選項或 Scrubber，變更檢視區大小。然後適當位移欄。