在 GitHub 上檢視

移轉至 v4

Bootstrap 4 是整個專案的大幅改寫。最顯著的變更概述如下，接著是相關元件的更具體變更。

穩定變更

從 Beta 3 移至我們穩定的 v4.x 版本，沒有中斷變更，但有一些顯著的變更。

列印

  • 修正中斷的列印工具。先前使用 .d-print-* 類別會意外覆寫任何其他 .d-* 類別。現在，它們與我們的其他顯示工具相符，且僅套用至該媒體 (@media print)。

  • 擴充可用的列印顯示工具以與其他工具相符。Beta 3 及更舊版本僅有 block、inline-block、inline 和 none。穩定的 v4 新增了 flex、inline-flex、table、table-row 和 table-cell。

  • 修正跨瀏覽器的列印預覽呈現，使用指定 @page size 的新列印樣式。

Beta 3 變更

雖然 Beta 2 在 beta 階段中看到了我們大部分的中斷變更，但我們仍有一些變更需要在 Beta 3 版本中處理。如果您從 Beta 2 或任何舊版本的 Bootstrap 更新至 Beta 3，這些變更會套用。

其他

  • 已移除未使用的 $thumbnail-transition 變數。我們並未轉換任何內容，所以這只是額外的程式碼。
  • npm 套件不再包含我們的原始檔和 dist 檔以外的任何檔案；如果你依賴這些檔案，並透過 node_modules 資料夾執行我們的腳本，你應該調整你的工作流程。

表單

  • 重新撰寫自訂和預設的核取方塊和圓形按鈕。現在，兩者都有匹配的 HTML 結構（外層 <div> 與同層的 <input> 和 <label>）和相同的版面樣式（堆疊預設，與修改器類別內聯）。這讓我們可以根據輸入的狀態設定標籤樣式，簡化對 disabled 屬性的支援（以前需要父類別），並更好地支援我們的表單驗證。

    作為此變更的一部分，我們已變更 CSS 以管理自訂表單核取方塊和圓形按鈕上的多個 background-image。以前，現已移除的 .custom-control-indicator 元素具有背景顏色、漸層和 SVG 圖示。自訂背景漸層表示每次你需要變更其中一個時，都要取代所有這些。現在，我們有 .custom-control-label::before 來填滿和漸層，而 .custom-control-label::after 處理圖示。

    若要製作內聯自訂核取方塊，請新增 .custom-control-inline。

  • 已更新基於輸入的按鈕群組的選取器。我們使用 data 屬性只針對 JS 行為，並依賴新的 .btn-group-toggle 類別進行樣式設定，而不是使用 [data-toggle="buttons"] { } 來設定樣式和行為。

  • 已移除 .col-form-legend，改用稍有改善的 .col-form-label。這樣一來，.col-form-label-sm 和 .col-form-label-lg 可以輕鬆用於 <legend> 元素。

  • 自訂檔案輸入已變更其 $custom-file-text Sass 變數。它不再是巢狀 Sass 地圖，現在只提供一個字串，也就是 瀏覽 按鈕，因為那是我們 Sass 產生的唯一偽元素。選擇檔案 文字現在來自 .custom-file-label。

輸入群組

  • 輸入群組外掛元件現在特定於它們相對於輸入的位置。我們已捨棄 .input-group-addon 和 .input-group-btn，改用兩個新類別 .input-group-prepend 和 .input-group-append。現在你必須明確使用附加或前置，簡化我們的許多 CSS。在附加或前置中，將你的按鈕放置在它們會存在於其他任何地方的位置，但將文字包覆在 .input-group-text 中。

  • 現在支援驗證樣式，以及多個輸入（儘管你只能驗證每個群組的一個輸入）。

  • 尺寸類別必須在父 .input-group 中，而不是個別的表單元素中。

Beta 2 變更

在測試版中，我們的目標是不會有重大變更。但是，事情並非總是按照計畫進行。以下是從測試版 1 移至測試版 2 時需要注意的重大變更。

中斷

  • 已移除 $badge-color 變數及其在 .badge 上的使用。我們使用色彩對比函數根據 background-color 選取 color，因此該變數並非必要。
  • 已將 grayscale() 函數重新命名為 gray()，以避免與 CSS 原生 grayscale 濾鏡產生衝突。
  • 已將 .table-inverse、.thead-inverse 和 .thead-default 重新命名為 .*-dark 和 .*-light，以符合我們在其他地方使用的色彩配置。
  • 回應式表格現在會為每個網格中斷點產生類別。這與 Beta 1 不同，因為您一直在使用的 .table-responsive 更類似於 .table-responsive-md。您現在可以根據需要使用 .table-responsive 或 .table-responsive-{sm,md,lg,xl}。
  • 已取消對 Bower 的支援，因為該套件管理員已被棄用，改用其他選項（例如 Yarn 或 npm）。有關詳細資訊，請參閱 bower/bower#2298。
  • Bootstrap 仍需要 jQuery 1.9.1 或更高版本，但建議您使用版本 3.x，因為 v3.x 的支援瀏覽器是 Bootstrap 支援的瀏覽器，而且 v3.x 有一些安全性修正。
  • 已移除未使用的 .form-control-label 類別。如果您確實使用了此類別，則它會重複 .col-form-label 類別，後者會在水平表單配置中垂直置中 <label> 及其關聯輸入。
  • 已將 color-yiq 從包含 color 屬性的混合變數變更為傳回值的函數，讓您能將它用於任何 CSS 屬性。例如，您會寫 color: color-yiq(#000);，而不是 color-yiq(#000)。

重點

  • 已在對話框中引入新的 pointer-events 使用方式。外部 .modal-dialog 會透過 pointer-events: none 傳遞事件，以便自訂點擊處理（讓您可以在 .modal-backdrop 上聆聽任何點擊），然後使用 pointer-events: auto 對實際的 .modal-content 進行反制。

摘要

以下是從 v3 移至 v4 時您需要了解的重要事項。

瀏覽器支援

  • 已取消對 IE8、IE9 和 iOS 6 的支援。v4 現在僅支援 IE10 以上和 iOS 7 以上。對於需要其中任何一個的網站，請使用 v3。
  • 已新增 Android v5.0 Lollipop 的瀏覽器和 WebView 的官方支援。較早版本的 Android 瀏覽器和 WebView 仍僅提供非官方支援。

全域變更

  • Flexbox 預設啟用。一般來說，這表示將逐漸捨棄浮動，並在我們的元件中更廣泛使用 Flexbox。
  • 已從 Less 切換至 Sass，作為我們的原始 CSS 檔案。
  • 已從 px 切換至 rem 作為我們的首要 CSS 單位，不過像素仍用於媒體查詢和格線行為，因為裝置視窗不受字型大小影響。
  • 全域字型大小已從 14px 增加至 16px。
  • 已改造格線層級，新增第五個選項（針對 576px 及以下的小型裝置），並從這些類別中移除 -xs 字首。範例：.col-6.col-sm-4.col-md-3。
  • 已使用 SCSS 變數（例如 $enable-gradients: true）取代獨立的選用主題，提供可設定的選項。
  • 已全面修改建置系統，使用一系列 npm 腳本取代 Grunt。請參閱 package.json 以取得所有腳本，或參閱我們的專案自述檔，以了解本機開發需求。
  • 已不再支援非回應式的 Bootstrap 使用方式。
  • 已捨棄線上自訂工具，改為提供更廣泛的設定文件和自訂建置。
  • 已新增數十個新的 工具程式類別，用於常見的 CSS 屬性值配對和邊界/內距捷徑。

格線系統

  • 已移至 Flexbox。
    • 已在格線混合和預定義類別中新增對 Flexbox 的支援。
    • 作為 Flexbox 的一部分，已包含對垂直和水平對齊類別的支援。
  • 已更新格線類別名稱和新的格線層級。
    • 已在 768px 以下新增新的 sm 格線層級，以進行更精細的控制。我們現在有 xs、sm、md、lg 和 xl。這也表示每個層級都已提升一級（因此 v3 中的 .col-md-6 現在在 v4 中為 .col-lg-6）。
    • 已修改 xs 格線類別，使其不需要字首，以更準確地表示它們會在 min-width: 0 開始套用樣式，而不是設定的像素值。現在是 .col-6，而不是 .col-xs-6。所有其他格線層級都需要字首（例如 sm）。
  • 已更新格線大小、混合和變數。
    • 格線間距現在有 Sass 對應，因此您可以在每個中斷點指定特定的間距寬度。
    • 已更新格線混合，以利用 make-col-ready 準備混合和 make-col 來設定個別欄位大小的 flex 和 max-width。
    • 已變更格線系統媒體查詢中斷點和容器寬度，以考量新的格線層級，並確保欄位在最大寬度時可以均勻地除以 12。
    • 格線中斷點和容器寬度現在透過 Sass 對應（$grid-breakpoints 和 $container-max-widths）處理，而不是少數獨立變數。這些對應完全取代了 @screen-* 變數，並允許您完全自訂格線層級。
    • 媒體查詢也已變更。現在，我們使用 @include media-breakpoint-up/down/only，而不是每次都重複具有相同值的媒體查詢宣告。現在，您可以撰寫 @include media-breakpoint-up(sm) { ... }，而不是撰寫 @media (min-width: @screen-sm-min) { ... }。

元件

  • 已移除面板、縮圖和井，並改為使用新的全方位元件 卡片。
  • 已移除 Glyphicons 圖示字型。如果您需要圖示，以下是一些選項
  • 已移除 Affix jQuery 外掛程式。
    • 我們建議改用 position: sticky。請參閱 HTML5 Please 條目，以取得詳細資料和具體的 polyfill 建議。其中一項建議是使用 @supports 規則來實作它 (例如，@supports (position: sticky) { ... })
    • 如果您使用 Affix 套用其他非 position 樣式，polyfill 可能不支援您的使用案例。對於此類使用案例，其中一個選項是第三方 ScrollPos-Styler 函式庫。
  • 已移除分頁元件，因為它基本上是經過輕微自訂的按鈕。
  • 已重新整理幾乎所有元件，以使用更多未巢狀的類別選取器，而不是過於具體的子選取器。

依元件

此清單重點說明 v3.x.x 和 v4.0.0 之間各元件的主要變更。

重新啟動

Bootstrap 4 的新增功能為 重新啟動，這是一個新的樣式表，以 Normalize 為基礎，並採用我們自己有些武斷的重設樣式。出現在此檔案中的選取器僅使用元素，這裡沒有類別。這會將我們的重設樣式與我們的元件樣式隔離，以採用更具模組化的方法。其中包含的一些最重要的重設包括 box-sizing: border-box 變更、在許多元素上從 em 移至 rem 單位、連結樣式和許多表單元素重設。

字體排印

  • 已將所有 .text- 實用工具移至 _utilities.scss 檔案。
  • 已移除 .page-header，因為其樣式可透過實用工具套用。
  • 已移除 .dl-horizontal。請改在 <dl> 上使用 .row，並在其 <dt> 和 <dd> 子項上使用格狀欄位類別 (或混合)。
  • 重新設計區塊引用，將其樣式從 <blockquote> 元素移至單一類別 .blockquote。已移除 .blockquote-reverse 修改器以用於文字公用程式。
  • .list-inline 現在需要其子清單項目套用新的 .list-inline-item 類別。

圖片

  • 將 .img-responsive 重新命名為 .img-fluid。
  • 將 .img-rounded 重新命名為 .rounded
  • 將 .img-circle 重新命名為 .rounded-circle

表格

  • 已移除 > 選擇器的幾乎所有執行個體，表示巢狀表格現在會自動繼承其父項的樣式。這大幅簡化了我們的選擇器和潛在自訂。
  • 為了保持一致性，將 .table-condensed 重新命名為 .table-sm。
  • 新增新的 .table-inverse 選項。
  • 新增表格標題修改器：.thead-default 和 .thead-inverse。
  • 將情境類別重新命名為具有 .table- 前綴。因此 .active、.success、.warning、.danger 和 .info 改為 .table-active、.table-success、.table-warning、.table-danger 和 .table-info。

表單

  • 將元素重設移至 _reboot.scss 檔案。
  • 將 .control-label 重新命名為 .col-form-label。
  • 將 .input-lg 和 .input-sm 分別重新命名為 .form-control-lg 和 .form-control-sm。
  • 為了簡潔起見，已移除 .form-group-* 類別。現在改用 .form-control-* 類別。
  • 已移除 .help-block，並以 .form-text 取代，以用於區塊級別的說明文字。對於內嵌說明文字和其他彈性選項，請使用公用程式類別，例如 .text-muted。
  • 已移除 .radio-inline 和 .checkbox-inline。
  • 已將 .checkbox 和 .radio 整合成 .form-check 和各種 .form-check-* 類別。
  • 已全面檢修水平表單
    • 已移除 .form-horizontal 類別需求。
    • .form-group 不再透過混合套用 .row 的樣式，因此現在需要 .row 才能使用水平格線配置（例如，<div class="form-group row">）。
    • 已新增新的 .col-form-label 類別，以垂直置中標籤和 .form-control。
    • 新增 .form-row，用於具有網格類別的精簡表單配置（將 .row 換成 .form-row 即可）。
  • 新增自訂表單支援（用於核取方塊、無線按鈕、選取和檔案輸入）。
  • 使用 CSS 的 :invalid 和 :valid 偽類別，以 HTML5 表單驗證取代 .has-error、.has-warning 和 .has-success 類別。
  • 將 .form-control-static 重新命名為 .form-control-plaintext。

按鈕

  • 將 .btn-default 重新命名為 .btn-secondary。
  • 完全移除 .btn-xs 類別，因為 .btn-sm 比 v3 的比例小很多。
  • 已移除 button.js jQuery 外掛程式中的 有狀態按鈕 功能。這包括 $().button(string) 和 $().button('reset') 方法。我們建議改用少量的自訂 JavaScript，這樣可以讓行為完全符合您的需求。
    • 請注意，外掛程式的其他功能（按鈕核取方塊、按鈕無線按鈕、單一切換按鈕）已保留在 v4 中。
  • 將按鈕的 [disabled] 變更為 :disabled，因為 IE9 以上版本支援 :disabled。不過仍然需要 fieldset[disabled]，因為 原生已停用的欄位組在 IE11 中仍然有錯誤。

按鈕群組

  • 使用彈性盒狀模型重新撰寫元件。
  • 移除 .btn-group-justified。您可以使用 <div class="btn-group d-flex" role="group"></div> 作為替換，將其包覆在具有 .w-100 的元素中。
  • 由於已移除 .btn-xs，因此完全移除 .btn-group-xs 類別。
  • 移除按鈕工具列中按鈕群組之間的明確間距；現在使用邊界公用程式。
  • 改善與其他元件搭配使用的文件。
  • 將所有元件、修改器等的父層選取器改為單一類別。
  • 簡化下拉式選單樣式，不再附帶向上或向下箭頭到下拉式選單。
  • 現在可以使用 <div> 或 <ul> 建立下拉式選單。
  • 重新建構下拉式選單樣式和標記，以提供對基於 <a> 和 <button> 的下拉式選單項目提供簡易的內建支援。
  • 將 .divider 重新命名為 .dropdown-divider。
  • 下拉式選單項目現在需要 .dropdown-item。
  • 下拉式選單切換不再需要明確的 <span class="caret"></span>；這現在透過 CSS 的 ::after 在 .dropdown-toggle 上自動提供。

格線系統

  • 新增一個新的 576px 網格斷點作為 sm，表示現在總共有五個層級（xs、sm、md、lg 和 xl）。
  • 將回應式網格修改器類別從 .col-{breakpoint}-{modifier}-{size} 重新命名為 .{modifier}-{breakpoint}-{size} 以簡化網格類別。
  • 捨棄推入和拉出修改器類別，改用新的彈性盒子驅動的 order 類別。例如，您會使用 .col-8.order-2 和 .col-4.order-1，而不是 .col-8.push-4 和 .col-4.pull-8。
  • 新增彈性盒子工具程式類別，以用於網格系統和元件。

列表群組

  • 使用彈性盒狀模型重新撰寫元件。
  • 使用明確的類別 .list-group-item-action 取代 a.list-group-item，以設定清單群組項目連結和按鈕版本的樣式。
  • 新增 .list-group-flush 類別，以與卡片一起使用。
  • 使用彈性盒狀模型重新撰寫元件。
  • 由於改用彈性盒子，標頭中關閉圖示的對齊方式可能會中斷，因為我們不再使用浮動。浮動內容會先出現，但彈性盒子不再適用。更新您的關閉圖示，讓它們出現在對話框標題之後以修復問題。
  • remote 選項（可用於自動載入和注入外部內容到對話框中）和對應的 loaded.bs.modal 事件已移除。我們建議改用用戶端範本或資料繫結架構，或自行呼叫 jQuery.load。
  • 使用彈性盒狀模型重新撰寫元件。
  • 捨棄幾乎所有 > 選擇器，以透過未巢狀類別簡化樣式設定。
  • 我們使用 .nav、.nav-item 和 .nav-link 的個別類別，而不是像 .nav > li > a 這樣的 HTML 特定選擇器。這讓您的 HTML 更具彈性，同時帶來更高的可擴充性。

導覽列已完全改寫為彈性盒子，並改善對齊方式、回應能力和自訂化的支援。

  • 回應式導覽列行為現在透過 必要的 .navbar-expand-{breakpoint} 套用至 .navbar 類別，您可以在其中選擇導覽列折疊的位置。以前這是 Less 變數修改，需要重新編譯。
  • .navbar-default 現在是 .navbar-light，儘管 .navbar-dark 保持不變。每個導覽列都需要其中一個。不過，這些類別不再設定 background-color；相反地，它們基本上只會影響 color。
  • 導覽列現在需要某種背景聲明。從我們的背景工具程式（.bg-*）中選擇，或使用上述 light/inverse 類別設定自己的背景，以進行瘋狂自訂。
  • 給定 flexbox 樣式，導覽列現在可以使用 flexbox 工具程式輕鬆對齊選項。
  • .navbar-toggle 現在是 .navbar-toggler，並具有不同的樣式和內部標記（不再有三個 <span>）。
  • 完全捨棄 .navbar-form 類別。它不再是必要的；相反，只需使用 .form-inline，並根據需要套用 margin 工具程式即可。
  • 導覽列預設不再包含 margin-bottom 或 border-radius。根據需要使用工具程式。
  • 所有包含導覽列的範例都已更新為包含新的標記。

分頁

  • 使用彈性盒狀模型重新撰寫元件。
  • 現在需要在 .pagination 的後代上使用明確的類別（.page-item、.page-link）。
  • 完全捨棄 .pager 元件，因為它只不過是自訂的輪廓按鈕。
  • 現在需要在 .breadcrumb 的後代上使用明確的類別 .breadcrumb-item。

標籤和徽章

  • 合併 .label 和 .badge，以區別於 <label> 元素並簡化相關元件。
  • 新增 .badge-pill 作為圓形「藥丸」外觀的修改器。
  • 標籤不再自動浮動在清單群組和其他元件中。現在需要使用工具程式類別才能這樣做。
  • 已捨棄 .badge-default，並新增 .badge-secondary 以符合其他地方使用的元件修改器類別。

面板、縮圖和井

已完全捨棄，以採用新的卡片元件。

面板

  • .panel 改為 .card，現在使用 flexbox 建置。
  • 已移除 .panel-default，且無替換。
  • 已移除 .panel-group，且無替換。.card-group 不是替換，它是不同的。
  • .panel-heading 改為 .card-header
  • .panel-title 改為 .card-title。根據所需的外觀，您可能還想使用 標題元素或類別（例如 <h3>、.h3）或粗體元素或類別（例如 <strong>、<b>、.font-weight-bold）。請注意，.card-title 雖然名稱類似，但產生的外觀與 .panel-title 不同。
  • .panel-body 改為 .card-body
  • .panel-footer 改為 .card-footer
  • .panel-primary、.panel-success、.panel-info、.panel-warning 和 .panel-danger 已捨棄，改用從我們的 $theme-colors Sass 地圖產生的 .bg-、.text- 和 .border 工具程式。

進度

  • 以 .bg-* 工具程式取代情境 .progress-bar-* 類別。例如，class="progress-bar progress-bar-danger" 變為 class="progress-bar bg-danger"。
  • 將動畫進度條的 .active 替換為 .progress-bar-animated。
  • 全面檢修整個組件，以簡化設計和樣式。我們減少了您需要覆寫的樣式，並新增了指示器和圖示。
  • 所有 CSS 已取消巢狀並重新命名，確保每個類別都以 .carousel- 為字首。
    • 對於輪播項目，.next、.prev、.left 和 .right 現在分別為 .carousel-item-next、.carousel-item-prev、.carousel-item-left 和 .carousel-item-right。
    • .item 現在也為 .carousel-item。
    • 對於上一個/下一個控制項，.carousel-control.right 和 .carousel-control.left 現在分別為 .carousel-control-next 和 .carousel-control-prev，表示它們不再需要特定的基礎類別。
  • 移除所有回應式樣式，改用工具程式（例如，在特定視窗中顯示標題）和自訂樣式（視需要）。
  • 移除輪播項目中圖片的覆寫，改用工具程式。
  • 調整輪播範例，以包含新的標記和樣式。

表格

  • 移除對樣式巢狀表格的支援。所有表格樣式現在都繼承自 v4，以簡化選擇器。
  • 新增反向表格變體。

工具

  • 顯示、隱藏等
    • 讓顯示工具程式具有回應性（例如，.d-none 和 d-{sm,md,lg,xl}-none）。
    • 放棄大部分 .hidden-* 工具程式，改用新的 顯示工具程式。例如，不要使用 .hidden-sm-up，改用 .d-sm-none。將 .hidden-print 工具程式重新命名，以使用顯示工具程式的命名方式。有關更多資訊，請參閱此頁面的 回應式工具程式 區段。
    • 新增 .float-{sm,md,lg,xl}-{left,right,none} 類別，以進行回應式浮動，並移除 .pull-left 和 .pull-right，因為它們與 .float-left 和 .float-right 重複。
  • 類型
    • 在我們的文字對齊類別 .text-{sm,md,lg,xl}-{left,center,right} 中新增回應式變異。
  • 對齊和間距
  • 更新 Clearfix，以放棄對舊版瀏覽器的支援。

供應商前綴混合

Bootstrap 3 的 供應商字首 混入在 v3.2.0 中已標示為不建議使用，並已在 Bootstrap 4 中移除。由於我們使用 Autoprefixer，因此它們不再必要。

移除下列混入：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

文件

我們的文件也全面升級。以下是詳細資訊

  • 我們仍然使用 Jekyll，但在混入中加入了外掛程式
    • bugify.rb 用於有效率地列出我們的 瀏覽器錯誤 頁面上的項目。
    • example.rb 是預設 highlight.rb 外掛程式的自訂分支，允許更輕鬆地處理範例程式碼。
    • callout.rb 是類似的自訂分支，但專門設計給我們的特殊文件標示。
    • jekyll-toc 用於產生我們的目錄。
  • 所有文件內容已改寫成 Markdown（而非 HTML），以便於編輯。
  • 頁面已重新組織，以簡化內容並提供更易於理解的階層結構。
  • 我們已從一般 CSS 移轉到 SCSS，以充分利用 Bootstrap 的變數、混合和更多功能。

回應式工具

在 v4.0.0 中已移除所有 @screen- 變數。請改用 media-breakpoint-up()、media-breakpoint-down() 或 media-breakpoint-only() Sass 混合，或 $grid-breakpoints Sass 地圖。

我們的回應式公用程式類別已大部分移除，取而代之的是明確的 display 公用程式。

  • 已移除 .hidden 和 .show 類別，因為它們與 jQuery 的 $(...).hide() 和 $(...).show() 方法衝突。請改用切換 [hidden] 屬性或使用內嵌樣式，例如 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 alpha 中移除：.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 中網格斷點的變更表示您需要使用較大的斷點才能達成相同的結果。新的回應式公用程式類別不會試圖適應較不常見的情況，其中元素的能見度無法表示為視窗大小的單一連續範圍；在這種情況下，您需要使用自訂 CSS。