迁移到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 作为输入组的直接子级。

禁用状态

  • 按钮，关闭按钮，分页链接＆amp;的禁用状态形成 现在，范围已添加 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 以便快速设置 ＆lt; body＆gt; 的其他元素背景。
  • 默认情况下，负保证金实用程序处于禁用状态。您可以重新启用 通过设置 $ enable-negative-margins：true 设置它们，但请保留在 请注意，这会大大增加文件大小。

完全重写的组件

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