css網格(css grid)和獨自創立(bootstrap)的區別

CSS自挪威HåCSS現在是現代web開發的三大基石之一，另外兩個是HTML和JavaScript。從格式化文件的簡單語言到設計web應用程式的通用工具，CSS徹底改變了我們構建網站和web應用程式的方式。這些年來，它的特點和能力都有所提高。毫無疑問，CSS佈局最大的改變者是CSS網格。然後是bootstrap，它很快成為web上響應性最好的開源前端框架之一。那麼，您應該使用CSS網格還是引導？讓...

什麼是css網格(css grid)？

cssgridlayoutmodel，簡稱cssgrid，是一個強大的佈局系統，它使用一個二維網格來定義多個佈局區域，只需使用少量CSS規則。毫無疑問，網格是CSS佈局的最大改變者，它能夠以更高的可預測性和更少的程式碼完成您以前所做的一切。有了網格，你就可以做以前做不到的事情。網格真正改變了你設計網站的方式，提供了一種靈活的方式，只需CSS就可以改變元素的位置，甚至不需要改變HTML。使用Grid，您可以顯式地定義行和列的大小和數量，也可以讓瀏覽器決定行和列的數量。您還可以將每個專案放置到特定的區域或單元格中，也可以使用自動放置演算法讓瀏覽器決定將專案放置到網格的位置。

什麼是獨自創立(bootstrap)？

Bootstrap是最流行的開源CSS框架，用於建立和構建現代網站和web應用程式。它使用HTML、JavaScript和CSS工具的集合，在mobilefirst理念的新標準中實現更快更簡單的web開發。它是一個免費的前端框架，速度快，易於使用，而且它是圓滑的，直觀的和強大的。它使用基於HTML和CSS的設計模板進行排版、按鈕、表單、表格、導航等。Bootstrap最初被命名為Twitter Blueprint，由兩位工程師Jacob Thornton和Mark Otto開發，他們以前在Twitter工作。Twitter在2011年釋出了Bootstrap作為一個開源專案。Bootstrap提供了大量的內建元件，這些元件是專門用於特定目的的定製CSS類，如breadcrumbs、alerts、progress bar和navigation bar。最好的部分是，只要掌握HTML和CSS的知識，就可以輕鬆地從引導開始。

css網格與bootstrap的區別

佈局

–CSS Grid是一個強大的二維佈局模型，它提供了在兩個方向上完美工作的佈局控制元件，這意味著您可以沿兩個軸水平和垂直工作。它可以讓你一次把物品橫放下來。另一方面，Bootstrap提供了一個12列的系統，這意味著該系統基於12列的網格。因此，每行中的列大小必須等於12。它在12之後中斷，其餘的列平均分佈。這使得網格對於廣泛的佈局更加靈活。

靈活性

–CSS網格允許您在CSS中定義列和行，而無需在標記中定義它們。這個CSS標準的實現使您能夠使用本機CSS程式碼構建頁面佈局，而不用擔心更改HTML。Bootstrap有現成的內建元件，可以讓你在任何時候建立一個花哨的網頁，它可以很容易地定製它的外觀和感覺你喜歡。但是，它使用了大量額外的CSS程式碼，這些程式碼在您的專案中沒有任何相關用途。然而，Bootstrap的方便的網格系統使得構建響應性網頁變得容易。

特徵

–Bootstrap是一個很好的原型工具，它可以讓你在很短的時間內用很少甚至沒有自定義程式碼來**工作原型。大量網站的前端仍然依賴引導。Bootstrap與所有主要web瀏覽器和平臺的最新穩定版本相容。此外，它是一個最好的響應，移動第一網格系統提供了那裡。使用cssgrid，您可以建立幾乎無限排列的網格，並將子元素放置在您想要的任何位置，而不考慮它們的源順序。cssgrid比Bootstrap更適合建立佈局，而且它使HTML看起來更簡潔。

css網格與bootstrap：比較圖

總結 - css網格(of css grid) vs. 獨自創立(bootstrap)

簡而言之，如果你正在**一個簡單的前端站點，而你不在乎前端到底是什麼樣子，那麼Bootstrap對你來說是非常好的。它與所有最新的主流網路瀏覽器和平臺相容。大量網站的前端仍然依賴引導。Bootstrap仍然是前端生態系統中的有力競爭者，它的最大賣點是開源。cssgrid是一個強大的二維佈局模型，它比Bootstrap更適合建立佈局，它使HTML看起來更簡潔。如果你想建立一個超級定製的佈局，你會想定製很多，你最好堅持CSS網格。