bootstrap dark 5下载-Bootstrap bootstrap dark 5源代码下载

bootstrap dark 5

网站数据

v1.1.3 Release

下载

黑暗模式和引导5的辅助指南5

V4 Dark Mode POC的延续，但是这次是V5

这是深色模式和自行车4工作的权威指南的后续，以及与Bootstrap 5 （Github Repo。）有关的后续指南。

如果您正在为Bootstrap 4做同样的工作，请访问Vinorodrigues/Bootstrap-Dark Repo。

关于该项目状态的重要说明：
Bootstrap 5的核心存储库的开发工作已达到v5.3-现在包括“颜色模式”以及在黑暗模式的实现之内。看：
https://getbootstrap.com/docs/5.3/customize/color-modes/
因此，这使该项目变得多余并将退休，并将其代码和存储库留在此处，以造福教育。

关于

如果您不首先阅读《暗模式的权威指南》，并且首先阅读Bootstrap 4，则此代码将毫无意义。

你得到什么？

该代码编译了原始工作主体的四种方法（以及总共六种） ，但为Bootstrap 5编译。这些都是：

方法1

（链接到原始）

bootstrap-night ：这只是一个黑暗的引导主题。但是，它可以与Bootstrap Core CSS一起使用，以提供2文件的暗模式功能。

方法2

（链接到原始）

bootstrap-nightfall ：这仅仅是Bootstrap Core的所有组件的“仅Color” CSS，但旨在用作附加组件。它还可以通过简单的媒体查询，驱动自动暗模式切换。

方法3

（链接到原始）

bootstrap-nightshade ：这是对Bootstrap Core的修改，并为所有组件添加了深色CSS，但深色，嵌套在html.dark类包装中。它本身无法提供暗模式切换，而是添加随附的darkmode.js库，并且您具有互动的暗模式切换变体，并带有内置的“切换”按钮支持。
bootstrap-blackbox ：此变体本质上与“夜幕降低”变体相同，但是它不使用HTML标签类，而是使用HTML标签数据属性； data-bs-color-scheme 。相同的darkmode.js库驱动此一个，您需要做的就是将数据属性添加到您的HTML标签中。

方法4

（链接到原始）

bootstrap-dark ：这是推荐的方法；一个CSS具有浅色和深色主题，仅使用OS或浏览器prefers-color-scheme媒体查询。
bootstrap-unlit ：此变体本质上与“ Dark”变体相同，但具有“ Dark”方案为主要/后备和“ Light”，如配色方案中所选择的。

开始

1. `bootstrap-night`	2。 `bootstrap-nightfall`	3。 `bootstrap-nightshade`	3b。 `bootstrap-blackbox`	4。bootstrap `bootstrap-dark`	4b。 `bootstrap-unlit`
快速启动指南	快速启动指南	快速启动指南	快速启动指南	快速启动指南	快速启动指南
		`darkmode.js`参考	`darkmode.js`参考
请参见示例		请参见示例		请参见示例

证据在布丁中

一些测试页面已在Vinorodrigues.github.io/bootstrap-dark-5上设置

你可以使用这个吗？

是的。

许可证是麻省理工学院。即，只要您归功于原始作者，就可以使用它，并原位留下版权。

如果您是主题构建器或想在自己的项目中使用其原理，则需要安装git和节点。

叉子或下载存储库： git clone https://github.com/vinorodrigues/bootstrap-dark-5.git
安装节点依赖项： npm install （请参见下面的注释。）
scss折叠器中的修改_variables.scss和_variables-alt.scss 。
运行npm run build以构建您的主题。
编译的代码将在dist文件夹中。

构建系统基于NPM脚本。大多数构建工具（NPM模块）将需要安装为“全局”，以确保脚本可以从命令行执行。

npm i -g  autoprefixer  documentation browser-sync  clean-css-cli  cross-env  eslint  eslint-config-xo  eslint-plugin-import  eslint-plugin-unicorn  find-unused-sass-variables  imagemin-cli  nodemon  npm-run-all  postcss-cli  rtlcss  sass  stylelint  stylelint-config-twbs-bootstrap  svgo  terser typescript

注1：

该代码只是Bootstrap 5核心代码的重新启动，以添加“ DAMB MODE”功能，并将其声明为“概念验证” （POC） - 这意味着它不打算作为生产源，而只是一种练习，可以证明可以通过多种方法来实现暗模式，即是一种教育性的作品。这也意味着它的作者（Vino Rodrigues）并没有被迫支持它。

注2：

该项目将不会与节点 - 萨斯一起编译。请参阅原始的Bootstrap 5文档，尤其是在此（https://getbootstrap.com/docs/5.1/getting-started/build-tools/#sass），您会注意到他们已经将node-sass弃用而不是dart-sass。

他们又引用了这一点（https://sass-lang.com/blog/libsass-is-deprecated）文章，其中SASS策展人指出，他们将不再支持libsass，该节点sass取决于。

NPM

开发人员可以将scss和dist文件夹包括在您自己的项目中：

npm install bootstrap-dark-5

CDN

您也可以使用JSDELIVR.com通过CDN hot链接主题。

您可以从GITHUB版本访问主题CSS文件：

bootstrap-dark @Media perfers-color-scheme变体
- 生产 /缩小变体：
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-dark.min.css
- 开发 /调试变体：
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-dark.css
- 另外，请阅读快速启动指南。
bootstrap-nightshade html.dark CSS类 + JS库变体
- 生产 /缩小变体：
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-nightshade.min.css
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/js/darkmode.min.js
- 开发 /调试变体：
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-nightshade.css
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/js/darkmode.js
- 另外，请阅读快速启动指南和darkmode.js参考。
bootstrap-night - 黑暗主题仅变体
- 生产 /缩小变体：
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.min.css
- 开发 /调试变体：
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.css
- 另外，请阅读快速启动指南。
来源等在这里，但我建议使用github。

进一步阅读

必须为所有想要为黑暗模式写入的开发人员读取：

...显然，原始内容：深色模式的权威指南和bootstrap 4
Web.dev，Thomas Steiner（@Tomayac），2019年6月27日（2020年6月9日更新） ，“偏爱彩色 - 彩色：你好，黑暗，我的老朋友”
Web.dev，Thomas Steiner（@Tomayac），2020年4月8日（2020年6月16日更新） ，“改进了带有Color-Scheme CSS属性和相应的META标签的暗模式默认样式”
CSS-Tricks，Adhuham，9月9日，2020年，“网络上黑暗模式的完整指南”
我对“最终指南..”一件图像和其他考虑因素的关注。