Bootstrap/Bootswatch stylesheet changer, который на самом деле работает

Question

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

Я также заметил, что с помощью title или rel="alternate stylesheet" не прекрасная идея, как бы стили, перечисленные таким образом, являются «игнорировали» (не отображается) при начальной загрузке страницы, они как-то разбирается, что делает браузер невероятно медленно. Я добавил два или три стиля Bootswatch рядом с таблицей стилей Bootstrap по умолчанию, и я чуть не убил свой 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 attr ibute poining с полным путем к дополнительной таблице стилей.

А затем добавить очень простую функцию 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