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]