[筆記] Bootstrap 5 Alpha 版本上線囉 來看看新增些什麼

章節連結

身為前端的熱門框架 – Bootstrap,在 2020 年的 6 月終於推出了第五世代的測試版本,有興趣的可以先上官網下載來玩玩看。新版本和目前的穩定第四世代版本,最大的差別在於新世代不使用 jQuery 以及不支援 Internet Explorer (IE)。同時也因應 2020 年的螢幕趨勢和這十年來的常見需求,有了新介面、配置和元件。
Bootstrap5


如何使用

如果你只是要線上先玩玩的話,你可以開啟一個 Codepen,然後在左側的 HTML 的最上頭載入以下程式碼:

接著就可以如同以往一樣,來使用 Bootstrap 了,熟悉的 class 名稱大多沒有變化。


重點摘要

移除 jQuery 和 IE 支援

就是如同標題所述,連同說明文件也做了同步更新。以最常見的 toggle class 改變狀態為例,第四世代和第五世代的說明文件如下(上圖為 BS4, 下圖為 BS5 Alpha):

bootstrap-5-alpha-version difference

bootstrap-5-alpha-version demo1

此外,第五世代的 toggle button 狀態開關,改採用 checkbox 的模式來執行,和第四世代以改變狀態 toggle class 不同。

CSS 原生自定變數使用

第四世代撰寫時,因為 IE 不支援此項功能的關係,所以能用的變數有限。隨著CSS 原生自定變數的支援度在 2020 年已經來到超過 90% ,所以能做到更為細緻的樣式。

更多樣化的色彩

熟悉的 primary, secondary…….等等,現在的顏色選擇更多。
bootstrap-5-alpha-version color style

新版的表格元件

原先第四世代放在 Components 裡頭的 Form (表格),在第五世代獨立出來成一個類別了。最明顯的新增,就是 iOS, Android 上有的開關樣式,你可以直接套用。
bootstrap-5-alpha-version switch demo

Grid 系統變化

  • 多了一個 xxl 大小,這個定位點是設在寬度 1400px
  • Gutter 改用 .g-1~5 的方式使用
  • 新版的 Columns 系列(col-1~12),不再預設 position:relative

Demo 展示


資料來源

https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/

按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:124