Bootstrap 5.2.0的詳細介紹

語言: CN / TW / HK

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

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

文件的重新設計

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

New homepage

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

New docs page

New search

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

Docs version picker

更新按鈕和輸入

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

Updated buttons

大量的新的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變數進行定製的例子:

Custom button

新版本_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指南

Bootstrap guides

此外,我們還在新的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。

Examples StackBlitz repo

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

Code snippets 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

獲取版本

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

sh npm i [email protected]