Bootstrap 与纯 CSS 网格：比较指南

嘿，了不起的人们，欢迎回到我的博客！ ？

介绍

让我们深入了解何时以及为何选择 Bootstrap 或纯 CSS 网格。本文将引导您了解细微差别，提供视觉辅助工具，并提供实际示例，帮助您为 Web 项目做出明智的决策。

您将在本文中学到什么？

• Bootstrap 基础知识：它的网格系统、自定义和实际使用。

• 纯 CSS 网格：它的工作原理、最新功能及其优点。

• 视觉比较：布局示例以直观方式解释概念。

• 实际应用：案例研究和场景。

• 互动元素：动手体验的代码示例。

• 工具和资源：在哪里了解更多信息并获得支持。

为什么选择 Bootstrap？ ？

• 速度：通过现成的类，您可以快速构建响应式布局。

• 一致性：在不同项目中保持统一的设计。

• 社区和生态系统：广泛的文档、教程和第三方扩展。

引导网格系统

Bootstrap 的网格基于带有响应式断点的 12 列布局：

html

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+---+---+
| 1     |
+---+
| 2 |
+---+

定制

TL-DR：可以通过 SCSS 变量或使用 bootstrap-customize 工具自定义 Bootstrap。以下是更改默认网格的方法：

$grid-columns: 16;
$grid-gutter-width: 30px;

如果您已经了解自定义，请跳过下一部分并继续实际用例：电子商务模板。

定制详情 :

Bootstrap 提供了多种方法来自定义网站的外观和行为：

SCSS 变量

Bootstrap 使用 SCSS 构建，允许通过变量进行广泛的自定义：

• 颜色：更改主配色方案、按钮和背景颜色。

• 排版：调整字体大小、系列和粗细。

• 间距：修改默认间距比例或网格装订线宽度。

示例：

// _variables.scss

// Change primary color
$primary: #3498db;

// Adjust font size
$font-size-base: 1rem;

// Increase grid gutter width
$grid-gutter-width: 30px;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

引导自定义工具

对于那些不习惯 SCSS 或需要快速定制的人：

• 访问 Bootstrap 定制器，您可以在其中调整变量、选择要包含或排除的组件，以及下载 Bootstrap 的自定义版本。

有效定制的技巧

• 从变量开始：如果您刚刚开始，更改变量是最简单的自定义方法，无需深入了解框架。

• 使用快速原型定制器：非常适合在不更改 SCSS 文件的情况下测试不同的外观。

• 创建自定义构建：如果您正在处理具有特定要求的项目，创建 Bootstrap 的自定义构建可以通过删除未使用的组件来减小文件大小。

• Sass 部分文件：Bootstrap 对每个组件使用部分文件。您可以通过在项目中创建具有相同名称的自己的部分来覆盖这些内容。

通过提供这些额外的详细信息，读者可以更清楚地了解定制过程，从简单的变量更改到创建更个性化的 Bootstrap 版本。

现实世界用例：电子商务模板？

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+---+---+
| 1     |
+---+
| 2 |
+---+

请在 Codepen 上查看这里，我有完整的示例。

HTML（在上面的 Codepen 示例中）使用 Bootstrap 类来创建布局：

• 固定的顶部导航栏。
• 主要内容区域内的网格系统，将其分为 8 列产品列表和 4 列购物车侧边栏。
• 自定义 CSS，用于附加样式，如边框、填充和背景颜色，以增强产品和购物车的外观。

自定义样式提供了一些基本样式，但 Bootstrap 的默认样式在响应式设计和组件样式方面完成了大部分繁重工作。请记住，Bootstrap 被设计为高度可定制的，因此您可以轻松修改这些样式或使用 SCSS 更改变量以获得更定制的外观。

为什么选择纯CSS？ ？

• 控制：完全的设计自由，没有框架约束。

• 性能：较小的文件大小并且没有外部依赖项。

• 现代功能：利用最新的 CSS 功能，如子网格和容器查询。

CSS 网格设置： CSS 网格允许以最少的标记实现复杂的布局：

$grid-columns: 16;
$grid-gutter-width: 30px;

视觉：

// _variables.scss

// Change primary color
$primary: #3498db;

// Adjust font size
$font-size-base: 1rem;

// Increase grid gutter width
$grid-gutter-width: 30px;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

最新 CSS 功能

• 子网格：TLDR 用于对齐父网格内的嵌套网格。

• 容器查询：TLDR 对于响应自身大小而不是视口的组件。

子网格

想象一下您有一个大网格，其中放置了一些盒子（例如墙上的相框）。现在，您想将较小的盒子放入其中一个大盒子中，但您希望这些较小的盒子与大网格的线条完美对齐。

子网格就像在你的大盒子里有一张透明的网格纸，与大墙网格的图案相匹配。这样，当您放置小盒子时，它们不仅可以在大盒子内对齐，还可以与整个墙壁对齐。

示例：

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+---+---+
| 1     |
+---+
| 2 |
+---+

视觉概念：

$grid-columns: 16;
$grid-gutter-width: 30px;

容器查询

将容器查询想象成让墙上的每个盒子能够根据其自身的大小而不仅仅是墙（视口）的大小来决定其外观。

通常，当您使网站响应时，您会告诉它根据整个屏幕的宽度进行更改。但是，如果页面的一部分（例如侧边栏）变宽或变窄怎么办？通过容器查询，这个侧边栏可以调整自己的内容，而不影响页面的其余部分。

示例：

// _variables.scss

// Change primary color
$primary: #3498db;

// Adjust font size
$font-size-base: 1rem;

// Increase grid gutter width
$grid-gutter-width: 30px;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

视觉概念：

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+--------+--------+
|Product |Cart    |
|List    |Sidebar |
+--------+--------+

这意味着每个组件都可以独立适应，使您的设计更加模块化和灵活。

案例研究：个人博客？

Bootstrap 可能会被选择用于：

• 快速设置：如果您想使用模板或入门套件快速启动。

纯 CSS 网格 更适合：

• 自定义设计：如果您想要一个不适合 Bootstrap 默认设置的独特布局。

Codepen 上的示例：

（请检查下面的链接，并获取代码。）

Codepen 示例中的代码设置了一个基本的博客布局，其中包含标题、导航栏、主要内容区域、最近帖子的侧边栏和页脚。它使用 CSS 网格 进行布局，并包含用于响应的媒体查询。

何时选择每种方法

• Bootstrap：非常适合需要快速部署的项目，其中网站各个部分的设计一致性是关键，或者在熟悉 Bootstrap 的团队中工作时。

• 纯 CSS ：当您寻求对设计的完全控制、想要减少依赖性，或者当您准备好利用现代 CSS 的高级功能时，请选择此选项。

工具和资源？

引导

• 引导文档

• 引导定制器

• 引导主题

纯 CSS 网格

• CSS 网格的 MDN Web 文档

• CSS-Tricks 的 CSS 网格指南

• 网格示例

结论

在 Bootstrap 和纯 CSS Grid 之间进行选择并不是哪个更好，而是哪个适合您的项目需求和您的技能水平。 Bootstrap 提供了一种结构化方法，非常适合初学者或需要快速开发的项目。纯 CSS 网格为那些希望精确且富有创造力地绘制布局的人提供了画布。

随着您在 Web 开发之旅中的成长，您会发现有时最好的选择是混合两者或根据项目需求从一种过渡到另一种。

继续探索，继续学习，继续编码！ ？

---

？您好，我是 Eleftheria，社区经理、 开发人员、公共演讲者和内容创建者。

？如果您喜欢这篇文章，请考虑分享。

？ 所有链接 | X | 领英