Question

我正在为一个基于Twitter Bootstrap构建的客户端开发一个项目。他希望有不同的配色方案供用户选择。例如，有一个红色配色方案和一个蓝色配色方案，用户可以通过顶部的菜单进行更改。

是否有任何jQuery插件（或其他任何相关的插件）可以执行此操作？它真正需要做的就是加载一个不同的CSS文件，我想你会怎么做呢？

Answer 1

使用Kickstrap。你可以从几乎任何地方安装主题，制作你自己的主题，包括来自Bootswatch的主题，它使用Less.js客户端，每次都可以轻松地重新编译你的更改。

Answer 2

好吧，既然你想加载不同的主题......

您可以使用jQuery加载不同的样式表

<html>
    <head>
        <link rel="stylesheet" href="stylesheet.css" type="text/css" />
    </head>
    <body>
    ...
</html>

这可能是按钮点击或触发的其他事件。所以，你要做的只是在页面DOM的head部分插入一个新元素。这可以通过几行jQuery来完成：

$(document).ready(function () {
    $("a").click(function () {
        $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
    });
});

我希望这能解决它......

Answer 3

我在IE11，Chrome，Firefox上进行了测试，并且可以正常使用：

1

<link id="theBoostrapTheme" type = "text/css" rel = "stylesheet" href = "Content/bootstrap-theme.min.css"/>

2

<a role="menuitem" tabindex="-1" href="javaScript:void(0);" onclick="changeCurrentTheme('_Cerulean')">Cerulean</a>

代码：

function changeCurrentTheme(theNewThemeName) {
  $("#theBoostrapTheme").attr("href", "Content/bootstrap-theme.min" + theNewThemeName + ".css");
  }

在这种情况下，原始文件以外的主题文件的名称如下：bootstrap-theme.min_ …. .css。例如：bootstrap-theme.min_Cerulean.css

Answer 4

更改样式的href本身不会做任何事情。浏览器已经加载了CSS并且更改HREF不会导致他再次读取新文件。

阅读this question的答案，它可能对您有帮助。

如果重新加载页面是可以的，你应该在服务器上而不是通过javascript使用一些会话值来定义要使用的颜色方案。

在Twitter Bootstrap主题之间切换？

4 个答案: