Question

我正在尝试为Bootstrap / Bootswatch构建动态CSS样式表更换器，尽可能简单。我见过很多来源，但我发现大多数示例都依赖于title标记的其他link属性。因此，不适用于所有浏览器或工作错误（主要是因为this problem）。

我也注意到，使用title或rel="alternate stylesheet"并不完美，因为在初始页面加载时，以这种方式列出的样式被“忽略”（未呈现），它们以某种方式被解析，让浏览器变得难以置信。我在默认的Bootstrap样式表旁边添加了两个或三个Bootswatch样式，我差点杀了我的Chrome，虽然页面只使用默认样式呈现。

有人可以展示动态样式表更换器的示例或title和rel="alternate stylesheet"属性的正确用例，它不会占用我的所有计算机资源吗？

Answer 1

Turned out就像使用title属性声明“默认”样式表一样简单：

<link href="assets/bootstrap/bootstrap.min.css" rel="stylesheet" media="screen" title="main">

然后以列表的形式添加一些链接（可用于构建Bootstrap的下拉列表）：

<ul class="dropdown-menu">

  <li><a href="#" class="change-style-menu-item" rel="assets/bootstrap/bootstrap.min.css"><i class="icon-fixed-width icon-pencil"></i> bootstrap.min.css (Default)</a></li>

  <li><a href="#" class="change-style-menu-item" rel="assets/bootstrap/bootstrap.cyborg.min.css"><i class="icon-fixed-width icon-pencil"></i> bootstrap.cyborg.min.css (Cyborg)</a></li>

</ul>

rel属性使用其他样式表的完整路径。

然后添加一个非常简单的jQuery函数：

<script type="text/javascript">
/*<![CDATA[*/
    jQuery(function($)
    {
        $('body').on('click', '.change-style-menu-item', function()
        {
            $('link[title="main"]').attr('href', $(this).attr('rel'));
        });
    });
/*]]>*/
</script>

像魅力一样。

如果您在整个页面中只有一个样式表，则可以省略将title属性添加到link代码并使用简单的$('link')选择器“捕获”它而不是$('link[title="main"]')。由于我包含了其他样式表（bootstrap-responsive.min.css），因此必须引用带有title属性的“可更改”样式表。

Answer 2

我会看一下twitter bootstrap项目，他们谦虚地认为代码非常干净，并且每个浏览器都应该兼容。

http://twitter.github.io/bootstrap/

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

你应该看看这个页面。

http://twitter.github.io/bootstrap/scaffolding.html#responsive

实际工作的Bootstrap / Bootswatch样式表更换器

2 个答案: