您好,欢迎访问浙江科普作家网
搜索关键字:

Bootstrap 4 和 Bootstrap 5 框架的区别3

发布日期:2023年03月04日     浏览次数:131
导语:Bootstrap 是一个免费的开源工具包,用于开发响应式网页和在线应用程序。 HTML、CSS 和 JavaScript 框架使创建响应式、移动优先的网站变得简单。 它的主要目标是解决跨浏览器的兼容性问题。 Bootstrap 是任何网站的核心,针对所有屏幕尺寸进行了优化,并且在所有现代浏览器中看起来都很棒。

Bootstrap 是一个免费的开源工具包,用于开发响应式网页和在线应用程序。 HTML、CSS 和 JavaScript 框架使创建响应式、移动优先的网站变得简单。 它的主要目标是解决跨浏览器的兼容性问题。 Bootstrap 是任何网站的核心,针对所有屏幕尺寸进行了优化,并且在所有现代浏览器中看起来都很棒。
Bootstrap 5 包含自定义表单控件。 Bootstrap 4 的表单控件使用每个浏览器中可用的任何预设。 由于其自定义设计,Bootstrap 5 中的表单控件在所有浏览器中的外观和感觉将明显更加一致。
在 bootstrap 5 中,删除了一些类,这这些删除的类在 bootstrap 4 版本中可用。

  • row form
  • form inline
  • list inline
  • form inline

在 bootstrap 5 中,某些类在 bootstrap 4 版本中不可用。

  • gx-* :水平/列间距宽度
  • gy-* :垂直/行间距宽度
  • g-* :水平和垂直间距宽度
  • rows-cols-auto

Bootstrap 4 和 Bootstrap 5 的比较

比较项 Bootstrap 4 版本 Bootstrap 5 版本
发布日期 Bootstrap 4 于 2018 年 1 月发布,与之前的版本相比有了显着的进步。 Bootstrap 5 于 2021 年 5 月发布。这个版本是在 alpha 和 beta 版本的多次迭代之后发布的,因此,它具有许多重要的附加功能和新功能。
Grid System Bootstrap 4 有五个级别:xs、sm、md、lg 和 xl。 Bootstrap 5 有六个级别:xs、sm、md、lg、xl 和 xxl。
Jquery 插件 Bootstrap 4 包括 jquery 和所有相关的插件。 在 Bootstrap 5 中,Jquery 已被删除并替换为 vanilla JS 和几个功能插件。
Color Bootstrap 4 为网页提供了几种颜色。外观中插入了额外的颜色,并且升级了卡片的调色板。 Bootstrap 5 框架有多种颜色可供选择。
Internet Explorer Bootstrap 4 与 Internet Explorer 10 和 11 兼容。 Bootstrap 5 不支持 Internet Explorer 10 和 11。
表单单选按钮和复选框的元素 在不同的操作系统和浏览器中显示不同。该表单利用了可用的任何基本浏览器功能。使用不同的操作系统或浏览器时,表单元素的外观不会改变。 表单交替并添加表单控件;它们不依赖于浏览器。
实用程序 API 无法更改 Bootstrap 4 中的实用程序。 Bootstrap 5 提供了调整和开发实用程序的能力。
使用gutter Bootstrap 4 使用 px 字体大小的 glutter。 在 Bootstrap 5 中使用 .g* 并将字体大小设置为 rem。
垂直组 列可以相对于彼此定位。 列不能相对于彼此定位。
Bootstrap 的图标 Bootstrap 4 缺少 SVG 图标;必须依靠 font-awesome 来制作图标。 Bootstrap 5 有自己的一组 SVG 图标。
Jumbotron Bootstrap 4 与 jumbotron 兼容。 它与 jumbotron 不兼容。
卡片组 卡片组用于制作具有相同宽度和高度的一组卡片。 卡片组类已从 Bootstrap 5中删除。
Navbar 有 inline-block 属性,白色的下拉菜单将是 dropdown-menu-dark 类的默认值。 inline-block 属性已被删除,而 dropdown-menu-dark 类现在默认有一个黑色下拉菜单。
静态网站生成器 Bootstrap 4 使用 Jekyll 软件。 Bootstrap 5 使用了一个快速的静态生成器,即 Hugo。
grid flexbox 让垂直设计更容易构建,列和行可以简单实现。 justify-center-content 类直接用于根据要求对齐。提供了更复杂的网格系统,并且列没有相对位置。
CSS 可用性 Bootstrap 4 使用了更少的 CSS 属性。 Bootstrap 5 使用了更多的 CSS 属性。
offcanvas 组件 没有 offcanvas 元素。 offcanvas 组件现在可用。
RTL 支持 语言不启用 RTL(从右到左)切换。 它启用 RTL(从右到左)语言切换。

 

结论

这两个引导框架有许多相似之处和不同之处。 Bootstrap 4 和 bootstrap 4 有各自的功能。 Bootstrap 5 是 bootstrap 4 框架的高级版本。可以根据功能的要求和可用性选择版本。
 

(0)

提交新评论
0576-85888888