Botstrap 4 黑暗主题

4个黑暗主题 也支持暗/淡主题 没有绒毛,它改变了靴子的颜色 就是这样,没有新的东西 学习或不学习,只是靴子,但黑暗!

预览

暗号	主题光

版本

塞姆维尔被用来为所有人保持轻松.

如何使用

公共npm登记处有官方建筑.

npm install @forevolve/bootstrap-dark --save

软件包中包含 dist 包含 Botstrap JavaScript 文件的目录,为方便起见,以及 Botstrap Dark CSS 文件. 要装入黑暗主题, <link> 页:1 bootstrap-dark.css 或 bootstrap-dark.min.css 代替 bootstrap[.min].css 文档。 您可以从您选择的 CDN 中装入捆绑的 JavaScript 文件, 原始文件或文件 .

示例

<link rel="stylesheet" href="/css/bootstrap-dark.min.css" />

光盘N

您也可以使用 兹德利夫尔 采用这一模式: https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@{NPM PACKAGE VERSION}/dist/{PATH TO THE FILE}。 。 。 .

以下是使用jsdelivr的上一个例子:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/[email protected]/dist/css/bootstrap-dark.min.css" />

暗/光切换

你们可以 <link> 双方 toggle-bootstrap.css 编辑 toggle-bootstrap-dark.css 根据您的页面正文对普通/黑暗主题进行拖动的文件.

• 要显示原靴子颜色,请应用 bootstrap 你身上的课,像 <body class="bootstrap">。 。 。 .
• 要显示 Botstrap 黑暗主题,请应用 bootstrap-dark 你身上的课,像 <body class="bootstrap-dark">。 。 。 .

如果您想要支持打印, 请加载 toggle-bootstrap-print.css 或者说 toggle-bootstrap-print.min.css 后面的文件.

示例

<link rel="stylesheet" href="/css/toggle-bootstrap.min.css" />
<link rel="stylesheet" href="/css/toggle-bootstrap-dark.min.css" />
<link rel="stylesheet" href="/css/toggle-bootstrap-print.min.css" />

使用 jsdelivr CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/[email protected]/dist/css/toggle-bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/[email protected]/dist/css/toggle-bootstrap-dark.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/[email protected]/dist/css/toggle-bootstrap-print.min.css" />

请检查access-date=中的日期值 (帮助) Explain of the sample app 了解更多关于此特性的信息.

可主题的.navbar

使用时 toggle-* 样式表,可以创建 .navbar 使用当前主题。 点亮时间 <body class="bootstrap"> 和黑暗,当 <body class="bootstrap-dark">。 。 。 .

示例,而不是 navbar-light bg-light 或者说 navbar-dark bg-dark,使用时 .navbar-themed,像这样:

<nav class="navbar navbar-expand-lg navbar-themed">...</nav>

请检查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: 默认的拖带( 光)

举个例子 光默认数字 :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/[email protected]/dist/css/bootstrap-light.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/[email protected]/dist/css/bootstrap-prefers-dark.min.css" />

见 ./samples/html/prefers-dark-default-light.html 以实例为例.

注意 打印码 包含在 bootstrap-light.min.css。 。 。 .

举个例子 黑暗默认数字 :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/[email protected]/dist/css/bootstrap-dark.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/[email protected]/dist/css/bootstrap-prefers-light.min.css" />

见 ./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的组合. 其高层结构外观如下:

/*
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
    */
}

您可以这样装入其中之一( 如: 默认: 有暗支持的光) 来使用 :

<link rel="stylesheet" href="/dist/css/bootstrap-light-prefers-dark.min.css" />

您也可以使用 jsdelivr CDN.

<!-- Bootstrap Dark by default with `prefers: light` support -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/[email protected]/dist/css/bootstrap-dark-prefers-light.min.css" />
<!-- OR -->
<!-- Bootstrap (Light) by default with `prefers: dark` support -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/[email protected]/dist/css/bootstrap-light-prefers-dark.min.css" />

如何建设

如果您要手动构建主题,修改主题甚至贡献,本节将解释如何构建主题.

先决条件

1. 惠璶 npm 用于建设这一项目;见 节点联署材料 需要更多信息.
2. 您需要. NET Core 3.1+; 参见 .NET 核心下载 需要更多信息.

   您也可以使用 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 " 开源项目捐款 财务报告和审定财务报表 《公约》的行为守则 更多信息.

发布注释

由于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 图像
• 更新读取器

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

• 更新 <hr /> 颜色

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) (中文(简体) ). 不支持打印的,可以省略此文件;如果有,包括最后的. 例如:

  <link rel="stylesheet" href="/css/toggle-bootstrap.min.css" />
  <link rel="stylesheet" href="/css/toggle-bootstrap-dark.min.css" />
  <link rel="stylesheet" href="/css/toggle-bootstrap-print.min.css" />
  

1.0.0-α.845 (中文(简体) )

• 更新项目说明"如何使用"部分并增加"释放说明"部分

1.0.0-α.842 (中文(简体) )

• 添加黑暗/ 光线拖动的支持

1.0.0-α.774 & 1.0.0-α.723

• 初始黑暗主题

参考资料

• 诱饵

更阴暗!

下列项目适用 bootstrap-dark 以更深入地测试主题:

• Fotstrap 4 黑暗主题文件

特别谢谢

我开始这个项目是基于 鞋带主题套件 以 亚历山大·雷克施泰纳 时间 哈克主题。这允许我发布一个更轻的版本的主题;使这个版本更容易被使用(与完整的Bootstrap Jekyll文件相比).

靴子陷阱 5

如果你在寻找"靴子5"的替代品 我建议你看看 维诺罗德里盖斯/波茨-暗地-5。 。 。 . @vinorodrigues已经做得很好. 我认为,我们最好侧重于建立一个坚实的项目,而不是维持许多项目. 至于"布斯特拉克4",这个项目没有任何变化.