核心要點(diǎn)

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

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

在本文中，我將重點(diǎn)介紹 Bootstrap，因?yàn)樗梢哉f(shuō)是所有可用的 CSS UI 庫(kù)中最流行的一種。

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

以下是一些原因。

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

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

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

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

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

HTML 代碼如下：

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

至于 CSS，你將在這里構(gòu)建你的視覺布局。在這個(gè)簡(jiǎn)單的例子中，只需要幾行代碼：

.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;
}

就是這樣，你完成了！還不錯(cuò)。

什么是 Bootstrap？

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

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

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

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

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

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

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

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

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

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

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

以下至少有三個(gè)原因。

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

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

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

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

Bootstrap 是一個(gè)很棒的原型工具

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

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

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

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

結(jié)論

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

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

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

如果你聽說(shuō)過(guò) Bootstrap，但一直推遲學(xué)習(xí)它，因?yàn)樗雌饋?lái)太復(fù)雜了，那么請(qǐng)學(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)頁(yè)設(shè)計(jì)工具，但它們的目的不同。CSS 網(wǎng)格布局是一個(gè) CSS 模塊，允許使用行和列創(chuàng)建復(fù)雜的網(wǎng)頁(yè)布局。它是 CSS 的原生特性，這意味著它不需要任何額外的庫(kù)或插件即可工作。另一方面，CSS 框架是預(yù)先準(zhǔn)備好的庫(kù)，旨在簡(jiǎn)化網(wǎng)頁(yè)設(shè)計(jì)的流程。它們帶有預(yù)先設(shè)計(jì)好的組件，例如按鈕、表單和導(dǎo)航欄，這些組件可以輕松定制和重復(fù)使用。

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

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

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

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

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)行選擇時(shí)，請(qǐng)考慮項(xiàng)目的需要以及你作為開發(fā)者的技能和偏好。如果你需要對(duì)布局進(jìn)行大量控制并且喜歡使用 CSS，你可能更喜歡 CSS 網(wǎng)格布局。如果你更喜歡使用預(yù)先設(shè)計(jì)好的組件并且想要快速啟動(dòng)網(wǎng)站，CSS 框架可能是一個(gè)更好的選擇。

Bootstrap 是 CSS 框架嗎？

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

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

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

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

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

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

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

如何開始使用 CSS 框架？

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

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