bootstrap4的案例分析

這篇文章主要介紹了bootstrap4的案例分析，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

Bootstrap 曾經(jīng)風頭無兩，是人們?nèi)腴T前端的首選 CSS 框架，很多寫后端的程序員的 side project 也經(jīng)常使用它來搭建項目主頁、demo 等等。

歷經(jīng)三年開發(fā)，前端框架 Bootstrap 4 正式發(fā)布了。然而今天的 Web 世界已經(jīng)和當初 Mark Otto 發(fā)布 Bootstrap 時的情況大為不同，一些開發(fā)者由此質(zhì)疑它的更新是否還有意義。

V4 版本的主要更新有：

改進的網(wǎng)格系統(tǒng)（默認情況下為 Flexbox）

現(xiàn)在使用 Sass（取代了 Less）

不支持 IE8、IE9 和 iOS 6

重寫 JavaScript 插件

現(xiàn)在使用 rem 取代了 px。

準備從 V3 版本升級的開發(fā)人員需要先做測試，可能還要解決一些問題。新版整體上和舊版接近，但多了一些突破性的變化。下面的遷移指南列出了變化內(nèi)容的詳情：

https://getbootstrap.com/docs/4.0/migration/#by-component

Bootstrap 的優(yōu)勢之一是其網(wǎng)格系統(tǒng)。這一系統(tǒng)為網(wǎng)頁提供了一種可聲明的方式來渲染網(wǎng)格系統(tǒng)中的內(nèi)容，不需要額外的步驟就能使流式內(nèi)容兼容桌面端和移動端。

Bootstrap 4 的網(wǎng)格系統(tǒng)使用的是幾乎所有的現(xiàn)代瀏覽器都支持的 flexbox。因為引入了這一更新等原因，新版只支持 IE10 以上和 iOS7 以上。如果項目仍需兼容舊式瀏覽器，開發(fā)人員就要繼續(xù)使用 Bootstrap 3。但是，Bootstrap 3 的維護已經(jīng)在 2016 年結(jié)束了。

Bootstrap 最初于 2011 年發(fā)布，當初是作為 Twitter 的一個產(chǎn)品誕生的，號稱是“世界上最流行的 HTML、CSS 和 JS 庫”，但其增長趨勢如今似乎已經(jīng)到頭了。Dan Tao 等人曾批評 Boostrap 的緊耦合和缺乏語義的缺陷：

最早看來很棒的一堆開發(fā)組件，如今演變成了堆積如山的技術(shù)債務(wù)。開發(fā)者的 HTML 充斥著帶有 Bootstrap 特定屬性的深度嵌套結(jié)構(gòu)。

V4 的第一個 alpha 版本發(fā)布于 2015 年 8 月，兩年后發(fā)布了第一個 beta 版本。但 Bootstrap 4 是否生不逢時？它的網(wǎng)格系統(tǒng)是最大的賣點之一，但主流瀏覽器普遍采用 CSS 網(wǎng)格，意味著 Bootstrap 4 新引入的，基于 flexbox 的網(wǎng)格已經(jīng)過時了。

Natalya Shelburne 是紐約時報的一位軟件工程師，她認為 CSS 網(wǎng)格才是未來：

CSS 網(wǎng)格不是什么黑客工具，它是一個很好的 web 布局工具。什么都不用安裝，也不需要預(yù)處理器，更用不著為了理解它的運作機制而絞盡腦汁。

此外，Ryan Oglesby 則認為，使用基于組件的樣式技術(shù)（如經(jīng)常與 React 或 Vue.js 一起使用的技術(shù)），就不需要傳統(tǒng)的“全局 CSS”技術(shù)了：

在 React 或 Vue.js 等 UI 庫的幫助下，現(xiàn)代 Web 應(yīng)用程序體系結(jié)構(gòu)已經(jīng)采用了松耦合，高內(nèi)聚的組件，這些組件通常將 HTML，CSS 和 JavaScript 放在同一個文件中。

當然，如果開發(fā)者想要做一些美觀漂亮、運行迅速的內(nèi)容，Bootstrap 的 JavaScript 插件（比如 Popover 和 Form 控件）仍是首選的框架。

感謝你能夠認真閱讀完這篇文章，希望小編分享bootstrap4的案例分析內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!