Bootstrap 5发布

2021-05-06 04:33:32

Bootstrap 5已正式降落!在三个alphas,三个赌注和几个月的努力工作之后,我们正在运送我们新的主要版本的第一个稳定版本。我们的维护者和令人惊叹的社区可能是一种狂野的骑行,它可以使用和贡献自动启动。感谢所有帮助我们到达这里的人!

与V4相比,阅读有关新的内容以及用于后续版本的内容的详细信息。想要到达它吗?前往新的V5文档或乘坐裤子的座位,只是NPM i引导。

V5的最大变化之一具有我们重新设计的徽标和更新的文档设计。灵感来自我们在Bootstrap图标中所做的工作,我们的新徽标是CSS的CSS的卷曲括号和我们的长期B图标的回调。这是一个小升级,但尽管如此,一个有趣的乐趣,我们觉得有助于为这一新的主要版本设置基调。仍然是同一个引导,只是略微精制。 😅

新的文档更加明亮,更好地组织了新的内容部分,还具有改进的导航。

我们的新型OffCanvas组件建立了基础和共享了我们的模块的基本作品,附带了可配置的背景,身体滚动和放置。 offcanvas组件可以放在视口的顶部,右侧,底部或左侧。使用数据属性或通过JavaScript API配置这些选项。

我们用全新的.Accordion组件替换了我们的.card手风琴组件,解决了过程中的几个错误。我们的新手风琴仍然使用折叠JavaScript插件,但是用自定义HTML和CSS来支持它,它比以往任何时候都更好,更容易。

新的手风琴包括指示状态和点击能力的雪佛龙图标的引导标记图标。我们已将支持对刷新手风琴(添加.Accordion-Flush)的支持删除,以删除外界边框,允许更容易地放置父元素。

我们已彻底检修我们的表单文档和组件。我们已经将所有表单样式纳入了新的表单部分(包括输入组组件),以使其重点是应得的。

与新的文档页面一起,我们重新设计并拒绝所有表单控件。在V4中,我们引入了一系列广泛的自定义表单控件 - 检查,收音机,交换机,文件等 - 但除了提供的每个浏览器的任何默认值之外,这些都是如此。使用v5,我们已经完全定制了。

如果您熟悉V4的形式标记,这不应该为您看起来太远。通过单一的形式控件和重新设计现有元素的焦点,通过伪元素生成新的元素,我们有一个更加一致的外观和感觉。

< div类="形式检查" > <输入类="形式检查输入" type ="复选框"价值="" id =" flexcheckdefault" > <标签类="形式检查标签" for =" flexcheckdefault" >默认复选框< / label> < / div> < div类="形式检查" > <输入类="形式检查输入"类型="无线电" name =" flexradiodefault" id =" flexradiodefault1" > <标签类="形式检查标签" for =" flexradiodefault1" >默认收音机< / label> < / div> < div类=" form-check form-switch" > <输入类="形式检查输入" type ="复选框" id =" flexswitchcheckdefault" > <标签类="形式检查标签" for =" flexswitchcheckdefault" >默认开关复选框输入< / label> < / div>

每个复选框,无线电,选择,文件,范围,以及更多的自定义外观,以统一跨操作系统和浏览器的表单控件的样式和行为。这些新的表单控件都是完全语义,标准形式控制 - 没有更多余的标记,只需形成控制和标签。

浮动标签包括支持文本输入,选择和TextareAs。我们的浮动标签可以遮挡多行文本的Textareas的一个限制。我们正在努力解决这个问题,所以如果你有想法,请告诉我们!

我们删除了自定义.form-file类以获取.form-control类上的其他样式。这意味着我们不再需要额外的JavaScript来使我们的文件输入样式功能 - 新表单文件是所有CSS!

使用我们的新网格更新,表单布局从未如此简单。我们删除了.form-group,.form-行和.form-inline for grit系统。

请务必探索新的表格文档,让我们知道您的想法。

我们终于向Bootstrap终于添加了RTL支持!在高水平,我们的RTL方法包括少数更改:

我们的CSS Dist文件的新RTL版本,其中包括我们的网格,重启,实用程序和标准捆绑包。请参阅完整文件列表的内容页面。

五个新的RTL示例,显示我们的新RTL CSS,将我们的专辑,结帐,旋转木马,博客和仪表板示例转换为全新的左右等效物。

两个新的作弊符厨房汇总页面 - 我们标准CSS和RTL欺诈表的默认作用文件。

我们的方法是在RTLCS上构建的,这是一个很棒的项目,有助于重新处理现有的LTR样式表。我们已经将其分类为现在的实验特征,预计我们会得到一些错误。我们正在寻找社区,帮助我们彻底解决一些剩余的Todos。

鉴于Love Utility驱动的框架在过去几年里,我们已经投入了更多的公用事业来引导,以及在您的项目中管理它们的新方法。

我们已经将一个全新的实用程序API实现为Bootstrap 5,作为扩展Bootstrap的默认实用程序类的主要方法。轻松生成和自定义具有自定义类名的支持,支持生成基于状态的类,如:hover,打印版本等。

$公用事业:()!默认 ; $ Utilities:地图合并(// ..."边缘" :(响应:true,属性:边际,类:m,值:map-merge($ spacers,(auto:auto)) ),// ..."透明度" :(属性:o,类:透明度,状态:悬停,值:( 0:0,25:.25,50:。5,75:.75 ,100:1,))// ......),$公用事业);

由于公用事业公司成为一个首选的建设方式,我们一直在努力找到在引导和定制时在引导中实现它们的合适的平衡。在V4中,我们用全球$ ENABLE- *类这样做,并且我们甚至在V5中携带。但是,通过基于API的方法,我们在SASS中创建了一种语言和语法,即可在飞行中创建自己的实用程序,同时也能够修改或删除我们提供的那些。

谈到公用事业,我们已经向我们的阿森纳添加了一大吨新的,包括:

我们将RTL添加到引导rap的一部分是为了将其添加到我们自己和网络中的未来友好的方式。因此,我们已经接受了CSS逻辑属性的精神,并重命名了多个类和变量。由于变化的大小和影响,这是一个危险的变化,但我们希望你能够整体欣赏它!

由于我们的Flex Utilities,您大多数大多数都与逻辑属性进行了互动,它们更换了左右的方向属性,并以支持开始和结束。对齐物品结束的东西受到欢迎。这使得适合于LTR和RTL的水平定向类名,而无需向前移动任何额外的开销。

例如,在LTR上下文中,而不是.ml-3用于左边,使用.ms-3。务必阅读RTL迁移指南,以获取重命名的类和变量的完整列表。

我们添加了四个全新的片段重型示例,并在我们参加的时候刷新了其他一些例子。这些新的Scippet示例具有多种常见组件的变体,以不同的方式为您提供轻松复制和粘贴。

随着时间的推移,这些新代码段将继续使用新的添加,显示使用自举者的乐趣和容易。

我们还使用令人耳目一新的设计和更多资源更新了我们的入门模板。

我们的网格系统和布局选项看到了一些更改,简化和改善了事物,即:

当填充不再施加在,时,柱子条款现在可以用作宽度实用程序(例如,.col-6为宽度:50%)。

新的排水沟公用设施可以反应地定制水平和垂直网格排水沟。排水沟宽度也降低到1.5REM。

我们还更新了我们的布局文档以将特殊长页分开进入更为集中的主题。我们还增加了对断点,容器等的澄清解释。

在整个电路板上,我们已经为关键组件提供了许多其他增强功能和更改:

我们已将JavaScript和定位定位为我们的下拉板,作为我们采用Popper 2.的一部分。您可以在我们的文档和新的CSS选择器和用于定位它们的数据属性中看到所有选项。

同样,转盘现在有一个新的.carousel-暗修改器类来反转控件,文本和指标。

为我们的警报组件添加了图标示例,用于使用实用程序添加Bootstrap图标(或其他图标库)

我们使用新的.Navbar-Nav-滚动更新了Navbars,用于垂直最大高度,并打开折叠导航栏时的滚动

列表组具有使用伪元素创建编号列表组项的新的.list-groupded修改器类。

我们在几个地方亨克拉德并改进了我们的文档,给出了更多的解释,删除了歧义,并为扩展引导率提供了更多的支持。它全部始于一个全新的自定义部分。

V5的自定义文档在V4的主题页面上扩展,具有更多内容和代码片段,用于在Bootstrap的源SASS文件之上构建。我们在这里充实了更多内容,甚至为您提供了启动NPM项目,让您开始更快更容易。它也可以作为github上的模板仓库,所以您可以自由叉。

我们也在v5中扩展了颜色调色板。通过内置广泛的颜色系统,您可以更轻松地自定义应用程序的外观,而不会离开CodeBase。我们还完成了一些工作来改善颜色对比度,甚至在我们的颜色文档中提供了颜色对比度量。希望这将继续帮助使Bootstrap供电的网站更加接近。

我们还向大多数页面添加了新的部分,以记录为每个组件提供支持每个组件的源SASS代码。变量,mixins,循环和映射都呈现并在每个页面中保持最新状态,并在构建时更容易引用和自定义值。

我们已切换到Dart Sass与LibSass被弃用。我们一直用Dart Sass测试了我们的版本,并决定将交换机与LibSass的交换机弃在几周前。我们现在正在坚持Sass模块。我们仍未使用新的模块系统来兼容性问题,以及从V4升级的人们更大的差距。

我们在此更新中丢弃了大量的旧浏览器,使其成为我们最大的跳跃之一:

我们的JavaScript的最大变化是删除jQuery,但我们也制作了一些超越的增强功能。

所有JavaScript插件的数据属性现在都使用BS命名。例如,我们使用data-bs-toggle而不是数据切换。

我们已更新了我们的迁移指南页面,以将六个预先释放的所有更改整合到单个更改集中。我们在这种方式中凝视了大部分内容,并在升级时帮助您提请您注意潜在的Gotchas。

我们仍然认为在这里还有更多才能在这里 - 包括关于代码更改,差异和代码片段的教程的指导,如果您有建议或想要贡献,请打开问题或拉动请求。

朝向GitHub进行完整的问题列表,并在V5.0.0中提取请求。您还可以查看V5.0.0项目板。

转到https://getbootstrap.com以探索新版本。我们还在NPM上发布了这款更新的新版本,所以如果您感觉大胆或对新功能感到好奇,您可以以这种方式拉动最新。

查看GitHub v5.0.0版本的ChangeLog以获得自上次预发布以来的完整更改列表。

展望未来,我们介绍了我们的第一次稳定的引导版本5!但我们还有一些其他版本在地平线上:

如果您对即将发布的任何额外想法,请随时打开问题或拉动请求! 虽然我们正在抛光此版本,但我们也让我们的眼睛朝着未来发货,以发动几个小版本。 以下是快速查看我们下一个次要版本的内容,V5.1.0: 在此之后有几个版本计划更多的功能和更新! 查看GitHub上的项目以仔细看看。 访问我们的开放式集体页面或我们的团队成员的GitHub配置文件,以帮助支持助攻的维护人员。