0

我正在尝试为 Bootstrap / Bootswatch 构建尽可能简单的动态 CSS 样式表更改器。我看过很多资料，但我发现大多数示例都依赖于标签的附加title属性。link因此，不适用于所有浏览器或工作错误（主要是因为这个问题）。

我还注意到，使用titleorrel="alternate stylesheet"不是完美的想法，好像以这种方式列出的样式在初始页面加载时被“忽略”（未呈现），它们以某种方式被解析，使浏览器慢得难以置信。我在默认 Bootstrap 样式表旁边添加了两个或三个 Bootswatch 样式，我几乎杀死了我的 Chrome，尽管页面仅使用默认样式呈现。

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

4

2 回答 2

3

结果就像使用属性声明“默认”样式表一样简单：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

于 2013-07-09T07:02:51.703 回答
-3

我会看一下 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

于 2013-07-08T14:52:24.133 回答