Bootstrap4动态切换主题

本文介绍了如何在Bootstrap4中实现动态切换主题。通过引入Bootswatch提供的预设主题,并利用JavaScript函数响应按钮点击事件,修改CSS链接标签的href属性,从而实现主题的切换。此外,还提及使用cookies保存用户主题选择,以实现全站主题一致性。示例代码展示了Django项目中的实现方式,但核心是JavaScript和Bootstrap的结合应用。
摘要由CSDN通过智能技术生成

bootstrap4有个网站叫做bootswatch,其中已经设计了一些很美的主题:
bootswatch首页的部分截图
要想使用也是很简单的,只需要下载其中的bootstrap.css或者bootstrap.min.css并覆盖到自己项目的对应文件就行了。如果你想动态切换的话,现在提供的思路是:
用JavaScript写一个函数响应页面上一个按钮的点击,这个函数主要是获取页面导入css的链接< link >标签,修改它的href值就行了。
当然如果你想让整个网站都应用上同一个动态修改后的主题,下文也用到了,主要是采用cookies记录的方式解决。

下面的代码来自Django,在HTML页面上的一些语法和大家常见的JavaEE不大相同,但本文涉及的内容只和JavaScript和Bootstrap有关,无需在意哈。但我要说一下我Django网站上各页面都有的一个特点,那就是每个HTML页面都继承于或被包含于一个基础页面,这样的话,便只需要修改基础页面的css或js就行了,相信JavaEE那边也是这样做的。

网页上涉及到的代码

<
  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值