Spectre CSS框架：輕量級(jí)、響應(yīng)式和現(xiàn)代化的CSS解決方案

在項(xiàng)目開(kāi)發(fā)中，框架能夠顯著縮短開(kāi)發(fā)時(shí)間。 Bootstrap等流行框架功能豐富，但并非所有功能都適用每個(gè)項(xiàng)目。本文介紹一個(gè)輕量級(jí)、現(xiàn)代化、響應(yīng)式且移動(dòng)友好的新框架——Spectre。其壓縮并gzip后大小約為6.8kb。除了基本的柵格系統(tǒng)，它還提供許多其他實(shí)用組件，如選項(xiàng)卡、模態(tài)框和卡片等。

本教程將簡(jiǎn)要概述該框架，并提供一些指導(dǎo)，幫助您快速入門。

關(guān)鍵要點(diǎn)

• Spectre是一個(gè)輕量級(jí)、現(xiàn)代化、響應(yīng)式且移動(dòng)友好的CSS框架，可大幅縮短開(kāi)發(fā)時(shí)間。它提供基本的柵格系統(tǒng)和各種組件，如選項(xiàng)卡、模態(tài)框和卡片。
• 該框架包含針對(duì)亞洲字體優(yōu)化的排版元素默認(rèn)樣式，并提供表格、按鈕和常用表單元素的類。它還提供三個(gè)導(dǎo)航組件——導(dǎo)航欄、垂直菜單和面包屑。
• Spectre的兩個(gè)重要組件是模態(tài)框和卡片，類似于Bootstrap中的對(duì)應(yīng)組件。它還包括其他組件，如“吐司”通知、徽章、標(biāo)簽、分頁(yè)和工具提示。實(shí)用程序類可用于進(jìn)行細(xì)微的布局調(diào)整。
• 雖然Spectre為元素提供了最少的樣式，并且考慮到它提供的組件數(shù)量，其大小非常合理，但它不提供任何用于與其組件交互的JavaScript。用戶需要編寫自己的代碼來(lái)實(shí)現(xiàn)顯示或隱藏模態(tài)框等功能。

安裝

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

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

您還可以通過(guò)編輯/src目錄中的Less文件或從spectre.less文件中刪除不需要的組件來(lái)創(chuàng)建您自己的自定義框架版本。然后，您可以使用Gulp從命令行構(gòu)建CSS文件。

柵格系統(tǒng)

Spectre擁有一個(gè)基于flexbox的響應(yīng)式柵格系統(tǒng)，包含12列。每列的寬度由其類名決定。每個(gè)類都以col-開(kāi)頭，后跟一個(gè)數(shù)字，表示該元素應(yīng)占據(jù)的列數(shù)。例如，col-12占據(jù)12列，寬度為100%；col-3占據(jù)3列，寬度為25%。默認(rèn)情況下，不同的列之間會(huì)有一些間隙。您可以通過(guò)向其容器添加col-gapless類來(lái)消除該間隙。與Bootstrap一樣，它還提供諸如col-md-[1-12]、col-sm-[1-12]和col-xs-[1-12]之類的類，以幫助您在視口大小改變時(shí)控制元素的寬度。

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

當(dāng)視口寬度小于480像素時(shí)，所有列都將顯示為單行。col-xs-*類將應(yīng)用于寬度大于480像素的所有元素。類似地，col-sm-*將應(yīng)用于視口寬度大于600像素的元素，col-md-*將應(yīng)用于視口寬度大于800像素的元素。

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

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

...(后續(xù)內(nèi)容與原文類似，可根據(jù)需要調(diào)整措辭和段落結(jié)構(gòu)，保持原意不變)...

以上是幽靈：輕巧的CSS框架的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！