introduce
BootswatchA freeBootstrapTopic Collection Project,Currently a total of22Theme,Can be used for different versions,Although the defaultBootstrapTheme is quite good,But after all, it is not rich enough.,Especially for modernWebDevelop,The subject of the website has also become a product points points.,The aesthetic view to meet different people has also become more,Don't talk to the charcoal in the snow,But it is definitely a browning!
Github
https://github.com/thomaspark/bootswatch/
Characteristic
Just download oneCSSdocument,Then replace it withBootstrapThe file can be,Don't mess up the sixteen-entered value。
Change is included only in twoSASSIn the file,This allows further customization and ensuring forward compatibility。
(website development project topics)BootstrapThemeMITLicense release,And by the communityGitHubMaintenance。
APICan be used to integrate with your platform。Depend onNodeBB,BootSnapUse。
Always updated to ensure compatibility
Theme preview
The following screenshots are just intercepting some styles.,How can it be straightforward?GithubOfficial documentation,A total22Theme,Let's enjoy:
Is a blue style。
Black and electric blue
FlatStyle topic

(website development project topics)

(website development project topics)
Light shadow topic

(website development project topics)
Installation
Can pass several different waysBootswatchIntegrated into the project:
1、Download with the subject associationbootstrap.min.css(Usecdn)document,And replaceBootstrapDefault style sheet。You still have to includeBootstrapofJavaScriptdocument,With a function drop-down menu,Modality。
(website development project topics)2、If used in the projectSass(SCSS),The given topic can be imported._variables.scssand_bootswatch.scssdocument。This method allows you to overwrite the subject variables。(website development project topics)// 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";
Ensures_variables.scssandbootswatch.scssIntroductionBootstrap bootstrap.scss!
3、usenpmInstall
npm install bootswatch
(website development project topics)4、customize
BootswatchAn open source,Can modify the subject。Each topic is made of twoSASSFile composition。_variables.scss(The default is includedBootstrapmiddle),Can be customized。_bootswatch.scssIntroduced a broader structure change。
Summarize
BootstrapThere are many on the theme network.,There is also a lot of excellent,bootswatchCurrently integrated22Theme,You can use your own project,Add highlights for projects,Combine more people's aesthetics!