当前位置:首页 > 技术分享 > 正文内容

Bootstrap动态切换主题(通用)

admin3年前 (2022-03-29)技术分享3190

bootstrap有个网站叫做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-themebootstrap.min.css
gray-themebootstrap_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());
});

扫描二维码推送至手机访问。

版权声明:本文由小刚刚技术博客发布,如需转载请注明出处。

本文链接:http://blog.bitefu.net/post/239.html

分享给朋友:

相关文章

mysql update不支持set子查询更新 的解决办法

mysql update不支持set子查询更新 的解决办法

先看示例:SELECT uin,account,password,create_user_uin_tree FROM sys_user结果:表中的create_user_uin_tree标识该条记录由谁创建。创...

关于微信第三方平台(全网发布检测)检测流程以及踩到的坑

关于微信第三方平台(全网发布检测)检测流程以及踩到的坑

能点到全网发布这一步,说明你已经弄好了获取component_verify_ticket,component_access_token等这些参数,通常这个时候点击全网发布只会有这两个失败。如果其他失败的那就要好好检查一下你的代码了,或者查看...

[教程] WTG备份新方法——FFU镜像格式

[教程] WTG备份新方法——FFU镜像格式

FFU(Full Flash Update) 格式是一种基于扇区的磁盘镜像文件格式,默认使用快速哈夫曼压缩(Xpress-Huffman)算法压缩,在捕获和部署时会生成哈希表进行校验,并可以使用DISM修改捕获的镜像。FFU格式很适合WTG...

2021可用的百度网盘高速下载方法分享

2021可用的百度网盘高速下载方法分享

最新可用方法http://blog.bitefu.net/post/163.html方法很简单就是利用网盘直链下载助手【网盘直链下载助手】是一款免费开源获取网盘文件真实下载地址的油猴脚本,基于PCSAPI,支持Windows,Mac,Lin...

遭遇国外ip抓取或攻击怎么办一招解决禁止海外IP访问

遭遇国外ip抓取或攻击怎么办一招解决禁止海外IP访问

究发现很多网站被攻击都是来自海外的肉鸡,所以禁掉海外IP访问网站也是不错的防护手段,而且国内网站几乎很少有国外用户访问,称之为大局域网也不为过。今天主机吧来教大家如何利用域名解析禁止掉海外IP访问网站。绝大多数域名解析服务商都是提供电信联通...

七牛html js上传带进度条源码

七牛html js上传带进度条源码注册链接https://s.qiniu.com/uM7RJv完整代码下载:https://n802.com/f/349707-489018989-c141f6(访问密码:5036)http://www.yi...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。