Joomla 4中最重要的變化之一是從Bootstrap 2升級到Bootstrap4。但是，我們發(fā)現(xiàn)的一件事是Joomla 4不會完全依賴Bootstrap。
Joomla 4也將依靠CSS Grid Layout，這是一種正在改變前端Web設(shè)計行業(yè)的CSS方法。
Bootstrap 4和CSS Grid Layout將是Joomla 4中用于前端設(shè)計的工具。Joomla將依靠Bootstrap 4來提供用戶界面，而CSS Grid則用于前端布局。Joomla團隊之所以做出此更改，是因為他們相信CSS Grid將更加適合未來。在Joomla 3中，它們被鎖定在舊版本的Bootstrap中。希望這種新方法可以避免Joomla 4出現(xiàn)類似問題。
Bootstrap 2與Bootstrap 4
總而言之，Boostrap 2與Boostrap 4的意思是：float 和 flex 來構(gòu)建布局。在討論CSS Grid之前，讓我們比較一下Joomla的兩個Bootstrap版本：
- Joomla 3支持Bootstrap 2
- Joomla 4將支持Bootstrap 4
CSS網(wǎng)格布局
CSS網(wǎng)格布局是所有主要瀏覽器支持的網(wǎng)格布局系統(tǒng)，在構(gòu)建布局時會扭曲我們眾所周知的方法。CSS Grid不是框架。
在使用Bootstrap（以及其他常見的CSS框架）時，創(chuàng)建列和行的常見方法是在HTML標(biāo)記中調(diào)用CSS類，以定義哪些元素是行，如果使用列，則定義每個元素的大小。
CSS網(wǎng)格布局以相反的方式工作。您可以使用更簡潔的HTML標(biāo)記，并通過CSS來確定哪些元素是行，列和大小。flex CSS屬性也沒有浮動。
- grid-template-columns：列數(shù)以及每列的寬度。兩列，兩者均為50％寬度
- grid-template-rows：每行的高度。在這種情況下為100像素
display使用“grid”作為值的屬性將子div定義.container為布局元素。
使用CSS網(wǎng)格布局的優(yōu)勢
我看到CSS網(wǎng)格比Bootstrap具有以下兩個主要優(yōu)點：
- 更簡單的HTML。 您可以編寫更少的HTML并生成通常與Bootstrap 4或其他CSS框架相同的結(jié)果
- 通過CSS在設(shè)計中進行更多控制。即使我們知道CSS負責(zé)設(shè)計，框架也要求我們也依賴HTML標(biāo)記。CSS Grid通過減少對HTML標(biāo)記輸出的CSS類的依賴來更好地控制設(shè)計
Grid不需要大量的CSS和JS，因為它是Web平臺本身的一部分。這意味著您可以在速度較慢的連接（3G或更慢的速度）上節(jié)省80％的頁面加載時間，從而加載成功Joomla網(wǎng)站。
