Bootstrap是构建用于设计专业设计网页的现代,响应式和动态界面的最受欢迎的前端框架,目前正在进行Bootstrap 5的重大更新。Bootstrap是CSS和JavaScript / jQuery代码的免费开放源代码集合,用于创建动态布局网站和Web应用程序。

作为创建前端设计的工具,它由一系列基于HTML和CSS的设计模板组成,这些模板用于网站或应用程序的不同组件,例如表单,按钮,导航,模态,版式和其他具有有用JavaScript的界面组件扩展名。无论您是Web开发的初学者还是经验丰富的开发人员都没有关系,Bootstrap是一个强大的工具,可用于您尝试构建的任何类型的网站和Web应用程序。

此外,Bootstrap提供了一个现成的解决方案,其中包含数百个可以与之集成的第三方组件,从而使您可以快速构建原型以实现理想的网站,而无需花费大量时间。最后,您可能最终需要自定义以构建网站或Web应用程序的最终设计,因为已经为您设置了大多数配置。

Bootstrap 4当前的版本为4.4.1,它现在具有许多重要功能,例如Grid,Flexbox,Sass集成以及基于jQuery构建的强大插件。自 2015年8月19日发布Alpha版Bootstrap 4以来,经过4年多的发展;正在为版本5升级在后台开发更新。

在本文中,让我们看一下Bootstrap 5的主要更新,包括发布日期,集成和修改。

Bootstrap版本5:新版本的变化

Bootstrap 5的官方Github项目跟踪委员会拥有超过765个任务,其中包含83个以上的拉取请求和311个问题。如果我们根据之前的开发时间(从Bootstrap 4到Bootstrap 4.1)发布日期,则开发团队大约需要3个月的时间来完成从Bootstrap 4.1到Bootstrap 4.2的开发。我们可能会在2020年上半年发布Bootstrap 5。Bootstrap尚未确认正式发布日期。

事后看来,我们希望在版本5上列出一系列更改,例如删除jQuery(这是该版本的主要提升)以及对Internet Explorer 10和11的支持下降。

以下是Bootstrap 5中的一些预期更改:

  1. jQuery被删除
  2. 切换到Vanilla JavaScript
  3. 自适应字体大小
  4. 放弃对Internet Explorer 10和11的支持
  5. 装订线槽宽测量单位的变化
  6. 移除卡片组
  7. 导航栏优化
  8. 自定义SVG图标库
  9. 从Jekyll切换到Hugo
  10. 类更新

jQuery已删除

jQuery是一个为经典Web脚本提供通用抽象层的库,几乎可以满足任何Web开发要求。它的可扩展特性使您无需编写大量JavaScript即可访问文档中的元素,无需修改网页中内容的外观,开发人员就可以利用它来弥合所有浏览器之间的差距,更改文档内容,响应用户的交互,无需重新通过AJAX刷新页面即可从服务器检索信息,将动画添加到您的网页,简化常见的JavaScript任务,然后列表继续进行。

jQuery

尽管Bootstrap使用jQuery已超过8年,但jQuery已经成为一个庞大而庞大的框架,它要求网站使用它来下载和添加琐碎的加载时间,而这个库可能不会被Bootstrap本身使用,而其他任何插件都无法使用。

如今,随着Angular,Vue和React之类的JavaScript框架在Web开发社区中占主导地位,jQuery已经失去了它的流行性,因为这些现代框架中的大多数都通过虚拟DOM而不是直接在DOM上运行,从而导致性能大大提高。尽管这听起来很荒谬,但事实证明它精通得多,并且使用这些框架的任何人都将比使用jQuery的人更好地控制和维护自己的代码。

展望未来,任何jQuery查询功能都必须使用Bootstrap 5中的纯JavaScript代码或原始JavaScript代码完成,这将有助于框架的文件大小或重量。

切换到Vanilla JavaScript

JavaScript是网络的编程语言。大多数现代网站都由JavaScript驱动,台式机,控制台,平板电脑,游戏和手机上的所有现代Web浏览器都包含JavaScript解释器,这使JavaScript成为世界上最通用的编程语言。

Vanilla JavaScript

在Bootstrap 5中删除jQuery支持后,可以编写高效的原始JavaScript代码,而不必担心大小或添加任何其他非必需功能。尽管jQuery已经存在了很长一段时间,但完全不可能单独使用jQuery,因为在大多数情况下,jQuery所做的就是在全局范围内添加$对象,其中包含许多功能。像原型这样的更光滑的库不是JavaScript的替代品,而仅作为解决常见问题的额外工具而存在。

如果您从一开始就知道JavaScript是如何工作的,那么这一重大变化不会对您造成太大影响,但是对于仅知道如何使用jQuery的某些开发人员而言,这可能是学习该语言的好机会。

自适应字体大小

对于一些开发人员而言,设计一个在多个平台或视口上看起来都不错的网站是非常困难的。媒体查询一直是解决印刷术常见问题的好工具,该问题使开发人员可以通过为特定视口上的印刷术元素指定特定的字体大小来控制网页上印刷术的外观。

RFS自适应字体大小

Bootstrap 5将默认启用响应字体大小,它将通过RFS引擎或响应字体大小根据用户视口的大小自动调整版式元素的大小。根据RFS资料库,RFS是一个单元大小调整引擎,最初是为了调整字体大小而开发的。RFS可以使用单位(如边距,边距,边框半径或框阴影)来基本调整任何CSS属性的每个值的大小。

它是一种预处理器或后处理器驱动的机制,可以根据用户的屏幕大小或视口自动计算适当的字体大小值。它可以在已知的预处理器或后处理器工具(例如Sass,Less,Stylus或PostCSS)上工作。

例如,假设您有一个hero-title类,该类是您要用于hero部分中主要标题的h1标签元素的类。使用Sass,以下mixin可以解决问题:

.hero-title {
  @include font-size(4rem);
}

这将被编译为:

.hero-title {
  font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
  .hero-title {
            font-size: 4rem;
  }
}

放弃对Internet Explorer 10和11的支持

1995年,Microsoft发布了Internet Explorer,这引起了所有人的注意,因为第一次有支持CSS和Java applet的浏览器使它成为2003年使用最广泛的Web浏览器之一,拥有95%的使用份额。

Bootstrap 5 不再支持IE11

快进到2020年,Internet Explorer不再与Chrome,Firefox和Edge相关。实际上,由于它不支持现代JavaScript标准,因此成为Web设计师的噩梦之一。为了使用Internet Explorer,无论是10还是11,都需要将JavaScript代码编译为ES5而不是ES6,这会将项目的大小最多增加30%。显然,这限制了您使用ES6或更新的JavaScript标准功能的能力。更糟糕的是,它不支持很多现代CSS属性,这限制了您现代Web设计的潜力。

在Bootstrap 5中,Bootstrap团队决定放弃对Internet Explorer 10和11的支持,这是一个很好的举措,因为它将使Web设计人员和开发人员可以将更多的精力放在设计现代Web页面上,而不必担心会破坏上面的任何代码旧的浏览器或增加每个项目的规模。

更改基本测量单位

CSS提供了使用各种度量单位(例如px,em,rem,%vw和vh)指定元素大小或长度的方法。尽管像素或px被认为是众所周知的并且以其绝对单位使用,但相对于查看设备的DPI和分辨率,它不会基于不利于现代响应式Web设计的任何其他元素而发生变化。

Bootstrap长期以来一直使用px作为其装订线宽度,在Bootstrap 5中将不再是这种情况。根据Bootstrap 5官方Github项目跟踪板上的修复,装订线宽度现在将在rem而不是px。

Rem代表“ root em”,意思是等于根元素上font-size的计算值。例如,1 rem等于HTML元素的字体大小(大多数浏览器的默认值为16px)。

删除卡片组

在Bootstrap 4中,为了使您能够设置彼此不连接的宽度和高度相等的卡片,您需要使用如下所示的代码:

Bootstrap 5 废弃卡片组

<div class=”card-deck”>
   <div class=”card”>
      <img class=”card-img-top” src=”…” alt=”Card image cap”>
      <div class=”card-body”>
         <h5 class=”card-title”>Card title</h5>
         <p class=”card-text”>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
         <p class=”card-text”><small class=”text-muted”>Last updated 3 mins ago</small></p>
      </div>
   </div>
   <div class=”card”>
      <img class=”card-img-top” src=”…” alt=”Card image cap”>
      <div class=”card-body”>
         <h5 class=”card-title”>Card title</h5>
         <p class=”card-text”>This card has supporting text below as a natural lead-in to additional content.</p>
         <p class=”card-text”><small class=”text-muted”>Last updated 3 mins ago</small></p>
      </div>
   </div>
   <div class=”card”>
      <img class=”card-img-top” src=”…” alt=”Card image cap”>
      <div class=”card-body”>
         <h5 class=”card-title”>Card title</h5>
         <p class=”card-text”>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
         <p class=”card-text”><small class=”text-muted”>Last updated 3 mins ago</small></p>
      </div>
   </div>
</div>

在Bootstrap 5中,Bootstrap团队删除了卡片组,因为新的网格系统提供了更灵敏的控制。因此,删除了可以通过网格解决的不必要的多余类。

导航栏优化

在以前的Bootstrap版本中,您需要有相当数量的标记才能使其正常工作。但是,在Bootstrap 4中,他们通过使用nav或div HTML元素和无序列表来简化此操作。导航栏类是始终需要出现在组件上的默认类。

默认情况下,Bootstrap 4在其显示选项上使用内联块,但在Bootstrap 5中已将其删除。他们还使用了flex布局,并删除了由于需要导航栏中的logo。除此之外,他们还通过dropdown-menu-dark类实现了深色下拉菜单,该下拉菜单将下拉菜单变成黑色背景,我们通常在导航栏下拉菜单项上看到该下拉菜单。

自定义SVG图标库

在Bootstrap的第3版中, 创建了250个可重复使用的图标组件,它们的字体名为“Glyphicons”,旨在为输入组,警报,下拉菜单和其他有用的Bootstrap组件提供图标。

Bootstrap 5 新增自定义SVG图片

但是,在Bootstrap 4中,它完全被废弃了,Web设计人员和开发人员需要依赖于Font Awesome之类的免费图标字体,或者使用他们自己的自定义SVG图标,才能为其网站设计增加价值。在Bootstrap 5中,有一个由Bootstrap共同创始人Mark Otto精心打造的全新SVG图标库。在正式发布Bootstrap 5之前,现在可以在此时将这些图标添加到您的项目中并使用它们。

从Jekyll切换到Hugo

Jekyll是一个免费的开源静态站点生成器。如果您知道WordPress,Joomla或Drupal的工作原理,那么您可能对它的工作原理有所了解。Jekyll用于构建具有易于使用的导航,网站组件的网站,并一次生成所有内容。Jekyll基本上提供了网页模板,例如导航和页脚,这些模板将反映在您的所有网页上。这些模板与具有确定信息的其他文件合并(例如,网站上每个博客文章的文件),以生成完整的HTML页面供网站用户查看。

Bootstrap 4一直是通过Sass(语法很棒的样式表)与Jekyll集成的好工具,但是在Bootstrap 5中,有望从Jekyll转向Hugo。Hugo被描述为“由GoLang中的spf13用爱构建的快速灵活的静态站点生成器”。与Jekyll相似,它是一个静态网站生成器,但使用Go语言编写。切换的可能原因是Hugo闪电般快速,易于使用且可配置。与Jekyll相比,它与流行的Web主机具有很好的集成,并且可以使用任何URL结构来组织您的内容。

类更新

当然,如果没有新的Bootstrap CSS类,Bootstrap 5将不会变得有趣。Bootstrap 4具有1,500多个CSS类。在新版本中将不再提供某些CSS类,而将添加一些CSS类。根据Bootstrap 5官方Github项目跟踪委员会的说法,一些已经删除的CSS类是:

  • form-row
  • form-inline
  • list-inline
  • card-deck

这是添加的一些新的Bootstrap 5 CSS类:

  • gx- *控制水平/列装订线宽度
  • gy- *控制垂直/行装订线宽度
  • g- *控制水平和垂直装订线宽度
  • row-cols-auto

成为开发人员时,令人沮丧的经历之一就是为每个项目重新发明了基本的HTML,CSS和JavaScript。尽管有些人喜欢编写自己的代码,但仅使用现有的框架(如Bootstrap)仍然有意义。随着Bootstrap 5中所有新更新的到来,可以肯定地说,Bootstrap团队正在采取重大步骤来使框架轻巧,简单,有用和更快,以使开发人员受益。