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]
- Bootstrap 5.2.0的詳細介紹
- 使用處理器API的Kafka流有狀態攝取
- 如何在Go中使用指標
- Kotlin中的正則表示式指南
- Kotlin中的正則表示式指南
- 【譯】瀏覽器拓展:SVG Gobbler
- 【譯】PostgreSQL
- 使用BLoC設計模式的Flutter狀態管理
- 為什麼要將Tailwind CSS與React Native一起使用?
- Laravel和Docker:使用Laravel Sail的指南
- 使用React Native圖表套件來實現資料的視覺化
- Firebase和Fauna。比較前端開發的資料庫工具
- 在NestJS應用程式中使用Firebase認證
- 使用Angular DataTables來構建功能豐富的表格
- Iced.rs教程。如何建立一個簡單的Rust前臺網路應用程式
- 用React前端構建一個多租戶的Amplify應用
- 使用多層結構優化React應用程式
- 如何用CapRover建立你自己的PaaS
- JavaScript測試。需要學習的9個最佳實踐
- 如何在React中實現功能標誌