對於行動優先的回應式網站,請使用 Dreamweaver 中的 Bootstrap 初學者範本和拖放式 Bootstrap 組件。

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

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

註解:

目前支援的 Bootstrap 版本包括 4.3.1 版和 3.4.1 版。

常見問題

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

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

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

Dreamweaver 目前支援 Bootstrap 3.4.1 和 4.3.1 版:

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

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

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

如果您想要從頭開始建立 Bootstrap 文件,您隨時都可以依照「建立 Bootstrap 文件」一節所述的步驟進行。

我可以在 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.3.1」。
  • 若網站的 site root/css 路徑中沒有 Bootstrap CSS 檔案,在「管理網站 > 進階設定 > Bootstrap」中的 Bootstrap 版本會設定為「4.3.1」。

建立 Bootstrap 文件

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

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

使用 Bootstrap 初學者範本

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

  1. 按一下「檔案 > 開新檔案」。

  2. 在出現的「新增文件」對話方塊中按一下「初學者範本」,然後從 Bootstrap 範本清單中選取所需的範本。

  3. 按一下「建立」。

    隨即建立以您所選的範本為根據的 HTML 頁面。您現在可以視需要新增或刪除組件、編輯文字或資產來修改此頁面。

根據 Bootstrap 架構建立 HTML 文件

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

  1. 按一下「檔案 > 開新檔案」。

  2. 在出現的「新增文件」對話方塊中按一下「新增文件 > HTML」,然後按一下「Bootstrap」索引標籤。

  3. 若要建立新的 bootstrap.css 檔案 (和其他 bootstrap 檔案),請執行下列動作:

    指定您是要建立新的 Bootstrap CSS 還是使用現有的 CSS。

    如果您選擇建立新的 CSS,網站根目錄會建立一個「css」資料夾,而且 bootstrap.css 檔案會複製到這個新資料夾中。如果您選擇使用現有的 CSS,請指定路徑或瀏覽到 CSS 的位置。

    1. 按一下「建立新的」。

      建立新的 Bootstrap 文件
      建立新的 Bootstrap 文件
    2. (選擇性) 如果您想要將其他任何 CSS 附加到您的文件中,請按一下「附加 CSS」區段中的 隨即出現「附加外部樣式表」對話方塊。指定設定,並按一下「確定」。

    3. 「包含預先建立的版面」選項會提供基本 Bootstrap 文件結構。

      如果您不想要基本結構,並想要使用空白文件從頭開始,請取消選取「包含預先建立的版面」選項。

    4. (選擇性) 預設版面包含 12 欄,欄間距為 30 像素。預設的螢幕大小是 576 像素、768 像素、992 像素以及 1200 像素。

      如果您想要修改這些設定,請按一下「自訂」。bootstrap.css 檔案便會隨之修改。

      註解:

      若是 Bootstrap 3.4.0 版,預設的螢幕大小是 768 像素、992 像素和 1200 像素。

    5. 如果您想要開啟 Extract 面板 (若已關閉),請選取「使用 Extract 從 Photoshop 設計構圖建立頁面」。如此,您就能立刻從 Photoshop 構圖開始擷取資源。

      依據預設,新網站會使用 Bootstrap 4.3.1 版建立。在建立文件後,您會在網站根資料夾中找到 css 和 js 資料夾。不過,如果您要使用 Bootstrap 3.4.1 版建立網站,請選取「網站 > 管理網站」。選取網站根資料夾。按一下「進階設定 > Bootstrap」。在「Bootstrap 版本」下拉式欄位中,選取「3.4.1」。若是 Bootstrap 3.4.1 版,您會在網站根資料夾中看到 css、js 和 fonts 資料夾。

      選取 Bootstrap 4.3.1 版
      選取 Bootstrap 4.3.1 版

      當您建立 Bootstrap 4.3.1 頁面時,支援的 jQuery 版本為 3.3.1 版。Bootstrap 初學者範本會更新至 Bootstrap 4.3.1 版。

      在將 Bootstrap 組件新增至 Bootstrap 頁面時,您可以將 Bootstrap 4.0.0 頁面升級至 Bootstrap 4.3.1,並將 jQuery 版本升級至 3.3.1。當您將 Bootstrap 組件插入頁面時,請在出現的對話方塊中按一下「」。

      版本相容性確認對話方塊
      版本相容性確認對話方塊
      Bootstrap 3.4.1 確認對話方塊
      Bootstrap 3.4.1 確認對話方塊
      jQuery 彈出式對話方塊
      jQuery 彈出式對話方塊

      當您匯入 Bootstrap 4.0.0 網站,或將網站從先前版本的 Dreamweaver 遷移至下一版時,在「網站設定 > 進階設定 > Bootstrap」中的 Bootstrap 版本會設定為 4.3.1 版。

    註解:

    使用 Bootstrap 4.3.1 時,「含欄的格線列」的高度會從 1 像素變更為 0 像素。因此,若要讓它顯示在即時檢視中,您必須在「含欄的格線列」中新增一些內容。

  4. 若要使用現有的 Bootstrap 架構檔案,請執行下列動作:

    1. 按一下「使用現有的」,並指定 bootstrap.css 檔案的路徑。您也可以瀏覽至 CSS 儲存所在的位置。

      使用現有的架構檔案建立 Bootstrap 文件
      使用現有的架構檔案建立 Bootstrap 文件

    2. (選擇性) 如果您想要將其他任何 CSS 附加到您的文件中,請按一下「附加 CSS」區段中的 在「附加外部樣式表」對話方塊中,指定設定然後按一下「確定」。

    3. 包含預先建立的版面」選項會提供基本的 Bootstrap 文件結構。如果您不想要基本結構,並想要使用空白文件從頭開始,請取消選取「包含預先建立的版面」選項。

  5. 按一下「建立」。

註解:

建立的 bootstrap.css 檔案是唯讀的。因此,您無法使用 CSS 設計工具編輯這些樣式;CSS 設計工具中的「屬性」窗格在 Bootstrap 檔案中是停用的。

如果您想要修改 Bootstrap 文件的樣式,請建立另一個 CSS 檔案來覆寫現有的樣式,並將其附加到文件中。

開啟 Bootstrap 檔案

註解:

建議您在 Dreamweaver 中開啟及編輯僅在 Bootstrap 第 3 版及以上版本中所建立的文件。

您可以使用下列方法之一開啟 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">

註解:

Dreamweaver 中支援使用 link 與 import 標籤的 Bootstrap 樣式表。不過,不支援巢狀匯入 - 連結至樣式表,接著匯入另一個樣式表。

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

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

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

在 Dreamweaver 中隱藏 Bootstrap 文件
在 Dreamweaver 中隱藏 Bootstrap 文件

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

管理隱藏的 Bootstrap 元素
管理隱藏的 Bootstrap 元素

新增 Bootstrap 組件

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

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

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

若要新增組件,將它從面板拖曳至網頁。置放該組件之前,請注意視覺輔助工具,例如即時輔助線、準確插入 (使用 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,變更檢視區大小。然後適當位移欄。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策