6.一、Bootstrap V4自學之路------遷移---升級到v4

升級到 v4

Bootstrap 4 幾乎是對整個項目進行了重寫。其中最顯著的變化都歸納到了下面的內容，與之前相比，擁有了更多的具體的類以及把一些有關的部分變成了相關的組件。

小心！它在 flux 中工做的時候和在 v4 alphas 進程中工做是一致的。只有當它在不完整的狀況下，咱們纔會推送來幫助它保持在最新的狀態。

總結

以下即是從 v3 升級到 v4 的時候你最應該注意的地方。

支持的瀏覽器

• v4 如今放棄了對 IE8 以及 iOS 6 的支持，如今僅僅支持 IE9 以上 以及 iOS 7 以上版本的瀏覽器。若是對於其中須要用到之前的瀏覽器，那麼請使用 v3.

• 添加了對 Android v5.0 Lollipop 瀏覽器和 web 視圖的官方支持。早期版本的 Android 瀏覽器和 web 視圖仍然只有非官方支持。

全局變化

• 對於 CSS 文件，從 LESS 切換到了 SCSS.

• 對於主要的 CSS 單元，從 px 切換到了 rem.

• 媒體查詢如今是在 ems 中而不是 pxs  中。

• 全局字體大小從 14px 增長到了 16px。

• 爲 ~ 480px 及其如下添加了一個新的網格層。

• 經過 SCSS 變量，可使用可配置的選項來替換單獨的可選主題 (例如，$enable-gradients: true)。

組件

• 對於該一應俱全的新的組件，丟棄了面板，縮略圖以及wells。

• 丟棄了 Glyphicons 圖標字體。

• 丟棄了 Affix jQuery 插件。相反，咱們推薦使用 position: sticky。若是想要查看 HTML5，請點擊該這裏，查看詳細具體的填充代碼建議。

• 重構幾乎全部的組件來使用更多的 unnested 的類而不是子選擇器。

Misc

• Bootstrap 再也不支持非響應的用法。

• 丟棄了在線定製器功能，支持更普遍的安裝文件以及自定義的工程。

組件上的差異

重啓

對於 Bootstrap 4 有一個新的部分——重啓，即一個新的樣式表，基於標準化的基礎上再添加上咱們自定義的重置樣式。當使用 Element 對象的時候咱們纔會用到選擇器——在這裏沒有類。它使用更模塊化的方法將咱們重置的樣式和組件樣式進行分離。它們包括了一些最重要重置好比一些邊框尺寸，邊界的變化，許多元素從 rem 移動到 em 單元，連接樣式，還有許多 element 對象中的變化。

版式

• 將全部的 .text- utilities 移動到了 _utilities.scss 文件。

• 徹底刪除了 .page-header 類。

• .dl-horizontal 如今須要網格類，增長了列寬的靈活性。

• 將自定義的<blockquote>樣式移動到了類——.blockquote 和 .blockquote-reverse 修飾符中。

表格

• 幾乎全部實例的 > 符號都被刪除了，意味着嵌套的表格如今將自動繼承他們的父母的樣式。這大大簡化了咱們的選擇器和潛在的自定義設置。

• 響應表再也不須要包裝元素。相反，僅僅只須要把 .table-responsive 放在 <table> 便可。

• 考慮一致性，將 .table-condensed 重命名爲 .table-sm。

• 添加了一個新的 .table-inverse 選項。

• 添加了一個新的 .table-reflow 選項。

• 添加了表頭修飾符：.thead-default 和 .thead-inverse。

表單

• 將重置元素移動到了 _reboot.scss 文件夾。

• 分別將 .input-lg 和 .input-sm 重命名爲 .form-control-lg 和 .form-control-sm。

• 爲了簡單起見，如今刪除了 .form-group-* 類，如今使用 .form-control-*  類。

• 水平表單的檢修：

• 取消了 .form-horizontal 類的要求。

• .form-group 類如今再也不和 .row 混合，因此它如今須要網格佈局。

• 將一個新的 .form-control-label 類添加到了帶有 .form-controls 的垂直中心標籤中。

網格系統

添加了新的 ~ 480px 網格斷點，意味着如今有五個總層。

按鈕

• 徹底刪除了 .btn-xs 類。

按鈕組

• 徹底刪除了 .btn-group-xs 類。

Navs

• 刪除了幾乎全部的 > 符號，經過使用非嵌套類來實現更簡單的樣式。

• 咱們如今直接使用單獨的  .navs, .nav-items, 和 .nav-links 類而不是像 .nav > li > a 這樣的 HTML 特定的符號。

Pager

• 分別將 .previous 和 .next 重命名爲 .pager-prev 和 .pager-next.

Panels, thumbnails, 和 wells

對於新的 card 組件，他們幾乎所有被刪除了。

Panels

.panel 改成 .card 將 .panel-default 刪除而且不進行替換 .panel-heading 改成 .card-header .panel-title 改成 .card-title .panel-body 改成 .card-block .panel-footer 改成 .card-footer .panel-primary 改成 .card-primary 以及 .card-inverse .panel-success 改成 .card-success 以及 .card-inverse .panel-info 改成 .card-info 以及 .card-inverse .panel-warning 改成 .card-warning 以及 .card-inverse .panel-danger 改成 .card-danger 以及 .card-inverse

輪播(Carousel)

將 .item 改名爲 .carousel-item.

文檔

咱們對文檔也進行了升級，以下所示：

• 咱們仍是使用 Jekyll，但咱們在組合中配置了自定義插件:

• example.rb 是默認插件 highlight.rb 的拷貝，它容許更容易的處理示例代碼。

• callout.rb  也是該插件相似的拷貝，可是它是爲我特殊的文檔標註所設計。

• 爲了更加輕鬆的編輯，全部文檔內容都已經在 Markdown (而不是 HTML) 中被重寫。

• 爲了讓內容更簡單，層次結構更清晰，全部頁面被進行了重組。

• 咱們從普通的 CSS 改爲了 SCSS，爲了更好的利用 Bootstrap 的變量，mixins 極其更多內容。

新的部分

咱們已經添加了以及改變了一些現有的組件。以下是新的或更新的樣式。

組件	描述
Cards	一個新的、 更靈活的組件，它用來來取代 v3 中的的panels, thumbnails, 和 wells。
新導航欄	用一個新的、 更簡單的組件替換之前的導航欄。
新進度欄	用如今的 <progress> 元素替換舊的 .progress < div >。
新的變形的表	添加 .table-inverse, 表頭選項, 用 .table-sm, and .table-reflow 替換 .table-condensed .
新的實用程序類

TODO: 審計了 v3 中不存在的新類。

移除的部分

下述組件在 v4.0.0 中被移除了。

組件	從 3.x.x 中移除	在 4.0.0 中至關於
Panels		Cards
Thumbnails		Cards
Wells		Cards
Justified navs

TODO:  v3 中的審計類在 v4 中不存在。

響應程序

下述已棄用的變量在 V4.0.0 被移除了:

• @screen-phone、 @screen-tablet、 @screen-desktop、 @screen-lg-desktop。相反的，使用更多抽象的 $screen-{xs、 sm、 md、 lg、 xl}-* 變量。

• @screen-sm，@screen-md，@screen-lg.相反，使用更明確地命名的變量 $screen-{xs，sm，md，lg，xl}-min 。

• @screen-xs，@screen-xs-min。這些額外的小斷點有沒有下限，所以，這些變量在邏輯上是荒謬的。根據 $screen-xs-max  改寫你的表達式。

響應實用程序類也已經進行了完全翻新。

• 這些類（.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block）都被刪除了。

• 它們被 .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down 進行了替換。

當視區是在給定的斷點或更大的範圍內 .hidden-*-up 類將隱藏元素 (例如.hidden-md-up 會隱藏中型、 大型，和特大型設備上的元素)。

當視區是在給定的斷點或更小的範圍內 .hidden-*-down 類將隱藏元素 (例如.hidden-md-down 會隱藏超小尺寸、 中小型，和小型設備上的元素)。

當你想要讓一個元素可見，你僅僅須要不把它隱藏在這樣的屏幕尺寸下，而不是使用顯示的 .visible-* 類。你能夠結合一個 .hidden-*-up 類和一個 .hidden-*-down 類來在給定的時間間隔的屏幕尺寸上顯示元素(如.hidden-sm-down .hidden-xl-up 僅在中型和大型的設備上顯示元素)。

請注意，在 v4 中對網格斷點進行更改意味着你須要讓一個斷點更大來實現相同的結果 (例如 和 .hidden-md-down 相比 .hidden-lg-down 和 hidden-md 更類似)。在一些不常見狀況下，好比在元素的可見性不能表示爲一個單一的連續範圍的視區大小的時候，新的響應實用程序類不要試圖去容納它；相反的，您須要在這種狀況下使用自定義的 CSS。

使用 Misc 來肯定優先級

爲視網膜顯示器媒體查詢刪除 min--moz-device-pixel-ratio 黑客錯誤。 刪除了 .hidden 和 .show，由於它在 jQuery 的 $(...).hide()擁有接口. 由於 IE 9 + 支持 :disabled，因此將 [disabled] 按鈕改爲了 :disabled 。然而 fieldset[disabled] 仍然是必要的，由於本機禁用字段在 IE11 中仍然會存在問題。

TODO: v3 中的事物審覈列表被標記爲已棄用。

附加說明

• 刪除了對樣式嵌套表格的支持 （當前）