下一代Bootstrap的5個(gè)特點(diǎn) 超酷炫!
Bootstrap 4的初始版已經(jīng)發(fā)布很久,還是希望大家都可以認(rèn)識(shí)到,這是對(duì)這個(gè)流行的(可能是最流行的)響應(yīng)式CSS框架一次重大的徹底整修。該項(xiàng)目創(chuàng)始人,Mark Otto說(shuō)這次的發(fā)布“幾乎涉及每一行代碼”,這并不是在開玩笑。
1.更輕巧的文件大小
有這樣一句話,“刪掉的代碼必定是已經(jīng)調(diào)試過(guò)的代碼,”——最好的重構(gòu)一定會(huì)導(dǎo)致項(xiàng)目刪除大量代碼,迅速瘦身。如果你下載初始版本,那么你會(huì)發(fā)現(xiàn),與最新的穩(wěn)定版本Bootstrap 3(3.3.5)——約為123KB大小(bootstrap.min.css文件)——相比,新的4.0.0初始bootstrap.min.css僅約為88KB。這可能是得益于IE8的支持。
2.從LESS切換到Sass
社區(qū)和性能是Bootstrap決定在版本4中作此切換的兩個(gè)主要原因。特別是,爭(zhēng)論的依據(jù)為:
----SaaS項(xiàng)目比LESS迭代更快
----切換到Sass提高了框架的性能
然而,從GitHub的頁(yè)面來(lái)看,LESS看上去仍具有人氣的優(yōu)勢(shì),但Bootstrap表示,Sass增長(zhǎng)的速度非常快。無(wú)論哪種方式,你都可以用正確的方法在Bootstrap 3中的Sass里做很多CSS編碼工作。有些人在懷疑的是,PostCSS——一款極有前途的模塊化工具,是否有強(qiáng)大的性能做預(yù)處理工作,以及是否應(yīng)該替代LESS。
3.切換Flexbox支持
Bootstrap 4現(xiàn)在支持使用W3C的Flexbox功能,F(xiàn)lexbox功能依然可以消弭所有瀏覽器的支持。出于這個(gè)原因,這是一個(gè)可選功能,如果需要的話,可以打開。
如果你需要快速?gòu)?fù)習(xí)Flexbox,那么我給你推薦一個(gè)指南—— 《A Complete Guide to Flexbox》 。還有新出來(lái)的關(guān)于Flexbox的一個(gè)視頻系列,如果你更喜歡這種方式的話。
4.重新調(diào)整卡片式UI布局模式
我和Andrew Trice都認(rèn)為這是一個(gè)早在2013年谷歌的Material Design中就應(yīng)該理解的重要的UI布局模式,現(xiàn)在Bootstrap 4將所有的籌碼都?jí)涸诹诉@一趨勢(shì)上。Bootstrap廢棄了wells、thumbnails和panels,轉(zhuǎn)而使用cards代替。
5.在ES6中重寫JS插件
ECMAScript 6在幾個(gè)月前終于定稿和標(biāo)準(zhǔn)化,Bootstrap緊跟這一最新的web技術(shù)。他們已經(jīng)重寫了所有的JavaScript插件以便于利用ES6的優(yōu)勢(shì),并且他們也已經(jīng)更新了一起的插件,“UMD支持,通用的拆卸方法,選擇類型檢查,等等等等。”
譯文鏈接:http://www.codeceo.com/article/bootstrap-5-cool-things.html
英文原文:5 Cool Things About the Next Version of Bootstrap
翻譯作者:碼農(nóng)網(wǎng) – 小峰
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附一個(gè)精彩的專題:Bootstrap學(xué)習(xí)教程
相關(guān)文章
js中AppendChild與insertBefore的用法詳細(xì)解析
這篇文章主要是對(duì)js中AppendChild與insertBefore的用法進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12text-align:justify實(shí)現(xiàn)文本兩端對(duì)齊 兼容IE
對(duì)于text-align 我們?cè)偈煜げ贿^(guò)了,可是它有個(gè)justify屬性,平時(shí)很少用到,就鮮為人知了。justify是一種文本靠?jī)蛇叢季址绞剑话銘?yīng)用于書刊雜志排版;合理運(yùn)用text-align:justify 有時(shí)會(huì)省去很多開發(fā)的時(shí)間,通過(guò)本文介紹text-align:justify實(shí)現(xiàn)文本兩端對(duì)齊 兼容IE2015-08-08javaScript中Math()函數(shù)注意事項(xiàng)
本文主要給大家分享了javascript中Math()函數(shù)的注意事項(xiàng),以及math對(duì)象的方法,十分的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下2015-06-06BootStrap中的table實(shí)現(xiàn)數(shù)據(jù)填充與分頁(yè)應(yīng)用小結(jié)
這篇文章主要介紹了BootStrap中的table實(shí)現(xiàn)數(shù)據(jù)填充與分頁(yè)功能的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05JavaScript 浮點(diǎn)數(shù)運(yùn)算 精度問(wèn)題
JavaScript小數(shù)在做四則運(yùn)算時(shí),精度會(huì)丟失,這會(huì)在項(xiàng)目中引起諸多不便,先請(qǐng)看下面腳本。2009-10-10