CSS網格佈局與CSS框架辯論

核心要點

• CSS 網格佈局和 Bootstrap 等 CSS 框架在網頁開發中用途不同。 CSS 網格允許開發者使用原生 CSS 代碼構建複雜的頁面佈局，而 Bootstrap 提供預先設計好的組件，用於快速高效地創建網頁。
• 儘管 CSS 網格提供了靈活性和獨立性，但 Bootstrap 憑藉其現成的組件、易於定制以及作為原型工具的實用性，在前端開發中仍然具有相關性。對於使用 Bootstrap 構建的舊版網站的開發者來說，它尤其有用。
• CSS 網格佈局和 CSS 框架的選擇取決於項目的具體需求。 CSS 網格非常適合複雜的基於網格的設計，而 Bootstrap 可以通過預先設計好的組件和样式節省時間和精力。它們也可以一起使用，以發揮兩種工具的優勢。

在 CSS 網格佈局和 Flexbox 等尖端 CSS 標準的幫助下，網頁佈局的編碼不再那麼痛苦。如果再加上 Grid 和 Flexbox 的瀏覽器支持都相當不錯，那麼一個問題就必然會產生：在我的開發工作中，為什麼要考慮學習和使用 CSS 框架？

在本文中，我將重點介紹 Bootstrap，因為它可以說是所有可用的 CSS UI 庫中最流行的一種。

在我看來，即使在今天，學習和使用 Bootstrap 仍然有很多理由。

以下是一些原因。

什麼是 CSS 網格？

Rachel Andrew（一位在 CSS 網格相關方面知名的演講者和作家）將其定義如下：

網格就是一個網格系統。它允許你在 CSS 中定義列和行，而無需在標記中定義它們。你不需要一個工具來幫助你使其看起來像一個網格，你實際上就擁有一個網格！

此 CSS 標準的實現為開發者提供了使用原生 CSS 代碼構建頁面佈局的急需能力，除了作為包含網格的包裝器元素的存在外，它不依賴於 HTML 標記。想像一下網頁設計中的靈活性和創造力潛力！

例如，你不需要自定義類或標記中的額外行來構建這個簡單的佈局：

HTML 代碼如下：

<code class="language-html"><div class="grid">
  <header>页眉内容</header>
  <main>主要内容</main>
  <aside>侧边栏</aside>
  <footer>页脚</footer>
</div></code>

至於 CSS，你將在這裡構建你的視覺佈局。在這個簡單的例子中，只需要幾行代碼：

<code class="language-css">.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px 150px 50px;
}

header, footer {
  grid-column: span 12;
}

main {
  grid-column: span 8;
}

aside {
  grid-column: span 4;
}</code>

就是這樣，你完成了！還不錯。

什麼是 Bootstrap？

在撰寫本文時，整個互聯網的 3.6% 使用 Bootstrap：

在 Bootstrap 網站上，你會發現以下定義：

Bootstrap 是一個使用 HTML、CSS 和 JS 進行開發的開源工具包。使用我們的 Sass 變量和 mixin、響應式網格系統、大量的預構建組件以及基於 jQuery 的強大插件，可以快速創建你的想法原型或構建你的整個應用程序。

換句話說，Bootstrap 提供了現成的組件，使你能夠立即創建漂亮的網頁。

只需編寫相應的標記，你的應用程序就會立即看起來很棒。

Bootstrap 還使自定義其外觀和風格變得非常容易，並允許你為你的項目選擇和選擇所需的組件。

為什麼在有 Grid 的情況下還要使用 Bootstrap？

對 Bootstrap 最大的抱怨一直是代碼膨脹。原因是它包含許多項目中未使用的額外 CSS 代碼。第二個最大的抱怨是 Bootstrap 組件的樣式非常詳細，這在覆蓋某些 CSS 規則時可能會出現一些問題。

從這個流行的前端組件庫的最新版本開始，這兩個批評都站不住腳了：Bootstrap 完全是模塊化的，因此你只需包含你需要的部分。此外，Sass 文件的結構使得自定義原始樣式以滿足你的需求變得非常方便。

如今，反對使用 Bootstrap 的主要原因是，使用 CSS 網格，CSS 擁有自己的網格系統，它沒有任何外部依賴項，並且一旦學會，它就能讓開發者輕鬆構建各種佈局。

雖然我是 CSS 網格的粉絲，但我認為 Bootstrap 仍然在前端開發中佔有一席之地，並且在未來一段時間內仍將如此。

以下至少有三個原因。

Bootstrap 不僅僅是它的網格系統

沒錯，使用 Bootstrap 的首要原因是方便的網格系統，它使構建響應式網頁變得輕而易舉。但是，Bootstrap 還有一些很棒的組件，例如用途廣泛的新卡片組件，你可以使用它來顯示各種類型的內容，例如文本、圖像和視頻，以及開箱即用的響應式導航欄。你還可以為大多數組件選擇你喜歡的預設配色方案。

還有許多這些組件的功能呢？使用 Bootstrap，添加動態工具提示、輪播或下拉按鈕只需編寫相應的標記即可。如果你的 JavaScript 技能不是你的強項，你仍然可以在不編寫一行 JavaScript 代碼的情況下利用這些組件的優勢。

此外，如果你不是 CSS 專家，你仍然可以在學習這門技術的技巧的同時，利用 Bootstrap 的強大功能進行網頁設計。

Bootstrap 是一個很棒的原型工具

有時你只需要為客戶提供一個可用的原型。 Bootstrap 讓你能夠立即做到這一點，而且幾乎不需要自定義代碼。這不僅適用於網格系統，也適用於它提供的所有現成組件。

只需添加少量標記，你的原型就會擁有一個時尚的響應式導航欄或一個漂亮的警報框。

處理使用 Bootstrap 構建的舊版網站

開發人員的一項常見任務是處理其他開發人員編寫的現有網站。不可否認的是，大量的網站依賴 Bootstrap 來構建其前端。如果你需要重構和維護代碼庫，那麼了解如何使用該框架將非常方便。並非偶然，許多招聘信息在其所需技能列表中都包含 Bootstrap。

結論

總而言之，Bootstrap 在短期內不會消失。最新版本與之前的版本相比有了巨大的改進，從巧妙地使用 Sass mixin 和映射來輕鬆定制，到引入新的組件、實用程序類和更模塊化的架構。

再加上出色的文檔和易用性，Bootstrap 仍然是前端生態系統中一個強大的競爭者。

你怎麼看？你的下一個項目將使用 Bootstrap 還是 CSS 網格構建？

如果你聽說過 Bootstrap，但一直推遲學習它，因為它看起來太複雜了，那麼請學習我們的 Bootstrap 4 入門課程，快速輕鬆地了解 Bootstrap 的強大功能。

關於 CSS 網格佈局和 CSS 框架的常見問題

CSS 網格佈局和 CSS 框架的主要區別是什麼？

CSS 網格佈局和 Bootstrap 等 CSS 框架都是強大的網頁設計工具，但它們的目的不同。 CSS 網格佈局是一個 CSS 模塊，允許使用行和列創建複雜的網頁佈局。它是 CSS 的原生特性，這意味著它不需要任何額外的庫或插件即可工作。另一方面，CSS 框架是預先準備好的庫，旨在簡化網頁設計的流程。它們帶有預先設計好的組件，例如按鈕、表單和導航欄，這些組件可以輕鬆定制和重複使用。

CSS 網格佈局比 CSS 框架更好嗎？

CSS 網格佈局是否比 CSS 框架“更好”取決於項目的具體需求。 CSS 網格佈局提供了對網頁佈局的更多靈活性和控制，使其成為複雜基於網格設計的絕佳選擇。但是，像 Bootstrap 這樣的 CSS 框架可以通過提供預先設計好的組件和样式來節省你的時間和精力。如果你正在處理大型項目或需要快速啟動網站，CSS 框架可能是更好的選擇。

CSS 網格佈局和 CSS 框架可以一起使用嗎？

是的，CSS 網格佈局和 CSS 框架可以一起使用。事實上，許多開發者使用 CSS 網格佈局來創建網頁的整體佈局，然後使用 CSS 框架來創建這些頁面中的各個組件。這種方法允許你利用兩種工具的優勢。

CSS 網格佈局和 CSS 框架的一些替代方案是什麼？

CSS 網格佈局和 CSS 框架有很多替代方案。 CSS 網格佈局的一些流行替代方案包括 Flexbox 和 CSS 多列佈局。這些也是允許創建靈活佈局的原生 CSS 模塊。 CSS 框架的一些流行替代方案包括 Foundation、Bulma 和 Tailwind CSS。這些是提供不同功能和样式的其他 CSS 框架。

如何在 CSS 網格佈局和 CSS 框架之間進行選擇？

在 CSS 網格佈局和 CSS 框架之間進行選擇時，請考慮項目的需要以及你作為開發者的技能和偏好。如果你需要對佈局進行大量控制並且喜歡使用 CSS，你可能更喜歡 CSS 網格佈局。如果你更喜歡使用預先設計好的組件並且想要快速啟動網站，CSS 框架可能是一個更好的選擇。

Bootstrap 是 CSS 框架嗎？

是的，Bootstrap 是一個 CSS 框架。它是目前最流行的 CSS 框架之一，以其響應式設計、預先設計好的組件和廣泛的文檔而聞名。

使用 CSS 網格佈局的一些優勢是什麼？

CSS 網格佈局提供了一些優勢。它允許使用行和列創建複雜的佈局，它是 CSS 的原生特性，這意味著它不需要任何額外的庫或插件，並且它提供了對網頁佈局的許多靈活性和控制。

使用 CSS 框架的一些優勢是什麼？

CSS 框架提供了一些優勢。它們可以通過提供預先設計好的組件和样式來節省你的時間和精力，它們通常有良好的文檔記錄並得到開發者社區的支持，並且它們可以幫助確保你的網站具有響應性並在所有設備上看起來都很棒。

如何開始使用 CSS 網格佈局？

要開始使用 CSS 網格佈局，你需要了解 HTML 和 CSS 的基礎知識。從那裡，你可以通過在線教程、文檔和實踐來學習更多關於 CSS 網格佈局的知識。

如何開始使用 CSS 框架？

要開始使用 CSS 框架，你還需要了解 HTML 和 CSS 的基礎知識。從那裡，你可以選擇一個適合你需求的 CSS 框架，下載它，然後開始探索它的文檔和功能。

以上是CSS網格佈局與CSS框架辯論的詳細內容。更多資訊請關注PHP中文網其他相關文章！