Bootstrap 4 大家有什麼看法？我想知道有什麼新的變化？有什麼新功能添加？

01-09

十分喜歡新出的Card

終於不支持IE8了~~贊~~~

Bootstrap4改的質量還挺高，我們自己的一些後台管理已經切換到boot4了~

遷移過程發現蠻多驚喜和坑，然後我們就召集大大傢伙翻譯了一份中文文檔，誠意滿滿，發佈於 http://boot4.com，詳細請訪問：Bootstrap 4 中文文檔教程

2017年1月20日更新

現在版本是4.0.0-alpha.6

根據 Bootstrap 4 Alpha 6 ，twbs/bootstrap官網更新日誌補充：

1. 最新版不支持IE9及以下瀏覽器

2. 默認使用 Flexbox 實現布局

3. 移除最小斷點 -xs 前綴，（如.offset-xs-1, 變成 .offset-1，其他斷點保持 .offset-{sm,md,lg,xl}-1）

---------------------------------------------

目前代碼里只有以下兩個class含有-xs-

.hidden-xs-up { display: none !important;}

@media (max-width: 575px) { .hidden-xs-down { display: none !important; }}

----------------------------------------------------------------------------------------------

4 . 現在可以通過 $grid-gutter-widths 對不同斷點下刪格列的 padding 設值

5. 簡化 navbar 組件的結構和 class ，樣式也有所更新，具體看這裡 Navbar

6. 以 property: value 形式重命名 flexbox 相關的 class ， (如 .justify-content-between 表示「justify-content: between;」

7. 表示顯示的 .in 和 .open 重命名為 .show（如 .http://collapse.in 改為 .collapse.show）

8. 更簡單的 carousel 樣式

9. 重寫 progress 組件，去掉 &

元素

10. 媒體查詢最小零界點變為 min-width: 576px

11. 重命名 _animation.scss 文件為 _transitions.scss

===================================================

現在版本是4.0.0-alpha.5 官網鏈接：Introduction

個人感覺從安裝到使用文檔更加詳細，很多教科書似的注釋。

變化：

1. 不支持IE8及以下，具體看這裡：Browsers and devices

2. 提供指定文件 _custom.scss 在這裡重寫框架的默認樣式 Customization options

拋棄 less 改用 Sass 。

3. 支持 flexbox 布局，跟柵格系統用法類似 Flexbox grid system

4. 新增媒體查詢最小零界點 544px

5. 移除 .hidden 和 .show樣式，改用 .hidden-*-up 和 .hidden-*-down 樣式 http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

新增 .invisible 樣式，改變 visibility 而不是 diaply 屬性。

6. 除 html 元素，其他字體、padding、margin和寬高都採用 rem 單位表示

7. 提供 .h1-.h6 樣式，普通文本想用 heading 那麼大的字體，再也不用自定義了。

什麼？h1 的字體還不夠大？不怕，官方還有 .display-1 樣式（貼心......） Typography

8. 想要圖片響應式？.img-fluid

想要圖片有細線邊框？.img-thumbnail

想要圖片有圓角？.rounded

想要圖片水平居中？.mx-auto.d-block

9. 內嵌在table元素里的 table，樣式默認繼承啦（一般很少有這種情況吧。。）

嗯，還可以有黑底白字的表格 .table-inverse

我們表頭也可以有樣式 .thead-default

什麼？表格太大了？不怕，現在有 .table-sm Tables

10. 移除 glyphicons

11. 默認按鈕樣式改名叫 .btn-secondary

12. 使用 card 組件代替 panels, wells, 和 thumbnails。v4最大的亮點之一，組件可帶標題，帶背景色，帶彩色邊框，可實現等寬多列布局、 Masonry 瀑布流式布局 Cards

13. 多選框、單選框父元素樣式統一為 .form-check

可自定義多選框、單選框樣式。

14. 移除 .form-horizontal 樣式，標籤 label 左對齊，不加粗

15. 新增 tether.min.js 定位氣泡框和新的 tooltips

16. 任意元素的上下左右邊角設為圓角？ .rounded-*

把元素變為圓形？ .rounded-circle

17. 新增為深色背景文本而生的 .text-white 樣式

18. 輕鬆改變元素 display 屬性 .d-block, .d-inline, 和 .d-inline-block

19. 移除 pull-left、pull-right 等浮動樣式，改為 float-*-left

20. 移除 text-left、text-center、text-right 等文本對齊方式，改為 text-*-left

還有一些新增的樣式，比如設置內外邊距、vertical alignment 等，這裡不一一贅述了。

納尼Σ(っ °Д °;)っ

我怎麼感覺我整體落後一個版本啊！Σ(っ °Д °;)っ

現在學的都是html4css2bootstrap3(ノ=Д=)ノ┻━┻還要不要人玩了

v4還未正式發行，目前官方測試版本為 v4.0.0 alpha.6。事實上早在 2015年8月19日也就是 Bootstrap 誕生4周年的日子 alpha 第一版就已發布，距今已快2年時間。帝都人民不禁感嘆一下，唉你們又錯過多少套房子。

這篇寫在 alpha1 發布時的博文中提到以下一些 BS4 的亮點：

Sass 全面取代 Less
柵格系統 ( Grid System ) 升級，更好地適配移動端
支持 Flexbox 布局
使用 card 組件 代替 panels, wells, 和 thumbnails
加入了新的 Reboot 模塊 ( Normalize.css 的延伸，提供了更多可重置選項，增強跨瀏覽器表現 )
增強 定製化 ( v3中如 transition、gradient 等樣式選擇被放在了一個單獨的css文件中，v4則把可定製項全部寫入 Sass 變數 )
不支持 IE8 及以下，用 rem 和 em 取代了 px ( 對於響應式的字體和組件無疑是個好消息 )
所有 Javascript 插件都按 ES6 的表中重寫了 ( 大勢所趨啊。。 )

最新的 v4.0.0 alpha.6 發布時間是2017年1月6日，官博也寫了一篇日誌，要點如下：

擁抱 Flexbox v4默認使用 Flexbox 實現布局，而代價是放棄對 IE9 兼容性支持。所有使用 display: table hack 和 float 的組件都將使用 flexbox，擺脫對 clearfix 的依賴，對 DOM 的掌控增強
徹底的響應式布局 移除了最小斷點 -xs 前綴，對部分 flexbox 相關的 class 命名進行了調整，以屬性 ( property ) 命名取代 ( 如 d-，float-等 )
更多柵格系統優化 添加任意數量的.col-* 列，其寬度可自動均勻調整適應
導航欄組件優化 由於使用 flexbox 對導航欄重新布局，自適應和可定製性增強
Beta即將來臨 beta將著力提高文檔質量和debug，儘可能不添加新的功能或對現有功能做顛覆性修改

看起來這次 beta 是相對靠譜的，希望不要再跳票，v4 alpha6 也可以適時的用起來了。

參考資料：
The Bootstrap Blog - Bootstrap 4 alpha
The Bootstrap Blog - Bootstrap 4 Alpha 6

那你們敢用於生產環境中來嗎？bootstrap4.0 alpha6目前是最新的預覽版。

bootstrap4還是有很多新的特性的，參考這裡的中文文檔 Bootstrap 4 中文文檔教程

之前經常用，現在不太關注了~對瀏覽器要求越來越高~

如果假設「bootstrap的定位是給不懂美工的後端程序員使用」成立，

那麼就應該越簡單明了越好，追求功能強大換成sass，添加一堆其他特性，是與上述假設矛盾的。

……我才學到JS，這輩子都沒法變成一個合格的前端了么