嘿，了不起的人們，歡迎回到我的博客！ ？

介紹

讓我們深入了解何時(shí)以及為何選擇 Bootstrap 或純 CSS 網(wǎng)格。本文將引導(dǎo)您了解細(xì)微差別，提供視覺輔助工具，并提供實(shí)際示例，幫助您為 Web 項(xiàng)目做出明智的決策。

您將在本文中學(xué)到什么？

• Bootstrap 基礎(chǔ)知識(shí)：它的網(wǎng)格系統(tǒng)、自定義和實(shí)際使用。

• 純 CSS 網(wǎng)格：它的工作原理、最新功能及其優(yōu)點(diǎn)。

• 視覺比較：布局示例以直觀方式解釋概念。

• 實(shí)際應(yīng)用：案例研究和場(chǎng)景。

• 互動(dòng)元素：動(dòng)手體驗(yàn)的代碼示例。

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

為什么選擇 Bootstrap？ ？

• 速度：通過現(xiàn)成的類，您可以快速構(gòu)建響應(yīng)式布局。

• 一致性：在不同項(xiàng)目中保持統(tǒng)一的設(shè)計(jì)。

• 社區(qū)和生態(tài)系統(tǒng)：廣泛的文檔、教程和第三方擴(kuò)展。

引導(dǎo)網(wǎng)格系統(tǒng)

Bootstrap 的網(wǎng)格基于帶有響應(yīng)式斷點(diǎn)的 12 列布局：

html

<div>



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

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

定制

TL-DR：可以通過 SCSS 變量或使用 bootstrap-customize 工具自定義 Bootstrap。以下是更改默認(rèn)網(wǎng)格的方法：

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

如果您已經(jīng)了解自定義，請(qǐng)?zhí)^下一部分并繼續(xù)實(shí)際用例：電子商務(wù)模板。

定制詳情 :

Bootstrap 提供了多種方法來自定義網(wǎng)站的外觀和行為：

SCSS 變量

Bootstrap 使用 SCSS 構(gòu)建，允許通過變量進(jìn)行廣泛的自定義：

• 顏色：更改主配色方案、按鈕和背景顏色。

• 排版：調(diào)整字體大小、系列和粗細(xì)。

• 間距：修改默認(rèn)間距比例或網(wǎng)格裝訂線寬度。

示例：

// _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";

引導(dǎo)自定義工具

對(duì)于那些不習(xí)慣 SCSS 或需要快速定制的人：

• 訪問 Bootstrap 定制器，您可以在其中調(diào)整變量、選擇要包含或排除的組件，以及下載 Bootstrap 的自定義版本。

有效定制的技巧

• 從變量開始：如果您剛剛開始，更改變量是最簡單的自定義方法，無需深入了解框架。

• 使用快速原型定制器：非常適合在不更改 SCSS 文件的情況下測(cè)試不同的外觀。

• 創(chuàng)建自定義構(gòu)建：如果您正在處理具有特定要求的項(xiàng)目，創(chuàng)建 Bootstrap 的自定義構(gòu)建可以通過刪除未使用的組件來減小文件大小。

• Sass 部分文件：Bootstrap 對(duì)每個(gè)組件使用部分文件。您可以通過在項(xiàng)目中創(chuàng)建具有相同名稱的自己的部分來覆蓋這些內(nèi)容。

通過提供這些額外的詳細(xì)信息，讀者可以更清楚地了解定制過程，從簡單的變量更改到創(chuàng)建更個(gè)性化的 Bootstrap 版本。

現(xiàn)實(shí)世界用例：電子商務(wù)模板？

<div>



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

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

請(qǐng)?jiān)?Codepen 上查看這里，我有完整的示例。

HTML（在上面的 Codepen 示例中）使用 Bootstrap 類來創(chuàng)建布局：

• 固定的頂部導(dǎo)航欄。
• 主要內(nèi)容區(qū)域內(nèi)的網(wǎng)格系統(tǒng)，將其分為 8 列產(chǎn)品列表和 4 列購物車側(cè)邊欄。
• 自定義 CSS，用于附加樣式，如邊框、填充和背景顏色，以增強(qiáng)產(chǎn)品和購物車的外觀。

自定義樣式提供了一些基本樣式，但 Bootstrap 的默認(rèn)樣式在響應(yīng)式設(shè)計(jì)和組件樣式方面完成了大部分繁重工作。請(qǐng)記住，Bootstrap 被設(shè)計(jì)為高度可定制的，因此您可以輕松修改這些樣式或使用 SCSS 更改變量以獲得更定制的外觀。

為什么選擇純CSS？ ？

• 控制：完全的設(shè)計(jì)自由，沒有框架約束。

• 性能：較小的文件大小并且沒有外部依賴項(xiàng)。

• 現(xiàn)代功能：利用最新的 CSS 功能，如子網(wǎng)格和容器查詢。

CSS 網(wǎng)格設(shè)置： CSS 網(wǎng)格允許以最少的標(biāo)記實(shí)現(xiàn)復(fù)雜的布局：

$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 功能

• 子網(wǎng)格：TLDR 用于對(duì)齊父網(wǎng)格內(nèi)的嵌套網(wǎng)格。

• 容器查詢：TLDR 對(duì)于響應(yīng)自身大小而不是視口的組件。

子網(wǎng)格

想象一下您有一個(gè)大網(wǎng)格，其中放置了一些盒子（例如墻上的相框）?，F(xiàn)在，您想將較小的盒子放入其中一個(gè)大盒子中，但您希望這些較小的盒子與大網(wǎng)格的線條完美對(duì)齊。

子網(wǎng)格就像在你的大盒子里有一張透明的網(wǎng)格紙，與大墻網(wǎng)格的圖案相匹配。這樣，當(dāng)您放置小盒子時(shí)，它們不僅可以在大盒子內(nèi)對(duì)齊，還可以與整個(gè)墻壁對(duì)齊。

示例：

<div>



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

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

視覺概念：

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

容器查詢

將容器查詢想象成讓墻上的每個(gè)盒子能夠根據(jù)其自身的大小而不僅僅是墻（視口）的大小來決定其外觀。

通常，當(dāng)您使網(wǎng)站響應(yīng)時(shí)，您會(huì)告訴它根據(jù)整個(gè)屏幕的寬度進(jìn)行更改。但是，如果頁面的一部分（例如側(cè)邊欄）變寬或變窄怎么辦？通過容器查詢，這個(gè)側(cè)邊欄可以調(diào)整自己的內(nèi)容，而不影響頁面的其余部分。

示例：

// _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 |
+--------+--------+

這意味著每個(gè)組件都可以獨(dú)立適應(yīng)，使您的設(shè)計(jì)更加模塊化和靈活。

案例研究：個(gè)人博客？

Bootstrap 可能會(huì)被選擇用于：

• 快速設(shè)置：如果您想使用模板或入門套件快速啟動(dòng)。

純 CSS 網(wǎng)格 更適合：

• 自定義設(shè)計(jì)：如果您想要一個(gè)不適合 Bootstrap 默認(rèn)設(shè)置的獨(dú)特布局。

Codepen 上的示例：

（請(qǐng)檢查下面的鏈接，并獲取代碼。）

Codepen 示例中的代碼設(shè)置了一個(gè)基本的博客布局，其中包含標(biāo)題、導(dǎo)航欄、主要內(nèi)容區(qū)域、最近帖子的側(cè)邊欄和頁腳。它使用 CSS 網(wǎng)格 進(jìn)行布局，并包含用于響應(yīng)的媒體查詢。

何時(shí)選擇每種方法

• Bootstrap：非常適合需要快速部署的項(xiàng)目，其中網(wǎng)站各個(gè)部分的設(shè)計(jì)一致性是關(guān)鍵，或者在熟悉 Bootstrap 的團(tuán)隊(duì)中工作時(shí)。

• 純 CSS ：當(dāng)您尋求對(duì)設(shè)計(jì)的完全控制、想要減少依賴性，或者當(dāng)您準(zhǔn)備好利用現(xiàn)代 CSS 的高級(jí)功能時(shí)，請(qǐng)選擇此選項(xiàng)。

工具和資源？

引導(dǎo)

• 引導(dǎo)文檔

• 引導(dǎo)定制器

• 引導(dǎo)主題

純 CSS 網(wǎng)格

• CSS 網(wǎng)格的 MDN Web 文檔

• CSS-Tricks 的 CSS 網(wǎng)格指南

• 網(wǎng)格示例

結(jié)論

在 Bootstrap 和純 CSS Grid 之間進(jìn)行選擇并不是哪個(gè)更好，而是哪個(gè)適合您的項(xiàng)目需求和您的技能水平。 Bootstrap 提供了一種結(jié)構(gòu)化方法，非常適合初學(xué)者或需要快速開發(fā)的項(xiàng)目。純 CSS 網(wǎng)格為那些希望精確且富有創(chuàng)造力地繪制布局的人提供了畫布。

隨著您在 Web 開發(fā)之旅中的成長，您會(huì)發(fā)現(xiàn)有時(shí)最好的選擇是混合兩者或根據(jù)項(xiàng)目需求從一種過渡到另一種。

繼續(xù)探索，繼續(xù)學(xué)習(xí)，繼續(xù)編碼！ ？

---

？您好，我是 Eleftheria，社區(qū)經(jīng)理、 開發(fā)人員、公共演講者和內(nèi)容創(chuàng)建者。

？如果您喜歡這篇文章，請(qǐng)考慮分享。

？ 所有鏈接 | X | 領(lǐng)英

以上是Bootstrap 與純 CSS 網(wǎng)格：比較指南的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！