当前位置: 首页 > Web前端 > JavaScript

Bootstrap发布十周年,Bootstrap5有什么新东西?

时间:2023-03-26 20:09:25 JavaScript

近日,知名前端工具包Bootstrap官博宣布成立10周年。其创始人马克·奥托回顾了过去十年的一些成就和里程碑:文档浏览量超过25亿次,每天超过685,000次;自2015年2010年以来,npm的下载量已经达到3.94亿次,仅2020年的下载量就超过了1.31亿次。过去六年每天180,000。5000万次RubyGems下载5700万次NuGet下载750万次Packagist安装被超过22%的网站使用被GitHub上的270万个项目使用在GitHub上有超过21,100次提交,近35,000个问题和拉取请求Bootstrap是最受欢迎的CSS库之一。它允许开发人员轻松使用漂亮的样式和组件并创建响应式网站。使用Bootstrap可以节省开发人员的时间,尤其是对于几乎每个项目都会用到的组件。Bootstrap5(当前主要版本,2021年5月发布)带来了大量的变化和改进,包括添加新组件、新类、旧组件的新样式、更新浏览器支持、移除一些旧组件等等。在本文中,我们将介绍Bootstrap5中的更改、删除的内容以及最令人兴奋的新内容。何时使用Bootstrap(何时不使用)Bootstrap自称是“世界上最流行的构建响应式、移动优先网站的框架”,并且在GitHub上有152,000颗星,我认为这是一个不错的主张。特别是对于初学者来说,Bootstrap是开始创建现代和干净的网站的好方法。它可以轻松实现复杂的、移动优先的设计,并提供您在多个项目中可能需要的许多组件。Bootstrap的学习曲线很低,非常适合不需要构建步骤的静态网站,因为您可以直接从Bootstrap的CDN引用库。这与其他一些流行的CSS框架形成鲜明对比,这些框架可能经过优化以与捆绑器或任务运行器一起使用。但是,您还应该知道Bootstrap不是灵丹妙药。对于外行来说,Bootstrap可以轻松生成令人困惑和复杂的标记。就千字节而言,它也是一个相对较重的库(尽管每个版本都在改进),因此如果您只使用它的一个或两个功能,它可能不是最佳选择。与任何抽象一样,如果您对底层技术有很好的了解并且可以就何时使用它做出明智的决定,它会有很大帮助。从Bootstrap4升级到5从Bootstrap4升级到5通常很容易。Bootstrap4中的大多数组件、它们的类和实用程序类在Bootstrap5中仍然可用。迁移时您应该关心的主要事情是您使用的类或组件是否已被删除。如果去掉了,可以用实用类来代替,或者用其他方法也可以达到同样的效果。您应该关注的第二件事是将需要JavaScript作为其功能一部分的组件中的data-属性转换为data-bs-。(我们将在下一节中更详细地介绍这一点。)如果您使用的是Bootstrap的Sass文件,一些变量和混入将被重命名。Bootstrap5在它们各自的文档页面上有一个广泛而详细的部分,所有内容都是关于定制的,以及关于每个组件的Sass变量和混合的详细信息。更改内容Bootstrap5为作为库的Bootstrap带来了核心更改,包括对所需依赖项、浏览器支持等的更改。它还对我们在以前版本中使用的组件和类进行了更改。jQuery不再是依赖与之前的版本相比,jQuery不再是Bootstrap的依赖。现在,您可以在没有它的情况下充分利用Bootstrap,但您仍然需要Popper.js。此更改使得在不需要或不使用jQuery的项目中使用Bootstrap变得更加容易——例如在将Bootstrap与React结合使用时。如果Bootstrap是您网站的一部分,您仍然可以使用jQuery。如果Bootstrap在window对象中检测到jQuery,它会自动将所有组件添加到jQuery的插件系统中。因此,如果您要从v4迁移到v5,则无需担心此更改,并且在必要时仍然可以使用jQuery和Bootstrap。但是,如果您在网站中使用jQuery,但又不想让Bootstrap使用jQuery怎么办?您可以通过将属性data-bs-no-jquery添加到文档的body元素来做到这一点:Bootstrap在没有jQuery的情况下如何工作?例如,在v4中,您可以在JavaScript中使用以下代码来创建Toast元素。$('.toast').toast()在Bootstrap5中,如果您的网站已经使用了jQuery,您可以使用相同的代码创建一个Toast元素。如果没有jQuery,您需要使用类似于以下的代码创建Toast元素:consttoastElList=[...document.querySelectorAll('.toast')]consttoastList=toastElList.map((toastEl)=>{returnnewbootstrap.Toast(toastEl)})这只是使用vanillaJavaScript在文档中查询具有.toast类的元素,然后使用newbootstrap.Toast()初始化元素上的Toast组件。浏览器支持更改在v4之前,Bootstrap用于支持InternetExplorer(IE)10和11。从Bootstrap5开始,对IE的支持已完全取消。因此,如果您的站点需要支持IE,那么在迁移到v5时您可能应该小心。其他浏览器支持更改包括:Firefox和Chrome现在从版本60开始支持Safari和iOSAndroid浏览器和WebView从版本6开始支持对数据属性的更改Bootstrap5更改了数据属性的命名方式,这些数据属性通常由使用JavaScript的组件使用作为其功能的一部分。以前,大多数依赖某些JavaScript功能的组件的数据属性都以data-开头。例如,在Bootstrap4中创建一个Tooltip组件:button>注意数据切换和数据放置的使用。在Bootstrap5中,这些组件的数据属性现在以data-bs开头,以便于Bootstrap属性的命名。例如,要在Bootstrap5中创建一个Tooltip组件:>工具提示我们使用data-bs-toggle和data-bs-placement代替data-toggle和data-placement。如果您使用JavaScript在Bootstrap中创建组件,您可能不需要进行任何更改。但是,如果你的组件只依赖于数据属性来运行,你需要将所有以data开头的数据属性改为以data-bs开头。修复了一些错误“浏览器和设备”下的Bootstrap4文档列出了某些浏览器上出现的错误。这些错误不再列在Bootstrap5的同一个列表中。该列表包括以下内容:在iOS上,鼠标悬停样式应用于触摸事件的元素,这是不可取的,因为它被认为是意外行为。在Safari8及更高版本中使用.container会导致打印时字体变小。边界半径由验证反馈覆盖(但可以通过添加额外的.has-validation类来解决)。Bootstrap4文档中的错误和问题列表还详细说明了不再支持的浏览器版本中出现的错误。还有更多其他变化,这些变化要么很小,要么不会引起剧烈、值得注意的变化。这些变化是:Bootstrap5现在使用Popperv2。确保升级您的Popper版本。Popperv1将不再有效,因为Bootstrap5需要@popperjs/core而不是之前的Popper.js。Bootstrap5现在可以作为模块在浏览器中使用,使用作为ECMAScript模块构建的Bootstrap版本。由于Libsass和NodeSass(在Bootstrap4中使用)现已弃用,Bootstrap5使用DartSass将源Sass文件编译为CSS。以前,要使元素隐藏但仍可被辅助技术发现,可以使用.sr-only类。此类现在已被.visually-hidden取代。以前,要使交互元素隐藏,但辅助技术仍可发现,您需要同时使用.sr-only和.sr-only-focusable类。在Bootstrap5中,您只需要使用.visually-hidden-focusable而不是.visually-hidden。具有命名来源的块引用现在由

元素包装。下面是Blockquotes现在在Bootstrap5中的一个例子:在以前的版本中,表格的样式是继承的。这意味着如果一个表嵌套在另一个表中,嵌套表将继承父表。在Bootstrap5中,表格样式是相互独立的,即使它们是嵌套的。边框实用程序现在支持表格。这意味着您现在可以使用边框颜色工具更改表格的边框颜色。下面是在Bootstrap5中为表格使用边框实用程序的示例。面包屑的默认样式已更改,删除了以前版本中默认的灰色背景、填充和边框半径。下面是Bootstrap5中面包屑样式的示例:使用left和right来指代它使用开始和结束位置的类的命名已更改。例如,下拉列表中的.dropleft和.dropright分别替换为.dropstart和.dropend。与前一点类似,使用l表示左侧和r表示右侧的实用程序类现在分别使用s表示开始和e表示结束。例如,.mr-*现在是.me-*。范围输入的.form-control-range类现在是.form-range。装订线现在设置为rem而不是之前的px。.no-gutters已重命名为.g-0作为新添加的Gutters类的一部分(稍后章节将详细介绍)。链接现在默认带有下划线,即使没有悬停。自定义表单元素类名称已从.custom-*更改为表单组件类的一部分。例如,.custom-check替换为.form-check,.custom-select替换为.form-select,等等。现在您需要将.form-label添加到标签中。Alerts、Breadcrumbs、Cards、Dropdowns、ListGroups、Modals、Popups和Tooltips现在使用相同的填充值,使用$spacer变量。徽章元素中的默认填充现在从.25em/.5em更改为.35em/.65em。切换按钮包装器用于复选框和单选按钮。现在标记也被简化了。在Bootstrap4中,切换按钮的复选框使用以下标签实现:"checkbox"checked>Checked
在Bootstrap5中,这可以通过更简单的方式完成:Checked按钮的活动和悬停状态增加了颜色对比。关闭按钮类现在从.close重命名为.btn-close并使用SVG图标代替×。下拉分隔线现在更暗以获得更好的对比度。导航栏内容现在应该包装在容器元素中。例如在Bootstrap4中:Navbar...在Bootstrap5中变为:>Navbar...
popover组件中的.arrow类现在被.popover-arrow替换,Tooltip组件中的.arrow类现在被.tooltip-替换箭。默认吐司持续时间更改为5秒。tooltip、dropdown和popover组件中fallbackPlacements的默认值已更改为数组['top','right','bottom','left']。.text-monospace已重命名为.font-monospace。.font-weight-*已重命名为.fw-*,.font-style-*已重命名为.fst-*。.rounded-sm和.rounded-lg现在已被一系列从0到3的舍入类.rounded-*取代。有什么新内容?最后,在版本5中,Bootstrap在其库中添加了许多令人兴奋的新功能。其中一些更改包括新功能、新支持的概念、新组件、新实用程序类等等。响应式字体大小现在默认启用Bootstrap5默认启用RFS,使Bootstrap中的字体响应更快。RFS是Bootstrap的一个副项目,最初是为响应式缩放和调整字体大小而创建的。现在,它对margin、padding、box-shadow等属性做同样的事情。它所做的基本上是根据浏览器的尺寸计算出最合适的值,这些计算在编译时被翻译成计算函数。使用RFS还摒弃了以前使用px的做法,转而使用rem,因为它有助于实现更好的响应能力。如果你在Bootstrap中使用Sass文件,你现在可以使用RFS制作的mixin,包括字体大小、边距、填充等,这可以让你确保你的组件和样式是响应式的。从右到左支持Bootstrap5使用RTLCSS添加了从左到右(RTL)支持。由于Bootstrap在全球范围内使用,开箱即用的RTL支持是重要的一步。出于这个原因,Bootstrap5放弃了特定的方向命名(例如使用左和右)以支持开始和结束。这使得Bootstrap足够灵活以处理从左到右(LTR)和RTL站点。例如,.dropleft现在是.dropstart,.ml-*现在是.ms-*等。为了让Bootstrap识别并将RTL样式应用到您的站点,您需要将目录设置为rtl和使用站点的RTL语言添加lang属性。例如,lang="ar"。最后,您需要包含Bootstrap的RTLCSS文件:"integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N"crossorigin="anonymous">这样你的网站就可以支持RTL了。新组件Bootstrap5为库带来了一些新组件。其中一些组件是其他组件的一部分,现在是独立组件。AccordionAccordion以前,Accordion是Collapsible组件的一部分,而不是它自己的组件。在Bootstrap5中,Accordion是一个新组件。Accordion有一个新类.accordion,它包含手风琴项目列表。此外,与Bootstrap4中以前的样式相比,Accordion有了新的样式。下面是accordion组件的示例。OffcanvasOverlappingSidebar另一个新组件是Offcanvas,它允许您创建一个重叠的侧边栏。此侧边栏通常用于在小型设备上显示菜单。您可以通过在LTR中将.offcanvas-start用于左侧,将.offcanvas-top用于顶部,将.offcanvas-end用于LTR中的右侧,以及.offcanvas-bottom用于底部,将其放置在页面的任一侧。您还可以指定Offcanvas是否应该有背景。下面是Offcanvas组件的使用示例:FloatingLabelFloatingLabelFloatingLabel是Form组件的一个新组件。它允许您创建一个输入,其标签最初看起来像一个占位符,然后当输入获得焦点时,标签浮动到输入的顶部,在值上方。它也适用于