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

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

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

css-grid-bootstrap.jpg

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网站。

相关文章
|
27天前
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
11 0
|
2月前
|
人工智能 前端开发 容器
【前端|CSS系列第4篇】CSS布局之网格布局
【前端|CSS系列第4篇】CSS布局之网格布局
|
4月前
|
前端开发
|
4月前
|
前端开发
|
4月前
|
前端开发
|
21天前
|
前端开发 JavaScript API
|
27天前
|
前端开发
使用CSS实现网格+渐变背景色的Web页面背景
使用CSS实现网格+渐变背景色的Web页面背景
17 0
|
2月前
|
移动开发 前端开发 HTML5
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
29 0
|
4月前
|
前端开发 容器
CSS3 网格布局
CSS3 网格布局
29 0

相关产品

  • 云迁移中心