Joomla的未来是CSS网格,而不是Bootstrap 4

Joomla 4中最重要的变化之一是从Bootstrap 2升级到Bootstrap4。但是,我们发现的一件事是Joomla 4不会完全依赖Bootstrap。

Joomla的未来是CSS网格,而不是Bootstrap 4

Joomla 4也将依靠CSS Grid Layout,这是一种正在改变前端Web设计行业的CSS方法。

Bootstrap 4和CSS Grid Layout将是Joomla 4中用于前端设计的工具。Joomla将依靠Bootstrap 4来提供用户界面,而CSS Grid则用于前端布局。Joomla团队之所以做出此更改,是因为他们相信CSS Grid将更加适合未来。在Joomla 3中,它们被锁定在旧版本的Bootstrap中。希望这种新方法可以避免Joomla 4出现类似问题。

Bootstrap 2与Bootstrap 4

总而言之,Boostrap 2与Boostrap 4的意思是:float 和 flex 来构建布局。在讨论CSS Grid之前,让我们比较一下Joomla的两个Bootstrap版本:

  • Joomla 3支持Bootstrap 2
  • Joomla 4将支持Bootstrap 4

CSS网格布局

CSS网格布局是所有主要浏览器支持的网格布局系统,在构建布局时会扭曲我们众所周知的方法。CSS Grid不是框架。

在使用Bootstrap(以及其他常见的CSS框架)时,创建列和行的常见方法是在HTML标记中调用CSS类,以定义哪些元素是行,如果使用列,则定义每个元素的大小。

CSS网格布局以相反的方式工作。您可以使用更简洁的HTML标记,并通过CSS来确定哪些元素是行,列和大小。flex CSS属性也没有浮动。

  • grid-template-columns:列数以及每列的宽度。两列,两者均为50%宽度
  • grid-template-rows:每行的高度。在这种情况下为100像素

display使用“grid”作为值的属性将子div定义.container为布局元素。

使用CSS网格布局的优势

我看到CSS网格比Bootstrap具有以下两个主要优点:

  • 更简单的HTML。 您可以编写更少的HTML并生成通常与Bootstrap 4或其他CSS框架相同的结果
  • 通过CSS在设计中进行更多控制。即使我们知道CSS负责设计,框架也要求我们也依赖HTML标记。CSS Grid通过减少对HTML标记输出的CSS类的依赖来更好地控制设计

Grid不需要大量的CSS和JS,因为它是Web平台本身的一部分。这意味着您可以在速度较慢的连接(3G或更慢的速度)上节省80%的页面加载时间,从而加载成功Joomla网站。