Twitter bootstrap 如何在单击主题下拉菜单后动态更改主题
我正在使用bootstrap作为我正在开发的网站的界面。我还计划将bootswatch主题集成到我的站点。我创建了一个下拉菜单,其中包含bootswatch的不同主题。我的问题是,当我单击下拉菜单中的一个主题时,如何切换主题?Fiddle:(单击导航栏中的主题下拉列表)Twitter bootstrap 如何在单击主题下拉菜单后动态更改主题,twitter-bootstrap,bootswatch,Twitter Bootstrap,Bootswatch,我正在使用bootstrap作为我正在开发的网站的界面。我还计划将bootswatch主题集成到我的站点。我创建了一个下拉菜单,其中包含bootswatch的不同主题。我的问题是,当我单击下拉菜单中的一个主题时,如何切换主题?Fiddle:(单击导航栏中的主题下拉列表)给你的链接一个class主题链接和主题名称的数据主题值,如下所示: <a href="#" data-theme="amelia" class="theme-link">Amelia</a> var th
给你的链接一个class
主题链接
和主题名称的数据主题
值,如下所示:
<a href="#" data-theme="amelia" class="theme-link">Amelia</a>
var themes = {
"default": "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css",
"amelia" : "//bootswatch.com/amelia/bootstrap.min.css",
"cerulean" : "//bootswatch.com/cerulean/bootstrap.min.css",
"cosmo" : "//bootswatch.com/cosmo/bootstrap.min.css",
"cyborg" : "//bootswatch.com/cyborg/bootstrap.min.css",
"flatly" : "//bootswatch.com/flatly/bootstrap.min.css",
"journal" : "//bootswatch.com/journal/bootstrap.min.css",
"readable" : "//bootswatch.com/readable/bootstrap.min.css",
"simplex" : "//bootswatch.com/simplex/bootstrap.min.css",
"slate" : "//bootswatch.com/slate/bootstrap.min.css",
"spacelab" : "//bootswatch.com/spacelab/bootstrap.min.css",
"united" : "//bootswatch.com/united/bootstrap.min.css"
}
(执行此操作时,请在您自己的服务器上托管这些引导样例css文件-我只是热链接,因为我手头没有服务器)然后,使用以下jQuery代码:
$(function(){
var themesheet = $('<link href="'+themes['default']+'" rel="stylesheet" />');
themesheet.appendTo('head');
$('.theme-link').click(function(){
var themeurl = themes[$(this).attr('data-theme')];
themesheet.attr('href',themeurl);
});
});
$(函数(){
var themesheet=$('');
themesheet.appendTo(“head”);
$('.theme link')。单击(函数(){
var themeurl=themes[$(this).attr('data-theme');
themesheet.attr('href',themeurl);
});
});
上述解决方案的主要问题是,如果刷新页面,主题将消失。
我发现这篇文章对于浏览器中的持久主题非常有用,因为它将设置保存在浏览器的存储中
我希望它能帮助你
凯文提供的解决方案很棒。我刚刚花了一些时间试图弄清楚如何使用本地的bootswatch库 典型的href属性值:
"~/lib/bootstrap/dist/css/bootstrap.min.css"
但在这种情况下:
var themes = {
"default": "lib/bootstrap/dist/css/bootstrap.min.css",
"amelia": "lib/bootswatch/amelia/bootstrap.min.css",
"cerulean": "lib/bootswatch/cerulean/bootstrap.min.css",
"cosmo": "lib/bootswatch/cosmo/bootstrap.min.css",
"cyborg": "lib/bootswatch/cyborg/bootstrap.min.css",
"flatly": "lib/bootswatch/flatly/bootstrap.min.css",
"journal": "lib/bootswatch/journal/bootstrap.min.css",
"readable": "lib/bootswatch/readable/bootstrap.min.css",
"simplex": "lib/bootswatch/simplex/bootstrap.min.css",
"slate": "lib/bootswatch/slate/bootstrap.min.css",
"spacelab": "lib/bootswatch/spacelab/bootstrap.min.css",
"united": "lib/bootswatch/united/bootstrap.min.css"
}
你可以试试这样的 html:
将从所需的源(如下拉列表或按钮)调用setTheme函数中的何处。我基于@KevinPei的答案,使用jQuery、Bootstrap和Bootswatch自动下拉列表,将下拉列表添加到导航栏,自动将主题更新为所选值 小提琴: 该代码在实践中非常有效。但是,在JSFIDLE中,有两种奇怪的行为:
jQuery(函数($){
$(“#主题按钮ul a”)。单击(函数(){
if($(this).attr('name')!='current'){
var urlberg=https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/'
var urlend='/bootstrap.min.css'
var themeurl=urlberg+$(this).text().toLowerCase()+urlend;
var link=$('link[rel=“stylesheet”][href$=”/bootstrap.min.css“]').attr('href',themeurl);
$('#主题按钮ul a[name=“current”]').text($(this.text());
}
});
});
感谢@davfive及其复制/粘贴一份文件样本。下面是他升级到bootswatch4.5和jquery3.5的示例 :
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- To switch themes, go to https://www.bootstrapcdn.com/bootswatch/?theme=0 -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/4.5.0/flatly/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="index.html"><img src="images/logos/Logo.png" alt="logo">MyWebSite Name </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">home<span class="sr-only">(current)</span></a>
</li>
<li id="theme-button" class="dropdown">
<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Change Theme <b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="#" name="current">Flatly</a></li>
<li class="divider"></li>
<li><a href="#" name="flatly">Flatly</a></li>
<li><a href="#" name="superhero">Superhero</a></li>
<li><a href="#" name="united">United</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<script>
jQuery(function($) {
$('#theme-button ul a').click(function() {
if ($(this).attr('name') != 'current') {
var urlbeg = 'https://maxcdn.bootstrapcdn.com/bootswatch/4.5.0/'
var urlend = '/bootstrap.min.css'
var themeurl = urlbeg + $(this).text().toLowerCase() + urlend;
var link = $('link[rel="stylesheet"][href$="/bootstrap.min.css"]').attr('href', themeurl);
$('#theme-button ul a[name="current"]').text($(this).text());
}
});
});
</script>
</body>
</html>
-
-
jQuery(函数($){
$(“#主题按钮ul a”)。单击(函数(){
if($(this).attr('name')!='current'){
var urlberg=https://maxcdn.bootstrapcdn.com/bootswatch/4.5.0/'
var urlend='/bootstrap.min.css'
var themeurl=urlberg+$(this).text().toLowerCase()+urlend;
var link=$('link[rel=“stylesheet”][href$=”/bootstrap.min.css“]').attr('href',themeurl);
$('#主题按钮ul a[name=“current”]').text($(this.text());
}
});
});
我还添加了主菜单链接,删除了很多主题。当然,您可以添加/更改一些。您好,谢谢。我的问题是,即使用户尝试刷新页面,应用的主题是否仍然存在?似乎当我刷新时,它会转到我设置的默认主题。@JoeneFloresca您可以用多种方式存储首选项数据,其中最简单的方式是使用。如果您的用户有帐户,您也可以将他们的首选项存储在数据库中。感谢您捕捉到这一点,很抱歉您不得不这样做。我忘了在for bootstrap和jquery中包含脚本链接。我已经对它进行了更新,并测试了它是否在JSFIDLE之外工作。
function setTheme(themeName) {
$('#theme-sheet').attr({ href: "https://bootswatch.com/slate/bootstrap.min.css" });;
}
<html lang="en">
<head>
<!-- To switch themes, go to https://www.bootstrapcdn.com/bootswatch/?theme=0 -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<a class="navbar-brand">Bootswatch Theme Changer</a>
<div class="nav navbar-nav pull-right">
<li id="theme-button" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Change Theme <b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="#" name="current">Cerulean</a></li>
<li class="divider"></li>
<li><a href="#" name="cerulean">Cerulean</a></li>
<li><a href="#" name="cosmo">Cosmo</a></li>
<li><a href="#" name="cyborg">Cyborg</a></li>
<li><a href="#" name="darkly">Darkly</a></li>
<li><a href="#" name="flatly">Flatly</a></li>
<li><a href="#" name="journal">Journal</a></li>
<li><a href="#" name="lumen">Lumen</a></li>
<li><a href="#" name="paper">Paper</a></li>
<li><a href="#" name="readable">Readable</a></li>
<li><a href="#" name="sandstone">Sandstone</a></li>
<li><a href="#" name="simplex">Simplex</a></li>
<li><a href="#" name="slate">Slate</a></li>
<li><a href="#" name="solar">Solar</a></li>
<li><a href="#" name="spacelab">Spacelab</a></li>
<li><a href="#" name="superhero">Superhero</a></li>
<li><a href="#" name="united">United</a></li>
<li><a href="#" name="yeti">Yeti</a></li>
</ul>
</li>
</div>
</div>
</div>
<script>
jQuery(function($) {
$('#theme-button ul a').click(function() {
if ($(this).attr('name') != 'current') {
var urlbeg = 'https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/'
var urlend = '/bootstrap.min.css'
var themeurl = urlbeg + $(this).text().toLowerCase() + urlend;
var link = $('link[rel="stylesheet"][href$="/bootstrap.min.css"]').attr('href', themeurl);
$('#theme-button ul a[name="current"]').text($(this).text());
}
});
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- To switch themes, go to https://www.bootstrapcdn.com/bootswatch/?theme=0 -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/4.5.0/flatly/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="index.html"><img src="images/logos/Logo.png" alt="logo">MyWebSite Name </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">home<span class="sr-only">(current)</span></a>
</li>
<li id="theme-button" class="dropdown">
<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Change Theme <b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="#" name="current">Flatly</a></li>
<li class="divider"></li>
<li><a href="#" name="flatly">Flatly</a></li>
<li><a href="#" name="superhero">Superhero</a></li>
<li><a href="#" name="united">United</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<script>
jQuery(function($) {
$('#theme-button ul a').click(function() {
if ($(this).attr('name') != 'current') {
var urlbeg = 'https://maxcdn.bootstrapcdn.com/bootswatch/4.5.0/'
var urlend = '/bootstrap.min.css'
var themeurl = urlbeg + $(this).text().toLowerCase() + urlend;
var link = $('link[rel="stylesheet"][href$="/bootstrap.min.css"]').attr('href', themeurl);
$('#theme-button ul a[name="current"]').text($(this).text());
}
});
});
</script>
</body>
</html>