Bootstrap 3 與 Bootstrap 4 – 概述
已發表: 2017-10-06Bootstrap 一直是最受信任的開源前端框架，用於開發響應式、移動優先的網站。 Bootstrap是一個著名的框架，為什麼？？？ 因為它所需要的只是 HTML 和 CSS 的基本知識，我們可以通過使用預定義的引導類來構建一個有吸引力且功能強大的網站，這些引導類負責不同設備上的響應。
Bootstrap 3 於 2013 年發布，最後一個穩定版本 Bootstrap 3.3.7 於 2016 年 7 月發布。2014 年 10 月，Twitter 宣布 Bootstrap 4 正在開發中。 Bootstrap 4 的第一個 alpha 版本於 2015 年 8 月發布。現在在 2017 年 8 月，Bootstrap 4.0.0-beta 版本發布。 如果您想從 0 開始學習，可以查看這個深入的 Bootstrap 教程。
這篇文章的重點將是從版本 3 到新發布的版本 4.0.0-beta 的關鍵差異、添加和減少。
第 4 版有什麼不同：
現在我們可以開始討論 Bootstrap 4 的新功能了。隨著技術的快速發展，更新和更智能的語言被開發出來，以使構建乾淨、快速的網站變得更加簡單。 最新版本的 Bootstrap 就是這種情況。 該團隊表示，這個“版本 4 是對幾乎整個項目的重大改寫”。 我們將總結此改進的一些關鍵變化。
全球變化：
- 將源 CSS 文件從Less切換到Sass 。
- 從
pxrem作為 Bootstrap 的主要 CSS 單元切換，儘管像素仍用於媒體查詢和網格行為，因為設備視口不受類型大小的影響。 - 全局字體大小從14px增加到16px 。
- 為 ~480px 及以下添加了一個新的網格層。
網格系統：
Bootstrap 4 改進的主要步驟是採用 Flexbox。 作為 flexbox 的一部分，包括對垂直和水平對齊類的支持。 Bootstrap 4 非常重視定制。 它的新網格層系統讓 Bootstrap 4 享受多達 5 個網格層的存在（5 層的示例：.col-4、.col-sm-4、.col-md-4、.col-lg-4、 .col-xl-4 ）。 可以輕鬆地說，Bootstrap 4 提供了對改進的網格系統的訪問。
- 在 768px 以下添加了一個新的 sm 網格層，以實現更精細的控制。 現在有 xs、sm、md、lg 和 xl。 這也意味著每一層都提升了一個級別（因此 v3 中的 .col-md-6 現在是 v4 中的 .col-lg-6）。
- 更改了網格系統媒體查詢斷點和容器寬度以考慮新的網格層並確保列在其最大寬度處可被 12 整除。
- 網格斷點和容器寬度現在通過 Sass 映射（$grid-breakpoints 和 $container-max-widths）而不是少數單獨的變量來處理。 這些完全替換了 @screen-* 變量，並允許您完全自定義網格層。
- 媒體查詢也發生了變化。 而不是每次都使用相同的值重複媒體查詢聲明，現在有@include media-breakpoint-up/down/only。 現在，不用寫@media (min-width: @screen-sm-min) { ... }，您可以寫成@include media-breakpoint-up(sm) { ... }。
瀏覽器支持：
- 放棄 IE8 和 iOS 6 支持。 v4 現在只有 IE9+ 和 iOS 7+。 對於需要其中任何一個的站點，請使用 v3。
實用程序類：
在 Bootstrap 4 中，包含了新的實用程序類，而不會妨礙任何現有功能。 這些重要的附加功能包括響應式文本對齊類、響應式浮動和響應式嵌入。 除了提供許多快捷方式外，它們還分別允許更改文本的對齊方式、元素的浮動和任何嵌入式媒體的縱橫比的縮放。 （例如： .hidden-md-up在中、大和超大視口上隱藏元素。現在，使用.d-md-none代替.hidden-md-up ）。
圖片：
- 將
.img-responsive重命名為.img-fluid。 - 將
.img-rounded重命名為.rounded - 將
.img-circle重命名為.rounded-circle
表：
- 響應式表格不再需要包裝元素。 簡單來說，在Bootstrap 3 中，應該將
.table-responsive類添加到父 <div> 中。 但是在 Bootstrap 4 中，.table-responsive類添加到<table>元素中。 - 添加了一個新的
.table-inverse選項。 - 添加了表頭修飾符：
.thead-default和。.thead-inverse - 將上下文類重命名為具有
.table-前綴。 因此，.active.success、.warning、.danger和.table-info到.table-active、.table-success、.table-warning、.table-danger和.table-info.
導航：
在 Bootstrap 4 中，Navigation 組件在很大程度上得到了簡化。 需要使用最新的導航基類創建一個新的元素列表。 還有一些最近添加的內容，例如 nav-link 類、nav-item 類和導航欄樣式。
- 用 flexbox 重寫了組件。
-
.navbar-default現在是.navbar-light，但.navbar-dark保持不變。 但是，這些類不再設置background-color； 相反，它們基本上只影響color。 -
.navbar-toggle現在是.navbar-toggler並且具有不同的樣式和內部標記（不再有三個<span>）。 - 完全刪除了
.navbar-form類。 不再需要了； 相反，只需使用.form-inline並根據需要應用邊距實用程序。 - 默認情況下，導航欄不再包含
margin-bottom或border-radius。
Bootstrap 第 3 版和第 4 版對比表
| 參數 | 引導程序 3 | 引導程序 4 |
| 源 CSS 文件 | 較少的 | SASS |
| 網格層 | 4網格層系統 | 5 gid 層系統 |
| 下拉結構 | 可以用 <ul> 和 <li> 創建 | 可以用 <ul> 或 <div> 創建 |
| 默認分頁 | .pagination 需要添加到 <ul> 元素 | .page-item 必須添加到每個 <li> 元素和 .page-link 到每個 <a> 元素 |
| 響應式圖像 | 應用 .img-responsive 類 | 應用 .img-fluid 類 |
| 響應表 | .table-responsive 類應該添加到父 <div> 元素 | .table-responsive 類被添加到 <table> 元素 |
| 導航欄對齊 | 使用 .navbar-right、.navbar-left 來對齊組件 | 使用間距實用程序，例如 .mr-auto，或 flexbox 對齊實用程序 |
| 字形 | 支持的 | 不支持 |
| 媒體對象 | 包括許多不同的媒體對像類，包括 .media、.media-body .media-object、.media-heading、.media-right、.media-left 以及 .media-list 和 .media-body。 | 僅使用 .media 類。 可以使用間隔實用程序應用邊距。 媒體對像在 Bootstrap 4 中啟用了 flexbox，因此也可以應用各種 flexbox 類（例如重新排序等）。 |
| 進度條 | 不使用進度條的進度。 相反，將進度條類應用於嵌套的 div 元素。 | 在 Alpha 6 中放棄使用 progress 元素。Bootstrap 4 現在再次使用 div 元素。 |
正如我們已經說過的，Bootstrap 團隊已經重寫了框架。 所以上面的改動只是我們在這裡寫的關鍵改動。 要深入閱讀，請點擊鏈接 Bootstrap 4。
我們應該遷移到 Bootstrap 4 還是繼續使用 Bootstrap 3
我們已經討論了 Bootstrap 4 提供的功能。 我們可以看到，在整個框架中，在優化和清理不必要的元素和類方面做了很多工作。 Bootstrap 4 承諾在創建出色的移動友好型網站時更快、更精簡，從而提供更大的靈活性和易用性。
Bootstrap 4，移至 flexbox。 這可以被認為是最大和最重要的成就之一。 這將提供以下好處：
- 基於 Flexbox 的網格
- 新的 XLl 網格層
- 最新的自動佈局網格
- 導航欄自定義選項
- 新的間距實用程序
- Sans Glyphicons 配置（無膨脹區）
- 響應式尺寸
- 響應浮動
- 自動邊距
- 垂直居中
結論
Bootstrap 一直在簡化開發人員的生活，並且通過版本的更新，現在 bootstrap 具有更多新功能和選項，可以讓開發人員更輕鬆地做事，這就是人們從 Bootstrap 3 遷移到 Bootstrap 的原因4，因為它比以前的版本更方便和易於訪問。