Bootstrap 5.2.0的詳細介紹

Bootstrap v5.2.0終於穩定了!我們解決了更多的錯誤，改進了更多的文件，編寫了新的指南，建立了新的功能環境範例，還有更多！請繼續閱讀測試版和穩定版的亮點。

繼續閱讀，瞭解測試版和穩定版的亮點。

文件的重新設計

正如我們在測試版中所預覽的那樣，文件已經被重新設計了從我們的新主頁開始，我們對Bootstrap的功能有了更完整的表述，並更新了設計：

文件側邊欄的導航已被徹底修改，以使瀏覽更容易，一個全新的帶有搜尋歷史的DocSearch體驗，以及在移動端側邊欄和導航欄的新的響應式offcanvas抽屜：

我們甚至更新了導航欄中的版本選擇器，以便在次要版本之間進行交叉連結：

更新按鈕和輸入

隨著我們對文件的重新設計，我們用修改過的padding 和border-radius 來重新整理了按鈕和輸入。下面是我們按鈕的前後對比：

大量的新的CSS變數

我們幾乎所有的元件現在都有CSS變數，以實現真正的實時定製，更容易的主題化，以及（很快）從黑暗模式開始的顏色模式支援。你可以在每個文件頁面上看到有哪些CSS變數，比如我們的按鈕：

scss --#{$prefix}btn-padding-x: #{$btn-padding-x}; --#{$prefix}btn-padding-y: #{$btn-padding-y}; --#{$prefix}btn-font-family: #{$btn-font-family}; @include rfs($btn-font-size, --#{$prefix}btn-font-size); --#{$prefix}btn-font-weight: #{$btn-font-weight}; --#{$prefix}btn-line-height: #{$btn-line-height}; --#{$prefix}btn-color: #{$body-color}; --#{$prefix}btn-bg: transparent; --#{$prefix}btn-border-width: #{$btn-border-width}; --#{$prefix}btn-border-color: transparent; --#{$prefix}btn-border-radius: #{$btn-border-radius}; --#{$prefix}btn-box-shadow: #{$btn-box-shadow}; --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity}; --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

幾乎每一個CSS變數的值都是通過Sass變數分配的，所以通過CSS和Sass的定製都得到很好的支援。此外，還包括一些元件通過CSS變數進行定製的例子：

新版本_maps.scss

Bootstrap v5.2.0引入了一個新的Sass檔案與_maps.scss ，從_variables.scss ，以解決原始地圖的更新沒有應用到擴充套件它的二級地圖的問題。這並不理想，但它解決了人們在使用定製地圖時的一個長期存在的問題。

例如，對$theme-colors 的更新沒有被應用到依賴$theme-colors 的其他地圖上（如$utilities-colors 和更多），這就造成了定製工作流程的中斷。總結一下這個問題，Sass有一個限制，一旦使用了一個預設的變數或地圖，就不能更新。當CSS變數被用來組成其他的CSS變數時，也有一個類似的缺點。

這也是為什麼Bootstrap中的變數定製必須在@import "functions"; 之後，而在@import "variables"; 和其他匯入棧之前。這同樣適用於Sass地圖--你必須在它們被使用之前覆蓋預設值。以下地圖已被移至新的_maps.scss ：

• $theme-colors-rgb
• $utilities-colors
• $utilities-text
• $utilities-text-colors
• $utilities-bg
• $utilities-bg-colors
• $negative-spacers
• $gutters

你的自定義Bootstrap CSS構建現在應該是這樣的，有一個單獨的地圖匯入：

```diff // Functions come first @import "functions";

// Optional variable overrides here + $custom-color: #df711b; + $custom-theme-colors: ( + "custom": $custom-color + );

// Variables come next @import "variables";

• // Optional Sass map overrides here
• $theme-colors: map-merge($theme-colors, $custom-theme-colors); +
• // Followed by our default maps
• @import "maps"; + // Rest of our imports @import "mixins"; @import "utilities"; @import "root"; @import "reboot"; // etc ```

新的輔助工具和實用程式

我們更新了我們的助手和工具，使其更容易快速構建和修改自定義元件：

• 增加了新的.text-bg-{color} 輔助工具：你現在可以使用 .text-bg-* 幫助器來設定一個具有對比前景的background-color ，而不是設定單獨的.text-* 和.bg-* 實用程式，color 。

• 擴充套件了font-weight 實用程式，包括用於半黑字型的.fw-semibold 。

• 擴充套件了border-radius 實用程式，包括兩個新的尺寸，.rounded-4 和.rounded-5 ，以提供更多的選擇。

隨著v5的繼續發展，預計這裡會有更多的改進。

響應性的offcanvas

我們的Offcanvas元件現在有響應式的變化。原始的.offcanvas 類保持不變--它在所有視口中都隱藏了內容。要使其具有響應性，請將.offcanvas 類改為任何.offcanvas-{sm|md|lg|xl|xxl} 類。

新的例項庫和指南

從測試版開始，我們已經完全重寫了我們的Webpack指南和Parcel指南。我們還增加了一個新的Vite指南：

此外，我們還在新的twbs/examplesrepo中把這些指南中的每一個都變成了一個功能齊全的例子。我們甚至還在該庫中增加了幾個例子，並計劃建立更多的例子：

• 啟動器- 我們的CSS和JS的CDN連結
• Sass & JS- 通過npm匯入Sass、Autoprefixer、Stylelint和我們的JS包。
• Sass & ESM JS- 通過npm匯入Sass、Autoprefixer和Stylelint，然後用shim載入我們的ESM JS。
• Webpack- 通過Webpack匯入並捆綁Sass和JS
• Parcel- 通過Parcel匯入Sass、JS
• Vite- 通過Vite匯入Sass、JS
• Bootstrap圖示字型- 通過圖示字型匯入Bootstrap圖示

每個指南都與該repo中的一個新例子相匹配，而且幾乎所有的例子都可以在StackBlitz中立即使用。現在你甚至不需要在你的電腦上配置開發環境就可以開始使用Bootstrap。

我們有沒有提到，現在幾乎所有的程式碼片段都有一個在StackBlitz中開啟的按鈕？

還有更多!

• 引入了新的$enable-container-classes 選項：- 現在，當選擇實驗性的CSS Grid佈局時，.container-* 類仍將被編譯，除非該選項被設定為false 。容器現在也保持它們的溝槽值。

• 更厚的表格分隔線現在可以選擇加入：- 我們刪除了表格組之間較厚且較難覆蓋的邊框，並將其移至一個你可以應用的可選類，.table-group-divider 。請看錶格文件中的例子。

• Scrollspy已經被重寫以使用交叉點觀察者API，這意味著你不再需要相對的父級包裝器，廢棄了offset 配置，以及更多。希望你的Scrollspy實現能在導航高亮中更加準確和一致。

• 增加了.form-check-reverse 修改器，以翻轉標籤和相關複選框/收音機的順序。

• 通過新的.table-striped-columns 類，增加了對錶格的條紋列支援。

• 增加了一個新的實驗性保留資料屬性data-bs-config，可以將簡單的元件配置作為JSON字串存放。

• 為Scrollspy添加了新的smooth-scroll 。

獲取版本

前往http://getbootstrap.com獲取最新資訊，它也被推送到了npm：

sh npm i [email protected]