Bootstrap 建構器

2026 年 10 月更新 · 作者：Mobirise 團隊

工具類型

用於建立整個網站的視覺化 Bootstrap 5 建構器：每個佈景主題都以 Bootstrap 5 為基礎，每個區塊也都採用 Bootstrap 的網格系統和類別來標記。

系統與安裝檔

MobiriseSetup.exe（約 105 MB），適用於 Windows 7 及更新版本；兩個 .dmg 版本，分別為 Apple Silicon 和 Intel（各約 134 MB），適用於 High Sierra 10.13 及更新版本；.deb（約 102 MB），適用於 Ubuntu 和其他以 Debian 為基礎的 Linux。版本 6.1.12；同一套引擎也能在瀏覽器中執行。

費用

個人或商業用途皆為 US$0，內含基本佈景主題及其 200+ 區塊。付費訂閱 KIT（每年 US$149）可再增加 220+ 付費佈景主題和擴充功能，其中包括 Code Editor。

程式碼存取

Code Editor 可修改任何區塊或頁面的 HTML 標記和 CSS。若不使用它，可以匯出網站，再用任何編輯器處理。

輸出

靜態 HTML、CSS 和 JavaScript；桌面應用程式在任何方案下都能輸出，免費方案也不例外。可透過 FTP 或 FTPES 傳送，或發布到 GitHub Pages，也可輸出到資料夾，網站數量不限。

選用的 AI

Mobirise AI 能把一段簡短描述轉成附有文案和圖片的 4 種設計方案，您可以透過聊天或手動繼續調整。免費帳號每月可進行 3 次 AI 生成。

限制

編輯器只能載入以 Mobirise 建立的專案，因此無法開啟現有的 Bootstrap 網站或另行購買的範本。也沒有可依裝置隱藏或移動元素的視覺化控制項。

Network World 在 2015 年的評測中，稱 Mobirise 為「a free, simple, drag and drop mobile responsive Web site builder」（免費、簡單、可拖放的響應式行動網站建構器）。

Bootstrap 以容器（container）、列（row）和十二欄網格來排版頁面。作為 Bootstrap 網站建構器，Mobirise 讓每個區塊都遵循這套模式，因此熟悉 Bootstrap 的使用者一看匯出的標記碼就懂。

<section data-bs-version="5.1" class="features03 specialtym5 cid-vdJCkTr7dA">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card-wrapper large-radius">
          <div class="row content-wrapper justify-content-center">
            <div class="col-12 col-lg-7 card">
              <h2 class="mbr-section-title mbr-fonts-style display-2">
                Advanced Medical Management System</h2>
            </div>
            <div class="col-12 col-lg-5 card">
              <p class="mbr-text mbr-fonts-style display-7">…</p>
              <a class="btn btn-secondary-outline display-4" href="#">View More</a>
            </div>
          </div>
          <div class="row items-wrapper justify-content-center">
            <div class="item features-without-image col-12 col-lg-4">
              <h4 class="item-title mbr-fonts-style display-5">Records Management</h4>
              <p class="item-text mbr-fonts-style display-7">…</p>
            </div>
            <!-- two more cards: Smart Scheduling, Reporting Tools -->
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

來源：mobirise.com 上 SpecialtyM5 醫療管理軟體示範網站的功能區塊，已刪去內層包覆元素、圖示和內文。Bootstrap 自有的類別以琥珀色標示，Mobirise 佈景主題的類別則為藍色。

和示範網站一樣，匯出的網站會把 Bootstrap 的 CSS 和 JavaScript 套件、佈景主題樣式和圖片放在 assets 資料夾中；這些檔案在 HTML 頁面建構器指南中有詳細說明。

8B AI 和 Webflow 並非 Bootstrap 工具，但正在挑選 Bootstrap 網站建構器的人，常會一併納入考慮。Mobirise 表現較差的項目也照實保留。

資料於 2026 年 10 月 13 日取自各廠商的官方網站、價目表和說明頁面，以登入前顯示的美元價格為準。一次性價格為每份授權的價格；Mobirise 方案按年計費。促銷、地區定價和方案經常變動，付款前請向廠商再次確認。

這裡每款工具的成果都是響應式頁面。差別在於服務的對象：有人擺放現成區塊，有人自己撰寫類別，也有人只需要一個佈景主題檔案。

免費、視覺化、檔案歸您所有

Mobirise：Bootstrap 5 區塊、免費的桌面應用程式，任何方案都能匯出程式碼。

一次付費，擁有所有 Bootstrap 元件

Bootstrap Studio：一次性授權、支援 Bootstrap 3 至 5，並可匯入網站。

編輯既有的程式碼

Pinegrow：可開啟既有的 Bootstrap 檔案，並在原始碼旁顯示渲染後的頁面。

付費前先評估 AI 設計

8B AI，前提是您不在意是否為 Bootstrap 標記碼。

線上使用 Bootstrap 5 元件

Shuffle：大型元件庫，下載後在您的 IDE 中完成。

只要佈景主題：顏色、字型、變數

bootstrap.build，免費，提供 Sass 或 CSS，供您自己的建置流程使用。

逐一斷點微調版面

Webflow，前提是您可以不用 Bootstrap。

維護 Bootstrap 3 或 4 的專案

Bootstrap Studio 或 Pinegrow。Mobirise 佈景主題採用 Bootstrap 5。

網頁應用程式的管理後台

Bootstrap 管理後台範本。Mobirise 製作的是網站，而不是應用程式畫面。

Bootstrap 採行行動優先：類別會在其斷點以及所有更寬的螢幕上生效。寬度數值來自 Bootstrap 文件；實際行為則取自上方圖片所示的三個示範網站，其中幾乎每一欄都是 col-12 加上一個 col-lg 值。

請在區塊的參數中設定欄數，並在手機、平板和桌機預覽中確認效果。若要改變版面切換的位置，或用 d-none d-lg-block 在小螢幕上隱藏某些內容，請在 Code Editor 中編輯標記碼；示範頁面會載入 Bootstrap 完整的樣式表，因此這類工具類別可以運作。沒有任何視覺化開關可以依裝置做到這件事。

大多數調整都不需要寫程式碼。以下控制項依序從最快速到最需要技術：