深入探索 Bootstrap 5 的革新与特性

源内容(英文)

Bootstrap 是一个免费且开源的 CSS 和 JavaScript/jQuery 代码集合,我们通常用它来创建动态网站布局和 Web 应用程序。Bootstrap 是最受欢迎的前端框架之一,它拥有一套非常出色的预定义 CSS 代码。Bootstrap 利用不同类型的类来制作响应式网站。在经过几个月对功能的重新定义后,Bootstrap 5 于 2020 年 6 月 16 日正式发布。

Bootstrap 是一个适合移动优先 Web 开发的框架。这意味着 Bootstrap 上的代码和模板适用于各种屏幕尺寸。它对每一个屏幕尺寸都具有良好的响应性。该框架是免费的,我们可以通过两种方式使用它:一种是下载 zip 文件并将 Bootstrap 的库/模块包含到项目中,另一种是直接包含 Bootstrap 的 URL 并使用在线版本。

Bootstrap 5 中的一些重要变化:
1. 更新的官方文档: v4.5.0 的文档主页有了全新的外观,其余的官方文档也有了一些改进。Bootstrap 文档在角落处增加了一些美观的留白,使其更具可读性,并突出了其内容。

!image

2. 完全移除了 jQuery: 以前,Bootstrap 的组件,如模态框、工具提示、弹出框等,都依赖于 jQuery 和 popper.js。在 alpha 5 版本发布后,Bootstrap 不再依赖于 jQuery。虽然 jQuery 在 Bootstrap 中已经使用了超过 8 年,但许多开发者一直有个痛点,即 jQuery 给复杂的 JavaScript 行为带来了不一致的访问体验。整个过程由他们的 JavaScript 维护者 https://github.com/johann-s 得以实现。
3. 切换到原生 JavaScript: JavaScript 是 Web 的编程语言。大多数现代网站都由 JavaScript 驱动,手机、平板、游戏机、台式机上的所有现代 Web 浏览器都包含 JavaScript 解释器。放弃 jQuery 的主要原因之一,就是为了完全基于现代 JavaScript 标准来重新定义该框架。
4. 移除了对 Internet Explorer 10 和 11 的支持: Internet Explorer 是微软于 1995 年发布的。时至今日,随着 Chrome 和基于 Chromium 构建的 Microsoft Edge 等浏览器的普及,Internet Explorer 已不再是主流。当 Bootstrap 决定纯粹基于 Vanilla JavaScript(原生 JavaScript)优化其框架时,他们放弃了与现代 JavaScript 标准不兼容的 IE 支持。
5. 响应式字体: Bootstrap 引入了响应式字体大小,它将通过 RFS 引擎根据视口大小自动调整排版元素的大小。RFS 引擎的开发目的是为了调整字体大小。它提供了按单位调整 CSS 属性(如“margin”、“padding”、“border-radius”、“box-shadow”)的功能。

!image

6. 移除了卡牌组: Bootstrap 的新网格系统提供了对布局更多的响应式控制。因此,他们移除了那些可以用新网格布局设计的、不必要的额外类。Bootstrap 的旧版本仍然支持卡牌系统。
示例:

HTML


CODEBLOCK_15ad0acb

7. 更新的表单: Bootstrap 5 引入了一个完全致力于 Bootstrap 表单的部分,并改进了文档和组件。现在它拥有一组单一的表单控件,并重新设计了现有元素,而不是通过伪元素生成新元素。Bootstrap 表单现在的外观更加美观。

![image](https://media.geeksforgeeks.org/wp-content/uploads/2020062909

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。如需转载,请注明文章出处豆丁博客和来源网址。https://shluqu.cn/51236.html
点赞
0.00 平均评分 (0% 分数) - 0