核心要點(diǎn)

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

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

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

在我看來，即使在今天，學(xué)習(xí)和使用 Bootstrap 仍然有很多理由。

以下是一些原因。

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

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

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

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

例如，你不需要自定義類或標(biāo)記中的額外行來構(gòu)建這個簡單的佈局：

HTML 代碼如下：

<div class="grid">
  <header>頁眉內(nèi)容</header>
  <main>主要內(nèi)容</main>
  <aside>側(cè)邊欄</aside>
  <footer>頁腳</footer>
</div>

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

.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 進(jìn)行開發(fā)的開源工具包。使用我們的 Sass 變量和 mixin、響應(yīng)式網(wǎng)格系統(tǒng)、大量的預(yù)構(gòu)建組件以及基於 jQuery 的強(qiáng)大插件，可以快速創(chuàng)建你的想法原型或構(gòu)建你的整個應(yīng)用程序。

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

只需編寫相應(yīng)的標(biāo)記，你的應(yīng)用程序就會立即看起來很棒。

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

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

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

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

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

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

以下至少有三個原因。

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

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

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

此外，如果你不是 CSS 專家，你仍然可以在學(xué)習(xí)這門技術(shù)的技巧的同時，利用 Bootstrap 的強(qiáng)大功能進(jìn)行網(wǎng)頁設(shè)計。

Bootstrap 是一個很棒的原型工具

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

只需添加少量標(biāo)記，你的原型就會擁有一個時尚的響應(yīng)式導(dǎo)航欄或一個漂亮的警報框。

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

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

結(jié)論

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

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

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

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

關(guān)於 CSS 網(wǎng)格佈局和 CSS 框架的常見問題

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

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

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

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

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

是的，CSS 網(wǎng)格佈局和 CSS 框架可以一起使用。事實(shí)上，許多開發(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 框架之間進(jìn)行選擇？

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

Bootstrap 是 CSS 框架嗎？

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

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

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

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

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

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

要開始使用 CSS 網(wǎng)格佈局，你需要了解 HTML 和 CSS 的基礎(chǔ)知識。從那裡，你可以通過在線教程、文檔和實(shí)踐來學(xué)習(xí)更多關(guān)於 CSS 網(wǎng)格佈局的知識。

如何開始使用 CSS 框架？

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

以上是CSS網(wǎng)格佈局與CSS框架辯論的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！