Source

遷移到 v4

Bootstrap 4 是對整個項目的重大改寫。下面總結了最顯著的變化，然後是對相關組件的更具體的變化。

穩定的變化

從 Beta 3 遷移到我們穩定的 v4.0 版本，沒有重大變化，但有一些值得注意的變化。

印刷

  • 修復了損壞的打印實用程序。以前，使用一個.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屬性的支持（以前需要父類）並更好地支持我們的表單驗證。

    作為其中的一部分，我們更改了用於管理background-image自定義表單複選框和單選框上的多個 s 的 CSS。以前，現在移除的.custom-control-indicator元素具有背景顏色、漸變和 SVG 圖標。自定義背景漸變意味著每次您只需要更改一個時都要替換所有這些。現在，我們有了.custom-control-label::before填充和漸變並.custom-control-label::after處理圖標。

    要進行自定義內聯檢查，請添加.custom-control-inline.

  • 更新了基於輸入的按鈕組的選擇器。我們將屬性僅用於 JS 行為，而不是[data-toggle="buttons"] { }用於樣式和行為，data並依賴於新.btn-group-toggle的樣式類。

  • 去掉.col-form-legend有利於稍微改進.col-form-label。這種方式.col-form-label-sm可以.col-form-label-lg輕鬆用於<legend>元素。

  • 自定義文件輸入收到了對其$custom-file-textSass 變量的更改。它不再是嵌套的 Sass 映射，現在只為一個字符串供電——Browse按鈕，因為它現在是我們 Sass 生成的唯一偽元素。文本現在Choose file來自.custom-file-label.

輸入組

  • 輸入組插件現在特定於它們相對於輸入的位置。我們已經放棄了兩個新課程.input-group-addon和。您現在必須顯式使用附加或前置，簡化我們的大部分 CSS。在 append 或 prepend 中，將按鈕放置在其他任何地方，但將文本包裝在..input-group-btn.input-group-prepend.input-group-append.input-group-text

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

  • 大小調整類必須在父元素上，.input-group而不是在單個表單元素上。

Beta 2 更改

在測試階段，我們的目標是沒有重大變化。然而，事情並不總是按計劃進行。以下是從 Beta 1 遷移到 Beta 2 時要牢記的重大變化。

打破

  • 刪除$badge-color了變量及其在.badge. 我們使用顏色對比函數來color根據選擇一個background-color，因此該變量是不必要的。
  • 重命名grayscale()函數以gray()避免與 CSS 原生grayscale過濾器發生衝突。
  • 重命名.table-inverse,.thead-inverse和.thead-defaultto .*-darkand .*-light，與我們在其他地方使用的配色方案相匹配。
  • 響應表現在為每個網格斷點生成類。這與 Beta 1 不同，因為.table-responsive您一直在使用的更像.table-responsive-md. 您現在可以根據需要使用.table-responsive或。.table-responsive-{sm,md,lg,xl}
  • 對於替代方案（例如，Yarn 或 npm），已棄用作為包管理器的 Bower 支持。有關詳細信息，請參見 bower/bower#2298。
  • Bootstrap 仍然需要 jQuery 1.9.1 或更高版本，但建議您使用 3.x 版本，因為 v3.x 支持的瀏覽器是 Bootstrap 支持的瀏覽器，而且 v3.x 有一些安全修復。
  • 刪除了未使用的.form-control-label類。如果您確實使用了這個類，那麼它是.col-form-label垂直居中的類的副本，<label>它與水平表單佈局中的關聯輸入相關聯。
  • color-yiq將包含該屬性的 mixin更改為color返回值的函數，允許您將其用於任何 CSS 屬性。例如color-yiq(#000)，您應該寫而不是color: color-yiq(#000);.

強調

  • 在模態上引入了新的pointer-events用法。外部.modal-dialog通過pointer-events: none用於自定義點擊處理的事件（使得可以只監聽.modal-backdrop任何點擊），然後針對實際.modal-content的 with抵消它pointer-events: auto。

概括

以下是從 v3 遷移到 v4 時需要注意的重要事項。

瀏覽器支持

  • 放棄對 IE8、IE9 和 iOS 6 的支持。v4 現在只有 IE10+ 和 iOS 7+。對於需要其中任何一個的站點，請使用 v3。
  • 添加了對 Android v5.0 Lollipop 的瀏覽器和 WebView 的官方支持。早期版本的 Android 瀏覽器和 WebView 仍然只是非官方支持。

全局變化

  • Flexbox 默認啟用。一般來說，這意味著在我們的組件中遠離浮動和更多。
  • 為我們的源 CSS 文件從Less切換到Sass 。
  • 從pxto切換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 的一部分，包括對垂直和水平對齊類的支持。
  • 更新了網格類名稱和新的網格層。
    • 在下方添加了一個新的sm網格層768px以進行更精細的控制。我們現在有xs, sm, md, lg, 和xl。這也意味著每一層都提升了一個級別（所以.col-md-6在 v3 中現在.col-lg-6在 v4 中）。
    • xs網格類已被修改為不需要中綴來更準確地表示它們開始應用樣式min-width: 0而不是設置的像素值。而不是.col-xs-6，現在是.col-6。所有其他網格層都需要中綴（例如，sm）。
  • 更新了網格大小、mixin 和變量。
    • 網格排水溝現在有一個 Sass 地圖，因此您可以在每個斷點指定特定的排水溝寬度。
    • 更新了網格 mixin 以利用make-col-readyprep mixin 和 amake-col來設置flex和max-width用於單個列的大小。
    • 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) { ... }。

成分

  • 為一個新的無所不包的組件卡放置了面板、縮略圖和井。
  • 刪除了 Glyphicons 圖標字體。如果您需要圖標，一些選項是：
  • 刪除了 Affix jQuery 插件。
  • 刪除了尋呼機組件，因為它本質上是略微定制的按鈕。
  • 重構了幾乎所有組件以使用更多非嵌套類選擇器，而不是過度特定的子選擇器。

按組件

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

重啟

Bootstrap 4 的新功能是Reboot，這是一個新的樣式表，它建立在 Normalize 的基礎上，並帶有我們自己有些固執的重置樣式。出現在這個文件中的選擇器只使用元素——這裡沒有類。這將我們的重置樣式與我們的組件樣式隔離開來，以實現更加模塊化的方法。其中包括的一些最重要的重置是box-sizing: border-box更改、從許多元素上em的rem單元、鏈接樣式和許多表單元素重置。

排版

  • 將所有.text-實用程序移至該_utilities.scss文件。
  • .page-header除了邊框之外，它的所有樣式都可以通過實用程序應用。
  • .dl-horizontal已被刪除。相反，在其和子項.row上使用<dl>和使用網格列類（或 mixins） 。<dt><dd>
  • 自定義<blockquote>樣式已移至類.blockquote和.blockquote-reverse修飾符。
  • .list-inline現在要求其子列表項具有.list-inline-item應用到它們的新類。

圖片

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

表

  • 選擇器的幾乎所有實例>都已被刪除，這意味著嵌套表現在將自動從其父級繼承樣式。這極大地簡化了我們的選擇器和潛在的定制。
  • 響應式表格不再需要包裝元素。相反，只需將.table-responsive右側放在<table>.
  • 重命名.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不再應用來自.rowvia mixin 的樣式，因此.row現在需要水平網格佈局（例如，<div class="form-group row">）。
    • 使用 s 將新.col-form-label類添加到垂直居中標籤.form-control。
    • 為帶有網格類的緊湊表單佈局添加了新的內容.form-row（交換你.row的 a.form-row和 go）。
  • 添加了自定義表單支持（用於復選框、單選框、選擇和文件輸入）。
  • 通過 CSS和偽類將.has-error、.has-warning和類替換.has-success為 HTML5 表單驗證。:invalid:valid
  • 重命名.form-control-static為.form-control-plaintext.

鈕扣

  • 重命名.btn-default為.btn-secondary.
  • 完全放棄了這個.btn-xs類，因為.btn-sm它的比例比 v3 小得多。
  • jQuery 插件的有狀態按鈕功能已被刪除。button.js這包括$().button(string)和$().button('reset')方法。我們建議改用一點點自定義 JavaScript，這樣可以完全按照您想要的方式運行。
    • 請注意，插件的其他功能（按鈕複選框、按鈕單選、單切換按鈕）已在 v4 中保留。
  • 將按鈕更改[disabled]為:disabledIE9+ 支持:disabled的 . 但是fieldset[disabled]仍然是必要的，因為本機禁用的字段集在 IE11 中仍然存在錯誤。

按鈕組

  • 用 flexbox 重寫了組件。
  • 已移除.btn-group-justified。作為替代，您可以<div class="btn-group d-flex" role="group"></div>使用.w-100.
  • 完全放棄了.btn-group-xs課程，因為刪除了.btn-xs.
  • 刪除了按鈕工具欄中按鈕組之間的顯式間距；現在使用保證金工具。
  • 改進了與其他組件一起使用的文檔。
  • 從父選擇器切換到所有組件、修飾符等的單一類。
  • 簡化的下拉樣式不再帶有附加到下拉菜單的向上或向下箭頭。
  • 現在可以使用<div>s 或<ul>s 構建下拉列表。
  • <a>重建下拉樣式和標記，為<button>下拉項提供簡單的內置支持。
  • 重命名.divider為.dropdown-divider.
  • 下拉項目現在需要.dropdown-item.
  • 下拉切換不再需要明確的<span class="caret"></span>; 這現在是通過 CSS 的::afteron自動提供的.dropdown-toggle。

網格系統

  • 添加了一個新的576px網格斷點為sm，這意味著現在總共有五個層（xs、sm、md、lg和xl）。
  • 將響應式網格修改器類從 重命名.col-{breakpoint}-{modifier}-{size}為.{modifier}-{breakpoint}-{size}更簡單的網格類。
  • 為新的 flexbox 驅動的類刪除了 push 和 pull 修飾符order類。例如，您將使用and代替.col-8.push-4and 。.col-4.pull-8.col-8.order-2.col-4.order-1
  • 為網格系統和組件添加了 flexbox 實用程序類。

列出組

  • 用 flexbox 重寫了組件。
  • 替換a.list-group-item為顯式類 ,.list-group-item-action用於樣式化列表組項的鏈接和按鈕版本。
  • 添加.list-group-flush了用於卡片的類。
  • 用 flexbox 重寫了組件。
  • 鑑於轉向 flexbox，由於我們不再使用浮動，因此標題中關閉圖標的對齊可能會被破壞。浮動內容首先出現，但對於 flexbox，情況不再如此。更新您的解僱圖標，使其出現在要修復的模式標題之後。
  • 該remote選項（可用於自動加載外部內容並將其註入模式）和相應的loaded.bs.modal事件已被刪除。我們建議改為使用客戶端模板或數據綁定框架，或者自己調用jQuery.load。
  • 用 flexbox 重寫了組件。
  • >通過非嵌套類刪除了幾乎所有選擇器以實現更簡單的樣式。
  • 我們對s、s 和s.nav > li > a使用單獨的類，而不是 HTML 特定的選擇器，如s。這使您的 HTML 更加靈活，同時帶來了更高的可擴展性。.nav.nav-item.nav-link

導航欄在 flexbox 中完全重寫，改進了對對齊、響應和自定義的支持。

  • 響應式導航欄行為現在通過您選擇在哪裡折疊導航欄所需.navbar的位置應用於類。以前這是一個較少的變量修改，需要重新編譯。 .navbar-expand-{breakpoint}
  • .navbar-default是現在.navbar-light，雖然.navbar-dark保持不變。每個導航欄都需要其中之一。但是，這些類不再設置background-colors；相反，它們基本上只影響color.
  • 導航欄現在需要某種背景聲明。從我們的後台實用程序 ( .bg-*) 中進行選擇，或者使用上面的燈光/逆向類進行自定義設置。
  • 給定 flexbox 樣式，導航欄現在可以使用 flexbox 實用程序來輕鬆對齊選項。
  • .navbar-toggleis now.navbar-toggler並且具有不同的樣式和內部標記（不再是三個<span>s）。
  • 完全放棄了.navbar-form課程。不再需要了；相反，只需.form-inline根據需要使用和應用保證金實用程序。
  • 導航欄不再包括margin-bottom或border-radius默認情況下。根據需要使用實用程序。
  • 所有以導航欄為特色的示例都已更新以包含新的標記。

分頁

  • 用 flexbox 重寫了組件。
  • s的後代現在需要顯式類 ( .page-item, ).page-link.pagination
  • 完全放棄了該.pager組件，因為它只不過是自定義的大綱按鈕。
  • s.breadcrumb-item的後代現在需要一個顯式類 ,.breadcrumb

標籤和徽章

  • 重命名.label為.badge以消除<label>元素的歧義。
  • 丟棄該.badge組件，因為它與標籤幾乎相同。將.badge-pill修飾符與標籤組件一起使用以獲得圓潤的外觀。
  • 徽章不再在列表組和其他組件中自動浮動。現在需要實用程序類。
  • .badge-default已被刪除並.badge-secondary添加以匹配其他地方使用的組件修飾符類。

面板、縮略圖和孔

完全放棄了新的卡片組件。

面板

  • .panelto .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, 和, , , 和從我們的Sass 映射生成的實用程序.panel-danger已被刪除。.bg-.text-.border$theme-colors

進步

  • 用實用程序替換了上下文.progress-bar-*類。.bg-*例如，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。
    • 對於 prev/next 控件，.carousel-control.right以及.carousel-control.leftnow.carousel-control-next和.carousel-control-prev，這意味著它們不再需要特定的基類。
  • 刪除了所有響應式樣式，根據需要使用實用程序（例如，在某些視口上顯示標題）和自定義樣式。
  • 刪除了輪播項目中圖像的圖像覆蓋，遵循實用程序。
  • 調整 Carousel 示例以包含新的標記和样式。

表

  • 刪除了對樣式嵌套表的支持。所有表格樣式現在都在 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 的供應商前綴mixin 在 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是一個類似的自定義分支，但專為我們的特殊文檔標註而設計。
    • markdown-block.rb用於在 HTML 元素（如表格）中呈現 Markdown 片段。
    • jekyll-toc用於生成我們的目錄。
  • 所有文檔內容都已用 Markdown（而不是 HTML）重寫，以便於編輯。
  • 頁面已重新組織，以提供更簡單的內容和更平易近人的層次結構。
  • 我們從常規 CSS 遷移到 SCSS，以充分利用 Bootstrap 的變量、mixin 等。

響應式實用程序

@screen-v4.0.0 中刪除了所有變量。請改用media-breakpoint-up()、media-breakpoint-down()或media-breakpoint-only()Sass 混合程序或$grid-breakpointsSass 映射。

我們的響應式實用程序類已在很大程度上被刪除，以支持顯式display實用程序。

  • 和類已被刪除，因為它們與 jQuery 的.hidden和方法衝突。相反，請嘗試切換屬性或使用內聯樣式，例如and 。.show$(...).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。