迁移到MDB 5

跟踪并查看对MDB源文件,文档和组件的更改,以帮助您从v4迁移到v5。

介绍

MDB 5是从头开始编写的。从字面上看,每一行代码 重写以确保最高的质量。

所做的更改非常重要,在许多情况下不可能 保持向后兼容性。我们选择了正确的质量而不是落后 兼容性,这是一个深思熟虑的决定。

因此,我们建议您尽可能创建自己的项目 从头开始在MDB5中,而不是将旧的MDB 4项目更新到MDB 5。

注意:以下列表不完整。只有最 列出了关键的更改,但请记住,没有组件具有 保持不变。


浏览器支持

有关当前内容的详细信息,请参见浏览器和设备页面 Bootstrap 5支持。自v4以来,这是我们浏览器的更改 支持:

  • 不再支持Internet Explorer 10和11
  • 不再支持Firefox NN-MM
  • 不再支持Safari NN
  • 不再支持iOS Safari NN
  • 不再支持Chrome NN
  • 不再支持Android NN

的JavaScript

更改我们的源代码和已编译的JavaScript文件。

  • 删除jQuery依赖关系并将插件重写为常规格式 JavaScript。
  • 自动初始化所​​有组件(无需初始化 组件,例如sidenav或select(与MDB 4一样)。
  • 能够在服务器,模块捆绑器和浏览器上工作 多亏了对UMD(通用模块定义)格式的编译。
  • 初始化和定制任何高级组件的三种方式 (通过数据属性,通过JavaScript,通过jQuery)。
  • ES6友好组件可以作为单个模块或库导入。
  • 可选的jQuery集成。

网格和布局

更改任何布局工具和我们的网格系统。

  • 删除 .media 组件,因为它可以用 实用程序类。
  • 从网格列中删除 position:relative
  • 而是将水平填充连续添加到直接子级中 列本身。
    • 这简化了我们的代码库。
    • 现在可以单独使用列类。无论何时 在 .row 外部使用,则不会添加水平填充。
  • 响应式装订线类可用于控制装订线中的装订线宽度 水平,垂直或双向。
  • 装订线宽度现在在 rem 中设置,并从 30px 1.5rem (24px)。
  • bootstrap-grid.css 现在仅适用 box-sizing:border-box 到列,而不是重置 全局框大小。这样,即使 box-sizing:border-box 不适用于每个元素。

输入栏位

所有表格都被完全重写。语法也已经标准化 确保整个项目的一致性。

  • 默认值和材料1.0输入已删除。只有大纲输入 现在有空。
  • .md-form 重命名为 .form-outline
  • 将本机和自定义复选框以及单选框合并为一个 .form-check 类。
    • 新支票支持通过 em / font-size 调整大小 或现在的显式修饰符类。
    • 现在,默认情况下,新检查会显得更大,以提高可用性。
    • 删除了 .custom-control 和关联的类。
    • 将大多数 $ custom-control 变量重命名为 $ form-control
  • 更新了文件输入组件
    • 重构的 .form-file 标记可解决一些视觉问题 错误,同时允许通过HTML更改翻译和按钮文本 而不是CSS。
    • 删除本机 .form-control-file 和 完全是 .form-control-range 组件。
    • .custom-file 重命名为 .form-file (包括变量)。
    • 添加了对:focus :disabled 样式。
  • .custom-range 重命名为 .form-range (包括变量)。
  • 删除了用于保证金实用程序的 .form-group (我们已替换了 带有 .mb-3 的文档示例)。
  • 删除了 .form-row 以获得更灵活的网格装订线。
  • 删除了 .form-inline 以获得更灵活的网格。
  • 内部不再支持 .form-control-plaintext .input-group
  • 删除 .input-group-append .input-group-prepend 。现在,您只需添加按钮即可 .input-group-text 作为输入组的直接子级。

禁用状态

  • 按钮,关闭按钮,分页链接&的禁用状态形成 现在,范围已添加 pointer-events:none 。这简化了 我们的代码库,并使其更容易覆盖CSS中的活动状态。

巨无霸

  • 删除了jumbotron组件,以便使用实用程序类,例如 .bg-light 表示背景颜色和 .p-* 类可控制填充。

导航栏

  • 现在,所有导航栏都需要在其中放置一个容器。大大简化了 间距要求,并消除了对大量CSS覆盖的需求 为v4中的响应式容器添加。

分页

  • 分页链接现在具有可自定义的 margin-left 彼此分开时,动态地四舍五入。

实用工具

  • .text-monospace 重命名为 .font-monospace
  • 减少每个断点的响应订单实用程序的数量。的 编号最高的实用程序现在是 .order-5 .order-12
  • 新的 line-height 实用程序: .lh-1 .lh-sm .lh-base .lh-lg
  • 添加了 .bg-body 以便快速设置 < body> 的其他元素背景。
  • 默认情况下,负保证金实用程序处于禁用状态。您可以重新启用 通过设置 $ enable-negative-margins:true 设置它们,但请保留在 请注意,这会大大增加文件大小。

完全重写的组件

以下是语法和源代码完全更改的组件列表 码。因此,从MDb 4到MDB 5的迁移实际上是 不可能,因为它们实际上是完全不同的组件。 因此,应在项目中从头开始创建它们。