Bootstrap是一個流行的前端框架，它提供了許多有用的工具和組件來幫助開發(fā)人員快速構建響應式網(wǎng)站。然而，隨著時間的推移，Bootstrap的版本不斷更新，舊版本可能會不再得到支持或存在一些已知的問題。本教程將介紹如何把BootStrap遷移到v4版本。

一、穩(wěn)定變化

從Bootstrap 3發(fā)展到穩(wěn)定的v4.0版本，沒有發(fā)生重大變化，但有一些顯著的變化。

1、打印

• 修復了損壞的打印工具以前，使用 .d-print-* 的class會意外地影響任何其他的 .d-* 的class. 現(xiàn)在，它們與Bootstrap的其他顯示實用程序相匹配，僅適用于該媒體 (@media print)；
• 擴展可用的打印顯示實用程序以匹配其他實用程序 遷移到BootStrap 3和更早版本只有 block, inline-block, inline, 和 none。 穩(wěn)定的v4增加了 flex, inline-flex, table, table-row, 和 table-cell；
• 使用指定 @page size的新打印樣式修復了瀏覽器中的打印預覽呈現(xiàn)。

二、Bootstrap 3變化

雖然Bootstrap 2在測試階段看到了大部分突破性變化，但仍然有一些需要在Bootstrap 3版本中解決的問題。 如果從Bootstrap 2更新到Bootstrap 3或更新版本的Bootstrap，則適用這些更改。

1、其他

• 刪除了未使用的 $thumbnail-transition 變量。 沒有轉換任何東西，所以它只是額外的代碼；
• npm軟件包不再包含除源文件和dist文件以外的任何文件; 如果依賴它們并通過 node_modules 文件夾運行腳本，則應該調整工作流程。

2、形式

• 重寫了自定義和默認復選框和音頻。 現(xiàn)在，兩者都具有匹配的HTML結構 (外部 <div> 與兄弟 <input> 和 <label>) 以及相同的布局樣式（堆疊默認，內聯(lián)修飾符類）。 這允許根據(jù)輸入的狀態(tài)來設置標簽的樣式，簡化對 disabled 屬性的支持（以前需要父類），并更好地支持表單驗證；
• 作為其中的一部分，更改了用于管理自定義表單復選框和音頻上的多個 background-image的CSS。以前, 現(xiàn)在移除的 .custom-control-indicator 元素具有背景顏色， 漸變和SVG圖標。 定制背景漸變意味著每次只需要更換一個就可以替換所有這些。 現(xiàn)在有 .custom-control-label::before 用于填充和漸變，并且..custom-control-label::after 處理圖標。要進行內聯(lián)自定義檢查，請?zhí)砑?custom-control-inline。
• 更新了基于輸入的按鈕組的選擇器。 樣式和行為不是[data-toggle=”buttons”] { }只使用JS屬性的 data 屬性， 并依賴一個新的 .btn-group-toggle 的class進行樣式設計；
• 刪除 .col-form-legend，稍微改進.col-form-label。這樣 .col-form-label-sm 和 .col-form-label-lg 可以輕松地用于 <legend> 元素；
• 自定義文件輸入接收到對其 $custom-file-text Sass 變量的更改。 它不再是一個嵌套的Sass地圖， 現(xiàn)在只支持一個字符串 -Browse 按鈕，因為這是現(xiàn)在從Sass生成的唯一的偽元素。 選擇 Choose file 文本現(xiàn)在來自 .custom-file-label。

3、輸入組

• 輸入組插件現(xiàn)在特定于它們相對于輸入的位置。 Bootstrap已經(jīng)為兩個新類，即.input-group-addon 和 .input-group-btn 刪除了， .input-group-prepend 和 .input-group-append。 現(xiàn)在必須明確地使用append或prepend， 這簡化了Bootstrap大部分CSS。在append或prepend中，將按鈕放置在任何其他地方，但將文本包裝在.input-group-text；
• 現(xiàn)在支持驗證樣式，如多個輸入（雖然只能驗證每個組的一個輸入）；
• 調整大小的類必須位于父代 .input-group 中， 而不是單個的表單元素。

三、Bootstrap 2變化

而在測試版中，Bootstrap的目標是沒有突破性的變化。然而，事情并不總是按計劃進行。下面是從Bootstrap 1到Bootstrap 2時要牢記的突破性變化。

1、突破

• 刪除了 $badge-color 變量及其在.badge上的用法。使用color 對比功能根據(jù) background-color選擇顏色, 因此變量是不必要的；
• 將 grayscale() 函數(shù)重命名為 gray() 以避免與CSS原生 .grayscale 發(fā)生沖突；
• 將 .table-inverse， .thead-inverse， 和 .thead-default 重命名為 .*-dark 和 .*-light， 與其他地方使用的顏色方案相匹配；
• 響應表現(xiàn)在為每個網(wǎng)格斷點生成類。 這從Bootstrap 1開始，因為你一直使用的 .table-responsive 更像 .table-responsive-md。 現(xiàn)在可以根據(jù)需要使用.table-responsive 或 .table-responsive-{sm,md,lg,xl} 自由選擇；
• 由于軟件包管理器已被棄用以替代（例如Yarn或npm），因此丟棄了Bower支持；
• Bootstrap仍然需要jQuery 1.9.1或更高版本，但建議使用3.x版本，因為v3.x支持的瀏覽器是Bootstrap支持的瀏覽器，而v3.x具有一些安全修復程序；
• 刪除了未使用的 .form-control-label 的class。 如果確實使用了這個class, 那么它就是.col-form-label class的副本，它將垂直居中放置在水平表單布局中的相關輸入 <label> ；
• 將 color-yiq 從包含 color 屬性的mixin更改為返回值的函數(shù), 從而允許將它用于任何CSS屬性。例如，可以使用color-yiq(#000);而不是 color: color-yiq(#000);。

2、強調

• 在模態(tài)聲明 pointer-events 用法。 外部的 .modal-dialog 對話框通過帶有指針事件的事件 pointer-events: none 用于自定義點擊處理 (使得可以在任何點擊的 .modal-backdrop 上監(jiān)聽)， 然后使用指針抵消實際的 .modal-content 同 pointer-events: auto。

四、總結

以下是從v3移至v4時需要注意的關鍵要點。

1、瀏覽器支持

• 放棄IE8，IE9和iOS 6的支持。 v4現(xiàn)在只有IE10 +和iOS 7+。 對于需要其中任何一個的網(wǎng)站，請使用v3；
• 增加了對Android v5.0 Lollipop的瀏覽器和WebView的官方支持。 Android瀏覽器和WebView的早期版本僅保留非正式支持。

2、全局變化

• Flexbox默認啟用。 一般來說，這意味著要從浮筒和更多的組件上移開；
• Bootstrap的源CSS文件從Less 切換到 Sass ；
• 從px 切換到 rem 作為主要CSS單元， 但像素仍然用于媒體查詢和網(wǎng)格行為，因為設備視口不受字體大小的影響；
• 全局字體大小從14px 增加到 16px；
• 修改網(wǎng)格層以添加第五個選項 (解決576px 及更低的較小設備)， 并從這些類中移除 -xs 中綴。例如：.col-6.col-sm-4.col-md-3；
• 用可配置選項通過SCSS變量替換單獨的可選主題（例如，$enable-gradients: true)；
• 修改系統(tǒng)以使用一系列npm腳本代替Grunt。 查看所有腳本的 package.json，或者項目自述文件以了解本地開發(fā)需求；
• 不再支持Bootstrap的無響應使用；
• 放棄了在線Customizer，轉而使用更廣泛的安裝文檔和定制版本；
• 為常見的CSS屬性 – 值對和邊距/填充間距快捷方式添加了許多新的實用程序類。

3、柵格系統(tǒng)

移至flexbox：

• 增加了對網(wǎng)格mixins和預定義類中的flexbox的支持；
• 作為flexbox的一部分，包括對垂直和水平對齊類的支持。

更新了網(wǎng)格類名稱和新的網(wǎng)格層：

• 在768px以下添加了一個新的sm 用于更精細的控制。 現(xiàn)在有 xs, sm, md, lg, 和 xl。 這也意味著每一層都被提升了一個層次 (所以v3中的 .col-md-6 現(xiàn)在是v4中的 .col-lg-6)；
• xs 網(wǎng)格類已被修改為不需要中綴來更準確地表示他們開始 min-width: 0 而不是設置像素值。 而不是.col-xs-6, 它現(xiàn)在是 .col-6。 所有其他網(wǎng)格層都需要中綴 (例如: sm)。

更新了網(wǎng)格大小，混合和變量：

• 網(wǎng)格間距現(xiàn)在有一個Sass地圖，因此可以在每個斷點處指定特定的間距寬度；
• 更新的網(wǎng)格混合使用 make-col-ready 混合 make-col 設置 flex 和 max-width 來設置單個列大小的彎曲和最大寬度；
• 將網(wǎng)格系統(tǒng)媒體查詢斷點和容器寬度更改為新的網(wǎng)格層，并確保列在其最大寬度處可以被12整除。
  網(wǎng)格斷點和容器寬度現(xiàn)在通過Sass地圖 ($grid-breakpoints 和 $container-max-widths) 來處理，而不是一些單獨的變量。這些將完全替換 @screen-* 變量 ，并允許完全自定義網(wǎng)格層；
• 媒體查詢也發(fā)生了變化。 現(xiàn)在只有@include media-breakpoint-up/down/only ， 而不是每次重復使用相同值的媒體查詢聲明?，F(xiàn)在，可以不寫 @media (min-width: @screen-sm-min) { … }， 而可以編寫 @include media-breakpoint-up(sm) { … }。

4、組件

（1）放置面板，縮略圖 用于新的全面組件——卡片；

（2）丟棄了Glyphicons圖標字體。 如果你需要圖標，一些選項是：

• Glyphicons及以上的版本；
• Octicons；
• Font Awesome。

（3）刪除了Affix jQuery插件。

建議使用 position: sticky 代替。有關詳細信息和特定的polyfill建議，請參閱 HTML5請參閱條目。 一個建議是使用@supports 規(guī)則來實現(xiàn)它 (例如， @supports (position: sticky) { … })/
如果使用Affix來應用其他非位置樣式， non-position 樣式， 那么polyfills可能不支持用例。 這種用途的一個選擇是第三方 ScrollPos-Styler 庫。

（4）丟棄了pager 組件， 因為它本質上是微小定制的按鈕；

（5）重構幾乎所有的組件 以使用更多的非嵌套類選擇器而不是超特定的子選擇器。

五、按鈕組

此列表突出顯示了v3.x.x和v4.0.0之間組件的關鍵更改。

1、重構

Bootstrap 4的新功能是重構, 這是一種新的樣式表，它基于自己的一些自定義的重置樣式進行規(guī)范化。 出現(xiàn)在這個文件中的選擇器只使用元素 – 這里沒有類。 這將重置樣式與組件樣式隔離開來， 以實現(xiàn)更模塊化的方法 其中最重要的一些重置包括 box-sizing: border-box 的更改, 從許多元素上的 em 到 rem 單位, 以及許多表單元素重置。

2、排版

• 將所有 .text- utilities 移至 _utilities.scss 文件；
• Dropped .page-header 除了邊框之外， 其所有樣式都可以通過實用工具應用；
• .dl-horizontal 已被刪除。 相反， 在<dl>上使用 .row， 并在其<dt> 和 <dd> 子級上使用網(wǎng)格列類（或mixins）；
• 自定義 <blockquote> 樣式已移至 classes—.blockquote 和 .blockquote-reverse 修飾符；
• .list-inline 現(xiàn)在要求其子項列表項具有應用于它們的新的 .list-inline-item 類。

3、圖片

• 修改 .img-responsive 為 .img-fluid
• 修改 .img-rounded 為 .rounded
• 修改 .img-circle 為 .rounded-circle

4、表格

• 幾乎所有 > 選擇器的實例都被刪除， 這意味著css在會自動從父母繼承樣式。 這極大地簡化了我們的選擇器和潛在的定制；
• 響應表不再需要包裝元素。 相反，只需將 .table-responsive 類放在 <table>上即可；
• 將 .table-condensed 重命名為 .table-sm 以保持一致性；
• 添加了一個新的 .table-inverse 屬性；
• 增加了表頭修飾符：.thead-default 和 .thead-inverse；
• 將上下文類重命名為具有 .table–前綴。 因此 .active, .success, .warning， .danger 和 .info 和 .table-success, .table-warning, .table-danger 和 .table-info轉化為.table-active。

5、表單

（1）移動元素重置為_reboot.scss 文件；

（2）將 .control-label 重命名為 .col-form-label；

（3）將 .input-lg 和 .input-sm 重命名為 .form-control-lg 和 .form-control-sm；

（4）為了簡單起見，丟棄了 .form-group-* 類。 現(xiàn)在使用 .form-control-* 類；

（5）刪除 .help-block 并用 .form-text 替換為塊級幫助文本。 對于內聯(lián)幫助文本和其他靈活選項， 請使用實用程序類 ，如.text-muted；

（6）丟棄 .radio-inline 和 .checkbox-inline；

（7）將 .checkbox 和 .radio 合并為 .form-check 和各種 .form-check-* 類；

（8）水平形式修改：

• 放棄了 .form-horizontal 類的要求；
• .form-group 不再通過mixin從 .row 中應用樣式， 所以 .row 現(xiàn)在需要用于水平網(wǎng)格布局 (例如， <div class=”form-group row”>)；
• 使用 .col-form-label 添加新的 .form-control類來垂直居中標注；
• 使用網(wǎng)格類為緊湊表單布局添加新的 .form-row (將 .row 替換為 .form-row 并繼續(xù)使用)。
• 添加了自定義表單支持 (用于 復選框, 音頻, 選擇框, 和 選擇文件 輸入框)；
• 使用CSS的HTML5表單驗證替換 .has-error, .has-warning, 和 .has-success 類 :invalid 和 :valid 偽類；
• 將 .form-control-static 重命名為 .form-control-plaintext。

6、按鈕

• 將 .btn-default 重命名為 .btn-secondary；
• 放棄 .btn-xs 這個類， 因為 .btn-sm 的比例要比v3小得多；
• 將 stateful button button.js 插件的狀態(tài)按鈕功能刪除。這包括$().button(string) 和 $().button(‘reset’) 方法。建議使用一小部分自定義JavaScript代替， 這樣做的好處是可以按照希望的方式進行操作。請注意，插件的其他功能（按鈕復選框，按鈕收音頻，單切換按鈕）已保留在v4中；
• 將按鈕 [disabled] 改為 :disabled 因為IE9 +支持 :disabled。 然而 fieldset[disabled] 仍然是必要的， 因為IE11中原生的禁用字段仍然是bug。

7、按鈕組

• 用flexbox重寫組件；
• 刪除了 .btn-group-justified。 作為替換，你可以使用 <div class=”btn-group d-flex” role=”group”></div> 作為包含.w-100；
• 完全放棄了 .btn-group-xs 類， 并刪除了 .btn-xs；
• 刪除按鈕工具欄中按鈕組之間的顯式間距; 現(xiàn)在使其它類；
• 改進了與其他組件一起使用的文檔。

8、下拉菜單

• 從父選擇器切換到所有組件，修飾符等的單數(shù)類；
• 簡化的下拉樣式不再隨附在下拉菜單上的朝上或朝下箭頭方向；
• 下拉菜單現(xiàn)在可以用 <div>s 或 <ul>建立；
• 重建下拉式樣和標記，為基于 <a> 和 <button> 的下拉項目提供簡單的內置支持；
• 將 .divider 重命名為 .dropdown-divider；
• 下拉項目現(xiàn)在需要 .dropdown-item中建立；
• 下拉式切換不再需要明確的 <span class=”caret”></span>; 這現(xiàn)在通過CSS ::after on .dropdown-toggle自動提供。

9、柵格系統(tǒng)

• 以 sm增加了一個新的 576px 網(wǎng)格斷點， 這意味著現(xiàn)在有五個總層 (xs, sm, md, lg, 和 xl)；
• 更簡單的網(wǎng)格類將 .col-{斷點}-{修飾符}-{大小} 的響應網(wǎng)格修飾符類重命名為。 .{修飾符}-{斷點}-{大小} ；
• 為新的彈性布局提供 order 類。例如，可以使用 .col-8.push-4 和 .col-4.pull-8, 而不是 .col-8.order-2 和 .col-4.order-1；
• 為網(wǎng)格系統(tǒng)和組件添加了flexbox實用程序類。

10、列表組

• 用flexbox重寫組件；
• 用明確的類，a.list-group-item 替換 .list-group-item-action, 以便為列表組項的鏈接和按鈕版本進行樣式設置；
• 添加了 .list-group-flush 類以用于卡片。

11、資本

• 用flexbox重寫組件；
• 鑒于移動到flexbox，標題中排除圖標的對齊可能會被破壞，因為不再使用浮動。 浮動內容是第一位的，但對于不再是這種情況的Flexbox。 更新你的解雇圖標來模式標題來解決；
• 選項 remote (可用于自動加載和注入外部內容到模式中) 和相應的 loaded.bs.modal 事件被刪除。建議使用客戶端模板或數(shù)據(jù)綁定框架， 或者自己調用 jQuery.load 。

12、導航

• 用flexbox重寫組件；
• 通過非嵌套類刪除幾乎所有 > 選擇器以實現(xiàn)更簡單的樣式；
• 對.nav, .nav-item, 和 .nav-link使用單獨的類， 而不是像.nav > li > a這樣的HTML特定選擇器，這使得HTML更加靈活，同時增加了可擴展性。

13、導航欄

• 導航欄已經(jīng)在flexbox中完全重寫，改進了對齊，響應和定制支持；
• 響應式導航欄行為現(xiàn)在通過所需的.navbar-expand-{斷點} 應用于.navbar 類， 可以在其中選擇折疊導航欄的位置。 以前這是一個較少變量的修改重新編譯；
• .navbar-default 現(xiàn)在是 .navbar-light， 但 .navbar-dark 保持不變。 其中一個是每個導航欄上都需要的。 但是，這些類不再設置 background-color； 相反，它們基本上只影響 color；
• Navbar現(xiàn)在需要某種背景聲明。 從背景實用程序(.bg-*)中選擇， 或者使用上面的輕/反類來設置自己的 瘋狂自定義；
• 鑒于flexbox的風格，navbars現(xiàn)在可以使用flexbox工具來輕松對齊選項；
• .navbar-toggle 現(xiàn)在是 .navbar-toggler ，具有不同的樣式和內部標記 (不再有 <span>；
• 完全拋棄了 .navbar-form 這個類. 它不再是必要的; 相反，只需使用 .form-inline 并根據(jù)需要應用實用程序；
• 默認情況下Navbar不再包含 margin-bottom 或 border-radius必要時使用實用程序；
• 所有以導航欄為特色的示例已更新為包含新標記。

14、分頁

• 用flexbox重寫組件；
• 顯式類 (.page-item, .page-link) 現(xiàn)在需要在 .pagination的后代中使用；
• 完全丟棄了.pager組件 ，因為它不過是自定義輪廓按鈕。

15、面包屑

.breadcrumb的后代現(xiàn)在需要添加類.breadcrumb-item。

16、標簽和徽章

• 將 .label 重命名為 .badge ，從而<label> 元素消除歧義；
• 放棄 .badge 組件， 因為它幾乎與標簽相同。將 .badge-pill 修飾符與標簽組件一起使用，以代替該圓形外觀；
• 徽章不再自動在列表組和其他組件中自動浮動；
• 實用程序類現(xiàn)在需要.badge-default 已被刪除，并添加了 .badge-secondary 以匹配別處使用的組件修飾符類。

17、面板/縮略圖

• 完全丟棄新卡組件。

18、面板

• .panel 改為 .card，現(xiàn)在用flexbox構建；
• .panel-default 被刪除并且沒有替換；
• .panel-group 被移除并且沒有替換。 .card-group 不是替代品，它是不同的；
• .panel-heading 改為了 .card-header；
• .panel-title 改為了 .card-title。 可能還想使用 heading elements or classes (例如： <h3>, .h3) 或粗體元素或類 (例如： <strong>, <b>, .font-weight-bold)。 請注意， .card-title標題雖然具有相同的名稱，但產(chǎn)生與.panel-title標題不同的外觀；
• .panel-body 改為 .card-body；
• .panel-footer 改為 .card-footer；
• .panel-primary, .panel-success, .panel-info, .panel-warning, 和 .panel-danger 已被放棄 .bg-, .text-, 和 .border 被列為公共樣式 $theme-colors Sass 地圖。

19、進度條

使用.bg-*實用程序替換 .progress-bar-*類 。 例如, class=”progress-bar progress-bar-danger” 變?yōu)?class=”progress-bar bg-danger”。

20、輪放組件

• 徹底改變了整個組件以簡化設計和樣式。Bootstrap有更少的款式可供覆蓋，新指標和新圖標；
• 所有的CSS都被取消嵌套和重命名，確保每個類的前綴都是 .carousel-；
• 對于輪放組件, .next, .prev, .left, 和 .right 現(xiàn)在改成 .carousel-item-next, .carousel-item-prev, .carousel-item-left, 和 .carousel-item-right；
• .item 現(xiàn)在改成 .carousel-item.；
• 對于 prev/next 控件, .carousel-control.right 和 .carousel-control.left 改成了 .carousel-control-next 和 .carousel-control-prev 這意味著他們不再需要特定的基類；
• 刪除所有響應式樣式，并根據(jù)需要推遲使用實用工具（例如，在某些視口上顯示字幕）和自定義樣式；
• 刪除圖像覆蓋輪放組件項目中的圖像，推遲到實用程序；
• 調整了Carousel示例以包含新的標記和樣式。

21、儀表盤

• 刪除了對樣式化嵌套表的支持。 所有表格樣式現(xiàn)在都在v4中繼承，用于更簡單的選擇器；
• 添加了反向表格變體。

22、公用樣式

（1）顯示，隱藏等等：

• 使顯示實用程序響應 (例如, .d-none 和 d-{sm,md,lg,xl}-none)；
• 刪除了新的顯示實用程序的大部分 .hidden-* 實用程序。 display utilities。而不是 .hidden-sm-up， 請使用 .d-sm-none。 將 .hidden-print 實用程序重命名為使用顯示實用程序命名方案；
• 添加 .float-{sm,md,lg,xl}-{left,right,none} 類， 為響應浮動和刪除 .pull-left 和 .pull-right 因為它們是多余的 .float-left 和 .float-right。

（2）類型:

• 為文本對齊類添加了響應式變體 .text-{sm,md,lg,xl}-{left,center,right}。

（3）對齊和間距:

• 為所有增加了新的 響應性邊距和填充工具，以及垂直和水平的短手；
• 增加了 flexbox實用程序的容器；
• 刪除 .center-block 類，添加 .mx-auto 類。

23、提供前綴混合

Bootstrap 3的 vendor prefix mixins, 在v3.2.0中已棄用, 已在Bootstrap 4中刪除。由于使用 Autoprefixer， 因此不再需要它們。

刪除了以下mixin：

animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d, user-select

24、文檔

Bootstrap的文檔也獲得了全面升級。 這是最重要的一點：

（1）我們仍在使用Jekyll，但是我們有插件：

• bugify.rb用于有效地列出 瀏覽器錯誤 頁面上的條目；
• example.rb 是默認 highlight.rb 插件的自定義分支，允許更簡單的示例代碼處理
• callout.rb 是一個類似的自定義分支，但為我們的特殊文檔標注而設計；
• markdown-block.rb 用于在表格中呈現(xiàn)HTML元素內的Markdown片段；
• jekyll-toc 用于生成我們的目錄。

（2）所有文檔內容都已在Markdown（而不是HTML）中重寫，以便于編輯；

（3）頁面已被重新組織，以獲得更簡單的內容和更平易近人的層次結構

（4）從常規(guī)CSS轉移到SCSS，充分利用Bootstrap的變量，mixins等等。

25、響應式實用程序

• 所有 @screen- 變量已在v4.0.0中刪除。 改為使用 media-breakpoint-up()， media-breakpoint-down()， 或 media-breakpoint-only() 或 $grid-breakpoints；
• 響應式實用程序類在很大程度上已被刪除，以支持顯式 display 實用程序；
• 其中 .hidden 和 .show 類已被刪除，因為它們與jQuery的 $(…).hide() 和 $(…).show() 方法沖突。相反，嘗試切換 [hidden] 屬性或使用內聯(lián)樣式，style=”display: none;” 和 style=”display: block;”；
• 除了已重命名的打印實用程序外，所有 .hidden- 類都被刪除。
• 從v3中刪除： .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
• 從v4 alphas中刪除： .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- 或 .visible-, 但是 .d-print-原來的類：

.visible-print-block, .visible-print-inline, .visible-print-inline-block, .hidden-print

• 新的類 ：

.d-print-block, .d-print-inline, .d-print-inline-block, .d-print-none

• 而不是使用明確的 .visible-* 類, 而是通過將該元素隱藏在該屏幕尺寸上來使元素可見?？梢詫⒁粋€ .d-*-none 類與一個 .d-*-block 類組合在一起，僅在給定的屏幕大小間隔內顯示一個元素 (例如： .d-none.d-md-block.d-xl-none 僅在中型和大型設備上顯示元素)；

注意：對v4中的網(wǎng)格斷點的更改意味著需要增大一個斷點才能達到相同的結果。 新的響應式實用程序類別不會嘗試適應不常見的情況，即元素的可見性無法表示為視口大小的單個連續(xù)范圍; 將需要在這種情況下使用自定義CSS。