自举5阿尔法!

2020-06-17 04:08:38

Bootstrap 5的第一个阿尔法已经到了!我们已经努力工作了几个月来改进我们在v4中开始的工作,虽然我们对我们的进展感觉很好,但仍然有更多的工作要做。

我们一直专注于让从v4到v5的迁移更容易实现,但我们也不怕放弃过时或不再合适的东西。因此,我们很高兴地说,在v5中,Bootstrap不再依赖jQuery,我们已经放弃了对Internet Explorer的支持。我们将重点放在构建更面向未来的工具上,虽然我们还没有完全做到这一点,但CSS变量、更快的JavaScript、更少的依赖和更好的API的承诺对我们来说肯定是合适的。

在你跳到更新之前,请记住,v5现在处于阿尔法突破性的变化中,在我们的第一个测试版之前,这些变化将继续发生。我们尚未完成添加或删除所有内容,因此请检查未解决的问题,并在有问题或反馈时拉出请求。

我们在V4.5.0中对文档主页的改进基础上,更新了其余文档的外观。我们的文档页面不再是全宽的,以提高可读性,并使我们的网站感觉不那么像应用程序,而更像是内容。此外,我们还升级了侧边栏,使用可扩展部分(由我们自己的折叠插件提供支持)以实现更快的导航。

我们还打出了一个全新的标识!更多的是当v5变得稳定时,但足以说的是,我们想给圆形正方形的ol‘B一个小升级。

受CSS的启发,我们的徽标避免了规则集的感觉--以大括号为边界的样式。CSS开创了这个项目的最早阶段,我们的徽标避免了规则集风格的感觉,这种感觉是由花括号限定的。我们很喜欢,你也会喜欢的。随着时间的推移,随着我们不断改进和发布新的版本,我们期望看到它在v4的文档、我们的博客以及更多内容中推出。

jQuery为数百万人(数十亿?)带来了对复杂JavaScript行为的前所未有的访问。在过去的15年里。就我个人而言,我永远感谢它给我的授权和支持,让我继续编写前端代码,学习新事物,接受来自社区的插件。也许最重要的是,它永远改变了JavaScript本身,这本身就是jQuery成功的丰碑。感谢每一位jQuery贡献者和维护者,是他们为像我这样的人实现了这一点。

多亏了在前端开发工具和浏览器支持方面的进步,我们现在能够将jQuery作为依赖项删除,但您不会注意到其他情况。这次迁移是@john-S的一项巨大任务,他是我们目前的主要JavaScript维护者。这标志着该框架多年来最大的变化之一,并意味着基于Bootstrap5构建的项目在文件大小和向前推进的页面负载方面将显著减轻。

除了删除jQuery之外,我们还对v5中的JavaScript做了一些其他更改和增强,重点放在代码质量和弥合v4和v5之间的差距上。我们的另一个更大的改变是放弃了大部分按钮插件,只使用HTML和CSS来切换状态。现在,切换按钮由复选框和单选按钮供电,更加可靠。

您可以在GitHub上的第一个v5alpha项目中看到与JS相关的更改的完整列表。

有兴趣在Bootstrap的JavaScript方面提供帮助吗?我们一直在为团队寻找新的贡献者,以帮助编写新插件、审查Pull请求和修复bug。让我们知道!

如前所述,由于取消了对Internet Explorer的支持,我们已经开始在Bootstrap5中使用CSS自定义属性。在v4中,我们只包含了为数不多的颜色和字体根变量,现在我们已经为少数组件和布局选项添加了它们。

以我们的.table组件为例,我们在其中添加了几个局部变量,以使条带化、悬停和活动的表格样式变得更容易:

.table{--bs-table-bg:#{$table-bg};--bs-table-accent-bg:透明;--bs-table-stried-color:#{$table-stried-color};--bs-table-stried-bg:#{$table-stried-bg};--bs-table-active-color:#{$table-active-color};--bs-table-active-bg:#{$table-active-bg};--bs-table-active-bg:#{$table-active-bg};--bs-table-active-bg:#{$table-active-bg}。--bs-table-hover-color:#{$table-hover-color};--bs-table-hover-bg:#{$table-hover-bg};//样式在此.。}。

我们正在努力利用Sass和CSS自定义属性的超强功能,以实现更灵活的系统。您可以在Tables文档页面中阅读有关这方面的更多信息,并期待在不久的将来看到按钮等组件的更多用法。

我们已经在几个地方认真研究并改进了我们的文档,提供了更多的解释,消除了歧义,并为扩展Bootstrap提供了更多的支持。这一切都始于一个全新的定制部分。

V5的定制文档在V4的主题页面上扩展了更多内容和代码片段,用于在Bootstrap的源Sass文件之上进行构建。我们在这里充实了更多的内容,甚至提供了一个入门的NPM项目,让您可以更快、更轻松地开始使用。它也可以作为GitHub上的模板回购,所以你可以自由使用。

我们也在v5中扩展了调色板。有了丰富的内置配色系统,您可以更轻松地定制应用程序的外观,而无需离开代码库。我们还做了一些工作来提高颜色对比度,甚至在我们的颜色文档中提供了颜色对比度度量。希望这将继续帮助各地的人们更容易访问Bootstrap支持的站点。

除了新的自定义部分之外,我们还彻底检查了表单文档和组件。我们已经将所有表单样式合并到一个新的表单部分(包括输入组组件),以使它们得到应有的重视。

除了新的文档页面外,我们还重新设计并删除了所有表单控件。在v4中,我们引入了一套丰富的自定义表单控件-检查、无线电、开关、文件等等-但这些都是对每个浏览器提供的任何默认设置的补充。在v5中,我们完全实现了定制。

如果您熟悉v4的表单标记,这对您来说应该不会太遥远。由于只有一组表单控件,并且专注于重新设计现有元素,而不是通过伪元素生成新元素,我们拥有更一致的外观。

<;div class=";form-check";>;<;input class=";form-check-input";type=";checkbox";value=";";id=";fleCheckDefault";>;<;Label class=";form-check-label";for=";fleCheckDefault"。<;div class=";form-check";>;<;input class=";form-check-input";type=";Radio";name=";fleRadioDefault";id=";fleoDefault1";>;<;Label class=";form-check-label";for=";RadioRadioDefault1";>;<;Label class=";form-check-Label";for=";RadioRadioDefault";id=";<;div class=";Form-Check-Switch";>;<;Input class=";Form-Check-Input";type=";CheckBox";id=";FlexSwitchCheckDefault";>;<;Label class=";Form-Check-Label";for=";flechCheckDefault";&Gt;Label class=";Form-Check-Label";for=";FlexSwitchCheckDefault";&Gt;

每个复选框、单选、选择、文件、范围等等都包括一个自定义外观,以统一跨操作系统和浏览器的表单控件的样式和行为。这些新的表单控件都构建在完全语义的、标准的表单控件之上-没有多余的标记,只有表单控件和标签。

一定要探索新的表单文档,并让我们知道您的想法。

我们喜欢看到有多少人正在构建新的有趣的CSS库和工具包,挑战我们过去十多年来在Web上构建的方式。至少可以说,它令人耳目一新,并为我们所有人提供了一个讨论和迭代的机会。因此,我们在Bootstrap5中实现了一个全新的实用程序API。

$UTILITIES:()!默认;$UTITIES:MAP-MERGE((//.";Width";:(Property:Width,Class:W,Values:(25:25%,50:50%,75:75%,100:100%,AUTO:AUTO)),//.";页边距";:(响应:TRUE,属性:边距,类别:M,值:MAP-MERGE($SPACE,(AUTO:AUTO),//.),$UTITIES);

自从实用程序成为首选的构建方式以来,我们一直在努力寻找合适的平衡,以便在Bootstrap中实现它们,同时提供控制和定制。在v4中,我们使用全局$enable-*类实现了这一点,我们甚至在v5中继承了这一点。但是通过基于API的方法,我们在Sass中创建了一种语言和语法,以便在动态创建您自己的实用程序的同时,还可以修改或删除我们提供的那些实用程序。这都要归功于@Mars jnCuppens,他也维护着RFS项目,并负责最初的公关和后续的改进。

我们认为,对于那些通过我们的源文件构建Bootstrap的人来说,这将改变游戏规则,如果您还没有以这种方式构建Bootstrap驱动的项目,您将会大吃一惊。

小心!我们已经将一些以前的v4实用程序移到了一个新的帮助器部分。这些帮助器是一些代码片段,它们比我们的实用程序通常的属性-值对要长。这只是我们重新组织事物的方式,以便更容易命名和改进文档。

按照设计,Bootstrap5并不完全脱离v4。在听说从v3升级到v4的困难之后,我们希望每个人都能够更容易地升级到这个未来版本。出于这个原因,我们保留了构建系统的大部分(不包括jQuery),并且我们也构建在现有的网格系统之上,而不是用更新更时髦的东西来取代它。

.GRETH类已被.g*实用程序取代,这与我们的边距/填充实用程序非常相似。我们还为您的栅格檐槽间距添加了与您已经熟悉的间距实用工具相匹配的选项。

以下是如何使用新栅格檐槽类的快速示例:

CSS的网格布局已经为黄金时间做好了越来越多的准备,虽然我们在这里还没有使用它,但是我们正在继续进行实验并从中学习。期待v5的未来版本以更多的方式接受它。

我们将文档静态站点生成器从Jekyll切换到Hugo。Jekyll长期以来一直是我们选择的生成器,因为它很容易启动和运行,而且部署到GitHub页面很简单。

另一方面,Hugo是用Go编写的,所以它没有外部运行时依赖,而且速度快得多。我们构建当前的主分支站点,包括文档的Sass-&>CSS,耗时约1.6秒。我们的本地服务器在毫秒内重新加载,而不是8-12秒,因此处理文档再次成为一种愉快的体验。

如果没有Hugo的主要开发人员Bjørn Erik Pedersen(@bep),Hugo切换是不可能的,他对代码库进行了相当多的更改,以使过渡成为可能和顺利!

我还要感谢@xhmikosr,他在这里领导了数百个文件的转换,并与Hugo开发人员合作,确保我们的本地开发快速、高效和可维护。

在我们的第一个阿尔法中,有一大堆我们没有时间解决的问题仍然在未来的阿尔法的待办事项清单上。我们想在这里给他们一些爱,这样你就知道在整个v5的开发过程中我们的雷达上有什么。

RTL来了!我们已经使用RTLCSS创建了一个公关,并且还在继续探索逻辑属性。就我个人而言,我很抱歉我们花了这么长时间才正式解决这个问题,因为我们知道所有的努力都投入到了IT社区的努力中,并将请求拉到了这个项目上。希望等待是值得的。

我们的模式有一个分叉版本,它实现了一个画外菜单。在不增加太多开销的情况下,我们还有一些工作要做,但是使用画布外包装器来放置任何具有侧栏价值的内容(导航、购物车等)的想法是巨大的。就我个人而言,我知道我们在这一点上落后于时代,但尽管如此,它仍然应该是令人敬畏的。

我们正在评估代码库的其他一些更改,包括Sass模块系统、增加CSS自定义属性的使用、在HTML中嵌入SVG而不是CSS,等等。

还有很多事情要做,包括更多的文档改进、错误修复和生活质量的改变。请务必查看我们的公开问题和公关,看看您可以通过提供反馈、测试社区公关或分享您的想法来帮助解决问题。

前往https://v5.getbootstrap.com浏览新版本。我们还将此更新作为NPM的预发行版发布,因此,如果您感到大胆或对新功能感兴趣,可以通过这种方式获取最新版本。

我们在v5中还有更多的工作要做,包括一些突破性的改变,但是我们对这个版本感到非常兴奋。让反馈撕裂吧,我们会尽最大努力跟上你们的步伐。我们的目标是在3-4周内出货另一款阿尔法,之后可能还会再出几款。我们还将发布v4.5.1版本来修复一些倒退,并继续弥合v4和v5之间的差距。

除此之外,请关注Bootstrap Icons项目、我们的RFS项目(现在在v5中默认启用)和NPM starter项目的更多更新。

请访问我们的Open Collective页面或我们团队成员的GitHub个人资料,以帮助支持为Bootstrap做出贡献的维护人员。