Bootstrap / Bootswatch Changer, который действительно работает

Question

Я пытаюсь создать динамическое средство смены стилей CSS, максимально простое, для Bootstrap / Bootswatch. Я видел много источников, но я обнаружил, что большинство примеров опирается на дополнительные title атрибут link тег. И, следовательно, не работает во всех браузерах или работает неправильно (в основном из-за этой проблемы).

Я также заметил, что с помощью title или же rel="alternate stylesheet" Идея не идеальна, так как стили, перечисленные таким образом, "игнорируются" (не отображаются) при начальной загрузке страницы, они каким-то образом анализируются, что делает браузер невероятно медленным. Я добавил два или три стиля Bootswatch рядом с таблицей стилей Bootstrap по умолчанию и чуть не убил свой Chrome, хотя страница отображалась только со стилем по умолчанию.

Может кто-нибудь показать пример динамического смены таблиц стилей или правильного варианта использования title а также rel="alternate stylesheet" атрибут, который не будет использовать все мои ресурсы компьютера?

Answer 1

Оказалось, что это так же просто, как объявление таблицы стилей поумолчанию с помощью 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

Я хотел бы взглянуть на проект начальной загрузки в Твиттере, они, по моему скромному мнению, имеют чрезвычайно аккуратно написанный код, а также должны быть совместимы с любым браузером.

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