README

Bootswatch

Bootstrap 开源主题集合
查看 Bootswatch 主题 »

报告错误 · 请求功能 · 博客

使用方法

有几种不同的方式可以将 Bootswatch 集成到您的项目中。

通过预编译资产

下载与主题相关的 bootstrap.min.css 文件并替换 Bootstrap 的默认样式表。您仍然需要包含 Bootstrap 的 JavaScript 文件以使下拉菜单、模态框等功能正常工作。

通过 CDN

您可以通过 CDN 使用这些主题，地址为 jsDelivr。

通过 Sass 导入

如果您在项目中使用 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！

通过 npm

您可以使用命令 npm install bootswatch 将其作为包安装。

React 用户（《create-react-app》或类似的打包器）

现代 JavaScript 打包器（webpack、parcel、rollup）支持从 JS 文件中导入 CSS。这可以使部署各种第一方和第三方资产更加可预测。注意：该方法有缺点，在生产环境中部署之前请研究您的工具。

在继续之前，请确保您已在本地项目文件夹中运行了 npm install bootswatch。（使用 npm 或 yarn。）

将以下 import 添加到您的顶级 index.js（或 App.js）文件中。将其添加到任何其他 .css 导入之前。

import "bootswatch/dist/[theme]/bootstrap.min.css";
// TODO: Note: Replace ^[theme]^ (examples: darkly, slate, cosmo, spacelab, and superhero. See https://bootswatch.com for current theme names.)

以下是在 App.js 中更新 imports 的示例，以使用 "slate" 主题（使用一个全新的 create-react-app 项目。）

import React from 'react';
import logo from './logo.svg';
import 'bootswatch/dist/slate/bootstrap.min.css'; // Added this :boom:
import './App.css';

function App() {
...

通过 Ruby Gem

在您的 Ruby 项目中，您可以通过在 Gemfile 中添加以下内容并运行 bundle install 来访问每个主题的最新版本

gem "bootswatch", github: "thomaspark/bootswatch"

然后可以通过路径 "#{Gem.loaded_specs["bootswatch"].load_paths.first}/[theme]" 访问每个主题目录。

Ruby on Rails 用户可以在初始化器中添加以下内容（例如 config/initializers/bootswatch.rb）

Rails.application.config.assets.paths += Gem.loaded_specs["bootswatch"].load_paths

然后您就可以像这样通过 Sass 导入主题

@import "[theme]/variables";
@import "~bootstrap/scss/bootstrap";
@import "[theme]/bootswatch";

通过 API

Bootswatch 提供了一个简单的 JSON API，可用于将您的平台与 Bootswatch 集成。更多信息可以在帮助页面上找到。

自定义

Bootswatch 是开源的，您欢迎修改这些主题。

每个主题由两个 SASS 文件组成。默认情况下，Bootstrap 会包含 _variables.scss，它允许您自定义设置。 _bootswatch.scss 引入了更广泛的结构性更改。

查看帮助页面获取更多关于创建您自己的主题的详细信息。

贡献

Bootswatch 的发展离不开您的贡献。您可以通过以下几种方式做出贡献：

问题：提供您遇到任何错误的详细报告，并在GitHub上创建一个issue。
文档：如果您想修复一个错别字或增强文档，您可以fork项目，进行更改，并提交一个pull request。
代码：修复一个错误并将其作为一个pull request提交。在做出更改时，保持CSS和SASS版本同步非常重要。为此，请首先编辑特定主题的SASS源文件，然后运行grunt swatch任务来构建CSS。
捐赠：我们通过GitHub和PayPal接受捐赠。

作者

Thomas Park

感谢

Mark Otto和Jacob Thornton为Bootstrap所做的贡献。
XhmikosR为持续维护支持。
Jenil Gogari为对Flatly主题的贡献。
James Taylor为cors-lite所做的贡献。
Corey Sewell为SASS转换所做的贡献。

版权和许可证

代码在MIT许可证下发布。

thomaspark / bootswatch

维护者

详情