Bootstrap4动态切换主题
bootstrap4有个网站叫做bootswatch,其中已经设计了一些很美的主题:
要想使用也是很简单的,只需要下载其中的bootstrap.css或者bootstrap.min.css并覆盖到自己项目的对应文件就行了。如果你想动态切换的话,现在提供的思路是:
用JavaScript写一个函数响应页面上一个按钮的点击,这个函数主要是获取页面导入css的链接< link >
标签,修改它的href
值就行了。
当然如果你想让整个网站都应用上同一个动态修改后的主题,下文也用到了,主要是采用cookies记录的方式解决。
下面的代码来自Django,在HTML页面上的一些语法和大家常见的JavaEE不大相同,但本文涉及的内容只和JavaScript和Bootstrap有关,无需在意哈。但我要说一下我Django网站上各页面都有的一个特点,那就是每个HTML页面都继承于或被包含于一个基础页面,这样的话,便只需要修改基础页面的css或js就行了,相信JavaEE那边也是这样做的。
网页上涉及到的代码
<link rel="stylesheet" href="{% static 'bootstrap4.0.0/css/bootstrap.min.css' %}" id="default-theme">
切换时主要针对上面< link >
标签的href
和id
进行修改,一个href
对应一个id
。本程序用到两个主题版本的css文件,其id和文件名的对应为:
id | 同目录下的css文件名 |
---|---|
default-theme | bootstrap.min.css |
gray-theme | bootstrap_gray.min.css |
这样就清晰明了了哈哈哈,下面是切换的按钮,触发changeTheme()方法:
<!--切换主题的按钮-->
<input id="change-theme-btn" type="button" class="btn btn-light" onclick="changeTheme()" value="切换主题"/>
涉及的JavaScript代码
具体说明请看注释:
// 按钮触发的切换主题方法
function changeTheme() {var link = document.getElementsByTagName("link")[0];//判断目前页面上的link的id是哪个,如果是默认主题的话,就传送新主题的id给change()函数,否则亦然if (link.id === "default-theme") {change("dark-theme");} else {change("default-theme");}
}//真正的切换主题方法
function change(themeName){var link = document.getElementsByTagName("link")[0];if(themeName === "default-theme"){link.id = "default-theme";link.href = '/static/bootstrap4.0.0/css/bootstrap.min.css';//记录新的主题到cookies,这里一定要写上path=/,否则就不是修改cookies而是在不同页面创建cookies了document.cookie = "themeCookies=default-theme;path=/";}else if(themeName === "dark-theme"){link.id = "dark-theme";link.href = '/static/bootstrap4.0.0/css/bootstrap_gray.min.css';document.cookie = "themeCookies=dark-theme;path=/";}
}// 获取cookie中当前主题的id,没有则返回默认的default-theme
function getThemeName() {var themeCookies = "themeCookies=";var allCookies = document.cookie.split(';');for(var i=0; i<allCookies.length; i++){var c = allCookies[i].trim();if(c.indexOf(themeCookies) === 0)return c.substring(themeCookies.length, c.length);}return "default-theme";
}$(document).ready(function () {change(getThemeName());
});
我开了个微信公众号,经常在上面发一些个人思考和计算机技术、技巧的文章,欢迎来关注一下哈:
Bootstrap4动态切换主题相关推荐
- vue动态发布到线上_vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件we ...
- Android动态切换主题
软件换肤从功能上可以划分三种: 1) 软件内置多个皮肤,不可由用户增加或修改: 最低的自由度,软件实现相对于后两种最容易. 2) 官方提供皮肤供下载,用户可以使用下载的皮肤: 用户可选择下载自己喜欢的 ...
- vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css,具体实现步骤如下: 1.添加webpack插件,新建文件we ...
- vue动态切换css文件_vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件we ...
- 直播短视频系统开发,动态切换主题色
直播短视频系统开发,动态切换主题色相关的代码: 点击按钮变量存储切换状态: override fun onClick(v: View?) {when (v?.id) {R.id.btn_theme1 ...
- 一对一直播app源码,Aandroid动态切换主题色
一对一直播app源码,Aandroid动态切换主题色实现的相关代码 点击按钮变量存储切换状态: override fun onClick(v: View?) {when (v?.id) {R.id.b ...
- element如何动态切换主题(vite+vue+ts+elementPlus)
前言 提示:动态切换主题使用的是css3的var函数现实 示例:切换--main-bg-color的值,使用<div style="--main-bg-color:red"& ...
- ECharts实现动态切换主题样式
ECharts是百度开源的一个JS数据可视化库.通过颜色主题可以轻松实现不同颜色样式的修改,也可以通过调色盘.直接样式设置.高亮样式等方法实现. ECharts4 开始,除了一贯的默认主题外,新内置了 ...
- android 动态切换主题,android动态主题切换(RRO 技术)
android上的主题切换,Android从M开始加入了动态资源overlay机制 runtime resource overlay(RRO),这个是sony贡献的,实现机制如下图,就是在框架中建立一 ...
最新文章
- 【Linux 内核】宏内核与微内核架构 ( 操作系统需要满足的要素 | 宏内核 | 微内核 | Linux 内核动态加载机制 )
- 数据结构C语言实现课后第1-2章答案
- 计算机语言中daly什么意思,计算机组成与体系结构
- java实现.net中的枚举
- js 中时间格式化的几种方法
- 快应用实现网络测速功能_网络阅卷系统应用系统功能实现情况
- Qt PDF预览功能实现汇总
- android多图拼接长图并合理显示
- 解决阿里云不能使用yum问题
- 通信芯片sx1278-基于LORA SX1278无线模块的STM32点对点通信简单实现
- 超级马里奥(待完善)
- 《超大流量分布式系统架构解决方案-人人都是架构师2.0》读书笔记
- 怎么样删除计算机管理员用户账户,怎么样删除电脑中多出来的管理员账户
- 「Python入门」Python代码规范(风格)
- 最全Pycharm教程(2)——代码风格
- 802.11n关键技术
- 前端码农2021上半年的辛酸血泪史与自赎之路|2021 年中总结
- Java 知识结构图
- VUE 前端SSO单点登录
- 乾坤主应用Vue2 集成子应用Vue3艰苦踩坑历程