迁移到Bootstrap v4(Migrating to v4)

Bootstrap 4是整个项目的主要重写。 最重要的更改总结如下,随后是对相关组件的更具体更改。

稳定的变化

从Beta 3到稳定的v4.x版本,没有重大变化,但有一些显着变化。

打印(Printing)

  • 修复了打印工具损坏的问题。 以前,使用.d-print-*类会意外地推翻任何其他.d-*类。 现在,它们与我们的其他显示实用程序匹配,并且仅适用于该媒体(“ @media print”)。

  • 扩展了可用的打印显示实用程序以匹配其他实用程序。 Beta 3及更高版本仅具有“ block”,“ inline-block”,“ inline”和“ none”。 稳定版v4添加了“ flex”,“ inline-flex”,“ table”,“ table-row”和“ table-cell”。

  • 修复了跨浏览器的打印预览渲染,这些浏览器具有指定“ @page”大小的新打印样式。

Beta 3变更

虽然Beta 2在Beta阶段看到了我们的大部分重大更改,但在Beta 3版本中仍需要解决一些问题。 如果您要从Beta 2或任何较旧版本的Bootstrap更新到Beta 3,则将应用这些更改。

杂项(Miscellaneous)

  • 删除了未使用的$thumbnail-transition变量。 我们没有过渡任何东西,因此只是多余的代码。
  • npm软件包不再包含源文件和dist文件以外的任何文件; 如果您依靠它们并通过node_modules文件夹运行我们的脚本,则应调整您的工作流程。

表单(Forms)

  • 重新编写了自定义和默认复选框以及单选框。现在,两者都具有匹配的HTML结构(具有同级的和具有

作为其中的一部分,我们更改了CSS,以管理自定义表单复选框和单选框上的多个“背景图片”。以前,现在删除的.custom-control-indicator元素具有背景色,渐变和SVG图标。自定义背景渐变意味着每次只需要更改一个就替换所有这些。现在,我们使用.custom-control-label :: before进行填充和渐变,并使用.custom-control-label :: after后处理该图标。

要内联自定义检查,请添加.custom-control-inline

  • 更新了基于输入的按钮组的选择器。代替样式和行为的“ [data-toggle =“ buttons”] {}”,我们仅将“ data”属性用于JS行为,并依赖新的.btn-group-toggle类进行样式设置。

  • 删除了.col-form-legend,而对.col-form-label进行了一些改进。这样,.col-form-label-sm和.col-form-label-lg可以轻松地用于<legend>元素。

  • 自定义文件输入收到了对其$ custom-file-text` Sass变量的更改。它不再是嵌套的Sass映射,现在仅对一个字符串加电-“ Browse”按钮,因为它现在是从Sass生成的唯一伪元素。 “选择文件”文本现在来自“ .custom-file-label”。

输入框组

  • 输入组插件现在特定于它们相对于输入的位置。 我们为两个新类(.input-group-prepend.input-group-append)删除了“ .input-group-addon”和“ .input-group-btn”。 您现在必须显式使用一个追加或前置,以简化我们的许多CSS。 在一个追加或前置中,将您的按钮放置在其他任何地方,但将文本包装在.input-group-text中。

  • 现在支持验证样式,也支持多个输入(尽管每个组只能验证一个输入)。

  • 大小调整类必须位于父“ .input-group”上,而不是单个表单元素上。

Beta 2变更

在测试版中,我们的目标是保持没有重大变化。 但是,事情并非总是按计划进行。 从Beta 1到Beta 2时,以下是要记住的重大变化。

打断(Breaking)

  • 删除了$ badge-color变量及其在.badge上的用法。我们使用颜色对比功能根据“背景颜色”选择“颜色”,因此该变量是不必要的。
  • 将grayscale()函数重命名为gray()以避免与CSS原生grayscale过滤器发生冲突。
  • 将.table-inverse,.thead-inverse和.thead-default分别重命名为。*-dark和..- light,以匹配我们在其他地方使用的配色方案。
  • 响应表现在为每个网格断点生成类。这与Beta 1的不同之处在于,您一直在使用的.table-sensitive目录更像是.table-sensitive-md目录。现在,您可以根据需要使用.table-sensitive或.table-sensitive- {sm,md,lg,xl}。
  • 已弃用Bower支持,因为不推荐使用软件包管理器(例如Yarn或npm)。 [有关详细信息,请参见bower / bower#2298](https://github.com/bower/bower/issues/2298)。
  • Bootstrap仍然需要jQuery 1.9.1或更高版本,但是建议您使用3.x版本,因为v3.x支持的浏览器是Bootstrap支持的浏览器以及v3.x具有一些安全修复程序。
  • 删除了未使用的.form-control-label类。如果您确实使用了该类,则它是.col-form-label类的副本,该类将<label>垂直居中放置,并将其相关的输入放置在水平表单布局中。
  • 将“ color-yiq”从包含“ color”属性的mixin更改为返回值的函数,允许您将其用于任何CSS属性。例如,您可以写成color:color-yiq(#000);而不是color-yiq(#000);。

高亮(Highlights)

  • 在模态框上引入了新的“指针事件”用法。 外部的“ .modal-dialog”会通过带有“ pointer-events:none”的事件进行传递,以进行自定义点击处理(可以仅监听.modal-backdrop的任何点击),然后抵消实际的点击 具有指针事件自动模式的.modal-content

摘要

从v3迁移到v4时,您需要注意以下重要事项。

浏览器支持

  • 不再支持IE8,IE9和iOS 6。 v4现在仅是IE10 +和iOS 7+。 对于需要这两个网站之一的网站,请使用v3。
  • 增加了对Android v5.0 Lollipop的Browser和WebView的官方支持。 仅非正式地支持早期版本的Android浏览器和WebView。

全局变化

  • 默认情况下,Flexbox处于启用状态。通常,这意味着要远离浮点数,而要跨越我们的组件。
  • 从源CSS文件的Less 切换到 Sass
  • 尽管像素仍用于媒体查询和网格行为,因为设备视口不受类型大小的影响,但从“ 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属性值对和边距/填充间距快捷方式添加了数十个新的utility classes

网格系统

  • 已移至flexbox。 -在网格mixins和预定义的类中增加了对flexbox的支持。 -作为flexbox的一部分,包括对垂直和水平对齐类的支持。
  • 更新的网格类别名称和新的网格层。 -在“ 768px”下方添加了一个新的“ sm”网格层,以进行更精细的控制。现在,我们有xs,sm,md,lg和lg。这也意味着每一层都被提升了一个级别(因此v3中的.col-md-6现在是v4中的.col-lg-6)。 -xs网格类已被修改为不要求中缀更准确地表示它们以min-width:0'而不是设置的像素值开始应用样式。而不是.col-xs-6,现在是.col-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。现在,您无需编写@media(min-width:@ screen-sm-min){…},而可以编写@include media-breakpoint-up(sm){…}`。

组件

  • Dropped panels, thumbnails, and wells for a new all-encompassing component, cards.
  • Dropped the Glyphicons icon font. If you need icons, some options are:
  • Dropped the Affix jQuery plugin.
    • We recommend using position: sticky instead. See the HTML5 Please entry for details and specific polyfill recommendations. One suggestion is to use an @supports rule for implementing it (e.g., @supports (position: sticky) { ... })
    • If you were using Affix to apply additional, non-position styles, the polyfills might not support your use case. One option for such uses is the third-party ScrollPos-Styler library.
  • Dropped the pager component as it was essentially slightly customized buttons.
  • Refactored nearly all components to use more un-nested class selectors instead of over-specific children selectors.

组件变化

此列表按组件突出显示了v3.x.x和v4.0.0之间的主要更改。

重启(Reboot)

Bootstrap 4的新功能是Reboot,这是一个新样式表,它建立在Normalize之上,带有我们自己一些固定的重置样式。 此文件中出现的选择器仅使用元素-此处没有类。 这将我们的重置样式与我们的组件样式隔离开来,以实现更具模块化的方法。 其中包括的一些最重要的重置是“ box-sizing:border-box”更改,许多元素,链接样式和许多表单元素重置都从“ em”单位移到“ rem”单位。

排版(Typography)

  • 将所有.text-实用程序移至_utilities.scss文件。
  • 删除了.page-header样式,因为它的样式可以通过实用程序来应用。
  • .dl-horizontal已删除。 而是在<dl>上使用.row,并在其<dt>和<dd>子代上使用网格列类(或mixins)。
  • 重新设计了blockquotes,将其样式从<blockquote>元素移至单个类.blockquote。 删除了文本实用程序的.blockquote-reverse修饰符。
  • .list-inline现在要求其子级列表项具有新的.list-inline-item类。

图片(Images)

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

表格(Tables)

  • 几乎删除了选择器的所有实例,这意味着嵌套表现在将自动从其父级继承样式。 这极大地简化了我们的选择器和潜在的自定义设置。
  • 为了保持一致性,将.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

表单(Forms)

  • 移动的元素将重置为_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-horizo​​ntal类的要求。
    • .form-group不再通过mixin应用.row中的样式,因此,水平网格布局现在需要.row(例如,<div class =“ form-group row”>)。
    • .form-controls的垂直居中标签中添加了新的.col-form-label类。
    • 为带有网格类的紧凑表单布局添加了新的.form-row(将您的.row交换为.form-row并转到)。
  • 添加了自定义表单支持(用于复选框,单选,选择和文件输入)。
  • 通过CSS的:invalid:valid伪类,用HTML5表单验证将.has-error,.has-warning和.has-success类替换为HTML5表单。
  • 将.form-control-static重命名为.form-control-plaintext。

按钮(Buttons)

  • 将.btn-default重命名为.btn-secondary。
  • 完全删除了.btn-xs类,因为.btn-sm按比例比v3小得多。
  • 删除了“ button.js” jQuery插件的stateful button功能。 这包括$()。button(string)和$()。button(’reset’)`方法。 我们建议改用少量的自定义JavaScript,这将具有完全按照您希望的方式运行的好处。
    • 请注意,该插件的其他功能(按钮复选框,按钮单选按钮,单切换按钮)已保留在v4中。
  • 将按钮的[[disabled]更改为:disabled,因为IE9 +支持:disabled。 但是,仍然需要fieldset [disabled]`,因为native disabled fieldsets are still buggy in IE11.

按钮组(Button group)

  • 用flexbox重写组件。
  • 移除了.btn-group-justified`。 作为替代,您可以使用<div class =“ btn-group d-flex” role =“ group”> </ div>作为带有.w-100的元素的包装。
  • 完全删除了.btn-xs后,完全删除了.btn-group-xs类。
  • 删除了按钮工具栏中按钮组之间的显式间距; 立即使用保证金实用程序。
  • 改进了与其他组件一起使用的文档。

下拉菜单(Dropdowns)

  • 将所有组件,修饰符等的父类选择器切换为单个类。
  • 简化的下拉样式,不再附带在下拉菜单上附加的向上或向下箭头。
  • 现在可以使用<div>s或<ul>s构建下拉列表。
  • 重建了下拉样式和标记,以为基于<button>的下拉项提供简单的内置支持。
  • 将.divider重命名为.dropdown-divider。
  • 下拉菜单项现在需要.dropdown-item
  • 下拉开关不再需要显式的<span class =“ caret”> </ span>`; 现在通过.dropdown-toggle上的CSS的::: after自动提供。

网格系统

-添加了一个新的576px网格断点作为sm,这意味着现在共有五个层(xssmmdlgxl)。 -将响应网格修改器类从.col- {breakpoint}-{modifier}-{size}重命名为。{modifier}-{breakpoint}-{size},以简化网格类。 -删除了新的由flexbox驱动的order类的push和pull修饰符类。 例如,您可以使用.col-8.order-2和.col-4.order-,而不是.col-8.push-4和.col-4.pull-8。 1。 -添加了用于网格系统和组件的flexbox通用工具类。

列表组

  • 用flexbox重写组件。
  • 用显式类“ .list-group-item-action”替换了“ a.list-group-item”,以样式化列表组项目的链接和按钮版本。
  • 添加了用于卡的.list-group-flush类。

模态框(Modal)

  • 用flexbox重写组件。
  • 考虑到向flexbox的转移,由于我们不再使用浮点数,标题中的关闭图标对齐可能会中断。 浮动内容优先,但使用flexbox不再是这种情况。 更新您的解雇图标,以解决模式标题之后的问题。
  • remote选项(可用于自动加载外部内容并将其注入到模态中)和相应的loaded.bs.modal事件已删除。 我们建议您改用客户端模板或数据绑定框架,或者自己调用jQuery.load

导航(Navs)

  • 用flexbox重写组件。
  • 删除了几乎所有的>选择器,以通过未嵌套的类简化样式。
  • 我们不使用特定于HTML的选择器(如.nav> li> a),而是对.nav`s,.nav-item和snav-link使用单独的类。 这使您的HTML更加灵活,同时带来了更高的可扩展性。

导航条(Navbar)

导航栏已完全用flexbox重写,并改进了对对齐,响应和自定义的支持。

  • 响应式导航栏行为现在通过**必需的.navbar-expand- {breakpoint}应用于.navbar`类,您可以在其中选择折叠导航栏的位置。以前,这是较少变量的修改,需要重新编译。
  • .navbar-default现在是.navbar-light,尽管.navbar-dark保持不变。 每个导航栏上都需要其中之一。但是,这些类不再设置background-colors;相反,它们实际上仅影响“颜色”。
  • 导航栏现在需要某种类型的背景声明。从我们的后台实用程序(.bg- *)中选择,或使用上面的浅色/反色类设置自己的for mad customization.
  • 给定了flexbox样式,导航栏现在可以使用flexbox实用程序提供简单的对齐选项。
  • .navbar-toggle现在是.navbar-toggler,具有不同的样式和内部标记(不再有三个`s)。
  • 完全删除了.navbar-form类。不再需要;相反,只需使用.form-inline并根据需要应用边距实用程序。
  • 默认情况下,导航栏不再包含“ margin-bottom”或“ border-radius”。根据需要使用实用程序。
  • 所有具有导航栏的示例均已更新,包括新标记。

分页(Pagination)

  • 用flexbox重写组件。
  • 现在,.pagination`s的后代需要显式类(.page-item,.page-link)。
  • 完全删除了.pager组件,因为它只不过是自定义的轮廓按钮。

面包屑导航(Breadcrumbs)

  • 现在,.breadcrumbs的后代需要显式类.breadcrumb-item`。

标签和徽章(Labels and badges)

-合并了.label和.badge以消除

面板,缩略图和孔(Panels, thumbnails, and wells)

完全删除了新卡组件。

面板

  • .panel to .card, now built with flexbox.
  • .panel-default removed and no replacement.
  • .panel-group removed and no replacement. .card-group is not a replacement, it is different.
  • .panel-heading to .card-header
  • .panel-title to .card-title. Depending on the desired look, you may also want to use heading elements or classes (e.g. <h3>, .h3) or bold elements or classes (e.g. <strong>, <b>, .font-weight-bold). Note that .card-title, while similarly named, produces a different look than .panel-title.
  • .panel-body to .card-body
  • .panel-footer to .card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, and .panel-danger have been dropped for .bg-, .text-, and .border utilities generated from our $theme-colors Sass map.

进度条(Progress)

  • 用.bg- *实用程序替换了上下文的.progress-bar- *类。 例如,“ class =“ progress-bar progress-bar-danger”变为“ class =“ progress-bar bg-danger”
  • 将动画进度条的.active替换为.progress-bar-animated。

轮播(Carousel)

  • 大修整个组件,以简化设计和样式。 我们为您覆盖的样式较少,新的指示器和新的图标。
  • 所有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,这意味着它们不再需要 具体的基类。
  • 删除了所有自适应样式,并根据需要使用实用程序(例如,在某些视口上显示字幕)和自定义样式。
  • 删除了轮播项目中图像的图像替代,这会延迟到实用程序。
  • 调整了“轮播”示例,以包括新的标记和样式。

表格(Tables)

  • 删除了对样式化嵌套表的支持。 现在,所有表格样式都在v4中继承,以实现更简单的选择器。
  • 添加了反向表变体。

通用工具(Utilities)

  • Display, hidden, and more:
    • Made display utilities responsive (e.g., .d-none and d-{sm,md,lg,xl}-none).
    • Dropped the bulk of .hidden-* utilities for new display utilities. For example, instead of .hidden-sm-up, use .d-sm-none. Renamed the .hidden-print utilities to use the display utility naming scheme. More info under the Responsive utilities section of this page.
    • Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
  • Type:
    • Added responsive variations to our text alignment classes .text-{sm,md,lg,xl}-{left,center,right}.
  • Alignment and spacing:
  • Clearfix updated to drop support for older browser versions.

Vendor prefix mixins

Bootstrap 4在v3.2.0中已弃用的Bootstrap 3的vendor prefix mixins已在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

文档(Documentation)

我们的文档也得到了全面的升级。 这是低级注意项:

  • 我们仍在使用Jekyll,但是我们有一些插件:
    • bugify.rb is used to efficiently list out the entries on our browser bugs page.
    • example.rb is a custom fork of the default highlight.rb plugin, allowing for easier example-code handling.
    • callout.rb is a similar custom fork of that, but designed for our special docs callouts.
    • jekyll-toc is used to generate our table of contents.
  • 所有文档内容均已用Markdown(而不是HTML)重写,以便于编辑。
  • 页面经过重新组织,内容更加简单,层次结构更加平易近人。
  • 我们从常规CSS迁移到SCSS,以充分利用Bootstrap的变量,mixin等。

响应式通用工具

v4.0.0中已删除所有“@screen-”变量。 请改用media-breakpoint-up()media-breakpoint-down()media-breakpoint-only()Sass mixins或$ grid-breakpoints Sass映射Map替换。

我们的响应通用工具类在很大程度上已被删除,转而使用显式的display通用工具。

  • The .hidden and .show classes have been removed because they conflicted with jQuery’s $(...).hide() and $(...).show() methods. Instead, try toggling the [hidden] attribute or use inline styles like style="display: none;" and style="display: block;".
  • All .hidden- classes have been removed, save for the print utilities which have been renamed.
    • Removed from 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
    • Removed from 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
  • Print utilities no longer start with .hidden- or .visible-, but with .d-print-.
    • Old names: .visible-print-block, .visible-print-inline, .visible-print-inline-block, .hidden-print
    • New classes: .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。