天道酬勤,学无止境

Switching between Twitter Bootstrap Themes?

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?

评论

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.

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

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

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.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • jQuery未定义twitter引导程序(jQuery is not defined twitter bootstrap)
    问题 I am getting this error that says jQuery is not defined. I want to use twitter bootstrap and jQuery-UI. In my <head> I've added the CSS and JS necessary. I noticed that the jQuery-UI page uses 1.9.1 jQuery and the latest version is 1.10.2. So I'm assuming there is some sort of conflict going on. Twitter bootstrap requires jQuery so that might be causing the error. Or perhaps I am doing something wrong. Head: <head> <meta charset="utf-8" /> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="http://netdna
  • 如何在Twitter Bootstrap 3中删除响应功能?(How to remove responsive features in Twitter Bootstrap 3?)
    问题 从Bootstrap 3开始,不再有用于响应式和标准样式表的单独文件。 那么,如何才能轻松删除响应功能? 回答1 要停用非桌面样式,您只需在variables.less文件中更改4行代码即可。 在variables.less文件中设置屏幕宽度断点,如下所示: // Media queries breakpoints // -------------------------------------------------- // Extra small screen / phone // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 @screen-xs: 1px; @screen-xs-min: @screen-xs; @screen-phone: @screen-xs-min; // Small screen / tablet // Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1 @screen-sm: 2px; @screen-sm-min: @screen-sm; @screen-tablet: @screen-sm-min; // Medium screen / desktop // Note: Deprecated
  • jQuery is not defined twitter bootstrap
    I am getting this error that says jQuery is not defined. I want to use twitter bootstrap and jQuery-UI. In my <head> I've added the CSS and JS necessary. I noticed that the jQuery-UI page uses 1.9.1 jQuery and the latest version is 1.10.2. So I'm assuming there is some sort of conflict going on. Twitter bootstrap requires jQuery so that might be causing the error. Or perhaps I am doing something wrong. Head: <head> <meta charset="utf-8" /> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="http://netdna
  • Using Twitter Bootstrap together with Wordpress
    How do I use Wordpress together with Twitter Bootstrap? I know how to set up a Wordpress page and I've already worked with Bootstrap, but now I want to use these two together for the first time. For my Wordpress projects I normally just installed Wordpress and started from scratch with creating a new theme. For my Bootstrap projects I always used Initializr to build a template. Now using Google I found various "Bootstrap themes" and plugins , do I need one of those? I want to customize the bootstrap look with my own colors etc. using LESS, that's why I am asking. I am just having trouble to
  • 什么是Bootstrap?(What is Bootstrap?)
    问题 这里有很多与Bootstrap相关的问题。 我看到很多人在使用它。 因此我尝试对其进行研究,并找到了Bootstrap官方网站,但之后只有一个下载部分和几句话。 没有什么可以解释它的作用是什么...我只是了解它是一个前端帮助器。 我试图通过Google搜索找到一些东西,但没有发现任何具体问题。 我发现的一切都与计算机科学定义有关。 因此,我的问题是: Bootstrap到底是什么? 它的作用是什么,它如何帮助前端开发? 我还想解释一些细节。 回答1 它是HTML,CSS和JavaScript开源框架(最初由Twitter创建),您可以将其用作创建网站或Web应用程序的基础。 更多信息和下载链接入门例子主题 Bootply-Bootstrap编辑器和生成器 更新 官方引导网站已更新,并包含清晰的定义。 “ Bootstrap是最流行的HTML,CSS和JS框架,用于在网络上开发响应式,移动优先项目。” “由@mdo和@fat结合世界上所有的爱进行设计和建造。” 回答2 Bootstrap是Twitter团队开发的开源Javascript框架。 它是HTML,CSS和Javascript代码的组合,旨在帮助构建用户界面组件。 Bootstrap还被编程为同时支持HTML5和CSS3。 也称为前端框架。 Bootstrap是用于创建网站和Web应用程序的免费工具集合。
  • Yii2主题整合(Yii2 theme integration)
    问题 我已经安装了Yii2高级应用程序,现在我想更改后端主题。 我怎样才能做到这一点? 我需要告诉Yii2使用我自定义主题的任何文件吗? 我在backend/web/themes/mytheme下建立了主题。 我只是将此代码替换为advanced/backend/config/main.php ,但是什么也没发生! 'view' => [ 'theme' => [ 'pathMap' => ['@app/views' => '@app/themes/mytheme'], 'baseUrl' => '@web/themes/mytheme', ], ], 然后,我将此代码替换为common/config/main.php但没有任何更改! 回答1 在Yii2中更改主题的另一种方法是: 在要更改主题的前端或后端的Web文件夹中创建主题目录。 将您的主题文件夹放在主题目录中。 在前端或后端的资产文件夹中的AppAsset.php中更改$ css和$ js变量,例如: public $css = [ //'css/site.css', 'themes/theme_folder/css/font-awesome.min.css', 'themes/theme_folder/css/slicknav.css', 'themes/theme_folder/css/style.css',
  • 如何命名Twitter Bootstrap的名称空间,以免样式冲突(How to namespace Twitter Bootstrap so styles don't conflict)
    问题 我想使用Twitter Bootstrap,但仅在特定元素上使用,因此,我需要找出一种使用我的前缀为所有Twitter Bootstrap类添加前缀的方法,或使用较少的mixins。 我对此还没有经验,所以我不太了解该怎么做。 这是我尝试设置样式的HTML的示例: <div class="normal-styles"> <h1>dont style this with bootstrap</h1> <div class="bootstrap-styles"> <h1>use bootstrap</h1> </div> </div> 在此示例中,Twitter Bootstrap会同时对两个h1样式设置,但是我想对我在哪些区域应用Twitter Bootstrap样式有更多选择。 回答1 事实证明,这比我想象的要容易。 Less和Sass都支持命名空间(甚至使用相同的语法)。 当包含引导程序时,可以在选择器中对其进行命名空间: .bootstrap-styles { @import 'bootstrap'; } 更新:对于LESS的较新版本,请按以下步骤操作: .bootstrap-styles { @import (less) url("bootstrap.css"); } 这里回答了类似的问题。 回答2 @安德鲁很棒的答案。 您还需要注意,引导程序会修改主体{}
  • 禁用日期选择器上的过去日期(disable past dates on datepicker)
    问题 如何在datetimepicker上从当前日期禁用过去的日期? 我尝试了几篇类似问题的帖子,但未能实现,下面是我尝试过的内容 <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" media="screen" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css"> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"> </script> <script type="text
  • Twitter Bootstrap模态导轨删除按钮不起作用(Twitter Bootstrap modal rails delete button not working)
    问题 我将切换到Twitter Bootstrap 2.1.1。 我有一个删除按钮的模态,但是它不起作用。 在以前的引导程序版本中,它可以正常运行。 Rails版本是3.1 这是代码 <a title="<%= t('delete') %>" id="delete" class="label" href="#myModal-<%= post.id %>" data-toggle="modal"><%= t('delete') %></a> 情态 <div class="modal hide" id="myModal-<%= post.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel"><%= t('delete_this_question') %></h3> </div> <div class="modal-body"> <p><%= raw post.text %></p> </div>
  • 找不到资源错误以及资源插件如何处理(Resource not found Error and what about resources plugin)
    问题 我用grails快一年了。 从现在开始,当我想在gsp中链接CSS或js文件时。 我做了以下事情: 我在web-app文件夹下创建了一个新文件(例如资源文件),并将所有文件夹文件放置在其中(例如,在导入引导程序时,我在资源下有一个父文件夹引导程序,而在引导程序下有css,img和js文件夹,他们的文件)。 然后,要导入一个css文件,我做了以下工作(这里是有关此文件的文档): 这很好用,但是当我尝试在grails 2.2.4中创建一个新项目时,我遇到了Resource not found错误(浏览器为404,控制台为以下)。 ERROR resource.ResourceMeta - Resource not found: /resources/bootstrap/css/bootstrap.min.css ERROR resource.ResourceMeta - Resource not found: /resources/bootstrap/js/bootstrap.min.js ERROR resource.ResourceMeta - Resource not found: /resources/bootstrap/css/bootstrap.min.css ERROR resource.ResourceMeta - Resource not found:
  • Switching back and forth between mobile and standard views with css / php styleswitcher
    Site in question is here: http://autisticadovcacy.uniongraphics.org I originally designed this using one css file for default, print, and mobile styles, using @media print and @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) to separate those styles. I also have separate stylesheets for a couple of accessibility-related modifications (type size increases, contrast changes). I'm using a PHP styleswitcher script to allow the user to switch these styles manually. I link to the styleswitcher in the header like this: <link rel="stylesheet" href="/wp-content
  • 使用UIAppearance和切换主题(Using UIAppearance and switching themes)
    问题 我正在寻找iOS应用的主题,并一直在阅读UIAppearance。 我希望用户能够在应用程序内的多个不同视觉主题之间进行切换。 然后,将在UI中显示更改主题。 我想我可以在appDelegate.m中加载一个单例主题文件。 但是在那之后,我对如何实现这一目标有些困惑? 回答1 在将视图添加到视图层次结构后,UIKit会从UIAppearance代理设置属性。 在UISS中,我使用如下方法: - (void)reloadAppearance { NSArray * windows = [UIApplication sharedApplication].windows; for (UIWindow *window in windows) { for (UIView *view in window.subviews) { [view removeFromSuperview]; [window addSubview:view]; } } } 另一个技巧是从主窗口中删除rootViewController并再次添加它。 尽管我更喜欢第一个解决方案,因为它涵盖了更广泛的案例。 回答2 这在Swift中对我有用: let windows = UIApplication.sharedApplication().windows for window in windows { for view
  • 如何在MVC 5项目中从bootswatch或wrapbootstrap实现主题?(How can I implement a theme from bootswatch or wrapbootstrap in an MVC 5 project?)
    问题 我将要创建一个新的ASP.Net MVC5 Web应用程序。 我想在应用程序中使用bootswatch或wrapbootstrap中的主题,但是找不到有关如何执行操作的指令集。 回答1 应用主题的步骤非常简单。 要真正了解所有功能如何协同工作,您需要了解ASP.NET MVC 5模板提供的即用型功能以及如何根据需要自定义它。 注意:如果您对MVC 5模板的工作原理有基本的了解,请向下滚动到主题部分。 ASP.NET MVC 5模板:工作原理 本演练介绍了如何创建MVC 5项目以及幕后情况。 在此博客中查看MVC 5模板的所有功能。 创建一个新项目。 在“模板”下,选择“ Web” >“ ASP.NET Web应用程序” 。 输入项目的名称,然后单击“确定” 。 在下一个向导中,选择“ MVC” ,然后单击“确定” 。 这将应用MVC 5模板。 MVC 5模板创建一个使用Bootstrap提供响应式设计和主题化功能的MVC应用程序。 该模板在内部包含一个bootstrap 3. * nuget软件包,该软件包安装4个文件: bootstrap.css , bootstrap.min.css , bootstrap.js和bootstrap.min.js 。 通过使用Web优化功能,Bootstrap捆绑在您的应用程序中。 检查Views/Shared/_Layout
  • 在Twitter Bootstrap 2.0.4中更改导航栏颜色(Change navbar color in twitter bootstrap 2.0.4)
    问题 想知道是否有人知道如何在bootstrap v2.0.4中更改导航栏颜色 我尝试了这种解决方案,它似乎不起作用:Twitter Bootstrap中的导航栏颜色 还有其他解决方案吗? 我已经尝试了自定义的引导程序包,但是到目前为止,我可以进行这样的切换。 代码: .navbar-inner { background-color: #2c2c2c; /* fallback color, place your own */ /* Gradients for modern browsers, replace as you see fit */ background-image: -moz-linear-gradient(top, #333333, #222222); background-image: -ms-linear-gradient(top, #333333, #222222); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); background-image: -webkit-linear-gradient(top, #333333, #222222); background-image: -o-linear-gradient(top, #333333
  • Google Maps API V3 not rendering competely on tabbed page using Twitter's Bootstrap
    I'm using Twitter's Bootstrap for defining my CSS. I have made a page with three tabs. The second tab contains a map built with Google Maps. However when opening the page and switching to the second page with the map, the map is not rendered completely. Once I reload the page with the google maps tab as the selected tab the map loads entirely. I read some posts that advised people with the same problem to add the following code to the javascript: google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(homeLatlng); }); However this doesn't seem to be the solution. Please
  • Bootstrap Icons not showing in published ASP.NET MVC application
    --- NB: Go to the EDITED 2 section for summary ---- I have an ASP.NT MVC (4) application. I integrated (twitter)Bootstrap to it. Bootstrap is working perfectly, but the icons does not show correctly when I publish the application. I tried to republish the application without success. For clarify I put some images here below. When I run my application from VS2013 the result is this (which is OK): In booth, IE and Chrome. But when I run the published application the result is this (which is NOT ok): Chrome IE (10) This problem has, somehow, to be with the evaluated CSS but I don't know at which
  • What is difference between Bootstrap, Twitter Bootstrap, and Bootstrap 3?
    Can someone let me know what is the difference between Bootstrap, Twitter Bootstrap and Bootstrap 3?
  • 仅将CSS样式应用于某些元素(Applying CSS styles only to certain elements)
    问题 我有一个现有的网站,上面有很多用表格布置的旧页面和表格,我正尝试逐步过渡到CSS。 我想使用Twitter Bootstrap样式表-尤其是表单样式-但仅在我明确要求它们的页面部分中使用。 例如,我可能将整个表单围绕在div中,如下所示: <div class="bootstrap"> <!-- everything in here should have the Bootstrap CSS applied --> <form> <p><label for="text_input">Label</label><input type="text" id="text_input" /></p> </form> </div> 我希望所有其他形式保持与现在相同,因为我将无法同时更改所有形式。 有没有简单的方法可以做到这一点? 我可以遍历Bootstrap CSS中的每个样式,并添加一个父选择器(例如'p'将成为'div.bootstrap p'),但这会花费很长时间,并且容易遗漏样式。 编辑:如果不可能,是否有免费的工具可以从文件中提取所有样式,添加前缀,然后再次保存? 回答1 对于Bootstrap 3,如果您less使用它,会更容易: 下载Bootstrap源代码并制作一个style.less文件,如下所示: .bootstrap { @import "/path-to
  • textbox validation with jquery
    I am new to JQuery. I want to do the validation to four text box using jquery. Coding i have done <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <link href="runnable.css" rel="stylesheet" /> <script
  • need spacing between divs using twitter bootstrap v3
    Using twitter bootstrap v3 rc1. I have three .sub-content-block divs on my page, with .make-column(4); applied to each. I have tried adding .make-row; to a div that contains all three of the sub-content-block divs, and set it to .make-column(12) too, in hopes of having spacing between each div. As you can see in the screenshot, there is no spacing between each div, if I do not have a background color, it looks like there is some spacing, but thats more so padding than spacing. The gutter width is set to 30px in the variables.less file. Any clarification as to why there is no spacing between