Bootstrap/docs/4.5/migration

来自菜鸟教程
跳转至：导航、​搜索

在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> and <label> ）和相同的布局样式（堆叠的默认样式,与修饰符类内联）。 这使我们可以根据输入的状态来设置标签样式,从而简化了对 disabled 属性（以前需要父类）,并更好地支持我们的表单验证。

    在此过程中,我们更改了用于管理多个 background-image 在自定义表单复选框和单选按钮上。 以前,现在已删除 .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 and .col-form-label-lg 可用于 <legend> 元素轻松。

  • 自定义文件输入的更改 $custom-file-text Sass变量。 它不再是嵌套的Sass地图,现在仅支持一个字符串- Browse 按钮,因为这是现在我们的Sass生成的唯一伪元素。 The Choose file 文字现在来自 .custom-file-label.

输入组

  • 输入组插件现在特定于它们相对于输入的位置。 我们放弃了 .input-group-addon and .input-group-btn 对于两个新课程, .input-group-prepend and .input-group-append 。您现在必须显式使用一个追加或前缀,以简化我们的许多CSS。 在追加或前置中,将按钮放置在其他任何位置,但将文字换行 .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-default to .*-dark and .*-light ,匹配我们在其他地方使用的配色方案。
  • 现在,响应表为每个网格断点生成类。 这与Beta 1的不同之处在于 .table-responsive 你一直在使用更像 .table-responsive-md 。您现在可以使用 .table-responsive or .table-responsive-{sm,md,lg,xl} 如所须。
  • 已弃用Bower支持,因为不推荐使用软件包管理器（例如Yarn或npm）。 参见凉亭/凉亭#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-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的Browser和WebView的官方支持。 仅非正式地支持早期版本的Android浏览器和WebView。

全球变化

  • 默认情况下,Flexbox已启用。 总的来说,这意味着要远离浮标,而要跨越我们的组件。
  • 切换自 Less to Sass 用于我们的源CSS文件。
  • 切换自 px to rem 作为像素的主要CSS单位,尽管像素仍然用于媒体查询和网格行为,因为设备视口不受类型大小的影响。
  • 全局字体大小从 14px to 16px.
  • 改进了网格层以添加第五个选项（在 576px 及以下）,并删除了 -xs 这些类的中缀。 例： .col-6.col-sm-4.col-md-3.
  • 通过SCSS变量将单独的可选主题替换为可配置的选项（例如, $enable-gradients: true ).
  • 修改了构建系统,以使用一系列npm脚本代替Grunt。 See package.json 适用于所有脚本,或者适合本地开发需求的项目自述文件。
  • 不再支持Bootstrap的非响应式使用。
  • 放弃在线定制程序,转而使用更广泛的设置文档和定制版本。
  • 增加了几十个新 实用类 用于常见的CSS属性值对和边距/填充间距快捷方式。

网格系统

  • 移至flexbox。
    • 在网格mixins和预定义的类中增加了对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贴图,因此您可以在每个断点处指定特定的装订线宽度。
    • 更新了网格混合以利用 make-col-ready 准备mixin和一个 make-col 设置 flex and max-width 用于单个列的大小。
    • 更改了网格系统媒体查询断点和容器宽度,以考虑新的网格层并确保列可被 12 以其最大宽度。
    • 现在可以通过Sass映射处理网格断点和容器宽度（ $grid-breakpoints and $container-max-widths ）,而不是少数几个单独的变量。 这些取代了 @screen-* 完全可变,并允许您完全自定义网格层。
    • 媒体查询也已更改。 现在,我们不再需要每次都用相同的值重复媒体查询声明了, @include media-breakpoint-up/down/only 。现在,不用写 @media (min-width: @screen-sm-min) { ... } , 你可以写 @include media-breakpoint-up(sm) { ... }.

组件

  • 面板,缩略图和孔掉落 对于一个新的无所不包的组件, 牌 .
  • 删除了Glyphicons图标字体。 如果需要图标,则一些选项为：
  • 删除了Affix jQuery插件。
    • 我们建议使用 position: sticky 代替。 请参阅HTML5请输入 有关详细信息和特定的polyfill建议。 一个建议是使用 @supports 实施规则（例如, @supports (position: sticky) { ... })
    • 如果您使用Affix来应用其他非 position 样式,则polyfill可能不支持您的用例。 此类用途的一种选择是第三方 ScrollPos样式器 图书馆。
  • 删除了传呼机组件 因为它本质上是稍微自定义的按钮。
  • 重构几乎所有组件 使用更多的非嵌套类选择器,而不是过度指定的子选择器。

按组成

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

重启

Bootstrap 4的新功能是 重启 ,这是一个基于Normalize的新样式表,带有我们自己一些自以为是的重置样式。 此文件中出现的选择器仅使用元素-此处没有类。 这将我们的重置样式与我们的组件样式隔离开来,从而提供了一种更加模块化的方法。 其中最重要的一些重置是 box-sizing: border-box 变化,从 em to rem 许多元素上的单位,链接样式和许多表单元素重置。

版式

  • 全部搬走 .text- 实用程序 _utilities.scss 文件。
  • 掉落 .page-header 因为它的样式可以通过实用程序来应用
  • .dl-horizontal 已被删除。 相反,使用 .row on <dl> 并在其上使用网格列类（或mixins） <dt> and <dd> 儿童。
  • 重新设计了块引用,将其样式从 <blockquote> 单个类的元素, .blockquote 。掉了 .blockquote-reverse 文本实用程序的修饰符。
  • .list-inline 现在要求其子级列表项具有新的 .list-inline-item 类适用于他们。

图片

  • 改名 .img-responsive to .img-fluid.
  • 改名 .img-rounded to .rounded
  • 改名 .img-circle to .rounded-circle

表

  • 几乎所有 > 选择器已删除,这意味着嵌套表现在将自动从其父级继承样式。 这极大地简化了我们的选择器和潜在的自定义设置。
  • 改名 .table-condensed to .table-sm 为了一致性。
  • 新增了 .table-inverse 选项。
  • 添加了表头修饰符： .thead-default and .thead-inverse.
  • 重命名上下文类以使其具有 .table- -字首。 于是 .active,.success,.warning,.danger and .info to .table-active,.table-success,.table-warning,.table-danger and .table-info.

形式

  • 移动的元素重置为 _reboot.scss 文件。
  • 改名 .control-label to .col-form-label.
  • 改名 .input-lg and .input-sm to .form-control-lg and .form-control-sm , 分别。
  • 掉落 .form-group-* 为简单起见 Use .form-control-* 现在改为上课。
  • 掉落 .help-block 并替换为 .form-text 用于块级帮助文本。 有关内联帮助文本和其他灵活选项,请使用实用程序类,例如 .text-muted.
  • 掉落 .radio-inline and .checkbox-inline.
  • 合并 .checkbox and .radio into .form-check 和各种 .form-check-* 类。
  • 大修水平形式：
    • 掉了 .form-horizontal 班级要求。
    • .form-group 不再应用来自 .row 通过mixin,所以 .row 现在对于水平网格布局是必需的（例如, <div class="form-group row"> ).
    • 新增了 .col-form-label 类以将标签垂直居中 .form-control s.
    • 新增了 .form-row 用于带有网格类的紧凑表单布局（交换您的 .row 为一个 .form-row 去）。
  • 添加了自定义表单支持（用于复选框,单选,选择和文件输入）。
  • 已更换 .has-error,.has-warning ,和 .has-success 通过CSS进行HTML5表单验证的类 :invalid and :valid 伪类。
  • 改名 .form-control-static to .form-control-plaintext.

纽扣

  • 改名 .btn-default to .btn-secondary.
  • 掉了 .btn-xs 完全作为 .btn-sm 按比例比v3小得多。
  • The 有状态按钮 的功能 button.js jQuery插件已删除。 这包括 $().button(string) and $().button('reset') 方法。 我们建议改用少量的自定义JavaScript,这将具有完全按照您希望的方式运行的好处。
    • 请注意,该插件的其他功能（按钮复选框,按钮单选按钮,单键切换按钮）已保留在v4中。
  • 更改按钮’ [disabled] to :disabled IE9 +支持 :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 or <ul> 现在。
  • 重建的下拉样式和标记可为以下内容提供简单的内置支持 <a> and <button> 基于下拉菜单项。
  • 改名 .divider to .dropdown-divider.
  • 下拉项目现在需要 .dropdown-item.
  • 下拉切换不再需要明确 <span class="caret"></span> ;现在可以通过CSS的 ::after on .dropdown-toggle.

网格系统

  • 新增了 576px 网格断点为 sm ,这意味着现在共有五个层（ xs,sm,md,lg ,和 xl ).
  • 从以下重命名了响应式网格修改器类 .col-{breakpoint}-{modifier}-{size} to .{modifier}-{breakpoint}-{size} 用于更简单的网格类。
  • 删除了新的flexbox驱动的push和pull修饰符类 order 类。 例如,而不是 .col-8.push-4 and .col-4.pull-8 ,您将使用 .col-8.order-2 and .col-4.order-1.
  • 为网格系统和组件添加了flexbox实用程序类。

清单群组

  • 用flexbox重新编写组件。
  • 已更换 a.list-group-item 有一个明确的类, .list-group-item-action ,用于设置列表组项目的链接和按钮版本的样式。
  • 添加 .list-group-flush 卡类。

模态

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

Navs

  • 用flexbox重新编写组件。
  • 几乎全部掉落 > 选择器,用于通过未嵌套的类简化样式。
  • 而不是像HTML这样的特定选择器 .nav > li > a ,我们将单独的类用于 .nav s, .nav-item s和 .nav-link s. 这使您的HTML更加灵活,同时带来了更高的可扩展性。

导航栏

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

  • 自适应导航栏行为现已应用于 .navbar 通过 需要 .navbar-expand-{breakpoint} 您可以在其中选择折叠导航栏的位置。 以前,这是较少变量的修改,需要重新编译。
  • .navbar-default 就是现在 .navbar-light ,虽然 .navbar-dark 保持不变。 每个导航栏上都需要其中之一。 但是,这些类别不再设置 background-color s;相反,它们基本上只影响 color.
  • 导航栏现在需要某种背景声明。 从我们的后台实用程序中选择（ .bg-* ）或使用上述的light/inverse类设置自己的 疯狂定制 .
  • 给定了flexbox样式,导航栏现在可以使用flexbox实用程序来实现简单的对齐选项。
  • .navbar-toggle 就是现在 .navbar-toggler 并且具有不同的样式和内部标记（不再有三种 <span> s).
  • 掉了 .navbar-form 完全上课。 不再需要；相反,只需使用 .form-inline 并根据需要应用保证金实用程序。
  • 导航栏不再包括 margin-bottom or border-radius 默认情况下。 根据需要使用实用程序。
  • 所有具有导航栏的示例均已更新,以包括新标记。

分页

  • 用flexbox重新编写组件。
  • 显式类（ .page-item,.page-link ）现在是的后代所必需的 .paginations
  • 掉了 .pager 组件完全是因为它只是自定义的轮廓按钮。

面包屑

  • 显式类 .breadcrumb-item 现在是的后代所必需的 .breadcrumbs

标签和徽章

  • 合并 .label and .badge 消除歧义 <label> 元素并简化相关组件。
  • 添加 .badge-pill 作为圆形“药丸”外观的修饰符。
  • 徽章不再自动浮动在列表组和其他组件中。 为此,现在需要实用程序类。
  • .badge-default 已被删除, .badge-secondary 添加以匹配其他地方使用的组件修饰符类。

面板,缩略图和孔

完全删除了新卡组件。

面板

  • .panel to .card ,现在使用flexbox构建。
  • .panel-default 删除并且没有替换。
  • .panel-group 删除并且没有替换。 .card-group 不是替代品,而是不同。
  • .panel-heading to .card-header
  • .panel-title to .card-title 。根据所需的外观,您可能还需要使用 标题元素或类 （例如。 <h3>,.h3 ）或粗体元素或类（例如 <strong>,<b>,.font-weight-bold ). 注意 .card-title ,虽然名称相似,但产生的外观与 .panel-title.
  • .panel-body to .card-body
  • .panel-footer to .card-footer
  • .panel-primary,.panel-success,.panel-info,.panel-warning ,和 .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.
    • 对于上一个/下一个控件, .carousel-control.right and .carousel-control.left 现在 .carousel-control-next and .carousel-control-prev ,这意味着它们不再需要特定的基类。
  • 删除了所有自适应样式,并根据需要使用了实用程序（例如,在某些视口上显示字幕）和自定义样式。
  • 删除了轮播项目中图像的图像替代,以适用于实用程序。
  • 调整了“轮播”示例,以包括新的标记和样式。

表

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

实用工具

  • 显示,隐藏等：
    • 使显示实用程序具有响应性（例如, .d-none and 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 and .pull-right 因为它们对 .float-left and .float-right.
  • 类型：
    • 为我们的文本对齐类添加了自适应变体 .text-{sm,md,lg,xl}-{left,center,right}.
  • 对齐和间距：
  • Clearfix已更新,以放弃对旧版本浏览器的支持。

供应商前缀混合

引导程序3 供应商前缀 在v3.2.0中已弃用的mixins已在Bootstrap 4中删除。 由于我们使用 自动前缀 ,它们不再是必需的。

删除了以下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

文档

我们的文档也得到了全面升级。 这是最低点：

  • 我们仍在使用Jekyll,但其中有一些插件：
    • bugify.rb 用于有效列出我们的条目 浏览器错误 页。
    • example.rb 是默认的自定义派生 highlight.rb 插件,从而简化了示例代码的处理。
    • callout.rb 是与此类似的自定义派生,但专为我们的特殊文档标注而设计。
    • 杰基托克 用于生成我们的目录。
  • 所有文档内容均已用Markdown（而不是HTML）重写,以便于编辑。
  • 页面已重新组织,以获取更简单的内容和更易于访问的层次结构。
  • 我们从常规CSS迁移到SCSS,以充分利用Bootstrap的变量,mixin等。

响应实用程序

All @screen- v4.0.0中已删除变量。 使用 media-breakpoint-up(),media-breakpoint-down() , or media-breakpoint-only() Sass mixins或 $grid-breakpoints 代替Sass地图。

我们的响应实用程序类在很大程度上已被删除,转而使用显式 display 公用事业。

  • The .hidden and .show 类已删除,因为它们与jQuery的冲突 $(...).hide() and $(...).show() 方法。 相反,请尝试切换 [hidden] 属性或使用内联样式,例如 style="display: none;" and style="display: block;".
  • All .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- or .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 仅在大中型设备上显示该元素）。

请注意,第4版中对网格断点的更改意味着您需要扩大一个断点才能获得相同的结果。 新的自适应实用程序类不会尝试适应不太常见的情况,即元素的可见性不能表示为单个连续的视口范围范围；在这种情况下,您将需要使用自定义CSS。

取自“https://cainiaojiaocheng.com/index.php?title=Bootstrap/docs/4.5/migration&oldid=16”
Powered by MediaWiki