BootStrap 4正式版發佈（原文翻譯）

原文連接：http://blog.getbootstrap.com/2018/01/18/bootstrap-4/

關於Bootstrap

 

什麼是Bootstrap

Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。

歷史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發的。Bootstrap 是 2011 年八月在 GitHub 上發佈的開源產品。

Why Bootstrap

• 瀏覽器支持：基本支持大部分現代瀏覽器，不是IE6，是現代瀏覽器
• 響應式設計：自適應不一樣屏幕，包括該臺式機、平板電腦和手機等
• 移動設備優先：自 Bootstrap 3 起，框架包含了貫穿於整個庫的移動設備優先的樣式。
• 容易上手：首先它是開源的，而且有全面的文檔，有龐大的用戶羣提供各類定製的樣式主題等，最重要的是後臺硬，強大的團隊在一直維護和修復發現的問題。（不少國產項目作的很優秀，可是優秀優秀最後就消失了。很大緣由是沒有人維護和更新）

如今網上有不少基於Bootstrap的教程以及文檔翻譯，中文資料相對來講比較健全，同時基於Bootstrap設計的產品也有不少，不少插件也都有針對Bootstrap的主題資源提供，Bootstrap本身自己也支持定製化，基於Saas進行css文件構建，能夠在官網針對需求進行定製化的生成和下載。

版本延續

Bootstrap以前有過三個版本，如今流傳比較多得是V3.x版本，與v2.x版本相比，3這個版本對部分老舊瀏覽的兼容性處理已經被剔除（IE9一下等），與2018你那1月18日，官網發佈了Bootstrap 4正式版，官方公告上能夠看到v4針對以前又有了不少調整和改變。下文爲v4版本的發佈公告，使用google加上我的理解整理了一下，你們能夠參考一下。英文好的能夠直接看原文文檔，文章開始有連接。

 

Bootstrap 4

 

這真的須要咱們多年的努力，但Bootstrap 4終於來了！言語已經不能表達整個團隊和我爲這個版本發佈所感到的興奮，但我會盡我所能。感謝全部人，特別是團隊成員，以及全部貢獻代碼和提出Issue的人。謝謝。

自從咱們上一個測試版本以來，咱們一直在努力穩定咱們的CSS的幾個關鍵部分，完善咱們的文檔，爲它添加一些額外的驚喜功能，並計劃咱們的後續版本。咱們仍然有一些問題須要解決，但沒有什麼會阻止咱們發佈穩定的版本。

急於體驗一下嗎？轉到咱們的文檔站點並進行探索。請務必查看咱們的新示例和遷移文檔頁面！

想要點擊文檔以前知道更多？太好了，開始！

新內容

自從上一次測試以來，沒有發生重大改變，但咱們已經作出了一些關鍵的改進，並解決了一些棘手的錯誤。

• 打印樣式和實用程序類已更新。咱們改進了打印頁面的渲染方式，以確保頁面尺寸合理，而不是將其渲染爲移動設備。打印顯示實用程序還包括一系列新display值，以匹配咱們的標準顯示實用程序。

• 額外的border設置功能已添加（例如.border-top），默認爲1px的淺灰色邊框。如今，爲組件添加全部邊框或者某些邊框變得更加容易。

• 咱們$spacers和$sizes薩斯地圖已經更新，以容許更多的定製與咱們的色彩地圖工做相同的方式。您如今能夠在CSS中一致地添加，刪除或替換全部鍵值對。前往咱們的主題文檔瞭解更多信息和示例。

• 爲咱們的Theming文檔添加了文檔，使用咱們提供的CSS變量來生活在邊緣，而不想使用Sass。

• 增長了對flexbox網格進行更多控制的響應.order-0和.order-last類。

另外，咱們對重用和擴展變量和通常的代碼清理作了大量的改進。可是，這還不是所有。

新的例子

幾乎每一個例子在v4正式版本的都進行了調整。咱們刪除了一些過期的例子，添加了一些新的例子，而且完全改變了其餘一些例子。

如下是對每一個更改的簡要說明：

• 您可能已經看過咱們的相冊示例，可是已經爲此版本進行了更新，以在照片卡中添加更多內容並改進了移動渲染。

• 訂價列表是這個版本的全新功能，是一個徹底自定義的頁面，使用咱們的實用程序和卡組件構建。它的響應速度和容易擴展。

• 付款表單是一個全新的，很通用的例子，用到了表單佈局、表單驗證樣式，柵欄系統等等。

• 產品列表也是新的，仿蘋果風格的營銷頁面的，使用了咱們大部分utility。不要太認真！

• 博客模板已經從頭改寫了。拋棄了原來的藍色頭部兩列的佈局方式。咱們已經創建了一個精采的帖子和響應導航雜誌式的佈局。

• 儀表板也進行了大修，以提供實時的ChartJS示例，包括帶羽毛圖標的刷新邊欄，而且是半響應式的。

• 浮動標籤是全新的，並以咱們的登陸示例爲基礎，提供僅CSS實現浮動輸入標籤（placeholder固定在輸入框內）。這是個實驗，咱們把它帶到Bootstrap以前可能會看到重大變化。

• Finally, Offcanvas has been rewritten from the ground up to show off a navbar-built drawer, horizontal scrolling navigation, and some custom lists built on media object and utilities.

封面，傳送帶，登陸和咱們的框架示例只進行了一些小的更新，以提升代碼質量和修復一些小的錯誤。總的來講，這是咱們的代碼示例的一次大的更新，我很高興添加這些並在將來的迭代版本中添加更多。

引導文檔（應該是這個意思，就是原來那個一步一步介紹的文檔）

v4穩定版的新功能簡要介紹了爲何咱們要在Bootstrap中作的事情。咱們的目的是在編寫代碼，構建短消息和調試時提煉和記錄咱們頭腦中全部的事情。其中大部份內容都集中在編寫響應式CSS的概念和策略上，使用簡單的選擇器以及限制須要編寫多少JavaScript。

檢查新的引導文檔，若是碰到什麼問題或建議反饋或者缺乏什麼請及時反饋給咱們。

已知的問題

沒有哪次發佈能修復每個bug，這一點對咱們的v4穩定版本一樣有效。在時間和範圍容許的狀況下，咱們但願首先在次要版本（v4.1）或修補程序版本（v4.0.1）中解決一些問題。

• 輸入組，驗證和圓角。我重寫了Beta 3的內容，但我認爲它是錯誤的。咱們有一些圓角的問題，咱們能夠用CSS修復它們而不破壞向後兼容性的惟一方法是限制組件的可擴展性。咱們可能須要一個修飾符類來避免一些粗糙的CSS，並知足全部的關鍵功能。查看問題和交叉連接的公關了解更多詳情。

• 特別是表變形，.table-active有一個怪異的選擇，咱們已經無心間留下來，由於之前的版本。該缺陷致使的雙重應用rgba()背景顏色 -once爲<tr>，一次用於任何<td>/ <th>內的元件。

咱們的第一個補丁版本還有一些尚未肯定或者肯定的問題，可是在咱們下一個小版本發佈以前，咱們預計會有一些問題獲得解決。咱們可能還會在下一個補丁版本中打包咱們的存儲庫的缺省分支變動。咱們沒有時間去適應測試一個巨大的不一樣代碼庫的合併，而沒有考慮到v3的整個Git歷史。再次，更多。

下一個版本

說到發佈，咱們對於咱們的發展勢頭感到很是興奮。咱們的GitHub項目板在即將發佈的版本中大部分都是最新的，因此請隨時加入並觀看。咱們的下一個版本將是v4.1（等待任何bug修補程序），並將重點介紹一些小的新功能，實用程序，響應字體大小等等。從那裏咱們有更多的次要版本圍繞另外一組功能集合。

咱們的目標是根據總體範圍使RTL成爲即將發佈的次要版本的一部分。咱們花了很長的時間去作這件事，可是咱們正在努力。咱們目前的計劃是把重點放在咱們的構建工具和組件上，因此你有條件的服務，bootstrap.min.css或者bootstrap-rtl.min.css。在公開的問題上請提供任何反饋意見; 當咱們準備好的時候，咱們會在社區的幫助下發起新的拉動請求。

值得重申的是每一個次要版本都會帶來一個新的託管版本的文檔。如今，咱們已經getbootstrap.com/docs/4.0/發佈了v4.1，咱們會有這個補充getbootstrap.com/docs/4.1/。以前的版本將繼續從咱們的導航連接，已是v3.x和最後的v4 alpha的狀況。

主題更新

引導主題今年獲得重大更新！自從咱們最初推出Bootstrap Themes以來，咱們一直很是激動，咱們終於準備好分享下一步的計劃。

在過去的幾個月中，咱們一直在與一些使人驚歎的主題創做者合做，將他們的精彩做品帶到Official Bootstrap Themes商店。咱們不能更興奮地宣佈咱們正在擴大Bootstrap主題，以包括十個全新的主題。咱們目前的目標是第一季度推出的主題都創建在Bootstrap 4上（對不起，這些都沒有v3）。根據最終評論，咱們甚至可能在將來幾周內讓他們到大家身邊。

Bootstrap的普遍性和實用性直接來自世界各地的設計師，開發人員和創做者，使用Bootstrap構建業務。咱們但願利用咱們的平臺爲這些創做者提供更多的觀衆，併爲您提供最好的Bootstrap團隊承認的主題。

隨時準備發佈，敬請關注更多信息。

謝謝

最後，最後要感謝全部爲Bootstrap 4作出貢獻的人。這是一個瘋狂的旅程，我我的感到放心，興奮，急於稱它爲穩定。自從咱們在2015年首次開始工做以來，已經有大約6,000次提交到第4版。咱們已經走了太多的方向，重寫了太多的東西，可是我很是高興和幸運。 。

再次歡呼每個對Bootstrap有貢獻和創建的人。可以爲您和全部人共同構建這些工具是一種榮幸。

 

 

V3到V4遷移注意：

瀏覽器支持

• IE10+
• IOS 7+
• Android 5.0 Lollipop’s Browser and WebView.

全局變化

• Flexbox默認啓用
• 源文件管理從Less切到了Sass
• css單位由px切換到rem
• 全局字體從14px變成了16px
• 柵格系統作了調整，添加了一個超小屏幕適配,媒體查詢寬度臨界點分別爲57六、76八、99二、1200；(v3爲76八、99二、1200)，對比v3將超小由col-xs-的替換成了col-，增長了一個超大col-xl-。

 

發現有好多啊，來項目了，先不寫了

原文地址以下：https://getbootstrap.com/docs/4.0/migration/

 

本身先看着