核心要點

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

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

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

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

以下是一些原因。

什么是 CSS 網(wǎng)格？

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

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

此 CSS 標準的實現(xiàn)為開發(fā)者提供了使用原生 CSS 代碼構建頁面布局的急需能力，除了作為包含網(wǎng)格的包裝器元素的存在外，它不依賴于 HTML 標記。想象一下網(wǎng)頁設計中的靈活性和創(chuàng)造力潛力！

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

HTML 代碼如下：

<div class="grid">
  <header>頁眉內容</header>
  <main>主要內容</main>
  <aside>側邊欄</aside>
  <footer>頁腳</footer>
</div>

至于 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;
}

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

什么是 Bootstrap？

在撰寫本文時，整個互聯(lián)網(wǎng)的 3.6% 使用 Bootstrap：

在 Bootstrap 網(wǎng)站上，你會發(fā)現(xiàn)以下定義：

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

換句話說，Bootstrap 提供了現(xiàn)成的組件，使你能夠立即創(chuàng)建漂亮的網(wǎng)頁。

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

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

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

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

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

如今，反對使用 Bootstrap 的主要原因是，使用 CSS 網(wǎng)格，CSS 擁有自己的網(wǎng)格系統(tǒng)，它沒有任何外部依賴項，并且一旦學會，它就能讓開發(fā)者輕松構建各種布局。

雖然我是 CSS 網(wǎng)格的粉絲，但我認為 Bootstrap 仍然在前端開發(fā)中占有一席之地，并且在未來一段時間內仍將如此。

以下至少有三個原因。

Bootstrap 不僅僅是它的網(wǎng)格系統(tǒng)

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

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

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

Bootstrap 是一個很棒的原型工具

有時你只需要為客戶提供一個可用的原型。Bootstrap 讓你能夠立即做到這一點，而且?guī)缀醪恍枰远x代碼。這不僅適用于網(wǎng)格系統(tǒng)，也適用于它提供的所有現(xiàn)成組件。

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

處理使用 Bootstrap 構建的舊版網(wǎng)站

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

結論

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

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

你怎么看？你的下一個項目將使用 Bootstrap 還是 CSS 網(wǎng)格構建？

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

關于 CSS 網(wǎng)格布局和 CSS 框架的常見問題

CSS 網(wǎng)格布局和 CSS 框架的主要區(qū)別是什么？

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

CSS 網(wǎng)格布局比 CSS 框架更好嗎？

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

CSS 網(wǎng)格布局和 CSS 框架可以一起使用嗎？

是的，CSS 網(wǎng)格布局和 CSS 框架可以一起使用。事實上，許多開發(fā)者使用 CSS 網(wǎng)格布局來創(chuàng)建網(wǎng)頁的整體布局，然后使用 CSS 框架來創(chuàng)建這些頁面中的各個組件。這種方法允許你利用兩種工具的優(yōu)勢。

CSS 網(wǎng)格布局和 CSS 框架的一些替代方案是什么？

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

如何在 CSS 網(wǎng)格布局和 CSS 框架之間進行選擇？

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

Bootstrap 是 CSS 框架嗎？

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

使用 CSS 網(wǎng)格布局的一些優(yōu)勢是什么？

CSS 網(wǎng)格布局提供了一些優(yōu)勢。它允許使用行和列創(chuàng)建復雜的布局，它是 CSS 的原生特性，這意味著它不需要任何額外的庫或插件，并且它提供了對網(wǎng)頁布局的許多靈活性和控制。

使用 CSS 框架的一些優(yōu)勢是什么？

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

如何開始使用 CSS 網(wǎng)格布局？

要開始使用 CSS 網(wǎng)格布局，你需要了解 HTML 和 CSS 的基礎知識。從那里，你可以通過在線教程、文檔和實踐來學習更多關于 CSS 網(wǎng)格布局的知識。

如何開始使用 CSS 框架？

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

以上是CSS網(wǎng)格布局與CSS框架辯論的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！