# @forevolve/bootstrap-dark 中文文档
规范地址：https://npmcn.com/package/%40forevolve/bootstrap-dark/
版本：4\.0\.2
npm 元数据更新时间：2024-03-24T04:24:32.752Z
中文译文更新时间：2026-11-15T07:20:08.897Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40forevolve/bootstrap-dark
原文对照：https://npmcn.com/package/%40forevolve/bootstrap-dark/?lang=original
项目主页：https://github.com/ForEvolve/bootstrap-dark#readme
源码仓库：https://github.com/ForEvolve/bootstrap-dark
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：11.4 MB，60 个文件
- TypeScript 类型：未声明
- 运行依赖：3 个
- 首次发布：2019-03-19T18:08:08.760Z
- 最新版本发布：2024-03-24T04:24:32.270Z
- 近 30 天下载量：39100（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：36（近 12 个月 0 个）
## 中文简介
靴子4 黑暗主题.
## 安装
```sh
npm install @forevolve/bootstrap-dark
```
也可以使用：`pnpm add @forevolve/bootstrap-dark`、`yarn add @forevolve/bootstrap-dark`、`bun add @forevolve/bootstrap-dark`
## README
# Botstrap 4 黑暗主题
4个黑暗主题 也支持暗/淡主题 没有绒毛,它改变了靴子的颜色 就是这样,没有新的东西 学习或不学习,只是靴子,但黑暗!
[](https://github.com/ForEvolve/bootstrap-dark/actions/workflows/main.yml) [](https://www.npmjs.com/package/@forevolve/bootstrap-dark)
# 预览
        
| 暗号 | 主题光 |
| --- | --- |
|  |  |
# 版本
塞姆维尔被用来为所有人保持轻松.
# 如何使用
公共npm登记处有官方建筑.
```
npm install @forevolve/bootstrap-dark --save
```
软件包中包含 `dist` 包含 Botstrap JavaScript 文件的目录,为方便起见,以及 Botstrap Dark CSS 文件. 要装入黑暗主题, `` 页:1 `bootstrap-dark.css` 或 `bootstrap-dark.min.css` 代替 `bootstrap[.min].css` 文档。 您可以从您选择的 CDN 中装入捆绑的 JavaScript 文件, 原始文件或文件 .
**示例**
```html
```
## 光盘N
您也可以使用 [兹德利夫尔](https://npmcn.com/package/%40forevolve/bootstrap-dark/jsdelivr.net) 采用这一模式: `https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@{NPM PACKAGE VERSION}/dist/{PATH TO THE FILE}`。 。 。 .
以下是使用jsdelivr的上一个例子:
```html
```
## 暗/光切换
你们可以 `` 双方 `toggle-bootstrap.css` 编辑 `toggle-bootstrap-dark.css` 根据您的页面正文对普通/黑暗主题进行拖动的文件.
- 要显示原靴子颜色,请应用 `bootstrap` 你身上的课,像 ``。 。 。 .
- 要显示 Botstrap 黑暗主题,请应用 `bootstrap-dark` 你身上的课,像 ``。 。 。 .
如果您想要支持打印, 请加载 `toggle-bootstrap-print.css` 或者说 `toggle-bootstrap-print.min.css` 后面的文件.
**示例**
```html
```
**使用 jsdelivr CDN:**
```html
```
请检查access-date=中的日期值 (帮助) Explain of the sample app 了解更多关于此特性的信息.
## 可主题的.navbar
使用时 `toggle-*` 样式表,可以创建 `.navbar` 使用当前主题。 点亮时间 `` 和黑暗,当 ``。 。 。 .
示例,而不是 `navbar-light bg-light` 或者说 `navbar-dark bg-dark`,使用时 `.navbar-themed`,像这样:
```html
```
请检查access-date=中的日期值 (帮助) Explain of the sample app 了解更多关于此特性的信息.
## 偏好彩色图案
从1.1版,我增加了两个新的css文件: `bootstrap-prefers-dark.css` 财务报告和审定财务报表 `bootstrap-prefers-light.css`。 。 。 . 这两个文件用 `prefers-color-scheme` 媒体查询,而不是依赖身体的 css 类. 还有一个新的 `bootstrap-light.css` 文件是靴子夹,加上 `.navbar-themed` 轻增生.
有两种可能的组合:
- 默认( 无) `prefers-color-scheme` 指定或 `prefers-color-scheme: light`: 默认的靴子(灯光), `prefers-color-scheme: dark`: 靴子带暗
- 默认( 无) `prefers-color-scheme` 指定或 `prefers-color-scheme: dark`靴子圈很暗, `prefers-color-scheme: light`: 默认的拖带( 光)
举个例子 **光默认**数字 :
```html
```
见 `./samples/html/prefers-dark-default-light.html` 以实例为例.
> 注意 _打印码_ 包含在 `bootstrap-light.min.css`。 。 。 .
举个例子 **黑暗默认**数字 :
```html
```
见 `./samples/html/prefers-light-default-dark.html` 以实例为例.
> 注意 _打印码_ 包含在 `bootstrap-dark.min.css`。 。 。 .
## 拖带 - ${默认} - prefers-${ special}.css
在1.2版本(审查)和2.0版本中添加样式表 `bootstrap-dark-prefers-light.css` 财务报告和审定财务报表 `bootstrap-light-prefers-dark.css` 杠杆作用 `prefers-color-scheme` CSS 媒体查询并允许默认颜色方案,然后是首选颜色方案.
技术上,它们是两个CSS的组合. 其高层结构外观如下:
```css
/*
DEFAULT STYLES (including print styles):
bootstrap-light.css or bootstrap-dark.css
*/
@media (prefers-color-scheme: light|dark) {
/*
SPECIFIC COLOR STYLES:
bootstrap-prefers-light-color-only.css or bootstrap-prefers-dark-color-only.css
*/
}
```
您可以这样装入其中之一( 如: 默认: 有暗支持的光) 来使用 :
```html
```
> 您也可以使用 jsdelivr CDN.
```html
```
# 如何建设
如果您要手动构建主题,修改主题甚至贡献,本节将解释如何构建主题.
## 先决条件
1. 惠璶 `npm` 用于建设这一项目;见 [节点联署材料](https://nodejs.org/en/) 需要更多信息.
2. 您需要. NET Core 3.1+; 参见 [.NET 核心下载](https://www.microsoft.com/net/download/Windows/build) 需要更多信息.
> 您也可以使用 HTML 样本进行测试,但是在.NET app中有更多的页面.
## 开始
1. 克隆这个还原
2. 运行 `npm install`
3. 转到 _样本/拆解页_ 目录( e)`cd samples/razor-pages`(中文(简体) )
4. 运行 `dotnet restore`
## 启动项目
1. 运行 `dotnet run` (从 _样本/拆解页_ 目录)或者如果您正在使用 VS 代码, `Start Debugging` 将工作.
2. 运行 `npm run watch` 在第二个终端
一旦启动服务器和手表命令 `browser-sync` 代理应在下列 URI 的浏览器中打开 : `http://localhost:3000`。 。 。 .
## 其他建设信息
有一些 npm 和 gulp 脚本.
### npm 脚本
1. `gulp-watch` 简单的运行 `gulp watch`
2. `browser-sync-proxy` 启动浏览器同步监视任意 `wwwroot/css/*.css` 变动
3. `watch` 并行运行前两个脚本
### gulp 脚本
1. `build-theme` 将主题编译为 cs.
2. `copy-dist-to-razor-pages` 复制内容 `dist` 文件夹到 `samples/razor-pages/wwwroot` (被"剃刀页"所使用.
3. `copy-dist-to-html` 复制内容 `dist` 文件夹到 `samples/html` (HTML样本使用).
4. `copy-dist-to-samples` 执行 `copy-dist-to-html` 财务报告和审定财务报表 `copy-dist-to-razor-pages` 平行进行.
5. `copy-bootstrap-js` 复制拖曳 js 文件到 `dist/js` 目录.
6. `watch` 执行 `copy-bootstrap-js` 然后看着重建主题.
7. `default` 运行 `copy-bootstrap-js` 财务报告和审定财务报表 `build-theme` 接下来 `copy-dist-to-samples`。 。 。 .
# 项目结构
- `samples` 是样本文件夹.
- `samples/html` 是一个简单的 HTML 样本应用程序.
- `samples/razor-pages` 是用于测试主题的 ASP.NET Core 应用程序。 此目录没有被包装 .
- `Pages` 是 ASP.NET 核心剃刀页面。 这就是预览.
> **为什么是NET Core?** 嗯,我想 脚本一些循环,我知道。 网;所以我选了Razor Pages来做这个:动态页面! 此外,它是开源和跨平台的.
>
> 如果你认为别的东西会更好,请随意打开一个问题;我不介意改用另一种技术(见下文“贡献”一节).
- `Services` 是网页服务,到目前为止还很稀薄.
- `wwwroot` 是网络资产 `dist` 文件被复制到那里.
- `assets` 是工程资产(如readme文件中的截图).
- `dist` 是可分发的文件; 如果你想将文件复制/复制到您的项目中, 那就是那些文件 。 它们还包括靴子陷阱JavaScript文件,没有被修改.
- `scss` 是源主题文件.
- 其他文件(root):npm,许可证,readme等.
# 贡献
为了作出贡献,首先打开一个问题或对现有问题的答复,以便我们能够讨论你的特点或错误,找到处理该问题的最佳方法.
一旦我们定出策略,你就可以用叉子/代码/打开公关.
- 请加入 `package.json` `contributors` 阵列.
- 请保持公关专注于一个单一的功能,这样对每个人来说都比较容易,并且有助于保持对话的焦点. 我更喜欢多个较小的公关 比一个巨大的.
谢谢你的捐献.
见 [为 " ForEvolve " 开源项目捐款](https://github.com/ForEvolve/Toc/blob/master/CONTRIBUTING.md) 财务报告和审定财务报表 [《公约》的行为守则](https://github.com/ForEvolve/Toc/blob/master/CODE_OF_CONDUCT.md) 更多信息.
# 发布注释
由于CI建筑数字是自动化的,所以很难事先知道下一个部署的建筑数字会是什么,所以 `(latest)` 版本代表该版本.
## 4.0.0 (单位:千美元)
- 修正预和代码颜色,设置 `$pre-color` 变量为 `$gray-100`,压倒默认 `$gray-900` 黑暗主题.
> 不需要中断更改 。 此版本只更改代码/ 预色 . 主要是要推翻我最近 在没有放弃的 PR #63 期间 预发包. 我无法删除关于国家预防机制的一揽子计划,因此,这应该能够解决问题.
## 3.0.0 (单位:千美元)
- 解决一个由于缺少可变地图而未考虑暗色的问题 `$colors` 财务报告和审定财务报表 `$theme-colors`这可能是个突破性的变化.
- 更新 `$yiq-text-dark` 从 `$gray-900` 改为 `$gray-800` 财务报告和审定财务报表 `$yiq-text-light` 从 `$gray-400` 改为 `$gray-200` 因此,与更新的颜色图相比,文本看起来更好.
## 2.1.1 国家
- 弹出靴子到 `4.6.2` (从) `4.6.0`(中文(简体) )
## 2.1.0 国家
- 在样本应用中添加一个Themed页面.
- 增加以下主题的根据主题从暗向光翻转的公用设备:
- `.bg-themed` (暗处: `.bg-dark` 点: `.bg-light`(中文(简体) )
- `.text-themed` (暗处: `.text-light` 点: `.text-dark`(中文(简体) )
- `.alert-themed` (暗处: `.alert-dark` 点: `.alert-light`(中文(简体) )
- 添加以下主题的由暗向光翻转的公用设施(倒向颜色),视主题而定:
- `.bg-themed-inverted` (暗处: `.bg-light` 点: `.bg-dark`(中文(简体) )
- `.text-themed-inverted` (暗处: `.text-dark` 点: `.text-light`(中文(简体) )
- `.alert-themed-inverted` (暗处: `.alert-light` 点: `.alert-dark`(中文(简体) )
## 2.0.0 (韩语)
- 添加 `bootstrap-dark-prefers-light.css` 默认为 Bootstrap 暗色, 如果用户为 `prefers-color-scheme: light`。 。 。 .
- 添加 `bootstrap-light-prefers-dark.css` 默认为 Bootstrap, 如果用户为 `prefers-color-scheme: dark`。 。 。 .
- 添加 `bootstrap-prefers-dark-color-only.css` 它只是颜色 `bootstrap-prefers-dark.css`。这是由 `clean_non_color_attr.js`。 。 。 .
- 添加 `bootstrap-prefers-light-color-only.css` 它只是颜色 `bootstrap-prefers-light.css`。这是由 `clean_non_color_attr.js`。 。 。 .
- 添加 `clean_non_color_attr.js` gulp 插件( 基于 `gulp-css-remove-attributes`) (中文(简体) ).
- 更新.NET/Razor Pages样本以使用这些新的CSS文件.
> 预览版本1.2.x是这个版本的3⁄4. 我们撞到了版本 因为 `$card-color` 变动(见下文).
### 中断更改
这个 `$card-color` 变量已经从 `$gray-200` (单位:千美元)`#e9ecef`改为: `null` (default Bootstrap value) 由於暗/淡主题中的色彩问题.
## 1.1.0 国家
- 更新 `bootstrap-dark.css` 列入 `.navbar-themed` class (暗版).
- 添加 `bootstrap-light.css` 这是靴子外加 `.navbar-themed` 类(轻版).
- 添加 `bootstrap-prefers-dark.[css|scss]` 这相当于 `bootstrap-dark.[css|scss]`没有指纹,包裹在 `@media (prefers-color-scheme: dark)` 媒体查询.
- 添加 `bootstrap-prefers-light.[css|scss]` 这相当于 `bootstrap-light.[css|scss]`没有指纹,包裹在 `@media (prefers-color-scheme: light)` 媒体查询.
- 添加两个样本以显示此用法 : `./samples/html/prefers-dark-default-light.html` 财务报告和审定财务报表 `./samples/html/prefers-light-default-dark.html`
- 更新.NET/Razor Pages样本以使用这些新的CSS文件.
## 1.0.0 (单位:千美元)
- 更新到 Bootstrap 4. 6.0
- 将 Razor 页面应用程序移动到 `samples/razor-pages` 目录
- 在其中添加一个新的平面 HTML 应用程序 `samples/html` 目录
- 将 CI/CD 管道从 Azure DevOps 移动到 GitHub 动作
- 从手动 PowerShell 脚本修改为使用 [纳德班克。 GitVersion 图像](https://github.com/dotnet/Nerdbank.GitVersioning)
- 更新读取器
## 1.0.0-α.1091
- 修复窗体验证反馈以解决问题# 40
- 添加另一个表单样本
## 1.0.0-α.1089 (中文(简体) )
- 添加表格示例
- 无需修改窗体校验 `.was-validated` 40号
## 1.0.0-α.1087
- 将 Bootstrap 更新到 4. 5.0
- 更新解决脆弱性的依赖性
- 修正表单验证# 40
## 1.0.0-α.1075
- 删除 `p a` `text-decoration: underline;`
- 这与 `.btn` 内 `p`。 。 。 .
- 此外, " 靴子陷阱 " 并不执行这种东西,因此 " 靴子陷阱 " 也不应该执行.
## 1.0.0-阿尔法.978
变暗以下元素:
- 下坠
- 选择
- 面包屑
- 倾斜
## 1.0.0-α.974
- 将“靴子”更新为4.4.1
- 更新其他依赖关系
## 1.0.0-α.937
- 变暗的烤面包
## 1.0.0-α.902
- 更新 `
` 颜色
## 1.0.0-α.899
- 公用事业(边境)
- 更新默认 `$border-color` 改为 `$dark`
- 表格
- 执行 `$table-border-color` 基于新的 `$border-color`
- 执行 `$table-color` 是基于 `$body-color`
- 执行 `$table-hover-color` 是基于 `$table-color`
- 强通
- 这个 `$jumbotron-bg` 现在使用颜色
## 1.0.0-α.888 (中文(简体) )
- 添加可主题 `.navbar` 组件,使用 css 类 `.navbar-themed`,则:
- 何时 `body.bootstrap`,导航器变成 `.bg-light` 财务报告和审定财务报表 `.navbar-light`。 。 。 .
- 何时 `body.bootstrap-dark`,导航器变成 `.bg-dark` 财务报告和审定财务报表 `.navbar-dark`。 。 。 .
## 1.0.0-α.863
- 将打印导入从暗/光的车身类中移出. 这应该能解决虫子 `.navbar` 状态 `display: none` 在装入时默认 `.min.css` 样式表.
- 引入新文件 : `toggle-bootstrap-print[.min].css`。此样式表应用了靴子的打印样式,并已取出,因此只包含一次(不包括一次与 `toggle-bootstrap.css` 和一次与 `toggle-bootstrap-dark.css`) (中文(简体) ). 不支持打印的,可以省略此文件;如果有,包括最后的. 例如:
```html
```
## 1.0.0-α.845 (中文(简体) )
- 更新项目说明"如何使用"部分并增加"释放说明"部分
## 1.0.0-α.842 (中文(简体) )
- 添加黑暗/ 光线拖动的支持
## 1.0.0-α.774 & 1.0.0-α.723
- 初始黑暗主题
# 参考资料
- [诱饵](https://github.com/twbs/bootstrap/)
# 更阴暗!
下列项目适用 `bootstrap-dark` 以更深入地测试主题:
- [Fotstrap 4 黑暗主题文件](https://github.com/ForEvolve/bootstrap-dark-docs.git)
# 特别谢谢
我开始这个项目是基于 [鞋带主题套件](https://hackerthemes.com/kit/) 以 [亚历山大·雷克施泰纳](https://github.com/arechsteiner) 时间 [哈克主题](https://hackerthemes.com/)。这允许我发布一个更轻的版本的主题;使这个版本更容易被使用(与完整的Bootstrap Jekyll文件相比).
# 靴子陷阱 5
如果你在寻找"靴子5"的替代品 我建议你看看 [维诺罗德里盖斯/波茨-暗地-5](https://github.com/vinorodrigues/bootstrap-dark-5)。 。 。 . @vinorodrigues已经做得很好. 我认为,我们最好侧重于建立一个坚实的项目,而不是维持许多项目. _至于"布斯特拉克4",这个项目没有任何变化._
## 常见问题
### @forevolve/bootstrap-dark 是什么？
靴子4 黑暗主题\.
### 如何安装 @forevolve/bootstrap-dark？
在项目目录运行 npm install @forevolve/bootstrap-dark，或使用 pnpm add / yarn add / bun add。
### @forevolve/bootstrap-dark 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/forevolve\_\_bootstrap-dark 是否存在。
### @forevolve/bootstrap-dark 可以商用吗？
@forevolve/bootstrap-dark 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @forevolve/bootstrap-dark 的下载量有多少？
根据 npm 官方下载统计，@forevolve/bootstrap-dark 在 2026/10/16 – 2026/11/14 这 30 天内被下载 39,100 次，日均约 1,303 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @forevolve/bootstrap-dark 还在维护吗？
最新版本 4\.0\.2 发布于 2024/03/24（2 年前）；至今共发布 36 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/03/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。