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 版本的多次迭代之后发布的,因此,它具有许多重要的附加功能和新功能。
链接 <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">``<script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> <link href = "https://cdn .jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">``<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
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 框架的高级版本。可以根据功能的要求和可用性选择版本。

Bootstrap 4 和 Bootstrap 5 框架的区别

欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果。
转载请注明:文章转载自 有区别网 [http://www.vsdiffer.com]
本文标题:Bootstrap 4 和 Bootstrap 5 框架的区别
本文链接:https://www.vsdiffer.com/vs/bootstrap-4-vs-bootstrap-5-framework.html
免责声明:以上内容仅代表 个人看法、理解、学习笔记、总结和研究收藏。不保证其正确性,因使用而带来的风险与本站无关!如本网站内容冒犯了您的权益,请联系站长,邮箱: ,我们核实并会尽快处理。