介紹

Bootswatch是一個免費的Bootstrap主題集合專案，目前一共包括22款主題，可針對不同版本進行使用，雖然預設的Bootstrap主題已經相當不錯，但是畢竟不夠豐富，特別是針對現代化的Web開發，網站主題也成為了一個產品加分點，滿足不同人群的審美觀也變得更加重視，不談雪中送炭，但絕對是錦上添花！

Github

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

特點易於安裝

只需下載一個CSS檔案，然後將其替換為Bootstrap中的檔案即可，不要搞亂十六進位制值。

自定義

更改僅包含在兩個SASS檔案中，從而可以進行進一步的自定義並確保向前相容。

開放原始碼

Bootstrap主題根據MIT許可證釋出，並由社群在GitHub上維護。

外掛

API可用於與您的平臺整合。由NodeBB，BootSnap等使用。

保持更新

一直保持更新以確保相容

主題預覽

以下截圖只是擷取部分樣式，具體如何可以直達Github到官方文件，一共22款主題，一起來欣賞下：

Cerulean

是一種天藍色的風格。

Cosmo（宇宙）Cyborg

黑色和電藍色

Darkly（Flat黑）

Flat風格主題

Flat亮JournalLiteraLumen

光影主題

Lux

MateriaMintyPulseSandstoneSimplex

SketchySlateSolarSpacelabSuperHeroUnitedYeti安裝使用

可以通過幾種不同的方式將Bootswatch整合到專案中：

1、下載與主題關聯的bootstrap.min.css（或者使用cdn）檔案，並替換Bootstrap的預設樣式表。您仍然必須包含Bootstrap的JavaScript檔案，以具有功能下拉選單，模態等。

2、如果在專案中使用Sass（SCSS），則可以匯入給定主題的_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之間匯入Bootstrap bootstrap.scss！

3、使用npm安裝

npm install bootswatch

4、自定義

Bootswatch是開源的，可以修改主題。每個主題由兩個SASS檔案組成。_variables.scss（預設包含在Bootstrap中），可以自定義設定。_bootswatch.scss引入了更廣泛的結構更改。

總結

Bootstrap主題網路上有不少，也不乏也有很多優秀的，bootswatch目前集成了22款主題，你可以用於自己的專案，為專案增添亮點，符合更多人的審美觀！