在 Twitter Bootstrap 主题之间切换？答案

【问题标题】：Switching between Twitter Bootstrap Themes?在 Twitter Bootstrap 主题之间切换？
【发布时间】：2023-09-08 04:49:02
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery css twitter-bootstrap bootswatch

【解决方案1】：

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

【讨论】：

【解决方案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" />');
    });
});

我希望这能解决它...

【讨论】：

【解决方案3】：

我在 IE11、Chrome、Firefox 上对此进行了测试，并且可以正常工作：

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

<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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：