Joomla的未来是CSS网格,而不是Bootstrap 4-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章
展开