Bootstrap 於 2026 年 10 月 8 日推出第六個主要版本的首個 Alpha 版，專案在 GitHub 累積 174,927 顆星標、78,541 次複製與約 2.39 萬次提交，npm 套件在最近一個月的下載量為 26,337,419 次。這次更新並非單純加入元件，而是把 JavaScript 外掛、Sass 編譯方式、類別命名規則與瀏覽器支援門檻一併改寫，官方在發佈說明中將此形容為「從底層現代化」的一次大改版，並明言後續仍會有多個 Alpha 版本，才會進入 Beta 與正式版階段。
Bootstrap 6 是什麼？
Bootstrap 6 是此框架於 2026 年 10 月 8 日發佈的首個 Alpha 版，改用 ESM 外掛、Sass 模組與前綴式類別，官方指累積安裝逾 17.5 億次。
Bootstrap 由 Mark Otto 與 Jacob Thornton 於 2011 年建立，目前由 Mark Otto 與 Julien Déramond 共同維護，以 MIT 授權釋出，定位是一套同時服務人類與人工智慧代理的開源設計系統。官方在部落格文章中指出，專案自推出以來累積安裝次數已超過 17.5 億次，而第六版的目標是把編譯流程與樣式系統推向瀏覽器原生能力，讓客製化同時能在編譯前與執行階段進行。
這套框架長期以元件齊全、預設樣式完整著稱，適合需要快速建立後台、儀表板與行銷頁面的專案。第六版延續同樣取向，但在底層依賴上做了明顯取捨，包括放棄舊版瀏覽器、移除部分歷史包袱，並把文件改寫成同時供人類閱讀與代理程式解析兩種格式。
Bootstrap 6 的 JavaScript 外掛為什麼全面改為 ESM？
第六版不再提供 UMD 打包與全域變數，外掛一律以 ESM 發佈；用 data 屬性的頁面加 type=”module” 即可，CommonJS 的 require() 需改寫。
外掛格式的調整是這一版對現有專案影響最直接的部分。官方說明，第六版只發佈 ESM 版本，UMD 打包與全域變數一併移除。若專案僅透過 data-bs-toggle 這類屬性使用元件，只需在指令碼標籤加上 type="module"；若直接呼叫外掛介面，則要改為明確匯入，例如從打包檔匯入 Tooltip。以 Vite、Webpack 或 Parcel 等現代打包器建置的專案，原有的 import 寫法仍然可用，並且能正確進行 tree shaking。
工具鏈亦同步更換。原始碼改以 TypeScript 撰寫並自行提供型別宣告，因此不再需要安裝 @types/bootstrap 這類外部型別套件，深度匯入路徑則維持可用。建置流程以 Rolldown 取代 Rollup 與 Babel，測試由 Vitest 搭配 Playwright 在真實 Chromium 中執行，取代原有的 Karma。官方提醒，使用 CommonJS 並以 require() 載入外掛的專案必須完成遷移。
Bootstrap 6 的 Sass 與 CSS 架構有什麼改變？
Sass 改用 @use 與 @forward 模組系統，視覺設定集中於 token map，「@import」已棄用，色彩模式改以 light-dark() 原生支援。
樣式層的重寫幅度比外掛格式更大。第六版全面轉用 Sass 模組系統，@import 被標示為棄用且不再支援客製化，全域選項集中到少數設定檔，_variables.scss 與 _variables-dark.scss 兩個長期存在的檔案已移除。視覺設定改由 token map 承載，這些對應 CSS 變數的映射以 defaults() 函式合併，開發者可只覆寫需要的值，不必重新宣告整份映射。
顏色與主題機制改採瀏覽器原生語法。調色盤以 oklch() 定義、以 color-mix() 產生變化，色彩模式不再需要複製整套樣式，而是以 light-dark() 在同一個屬性值中處理。半徑與間距各自由單一基準值推導出整套級距，因此調整一個數字就能帶動所有相關元件。自訂屬性在原始碼中不帶前綴，命名空間改由 PostCSS 在建置階段加入，$prefix 這個 Sass 變數因此被移除。此外，框架導入 CSS 階層層級以穩定優先順序，並使用容器查詢、範圍式媒體查詢與 @property 等較新的標準。
Bootstrap 6 的類別命名為什麼改用前綴？
第六版把響應式工具類與元件變體由中綴改為前綴，例如 .d-md-none 改寫為 .md:d-none，狀態修飾詞亦統一採用相同寫法，官方稱此舉讓命名位置一致。
命名的變動屬於破壞性變更，但規則相當單純：原本夾在類別中間的斷點與狀態，全部移到最前面並以冒號分隔。官方列出的對照包括 .d-md-none 改為 .md:d-none、.col-lg-6 改為 .lg:col-6、.opacity-50-hover 改為 .hover:opacity-50，以及 .justify-content-md-end 改為 .md:justify-content-end。元件層面亦有更名，.offcanvas-md 改為 .md:drawer，對應元件同時由 Offcanvas 更名為 Drawer。
自訂 Sass 若建立在斷點輔助函式之上，也需要跟著調整。breakpoint-infix() 更名為 breakpoint-prefix() 並改為回傳字串，loop-breakpoints-up 與 loop-breakpoints-down 兩個 mixin 對外暴露的變數由 $infix 改為 $prefix。官方在遷移指引中以 Tailwind CSS 的響應式寫法作對照，說明統一到前綴是為了讓不同類別的書寫順序保持一致。
Bootstrap 6 新增與更名了哪些元件？
第六版新增 Dialog、Chips、Stepper 與 Range，Drawer 取代 Offcanvas 與 menu，手風琴改以原生 details 元素驅動。
元件層面同時出現新增與更名。對話框改以原生 <dialog> 元素為基礎，抽屜元件由 Offcanvas 更名為 Drawer，選單元件由 Dropdown 更名為 menu 並附帶以選單為基礎的 combobox。新增元件包含 Chips 與 Chip Input、Stepper、具備軌道填色與刻度標記的 Range，以及整合第三方日期選擇器的輸入欄位。一次性密碼欄位被重寫為單一可存取的輸入元件，以渲染出的區塊呈現，解決了過去逐格輸入在貼上與截斷上的問題。
手風琴的改動最能反映這一版的技術取向。它改由原生 <details> 與 <summary> 元素驅動，展開與收合的動畫透過 interpolate-size、::details-content 等新標準以純 CSS 完成，過去必須以 JavaScript 量測元素高度才能做到的動畫因此不再需要指令碼。無障礙方面，新增跳至主內容連結、頁面區域標記與統一的焦點環；安全性方面，清理器改為封鎖 data: 與 vbscript: 形式的網址，以降低跨站指令碼風險。
Bootstrap 6 的瀏覽器支援門檻提高了多少？
第六版要求 Chrome 與 Edge 130、Firefox 132、Safari 18 以上，不提供降級樣式；第五版仍持續支援，官方在公佈終止日期前推出 v5.4.0。
支援門檻的調整幅度相當明顯。第六版要求 Chrome 與 Edge 130、Firefox 132 與 Safari 18 以上，對照第五版仍支援 Chrome 與 Firefox 60、Safari 12。官方解釋，新標準如 light-dark()、:has()、容器查詢、oklch()、color-mix() 與原生 <dialog> 是這一版的基礎，因此不再為舊環境提供降級樣式、供應商前綴或填充程式。
對仍需要支援舊瀏覽器的專案，官方明確表示第五版會繼續維護，並計劃在公佈第五版終止支援日期之前先推出 v5.4.0。官方亦提到，第六版雖然已用上多項新標準，但尚未涵蓋 CSS 錨點定位與對比色等能力，因此預期第七個主要版本的出現時間會比過去幾次大版本間隔更短。
Bootstrap 6 對 AI 代理提供了哪些文件支援？
專案新增 llms.txt 與 llms-full.txt 兩份純文字索引，並在儲存庫加入 skills 目錄，內含升級第六版、搭配建置工具與撰寫元件等代理任務指引。
文件層面出現專為代理程式設計的產出。官方提供 llms.txt 作為每頁文件的索引與描述，另提供 llms-full.txt 把全部文件串接為單一檔案，讓模型不必逐頁抓取。儲存庫亦新增 skills 目錄，內容是針對特定任務的指引，涵蓋從舊版遷移到第六版、在不同建置工具中使用框架、以及撰寫元件等情境。官方建議把代理程式指向對應檔案，使產出的程式碼遵循維護者當前的建議，而非依賴可能過時的既有資料。
網站本身也一併翻新。官方部落格與圖示網站改用 Astro 7 重建，加入以 Pagefind 為基礎的搜尋、分類頁面與新版面；圖示網站另支援以標籤查詢。跨站點的文件元件另抽出為內部套件 @twbs/bui，讓部落格、主站與圖示站共用同一套介面，同時避免導入完整單一儲存庫的複雜度。
Bootstrap 6 的專案數據與維護規模如何？
儲存庫累積 174,927 顆星標、78,541 次複製與約 2.39 萬次提交，貢獻者 1,669 位，MIT 授權，npm 套件最近一個月下載量為 26,337,419 次。
維護節奏維持在以核心維護者為中心的模式。第六版的開發在過去一年持續進行，官方在發佈文章中點名感謝共同維護者與多位貢獻者，並說明第五版與第六版會並行一段時間。儲存庫目前有 254 項未結議題與 6,609 位關注者，專案同時接受 Open Collective 上的企業贊助。
Bootstrap 6 與 Bootstrap 5 有何不同？
第六版改為 ESM 專用外掛、Sass 模組與前綴式類別，並提高瀏覽器門檻；第五版不再新增功能但仍持續支援，兩者可依專案環境並行使用。
兩版的差異集中在基礎建設而非功能清單。第五版延續中綴命名與 UMD 打包，客製化以 Sass 變數為主，相容的瀏覽器範圍較廣；第六版則要求較新的執行環境，換取以 CSS 變數為核心的執行階段客製化、原生色彩模式與更精簡的工具鏈。官方提供遷移指引，逐項列出命名變更、已移除的檔案與需要調整的匯入方式。
對正在維運的專案而言，升級成本主要落在三處：樣式表中所有響應式與狀態類別需要改寫、外掛載入方式需要調整為 ESM、以及部分自訂 Sass 需要改用 @use 與 @forward。由於第六版仍處於 Alpha，官方建議先在分支上完成評估，並透過 GitHub Discussions 的 v6 分類回報問題，再決定正式切換的時機。
Bootstrap 6 與 Tailwind CSS 相比如何？
Bootstrap 提供現成元件與預設樣式，Tailwind CSS 提供純工具類由開發者組裝介面；第六版的前綴命名與 CSS 變數取向，反映兩者互相靠近。
兩者的分歧在於問題設定的起點。Bootstrap 以現成元件為核心，適合需要快速產出介面、且願意接受既定視覺語言的專案；Tailwind CSS 以工具類為核心，把樣式組合交給開發者，彈性較高但需要自行建立元件層。第六版導入前綴式響應式寫法、以 CSS 變數為客製化介面，以及推出供代理程式閱讀的純文字文件，都與工具類框架近年的做法方向一致。
不過兩者的生態定位並未因此重疊。Bootstrap 仍附帶完整的元件實作、無障礙預設值與主題機制，開箱即可使用；Tailwind CSS 則把元件留給社群與周邊套件處理。對需要長期維護、且團隊成員背景不一的專案，Bootstrap 的約定成本較低；對追求高度自訂視覺的團隊，工具類框架通常更合適。
出處連結有哪些？
本文資訊整理自 Bootstrap 的 GitHub 儲存庫與官方部落格，包含第六版 Alpha 1 發佈說明、v6 遷移指引與專案定位。
- GitHub 儲存庫：https://github.com/twbs/bootstrap
- 第六版 Alpha 1 發佈說明：https://github.com/twbs/bootstrap/releases/tag/v6.0.0-alpha.1
- 官方部落格發佈文章：https://blog.getbootstrap.com/2026/10/08/bootstrap-6-alpha/
- 官方文件與遷移指引：https://getbootstrap.com/docs/6.0/
- 專案純文字文件索引：https://github.com/twbs/bootstrap/blob/main/llms.txt
總結：Bootstrap 6 適合什麼團隊？
適合已使用 Bootstrap 且願意投入樣式改寫的團隊，以及新專案欲採用 ESM 與 CSS 變數架構者；仍須支援舊瀏覽器的專案宜留在第五版並等待 v5.4.0。
第六版沒有重新設計框架的元件介面，而是把長年累積的技術債一次處理：編譯流程、模組格式、命名規則與瀏覽器相容策略。這種做法的代價是升級需要逐項檢視，好處是框架往後的客製化與維護成本會明顯下降，且與現代瀏覽器標準的距離縮短。
對已使用第五版且近期不會大改的專案，較務實的路線是先評估樣式表中受命名變更影響的範圍，再決定是否隨第六版正式版推進；對正在起步的專案，由於第六版仍為 Alpha，建議先在測試分支驗證建置工具鏈與第三方套件的相容性，再考慮導入。官方已表明後續還有多個 Alpha 版本，正式版之前仍可能出現變動。
