在Twitter引导主题之间切换？

我正在为建立在Twitter Bootstrap上的客户端开发项目。他想要有不同的配色方案供用户选择。例如，有一个红色配色方案和一个蓝色方案，用户可以通过顶部的菜单进行更改。在Twitter引导主题之间切换？

是否有任何插件的jQuery（或其他任何事情）将这样做？所有它真的要做的就是加载一个不同的CSS文件，我想，你会怎么做呢？

来源

2012-10-05 samturner

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

来源

2012-10-05 14:32:15

谢谢！太棒了！ – samturner

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

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

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

来源

2012-10-05 11:58:50

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

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

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

这可能是一个按钮，点击或触发另一个事件。所以，你要做的只是在页面DOM的头部插入一个新的元素。这可以在一对夫妇的jQuery的行来完成：

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

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

来源

2012-10-05 14:11:05 Oluwaseye

我测试此上IE11，铬，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

来源

2014-07-28 14:07:55 Jelgab

在Twitter引导主题之间切换？

回答

相关问题