Bootstrap 5 新功能介紹

教學
Bootstrap

Bootstrap 是當今最受歡迎的 CSS 庫之一。它讓開發者能夠輕鬆使用美觀的樣式和組件，並創建響應式網站。使用 Bootstrap 可以節省開發者時間，特別是在幾乎每個項目中都會用到的組件上。

Bootstrap 5（當前主要版本，於2021年5月發布）帶來了許多變化和改進，包括新增組件、新類別、舊組件的新風格、更新的瀏覽器支持、移除部分舊組件等。

本文將探討 Bootstrap 5 中的變化、被淘汰的內容，以及最令人興奮的新增功能。

何時使用 Bootstrap（以及何時不使用）

Bootstrap 自稱為“全球最受歡迎的響應式、移動優先網站建設框架”，並且在 GitHub 上擁有 152k 星，這一說法並不誇張。特別是對於初學者來說，Bootstrap 是開始創建現代、整潔網站的好方法。它使得實現複雜、移動優先的設計變得容易，並提供了許多跨多個項目可能需要的組件。

Bootstrap 的學習曲線平緩，非常適合不需要構建步驟的靜態網站，因為您可以直接從 Bootstrap 的 CDN 引用庫。這與其他一些可能針對與捆綁器或任務運行器一起使用進行了優化的流行 CSS 框架形成對比。

你也應該意識到，Bootstrap並非萬能的解決方案。對於初學者來說，Bootstrap 可能會導致產生混亂且複雜的標記。此外，它是一個相對較大的庫，以千字節計（雖然每次更新都在改進這一點），因此如果你只使用它的一兩個功能，可能不是最佳選擇。如同任何抽象概念一樣，如果你對底層技術有深入理解，並能明智地決定何時使用它，Bootstrap 將會大有幫助。

從 Bootstrap 4 升級到 5

從 Bootstrap 4 升級到 5 通常相當簡單。Bootstrap 4 中大多數的組件、類別以及實用類別在 Bootstrap 5 中仍然可用。遷移時主要關注的是你使用的類別或組件是否已被棄用。如果已被棄用，通常會有替代方案或使用實用類別達到相同效果的方法。第二個重點是將需 JavaScript 功能的組件中的data-*屬性切換到data-bs-*。（我們將在下一節中更詳細地討論這一點。）

如果你使用 Bootstrap 的 Sass 文件，一些變數和混入已被重新命名。Bootstrap 5 有一個詳盡且詳細的部分專門介紹自定義，以及每個組件文檔頁面中關於 Sass 變數和混入的細節。

變更內容

Bootstrap 5 帶來了核心變革，對於作為一個庫的Bootstrap，這包括了所需的依賴變更、瀏覽器支援以及其他更多改動。同時，它也對我們在先前版本中慣用的組件和類別進行了調整。

不再依賴jQuery

從前幾個版本以來的一項重大變化是，jQuery不再是Bootstrap的依賴。現在，您可以在不包含jQuery的情況下，完整地使用Bootstrap，但仍需依賴Popper.js。這一變動使得在不需要或不使用jQuery的專案中使用Bootstrap變得更加容易，例如在與React結合使用Bootstrap時。

如果您的網站已整合jQuery，您仍可與Bootstrap搭配使用。若Bootstrap偵測到window物件中含有jQuery，它將自動將所有組件加入到jQuery的插件系統中。因此，若您從v4遷移至v5，無需擔心此變更，仍可根據需要與Bootstrap一同使用jQuery。

但若您的網站使用jQuery，卻不希望Bootstrap使用jQuery，該如何操作？您可以透過在文件的body元素上添加data-bs-no-jquery屬性來實現這一點：

<body data-bs-no-jquery="true">
</body>

Bootstrap如何在沒有jQuery的情況下運作？例如，在v4中，您會使用以下JavaScript代碼來建立一個Toast元素：

$('.toast').toast()

在Bootstrap 5中，如果您的網站已使用jQuery，您仍可使用相同的代碼來建立Toast元素。若不使用jQuery，則需改用類似以下的代碼來建立Toast元素：

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

此處僅使用 Vanilla JavaScript 查詢文件中具有 .toast 類別的元素，然後使用 new bootstrap.Toast() 在該元素上初始化 Toast 組件。

瀏覽器支援變更

直至 v4 版本，Bootstrap 原本支援 Internet Explorer (IE) 10 和 11。自 Bootstrap 5 起，對 IE 的支援已完全取消。因此，若您的網站需要支援 IE，在遷移至 v5 時應謹慎行事。

瀏覽器支援的其他變更包括：

  • Firefox 和 Chrome 支援現從版本 60 開始
  • Safari 和 iOS 支援現從版本 12 開始
  • Android 瀏覽器和 WebView 支援現從版本 6 開始

數據屬性的變更

Bootstrap 5 已更改通常用於其使用 JavaScript 作為功能一部分的組件的數據屬性的命名。先前，大多數依賴某些 JavaScript 功能的組件會有以 data- 開頭的數據屬性。例如，在 Bootstrap 4 中創建 Tooltip 組件：

<button 
  type="button" 
  class="btn btn-secondary" 
  data-toggle="tooltip" 
  data-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

注意使用 data-toggle 和 data-placement。在 Bootstrap 5 中，這些組件的數據屬性現在以 data-bs 開頭，以便輕鬆命名空間 Bootstrap 屬性。例如，在 Bootstrap 5 中創建 Tooltip 組件：

<button 
  type="button" 
  class="btn btn-secondary" 
  data-bs-toggle="tooltip" 
  data-bs-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

改用 data-bs-toggle 和 data-bs-placement 替代 data-toggle 和 data-placement。若您使用 JavaScript 在 Bootstrap 中創建組件，可能無需進行任何更改。但如果您的組件僅依賴數據屬性來運作，則需將所有以 data 開頭的數據屬性更改為以 data-bs 開頭。

已修復的錯誤

在 Bootstrap 4 的文件中，瀏覽器和設備部分列出了某些瀏覽器上出現的錯誤。這些錯誤在 Bootstrap 5 的同一列表中已不再列出。其中包括：

  • 在 iOS 上，觸控事件的元素應用了懸停樣式，這被視為不期望的行為。
  • 在 Safari 8 及以上版本中使用 .container 導致打印時字體大小過小。
  • 邊框半徑被驗證反饋覆蓋（但可通過添加額外的 .has-validation 類來修復）。

Bootstrap 4 文件中的錯誤和問題列表還詳細說明了在不支持的瀏覽器版本上發生的錯誤。

其他變更

還有許多其他變更，這些變更要麼微不足道，要麼不會造成顯著的、可察覺的變化。這些變更包括：

  • Bootstrap 5 現在使用 Popper v2。請確保升級您的 Popper 版本。Popper v1 將不再適用，因為 Bootstrap 5 需要 @popperjs/core 而非先前的 popper.js。

  • Bootstrap 5 現在可以作為瀏覽器中的模塊使用，採用的是 以 ECMAScript 模塊形式構建的 Bootstrap 版本。

  • 由於 Libsass 和 Node Sass（Bootstrap 4 中使用）現已棄用，Bootstrap 5 使用 Dart Sass 來將源 Sass 文件編譯成 CSS。

  • 一些 Sass 變數值有所變更，例如$zindex-modal從 1050 改為 1060，$zindex-popover從 1060 改為 1070，以及其他變動。因此，建議查閱 Bootstrap 5 文件中各組件或實用類別的 Sass 變數。

  • 先前，為了使元素隱藏但仍可供輔助技術發現，使用了.sr-only類別。此類別現已被.visually-hidden取代。

  • 以往，為了使互動元素隱藏但仍可供輔助技術檢測，您需要同時使用.sr-only和.sr-only-focusable兩個類別。在Bootstrap 5中，您只需使用.visually-hidden-focusable而無需.visually-hidden。

  • 具有名稱來源的引用現在會被<figure>元素包裹。

    以下是Bootstrap 5中引用的新樣式示例：

  • 在先前版本中，表格樣式是繼承的。這意味著如果一個表格嵌套在另一個表格內，嵌套的表格將繼承父表格的樣式。而在Bootstrap 5中，即使表格是嵌套的，它們的樣式也是彼此獨立的。

  • 邊框工具現在支援表格。這意味著您現在可以使用邊框顏色工具來改變表格的邊框顏色。

    以下是在Bootstrap 5中使用邊框工具與表格的一個範例：

  • Breadcrumbs的默認樣式已更改，移除了先前版本中的默認灰色背景、內邊距和邊框半徑。

    以下是Bootstrap 5中Breadcrumbs的樣式示例：

  • 已將使用left和right來指代位置的類名更改為使用start和end。例如，下拉菜單中的.dropleft和.dropright分別被.dropstart和.dropend取代。

  • 類似地，使用l代表left和r代表right的工具類現在分別使用s代表start和e代表end。例如，.mr-*現在是.me-*。

  • 用於範圍輸入的.form-control-range類現已更改為.form-range。

  • 間距現在以rems設置，而非之前的px。

  • .no-gutters已重命名為.g-0，作為新增的間距類別之一（更多詳情將在後續部分介紹）。

  • 連結現在默認帶有下劃線，即使未懸停亦然。

  • 自定義表單元素類名已從 .custom-* 更改，成為表單組件類名的一部分。例如，.custom-check 被 .form-check 取代，.custom-select 被 .form-select 取代，以此類推。

  • 現在必須將 .form-label 添加到標籤中。

  • 警報、麵包屑、卡片、下拉菜單、列表組、模態框、提示框和工具提示現在使用相同的填充值，基於 $spacer 變量。

  • 徽章元素中的默認填充已從 .25em/.5em 更改為 .35em/.65em。

  • 切換按鈕的包裝器用於複選框和單選按鈕。標記現在也簡化了。在Bootstrap 4中，切換按鈕複選框是通過以下標記實現的：

    <div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> 已選中
  </label>
</div>

    在Bootstrap 5中，可以以更簡單的方式實現：

    <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">已選中</label>

  • 現在，按鈕的 active 和 hover 狀態在顏色上具有更高的對比度。

  • 輪播的右箭頭圖標現在使用來自 Bootstrap Icons 的 SVG。

  • 關閉按鈕的類別已從 .close 更名為 .btn-close，並使用 SVG 圖標代替 &times;。

  • 下拉分隔線現在更暗，以提供更好的對比度。

  • 導航列內容現在應該被包裹在一個容器元素內。例如在Bootstrap 4中：

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">導航列</a>
  ...
</nav>

    在Bootstrap 5中變為：

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">導航列</a>
    ...
  </div>
</nav>

  • 在 popover 元件中的 .arrow 類別現已替換為 .popover-arrow，而在 Tooltip 元件中的 .arrow 類別則已替換為 .tooltip-arrow。

  • popover 選項 whiteList 已重命名為 allowList。

  • 預設的 Toast 持續時間已更改為 5 秒。

  • Tooltip、dropdown 及 popover 元件中 fallbackPlacements 的預設值已變更為陣列 ['top', 'right', 'bottom', 'left']。

  • .text-monospace 已重新命名為 .font-monospace。

  • .font-weight-* 已重新命名為 .fw-*，而 .font-style-* 則變更為 .fst-*。

  • .rounded-sm 與 .rounded-lg 現已被一系列從 0 到 3 的 .rounded-* 圓角類別取代。

已移除的功能

變革總伴隨著代價。每當新版本帶來變動與增強時，也意味著一些舊有的支援功能將被移除。隨著此次新版本的推出，Bootstrap 的某些元件、實用類別或其他功能已不再提供。

大部分從Bootstrap 5中移除的項目，是因為同樣的效果可以透過使用工具類別來達成，而非將其作為獨立組件。此外，一些被移除的項目已證實未被使用或不必要。

以下是從Bootstrap 5中移除的項目列表：

  • 如前節所述，已完全移除對IE的支援。

  • 徽章顏色類別（例如，.badge-primary）已被移除，改用顏色工具類別（例如，.bg-primary）。

  • .badge-pill徽章類別，該類別使徽章呈現圓角風格，已被移除，改用.rounded-pill，達到相同效果。

  • 已移除.btn-block按鈕類別，因為使用顯示工具類別如.d-block即可達到相同效果。

  • 先前可用的Masonry.card-columns卡片佈局已被移除，因其帶來許多副作用。

  • 下拉元件的flip選項已被移除，改用Popper的配置。

  • Jumbotron元件已被移除，因為使用工具類別即可達成相同效果。

  • 部分排序實用類別（.order-*）已被移除，原先範圍從1至12，現在則調整為1至5。

  • 媒體元件已被移除，因為同樣效果可透過實用類別達成。

  • 已移除.thead-light與.thead-dark類別，因為.table-*變體類別可應用於所有表格元素。

  • 已移除.pre-scrollable類別，因其使用頻率不高。

  • 已移除.text-justify類別，原因是回應性問題，同時也移除了.text-hide類別，因其方法過時不應使用。此外，.text-*類別不再為連結添加懸停或焦點狀態。這些.text-*類別應替換為.link-*類別。

  • 擁有多個輸入或元件的輸入群組不再需要使用.input-group-append和.input-group-prepend。應該包含在群組中的元素可以直接作為.input-group的子元素添加。

    以下是使用具有多個輸入的輸入群組的示例：

  • .form-group、.form-row 和 .form-inline 已經被布局類別取代。

  • .form-text 不再有固定的 display 屬性。該元素的顯示將取決於元素本身是塊級還是行內元素。

  • 對於具有 multiple 的 <select> 元素，驗證圖標已被移除。

  • .card-deck 類別已經被網格類別取代。

  • 負邊距現在默認被禁用。

  • .embed-responsive-item 元素現在被移除，改為將樣式應用於所有比例的子元素，這在之前是響應式嵌入（更多內容將在下一節介紹）。

新功能

最後，Bootstrap 在第 5 版中為其庫帶來了許多令人振奮的新增內容。這些變化包括新功能、新支援的概念、新組件、新實用類別等。

Responsive Font Sizes 現已預設啟用

Responsive Font Sizes（RFS）在之前的 Bootstrap 版本中，它是預設禁用的。Bootstrap 5 將 RFS 預設啟用，使得 Bootstrap 中的字體更具響應性。RFS 是 Bootstrap 創建的一個副項目，最初用於按比例和響應式調整字體大小。現在，它也能夠對邊距、填充、盒子陰影等屬性進行相同的操作。

它的基本功能是根據瀏覽器尺寸計算最合適的數值，並在編譯時將這些計算轉換為 calc 函數。使用 RFS 也放棄了先前使用 px 的做法，改用 rem，這有助於實現更好的響應性。

如果你正在使用 Bootstrap 的 Sass 文件，現在你可以使用 RFS 提供的混合，包括 font-size、margin、padding 等，這讓你能確保你的組件和樣式是響應式的。

從右至左的支援

Bootstrap 5 新增了從右至左（RTL）的支持，這得益於 RTLCSS。由於 Bootstrap 在全球範圍內被廣泛使用，因此默認提供 RTL 支持是一個重大且重要的步驟。因此，Bootstrap 5 放棄了特定方向的命名（例如使用 left 和 right），轉而採用 start 和 end。這使得 Bootstrap 足夠靈活，能夠適應從左至右（LTR）和從右至左（RTL）的網站。例如，.dropleft 現在變為 .dropstart，.ml-* 變為 .ms-*，等等。

為了讓 Bootstrap 識別並在你的網站上應用 RTL 樣式，你需要將 <html> 的 dir 設置為 rtl，並添加一個 lang 屬性，其值為網站的 RTL 語言。例如，lang="ar"。

最後，你需要包含 Bootstrap 的 RTL CSS 文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

這樣一來，你的網站就將支持 RTL。

新增斷點

Bootstrap 5 引入了新的斷點 xxl，針對寬度大於或等於 1400px 的設備。此前，最高的斷點是 xl，針對寬度大於或等於 1200px 的設備。這一變化使得對於屏幕較大的設備能夠提供更好的響應性，因為之前的 xl 斷點已不足以應對。

使用新的斷點與其他斷點類似。例如，要為寬度大於或等於1400px的設備應用內邊距，您可以使用類.p-xxl-2。

改進的文檔

雖然這不是庫本身的一部分，但值得注意的是Bootstrap文檔的改進。Bootstrap 5的文檔在內容組織上更佳，因為具有更詳細信息的組件現在擁有自己的部分。例如，Bootstrap 4中的表單組件只是一個包含所有組件的頁面。而在Bootstrap 5中，表單組件的文檔是獨立的部分，包含表單控件、選擇、輸入組等不同子組件的子部分。

此外，通過側邊欄，文檔的導航現在更容易，特別是在較小的屏幕上。在Bootstrap 4中，目錄側邊欄無法在小設備上看到，這使得在頁面上找到所需的章節更加困難。在Bootstrap 5中，目錄始終在所有屏幕尺寸上可見。

此外，在Bootstrap 5中，您可以在每個組件的頁面上找到所有的Sass變量、混合和函數。以前，只有一個主題頁面，其中包含一些如何更改Bootstrap主題變量的細節。現在，有一個自定義部分，其中包含更多關於如何自定義Bootstrap主題的詳細信息。

新的組件

Bootstrap 5 引入了一些新組件到庫中。其中一些組件原本是其他組件的一部分，現在則成為獨立組件。

手風琴

以往，手風琴是可摺疊組件的一部分，並非獨立組件。在 Bootstrap 5 中，手風琴是一個新組件。手風琴帶來了一個新類別，.accordion，內含一列手風琴項目。此外，與 Bootstrap 4 中的舊風格相比，手風琴擁有新的樣式。以下是手風琴組件的一個範例：

Bootstrap 5 還添加了一些類別來改變手風琴的樣式。例如，.accordion-flush 移除了默認手風琴的一些樣式，如背景或邊框顏色。您還可以通過從其 .accordion-collapse 元素中移除 data-bs-parent 屬性，使手風琴項目始終保持展開狀態。

Offcanvas

另一個新組件是Offcanvas，允許您創建一個覆蓋式的側邊欄。這通常是網站上用於在小設備上顯示菜單的側邊欄。您可以通過使用 .offcanvas-start（在 LTR 中為左）、.offcanvas-top（頂部）、.offcanvas-end（在 LTR 中為右）和 .offcanvas-bottom（底部）將其放置在頁面的任何一側。您還可以指定 Offcanvas 是否應該有背景。以下是使用 Offcanvas 組件的一個範例：

浮動標籤

浮動標籤是表單元件中的新組件。它能讓您建立一個輸入欄位，其標籤最初看似佔位符，當輸入欄位獲得焦點時，標籤會浮動至輸入欄位上方，位於值的上方。此功能也適用於<select>元素和<textarea>元素。以下是使用浮動標籤的範例：

其他新增項目

除了新的組件外，還為現有組件添加了新類別、新實用類別、新輔助類別等。以下是Bootstrap 5中所有其他新增項目的列表：

  • 新增了類別.row-cols-auto，允許列採用其自然寬度。

  • A new utility class has been added to justify content called .justify-content-evenly.

  • 先前，列之間的間距是使用間距實用程式實現的。現在，您可以使用新的間距佈局實用程式來設置列之間的間距。要設置水平間距，請使用.gx-*。要設置垂直間距，請使用.gy-*。要同時設置水平和垂直間距，請使用.g-*。

  • A start script has been added to the Bootstrap package when installed with npm or Yarn. The start script compiles the CSS and JavaScript files, builds the documentation, then starts a local server.

  • 垂直對齊工具類現在可以用於表格。

  • A new class .caption-top has been added, which allows placing the caption of a table at the top rather than at the bottom.

  • 現在有一個選項可以改變麵包屑中的分隔符，使用CSS變數--bs-breadcrumb-divider。

    這裡有一個將分隔符更改為>>的示例：

  • 新增了使用類別.carousel-dark的輪播圖暗色變體，以及使用.dropdown-menu-dark的下拉菜單暗色變體。

  • 下拉菜單新增了一個自動關閉選項，可以改變下拉菜單關閉的默認行為。默認情況下，點擊下拉菜單外或下拉菜單項時，下拉菜單會關閉。通過將data-bs-auto-close數據屬性設置為inside，可以使下拉菜單在點擊下拉菜單項時關閉，而在點擊下拉菜單外時不關閉。也可以將其設置為outside，這樣下拉菜單只會在點擊下拉菜單外時關閉。最後，可以將其設置為false，使下拉菜單只在再次點擊下拉菜單按鈕時關閉。如果使用JavaScript初始化下拉菜單，可以使用autoClose選項代替數據屬性。以下是其使用示例：

  • 表單中的文件輸入現在有改進的樣式。

  • A new color input has been added, using the class .form-control-color.

  • A new datalists input type has been added, which simulates a typeahead select field. Here’s an example:

  • Sass變量中新增了顏色色調和陰影。

  • 新增了兩個顯示標題大小.display-5和.display-6。

  • 新增了一個關閉按鈕的白色變體.btn-close-white。

  • 下拉菜單現在可以包含包裝在<li>元素中的.dropdown-items。

  • 列表群組中的項目現在可以使用新類別.list-group-numbered進行編號。

  • 分頁元件中的連結新增了transition屬性，提升了其樣式。

  • 新增了.bg-body類別，將body的背景色設為白色。

  • 新增了定位工具類別，用於設定元素的top、left、right或bottom屬性。例如，.top-0。

  • 新增了.translate-middle-x和.translate-middle-y類別，方便地分別將絕對定位的元素水平和垂直居中。

  • 新增了邊框寬度實用類別.border-*，範圍從1到5。

  • 新增了顯示實用類別.d-grid和間距實用類別.gap。

  • 新增了行高實用類別.lh-1、.lh-sm、.lh-base和.lh-lg。

  • 新增了比例助手，取代了先前的響應式嵌入助手。類別名稱經過更名，將embed-responsive替換為ratio，by替換為x。例如，原先的.embed-responsive-16by9現在變為.ratio-16x9。

  • A new option popperConfig has been added to Dropdowns, Popovers and Tooltips. This option can be used to make changes to Popper’s configurations.

  • 新增了.fs-*字體大小實用工具，因為RFS現在默認啟用。

結論

Bootstrap一直是過去十年中最領先的CSS庫之一。它讓開發者能夠輕鬆建立響應式網站並提供良好的用戶體驗。隨著Bootstrap 5的添加和改變，這一過程將更加容易，並將允許改進網站設計和提供良好的用戶體驗。如果你正在使用Bootstrap 4並考慮遷移到Bootstrap 5，遷移過程簡單，你可能不需要做太多更改。

關於Bootstrap 5的常見問題（FAQs）

Bootstrap 4和Bootstrap 5之間的主要區別是什麼？

Bootstrap 4和Bootstrap 5之間最顯著的區別是後者移除了jQuery。Bootstrap 5現在使用原生JavaScript，這使得它更輕更快。另一個重大變化是從Jekyll切換到Hugo作為文檔靜態網站生成器。Bootstrap 5還引入了一個新的實用工具API，擴展的調色板，以及更新的表單控件。

如何從Bootstrap 4遷移到Bootstrap 5？

從Bootstrap 4遷移到Bootstrap 5涉及多個步驟。首先，您需要移除jQuery並將其替換為原生JavaScript。接著，更新您的Bootstrap CSS和JS鏈接至最新版本。您還需要將舊的類替換為Bootstrap 5中引入的新類。最後，更新您的表單控制項，並查看官方的Bootstrap遷移指南以了解任何額外的變更。

Bootstrap 5有哪些新功能？

Bootstrap 5引入了多項新功能。它現在使用原生JavaScript而非jQuery，使其更輕量且快速。它還引入了一個新的工具API，以實現更靈活的客製化，擴展的顏色調色板，更新後的表單控制項，以及一個新的SVG圖標庫。文檔方面也從Jekyll轉換到Hugo進行了改進。

Bootstrap 5中的新工具API是如何運作的？

Bootstrap 5中的新工具API允許更靈活的客製化。它讓您能夠創建自己的工具類，控制生成哪些工具，甚至修改現有的工具。這使得更容易根據您的特定需求和偏好來定制Bootstrap。

Bootstrap 5中擴展的顏色調色板有何目的？

Bootstrap 5中擴展的顏色調色板提供了更多客製化選項。它包含更廣泛的顏色範圍，讓您能夠創建更多樣化和視覺上吸引人的設計。這使得更容易將您的網站或應用程序的顏色方案與您的品牌顏色相匹配。

Bootstrap 5中的表單控制項是如何更新的？

在Bootstrap 5中，表单控件已更新为使用CSS而非JavaScript，以提高性能和简化操作。它们还采用了更现代、更简洁的设计风格。此外，自定义表单已被新的表单控件取代，以实现更好的统一性。

Bootstrap 5中的新SVG图标库是什么？

Bootstrap 5的新SVG图标库提供了超过1,000个免费、高质量的图标。这些图标可定制，并可用于网站或应用程序的各个部分，如按钮、菜单和警告。它们还针对可访问性进行了优化。

Bootstrap 5的文档有哪些改进？

在Bootstrap 5中，文档通过从Jekyll切换到Hugo作为静态网站生成器而得到改进，使得文档更快速、更易于使用。它还包含了更多的示例和解释，帮助您有效理解如何使用Bootstrap。

Bootstrap 5是否兼容所有浏览器？

Bootstrap 5与所有主流浏览器的最新版本兼容，包括Chrome、Firefox、Safari和Edge。但是，它不再支持Internet Explorer。这是因为Internet Explorer已过时，不支持许多现代网络技术。

如何开始使用Bootstrap 5？

要开始使用Bootstrap 5，您可以从官方Bootstrap网站下载。您也可以使用CDN将Bootstrap包含在您的项目中。一旦拥有Bootstrap，您就可以在HTML文件中开始使用其类和组件。请务必查看官方Bootstrap文档以获取更多信息和示例。

Source:
https://www.sitepoint.com/bootstrap-5-new-features-examples/