介绍
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-*
类可控制填充。
分页
-
分页链接现在具有可自定义的
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的迁移实际上是 不可能,因为它们实际上是完全不同的组件。 因此,应在项目中从头开始创建它们。