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
免责声明：以上内容仅代表 个人看法、理解、学习笔记、总结和研究收藏。不保证其正确性，因使用而带来的风险与本站无关！如本网站内容冒犯了您的权益，请联系站长，邮箱：，我们核实并会尽快处理。