Bootstrap 与纯 CSS 网格：比较指南-css教程-PHP中文网

Bootstrap vs. Pure CSS Grid: A Comparison Guide

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

介绍

让我们深入了解何时以及为何选择 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 |
+--------+--------+

登录后复制

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