Switching between Twitter Bootstrap Themes?

2019-03-22 08:33发布

站内问答 / JavaScript
549 4 4

I'm working on a project for a client built on Twitter Bootstrap. He wants to have different colour schemes that the user can select from. For example have a Red Colour Scheme and a Blue Colour Scheme that the user can change through a menu up the top.

Is there any plugins for jQuery (or anything else for that matter) that will do this? All it really has to do is load a different CSS file I suppose, how would you go about doing this?

4条回答
聊天终结者
2楼-- · 2019-03-22 08:49

Alright, since you want to load different themes...

You can use jQuery to load different stylesheets

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

This could be a button click or another event that is triggered. So, what you would do is simply insert a new element into the head section of the page DOM. This can be done in a couple of lines of jQuery:

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

I hope this solves it...

查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
3楼-- · 2019-03-22 08:53

Use Kickstrap. You can install themes from basically anywhere, make your own, includes themes from Bootswatch and it uses Less.js client-side to easily recompile your changes each time.

查看更多
0人赞 添加讨论(0) 举报
看我几分像从前
4楼-- · 2019-03-22 09:01

I tested this on IE11, Chrome, Firefox and it works:

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. Code:

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

In this case the theme files other than the original were named like this: bootstrap-theme.min_ …. .css. For example: bootstrap-theme.min_Cerulean.css

查看更多
0人赞 添加讨论(0) 举报
Rolldiameter
5楼-- · 2019-03-22 09:13

Changing the href of your style will, by itself, do nothing. The browser has already loaded your CSS and changing the HREF will not cause him to read the new file again.

Read the answer to this question, it might help you.

If a reload of the page is okay, you should probably do it on the server rather than through javascript by using some session value that defines what color scheme to use.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)