Bootstrap是美國Twitter公司的設(shè)計師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開發(fā)的簡潔、直觀、強悍的前端開發(fā)框架，使得 Web 開發(fā)更加快捷。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動態(tài)CSS語言Less寫成。
創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的竹溪網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
下面我們來深入探討這個新版本的一些亮點！
新外觀
我們以 v4.5.0 版本內(nèi)文檔首頁的改進為基礎(chǔ)，為其他文檔帶來了新的外觀和體驗。我們的文檔頁面不再以完整寬度呈現(xiàn)，以提高可讀性，讓我們的網(wǎng)站更像是內(nèi)容風(fēng)格而非應(yīng)用風(fēng)格。此外我們還升級了側(cè)邊欄，以使用可擴展的部分（由我們自己的 Collapse 插件提供支持）來實現(xiàn)更快的導(dǎo)航。
.jpg)
我們還打造了一個全新的 Logo！詳情在新版穩(wěn)定下來后會進一步介紹，現(xiàn)在可以說的就是我們想給 Logo 來點新風(fēng)貌。
受一開始創(chuàng)建這個項目的 CSS 的啟發(fā)，我們的 Logo 有一種規(guī)則集的感覺——由花括號包圍的樣式。我們很喜歡它，希望大家也能喜歡。隨著我們不斷完善和發(fā)布新版本，預(yù)期它會逐漸更新到我們的文檔和博客中。
jQuery 和 JavaScript
在過去的十五年中，jQuery 為數(shù)以百萬計（甚至數(shù)以十億計？）的人們帶來了對復(fù)雜 JavaScript 行為的強大支持。就我個人而言，我將永遠感激它為我提供的能力和支持，它為我編寫前端代碼、學(xué)習(xí)新知識并利用社區(qū)中的插件提供了很多幫助。也許最重要的是，它永遠改變了 JavaScript，而這也是 jQuery 成功的里程碑。感謝所有 jQuery 貢獻者和維護者，他們?yōu)榻裉斓倪@一切付出良多。
得益于前端開發(fā)工具和瀏覽器支持的進步，我們現(xiàn)在可以移除 jQuery 這個依賴項了，而用戶并不會有什么感覺。我們的主要 JavaScript 維護者 @Johann-S 負責(zé)了這項艱巨的工作。它是這個框架多年來最大的變化之一，也意味著基于 Bootstrap 5 構(gòu)建的項目將大幅縮減文件大小，并提升頁面加載速度。
除了移除 jQuery 外，我們還對 v5 中的 JavaScript 做了其他一些更改和增強，主要側(cè)重于提升代碼質(zhì)量并試圖彌合 v4 和 v5 之間的鴻溝。我們的一大變化是放棄了 Button 插件的多數(shù)內(nèi)容，而僅使用 HTML 和 CSS 來切換狀態(tài)?，F(xiàn)在，toggle 按鈕由 checkbox 和 radio 按鈕提供支持，并且更加可靠。
你可以在 GitHub 上的第一個 v5 alpha 項目中查看 JS 相關(guān)更改的完整列表。
https://github.com/twbs/bootstrap/issues?q=label%3Ajs+project%3Atwbs%2Fbootstrap%2F11+is%3Aclosed
CSS 自定義屬性
如前所述，由于放棄了對 Internet Explorer 的支持，我們得以開始在 Bootstrap 5 中使用 CSS 自定義屬性。在 v4 版中我們只包含了一些顏色和字體的根變量，現(xiàn)在我們加入了 CSS 自定義屬性，讓很多組件和布局選項受益。
以我們的.table 組件為例，其中添加了一些局部變量，讓開發(fā)人員更容易做出 striped、hoverable 和 active 的表格樣式：
重慶分公司
重慶分公司
.table {
--bs-table-bg: #{$table-bg};
--bs-table-accent-bg: transparent;
--bs-table-striped-color: #{$table-striped-color};
--bs-table-striped-bg: #{$table-striped-bg};
--bs-table-active-color: #{$table-active-color};
--bs-table-active-bg: #{$table-active-bg};
--bs-table-hover-color: #{$table-hover-color};
--bs-table-hover-bg: #{$table-hover-bg};
// Styles here...
}我們正在努力利用 Sass 和 CSS 自定義屬性的強大能力，以打造更加靈活的系統(tǒng)。你可以在 Tables 文檔頁面中查閱更多相關(guān)信息。不久的將來我們還會在按鈕之類的組件中見到這些特性的應(yīng)用。
https://v5.getbootstrap.com/docs/5.0/content/tables/#how-do-the-variants-and-accented-tables-work
改進的自定義文檔
我們對文檔做出了諸多改進，提供了更多解釋，消除了歧義，并為 Bootstrap 的擴展提供了更多支持。首先要說的就是全新的“自定義”部分。
https://v5.getbootstrap.com/docs/5.0/customize/overview/
v5 的“自定義”（Customize）文檔在 v4 的“主題”（Theming）頁面上進行了擴展，提供了更多內(nèi)容和代碼段，幫助開發(fā)人員基于 Bootstrap 的源 Sass 文件構(gòu)建內(nèi)容。我們在這里加入了更多內(nèi)容，甚至提供了一個入門 npm 項目，幫助用戶快速上手。它也是 GitHub 上的一個模板存儲庫，因此你可以自由 fork。
https://github.com/twbs/bootstrap-npm-starter
我們也在 v5 中擴展了調(diào)色板。借助內(nèi)置的豐富顏色系統(tǒng)，你可以更輕松地自定義應(yīng)用的外觀，過程中無需離開代碼庫。我們還做了一些工作來改善色彩對比度，甚至在色彩文檔中提供了色彩對比度指標(biāo)。希望這能為 Bootstrap 支持的站點帶來更好的可訪問性。
表單更新
除了新的“自定義”部分外，我們還對“表單”（Forms）文檔和組件進行了全面修訂。我們將所有表單樣式合并到了一個新的“表單”部分（包括輸入組組件），以給予它們應(yīng)有的重視。
除了新的文檔頁面外，我們還重新設(shè)計了所有表單控件，移除了重復(fù)內(nèi)容。在 v4 版中，我們引入了一套豐富的自定義表單控件（check、radio、switch、file 等），但這些功能是對各款瀏覽器提供的默認設(shè)置的補充。在 v5 中，我們實現(xiàn)了完全自定義。
如果你熟悉 v4 的表單標(biāo)記，新內(nèi)容接受起來也會很容易。表單控件合并為一組，并重新設(shè)計現(xiàn)有元素（而不是做新元素或偽元素）后，我們就能提供更加一致的外觀和體驗。
每個 checkbox、radio、select、file、range 等元素都包含自定義外觀，以統(tǒng)一跨 OS 和瀏覽器的表單控件的樣式和行為。這些新的表單控件都是基于完全語義化的標(biāo)準(zhǔn)表單控件構(gòu)建的，不再需要多余的標(biāo)記，只有表單控件和標(biāo)簽。
請查閱新的表單文檔，告訴我們你的看法。
https://v5.getbootstrap.com/docs/5.0/forms/overview/
使用程序 API
我們很高興看到有很多人都在構(gòu)建新穎有趣的 CSS 庫和工具包，不斷改進我們構(gòu)建 Web 內(nèi)容的方式。因此，我們在 Bootstrap 5 中實現(xiàn)了全新的實用程序（utility）API。
$utilities: () !default;
$utilities: map-merge(
(
// ...
"width": (
property: width,
class: w,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
),
// ...
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
// ...
), $utilities);自從實用程序成為一種首選的構(gòu)建方式以來，我們一直在尋找適當(dāng)?shù)钠胶恻c，以便在 Bootstrap 中實現(xiàn)它們的同時提供控制和自定義功能。在 v4 中，我們使用了全局 $enable-* 類來實現(xiàn)它，在 v5 中則更進一步。但采用基于 API 的方法后，我們在 Sass 中創(chuàng)建了一種語言和語法，讓你可以及時創(chuàng)建自己的實用程序，同時還可以修改或刪除我們提供的實用程序。
我們認為這對于那些基于我們的源文件構(gòu)建內(nèi)容的開發(fā)人員來說是一大利好，歡迎大家嘗試。
注意！ 我們將之前的一些 v4 實用程序移到了新的“幫助程序”（Helper）部分。這些幫助程序是一些代碼段，比你常用的 property-value 更長一些。這改善了命名操作和我們的文檔內(nèi)容。
增強網(wǎng)格系統(tǒng)
從設(shè)計上來說，Bootstrap 5 并沒有對 v4 推倒重來。我們希望大家都能更輕松地升級到這個新版本上。因此，我們將大部分構(gòu)建系統(tǒng)保留在原位（只是拿掉了 jQuery），并且我們還保留了現(xiàn)有的網(wǎng)格系統(tǒng)。
以下是我們在網(wǎng)格中所做更改的摘要：
我們添加了一個新的網(wǎng)格層！那就是 xxl。
.gutter 類已被.g* 使用程序替代，它很像我們的 margin/padding 實用程序。我們還為網(wǎng)格 gutter spacing 添加了一些選項，以配合大家熟悉的 spacing 實用程序。
https://v5.getbootstrap.com/docs/5.0/layout/gutters/
表單布局選項已替換為新的網(wǎng)格系統(tǒng)。
添加了 Vertical spacing 類。
列默認不再是 position: relative。
下面是一個新的網(wǎng)格 gutter 類的快速示例：
.........
查看文檔以了解更多信息。
https://v5.getbootstrap.com/docs/5.0/layout/
CSS 網(wǎng)格布局正在日益完善，我們也在持續(xù)關(guān)注并學(xué)習(xí)它。預(yù)計將來的 v5 版本會進一步與之產(chǎn)生交集。
文檔
我們將文檔靜態(tài)站點生成器從 Jekyll 切換到了 Hugo。長期以來，Jekyll 一直是我們的首選生成器，因為它安裝和運行起來非常容易，并且部署到 GitHub Pages 也十分簡單。
但這些年來，我們在 Jekyll 上遇到了兩大問題：
1、Jekyll 要求安裝 Ruby
2、站點生成速度非常緩慢
相比之下，Hugo 使用 Go 編寫的，因此它沒有外部運行時依賴項，并且速度更快。我們構(gòu)建當(dāng)前的主分支站點（包括文檔的 Sass->CSS 轉(zhuǎn)換）只用了 1.6 秒。我們的本地服務(wù)器重新加載的時間從 8-12 秒縮短到了毫秒計，大大改善了處理文檔的體驗。
即將推出：RTL、offcanvas 等
我們的第一個 Alpha 時間不夠，還有很多內(nèi)容沒有加入進來，預(yù)計它們會在之后的版本中實現(xiàn)。這里先提前預(yù)告一下相關(guān)內(nèi)容。
RTL 即將到來！我們已經(jīng)用 RTLCSS 做了一個 PR，并且還將繼續(xù)探索邏輯屬性。就我個人而言，很抱歉花了這么長時間才解決這個問題，我們知道社區(qū)為此付出了多大努力。希望等待是值得的。
我們的 modal 有一個分叉的版本，實現(xiàn)了 offcanvas 菜單。這里還需要做很多工作來控制開銷，改善體驗。但有了 offcanvas 包裝器后，大家就可以放很多適合側(cè)邊欄的內(nèi)容（導(dǎo)航，購物車等）了。
我們正在評估其他許多更改，包括 Sass 模塊系統(tǒng)、更多 CSS 自定義屬性的應(yīng)用，將 SVG 嵌入 HTML 而不是 CSS 等等。
未來還會有很多改進，包括更多文檔改進、錯誤修復(fù)和體驗增強。請務(wù)必查看我們的 open issue 和 PR，以提供反饋、測試社區(qū) PR 或分享看法。
試用
可以訪問官網(wǎng)獲取新版本：
https://v5.getbootstrap.com/
或在命令行中輸入：
npm i bootstrap@next
以上就是Bootstrap 5 Alpha發(fā)布啦！不再依賴jQuery，放棄支持IE的詳細內(nèi)容，更多請關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！
