2

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

是否有任何 jQuery 插件（或其他任何东西）可以做到这一点？它真正需要做的就是加载一个不同的 CSS 文件，我想，你会怎么做呢？

4

4 回答 4

2

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

于 2012-10-05T14:32:15.537 回答
1

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

您可以使用 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" />');
    });
});

我希望这能解决它...

于 2012-10-05T14:11:05.807 回答
1

我在 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>

  1. 代码：

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

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

于 2014-07-28T14:07:55.093 回答
0

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

阅读这个问题的答案，它可能会对你有所帮助。

如果重新加载页面没问题，您可能应该在服务器上而不是通过 javascript 通过使用一些定义要使用的配色方案的会话值来执行此操作。

于 2012-10-05T11:58:50.243 回答