基于 Bootstrap 开启 dark 黑夜（暗黑）模式 |
您所在的位置：网站首页 › nubiaui70夜间模式 › 基于 Bootstrap 开启 dark 黑夜（暗黑）模式 |
|
需求：看到一些网站右小角有一个灯泡和月亮的小图标，点击灯泡图标就是光模式，点击月亮图标就是夜晚模式（暗黑模式），看着非常炫酷，我的网站是基于 Bootstrap 前端框架开发的，搜索了一些相关资料和教程。
bootstrap4：https://github.com/vinorodrigues/bootstrap-dark
bootstrap5：https://github.com/vinorodrigues/bootstrap-dark-5
教程文档：https://vinorodrigues.github.io/bootstrap-dark/
该代码编译了原始工作主体的四种方法（以及总共六种变体）
手动切换模式：https://vinorodrigues.github.io/bootstrap-dark/test-1.html
跟随操作系统自动切换：https://vinorodrigues.github.io/bootstrap-dark-5/examples/cheatsheet-dark.html
anhei.gif (1.85 MB, 下载次数: 48) 下载附件 2023-4-4 09:24 上传 （特别像 iPhone 白天、夜间切换，黑暗模式适合低光环境使用，可以更好的保护用户的眼睛，同时不打扰到别人，也能更加省电。） 根据文档教程，尝试引入到我们的网站，首先看下效果图如下：dark.gif (1.84 MB, 下载次数: 39) 下载附件 2023-4-4 09:30 上传 在 head 引入样式，代码如下： 登录可见。按钮图标 html 代码： 登录可见。切换模式 js 代码： 登录可见。（完） Bootstrap, 网站上一篇：【转】Linux 下指定端口开放访问权限下一篇：HTTP 请求压测之 Cassowary 工具 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |