HTML 頁面建構器

程式碼範例與資料更新於 2026 年 10 月 13 日 · Mobirise

您要做的事

堆疊現成的區塊，替換範例文字並加入您的圖片。每個區塊的設定決定內距、背景、顯示項目數和欄數；不需要輸入任何標籤。

您得到的成果

靜態頁面：以 Bootstrap 5 為基礎的 .html 檔案，連同其 CSS 和 JavaScript。所有區塊皆為響應式，同一個檔案能從小型手機一路適應到寬螢幕。

費用

應用程式可免費使用，商業用途亦同，並內建含 200+ 區塊的基本佈景主題。每年 US$149，KIT 可解鎖付費資源庫（220+ 個佈景主題和擴充功能）並移除 Mobirise 品牌標示。

取得檔案

桌面應用程式不收費，可將完整網站發布到您指定的本機資料夾。網頁版的 Site Export 需要 BASE 或 GROW。

修改程式碼

使用付費方案時，Code Editor 擴充功能可開啟任一區塊或整個頁面，讓您修改其 HTML 和 CSS。

支援平台

Windows 7 或更新版本：MobiriseSetup.exe（約 105 MB）。macOS 10.13 High Sierra 起：Apple Silicon 或 Intel 版 .dmg（各約 134 MB）。以 Debian 為基礎的 Linux，例如 Ubuntu：.deb（約 102 MB）。版本 6.1.12；同一套引擎也能在瀏覽器中開啟。

主機

透過 FTP 或 FTPES 連到您現有的伺服器、GitHub Pages 儲存庫，或使用 mobirisesite.com 子網域，並免費提供 HTTPS（免費方案可建立 3 個網站）。

較不適合的情況

修改由其他工具產生的 HTML。Mobirise 只能載入 Mobirise 專案。

取自公開 Mobirise 示範網站的一個區塊：ControlM5 庫存管理網站的功能列，也就是頁面標題下方三張桌面版截圖中的第一張。邊框裝飾和三張重複的卡片已刪除，縮排也縮短了，其餘均未更動。

<section data-bs-version="5.1" class="features01 controlm5 cid-vgZMybvHpp" id="features01-2">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="content-wrapper">
          <!-- decorative border elements trimmed -->
          <div class="row items-wrapper">
            <div class="col-12 col-lg-3 item features-without-image">
              <div class="item-wrapper">
                <div class="iconfont-wrapper">
                  <span class="cards-icon mbr-iconfont mobi-mbri-layers mobi-mbri" style="color: rgb(150, 140, 120); fill: rgb(150, 140, 120);"></span>
                </div>
                <h4 class="item-title mbr-fonts-style display-4">
                  <strong>STOCK TRACKING</strong>
                </h4>
                <p class="item-text mbr-fonts-style display-4">
                  Monitor product quantities, locations.
                </p>
              </div>
            </div>
            <!-- three more cards with the same markup trimmed -->
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

出自 ControlM5 庫存管理示範網站的 features01 區塊，於 2026 年 10 月讀取並已縮短。橘色標示 Bootstrap 的網格 class，藍色標示 Mobirise 的區塊與文字 class。

container, row, col-12

Bootstrap 的網格。外層 row 內有一個全寬的欄；內層 row 則放四張功能卡片。

col-12 col-lg-3

卡片在手機上佔滿整個寬度，從 Bootstrap 的 lg 斷點（992 像素）起則各佔一列的四分之一，因此四張卡片在筆電上並排，在手機上垂直堆疊。

features01 controlm5 cid-vgZMybvHpp

區塊設計、它的佈景主題，以及其他區塊都沒有的專屬 class。在這個 class 之下，mbr-additional.css 設定了 5rem 的 padding-top 與 padding-bottom、深色背景和下邊框：這類數值正是區塊設定所控制的。

mbr-fonts-style display-4

全站共用的文字樣式。這裡的 display-4 將 Geist 字型設為 0.875rem，另外還有針對窄螢幕的流體字級規則。

data-bs-version="5.1"

將此 section 標示為 Bootstrap 5 標記語法。圖示的顏色直接寫在行內，圖示字形則來自 Mobirise 圖示字型。

並非最精簡：區塊還帶有純為外觀而存在的包裝元素，例如這裡刪掉的邊框元素。Bootstrap 建構器頁面會更深入說明區塊如何使用網格。

同一個示範網站所載入的檔案，依其 HTML 中的路徑整理而成；其他佈景主題的資料夾可能略有不同。

搜尋 HTML 頁面建構器時，會看到好幾類軟體。實用的分法是：產出可放到任何伺服器的資料夾，還是頁面存在於某個平台之內。

桌面建構器、程式碼編輯器和一款 AI 生成器，依目標是 HTML 時最重要的條件來比較：框架、程式碼存取權，以及檔案可以放在哪裡。其他工具勝出的列也一併保留。

資料來源：各廠商自家網站上的產品、價格和說明頁面，於 2026 年 10 月 13 日造訪。金額為不含稅的美元，每個儲存格都註明計費方式（一次付費、每月或每年）；在美國以外，Pinegrow 和 Adobe 會以當地貨幣報價。條款經常變動，購買前請再確認。

依手上的工作來選；Mobirise 對其中一些情況是正確答案，對另一些則不是。

不寫程式碼、不花錢，還要拿到檔案

Mobirise：免費應用程式，產生的 Bootstrap 5 頁面可放到您使用的任何主機。

改寫既有網站

Pinegrow 或 Dreamweaver，兩者都能開啟任何 HTML。Mobirise 無法匯入。

Tailwind CSS 或不用框架的標記語法

Pinegrow。

一次付費取得 Bootstrap 元件

Bootstrap Studio，一次付費 US$29 或 US$59。

自己輸入每個標籤，免費，在 Windows 上

CoffeeCup 的免費 HTML 編輯器。

在 Creative Cloud 內撰寫程式碼

Dreamweaver，如果您已經在付費使用 Adobe 的應用程式。

先免費看看 AI 設計

8B AI，設計階段免費，要上線則需每月 US$9 的 Pro 方案。

從描述產生草稿，再編輯區塊

Mobirise AI：每個提示詞產生 4 種設計方案，每月 3 次免費生成，之後從桌面應用程式匯出。

Mobirise 是為不想碰標記語法的人準備的 HTML 製作工具。在桌面應用程式中，從空白專案到檔案上傳伺服器，共有四個階段。