Twitter的引导主题之间切换?(Switching between Twitter Bootst

2019-08-01 04:13发布

我正在为建立在Twitter的引导客户的项目。 他希望有不同的配色方案,用户可以从中选择。 例如有一个红色的配色方案和一个蓝色的配色方案,用户可以通过了顶部的菜单中更改。

是否有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的头部。 这可以在一对夫妇的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>
  1. 码:

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

在这种情况下,主题文件以外的原被命名为这样的: bootstrap-theme.min_ …. .css bootstrap-theme.min_ …. .css 。 例如: bootstrap-theme.min_Cerulean.css



Answer 4:

改变你的风格的href会,其本身什么都不做。 该浏览器已加载你的CSS和更改HREF不会导致他再次读取新的文件。

阅读回答这个问题 ,它可以帮助你。

如果页面重新加载是好的,你应该通过使用定义使用什么样的配色方案一些会话价值做在服务器上,而不是通过JavaScript。



文章来源: Switching between Twitter Bootstrap Themes?