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

登入後複製

這意味著每個組件都可以獨立適應，使您的設計更加模組化和靈活。