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中文网其他相关文章！