介紹

Bootswatch是一個(gè)免費(fèi)的Bootstrap主題集合項(xiàng)目，目前一共包括22款主題，可針對(duì)不同版本進(jìn)行使用，雖然默認(rèn)的Bootstrap主題已經(jīng)相當(dāng)不錯(cuò)，但是畢竟不夠豐富，特別是針對(duì)現(xiàn)代化的Web開(kāi)發(fā)，網(wǎng)站主題也成為了一個(gè)產(chǎn)品加分點(diǎn)，滿(mǎn)足不同人群的審美觀(guān)也變得更加重視，不談雪中送炭，但絕對(duì)是錦上添花！

GitHub

https://github.com/thomaspark/bootswatch/

特點(diǎn)

• 易于安裝

只需下載一個(gè)css文件，然后將其替換為Bootstrap中的文件即可，不要搞亂十六進(jìn)制值。

• 自定義

更改僅包含在兩個(gè)Sass文件中，從而可以進(jìn)行進(jìn)一步的自定義并確保向前兼容。

• 開(kāi)放源代碼

Bootstrap主題根據(jù)MIT許可證發(fā)布，并由社區(qū)在GitHub上維護(hù)。

• 插件

API可用于與您的平臺(tái)集成。由NodeBB，BootSnap等使用。

• 保持更新

一直保持更新以確保兼容

主題預(yù)覽

以下截圖只是截取部分樣式，具體如何可以直達(dá)Github到官方文檔，一共22款主題，一起來(lái)欣賞下：

• Cerulean

是一種天藍(lán)色的風(fēng)格。

• Cosmo（宇宙）

• Cyborg

黑色和電藍(lán)色

• Darkly（Flat黑）

Flat風(fēng)格主題

• Flat亮

• Journal

• Litera

• Lumen

光影主題

• Lux

• Materia

• Minty

• Pulse

• Sandstone

• Simplex

• Sketchy

• Slate

• Solar

• Spacelab

• SuperHero

• United

• Yeti

安裝使用

可以通過(guò)幾種不同的方式將Bootswatch集成到項(xiàng)目中：

1、下載與主題關(guān)聯(lián)的bootstrap.min.css（或者使用cdn）文件，并替換Bootstrap的默認(rèn)樣式表。您仍然必須包含Bootstrap的JavaScript文件，以具有功能下拉菜單，模態(tài)等。

2、如果在項(xiàng)目中使用Sass（SCSS），則可以導(dǎo)入給定主題的_variables.scss和_bootswatch.scss文件。此方法使您可以覆蓋主題變量。

// Your variable overrides go here, e.g.:// $h1-font-size: 3rem;@import “~bootswatch/dist/[theme]/variables”;@import “~bootstrap/scss/bootstrap”;@import “~bootswatch/dist/[theme]/bootswatch”;

確保在_variables.scss和bootswatch.scss之間導(dǎo)入Bootstrap bootstrap.scss！

3、使用npm安裝

npm install bootswatch

4、自定義

Bootswatch是開(kāi)源的，可以修改主題。每個(gè)主題由兩個(gè)SASS文件組成。_variables.scss（默認(rèn)包含在Bootstrap中），可以自定義設(shè)置。_bootswatch.scss引入了更廣泛的結(jié)構(gòu)更改。

總結(jié)

Bootstrap主題網(wǎng)絡(luò)上有不少，也不乏也有很多優(yōu)秀的，bootswatch目前集成了22款主題，你可以用于自己的項(xiàng)目，為項(xiàng)目增添亮點(diǎn)，符合更多人的審美觀(guān)！