在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引導主題之間切換？

回答

相關問題