幽靈：輕巧的CSS框架

Spectre CSS框架：輕量級、響應式和現代化的CSS解決方案

在項目開發中，框架能夠顯著縮短開發時間。 Bootstrap等流行框架功能豐富，但並非所有功能都適用每個項目。本文介紹一個輕量級、現代化、響應式且移動友好的新框架——Spectre。其壓縮並gzip後大小約為6.8kb。除了基本的柵格系統，它還提供許多其他實用組件，如選項卡、模態框和卡片等。

本教程將簡要概述該框架，並提供一些指導，幫助您快速入門。

關鍵要點

• Spectre是一個輕量級、現代化、響應式且移動友好的CSS框架，可大幅縮短開發時間。它提供基本的柵格系統和各種組件，如選項卡、模態框和卡片。
• 該框架包含針對亞洲字體優化的排版元素默認樣式，並提供表格、按鈕和常用表單元素的類。它還提供三個導航組件——導航欄、垂直菜單和麵包屑。
• Spectre的兩個重要組件是模態框和卡片，類似於Bootstrap中的對應組件。它還包括其他組件，如“吐司”通知、徽章、標籤、分頁和工具提示。實用程序類可用於進行細微的佈局調整。
• 雖然Spectre為元素提供了最少的樣式，並且考慮到它提供的組件數量，其大小非常合理，但它不提供任何用於與其組件交互的JavaScript。用戶需要編寫自己的代碼來實現顯示或隱藏模態框等功能。

安裝

您可以直接下載壓縮後的Spectre.css文件，也可以使用npm和Bower進行安裝。安裝完成後，您可以像普通的樣式表一樣將文件包含到您的項目中。

<link rel="stylesheet" href="link/spectre.min.css" />

您還可以通過編輯/src目錄中的Less文件或從spectre.less文件中刪除不需要的組件來創建您自己的自定義框架版本。然後，您可以使用Gulp從命令行構建CSS文件。

柵格系統

Spectre擁有一個基於flexbox的響應式柵格系統，包含12列。每列的寬度由其類名決定。每個類都以col-開頭，後跟一個數字，表示該元素應佔據的列數。例如，col-12佔據12列，寬度為100%；col-3佔據3列，寬度為25%。默認情況下，不同的列之間會有一些間隙。您可以通過向其容器添加col-gapless類來消除該間隙。與Bootstrap一樣，它還提供諸如col-md-[1-12]、col-sm-[1-12]和col-xs-[1-12]之類的類，以幫助您在視口大小改變時控制元素的寬度。

它還提供諸如hide-xs、hide-sm和hide-md之類的類，用於在特定視口大小下隱藏元素。

當視口寬度小於480像素時，所有列都將顯示為單行。 col-xs-*類將應用於寬度大於480像素的所有元素。類似地，col-sm-*將應用於視口寬度大於600像素的元素，col-md-*將應用於視口寬度大於800像素的元素。

以下代碼片段創建了一個寬度為33.333%（col-4）的列，兩個寬度為25%（col-3）的列和一個寬度為16.66%（col-2）的列。

<link rel="stylesheet" href="link/spectre.min.css" />

...(後續內容與原文類似，可根據需要調整措辭和段落結構，保持原意不變)...

以上是幽靈：輕巧的CSS框架的詳細內容。更多資訊請關注PHP中文網其他相關文章！