Switching between Twitter Bootstrap Themes?

后端未结

关注

 4  1040

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

相关标签:

4条回答

梦如初夏

2021-02-11 04:19

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)
发布评论:

提交评论
- 加载中...
小蘑菇

2021-02-11 04:22
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)
发布评论:

提交评论
- 加载中...

旧巷少年郎

2021-02-11 04:26

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

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

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)

粉色の甜心

2021-02-11 04:39

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)
发布评论:

提交评论
- 加载中...