Компоненты Bootstrap с альтернативными цветами

Question

Есть ли рекомендуемый способ иметь 2 компонента Bootstrap с разными наборами цветов?

Например, две навигационные вкладки, одна в темной теме и другая в легкой теме.

Желательно что-то вроде:

<div class="dark"><ul class="nav nav-tabs"> ... </ul></div> 
<header>...</header> 
<div class="light"><ul class="nav nav-tabs"> ... </ul></div> 

Но что-то подобное может быть штраф:

<ul class="dark-nav dark-nav-tabs"> ... </ul> 
<header>...</header> 
<ul class="dark-nav light-nav-tabs"> ... </ul> 

Я предпочел бы включать в себя 2 Bootstrap CSS файлы, один с темной variables.less и один со светлыми цветами , но имеют стили, предваряемые в каком-то пространстве имен. В идеале я хотел бы свести к минимуму риск случайного ввода текста или чего-то еще. Пройти вокруг темных областей было бы легче.

Answer 1

В МЕНЬШЕ, вы можете импортировать другие .less/.css файлы wherever you want, также внутри Rulesets:

#dark { 
    @import "style-dark.less"; 
} 

#light { 
    @import "style-light.less"; 
} 

Комбинируя это с опциями Bootstrap, которые позволяют customize colors, вы должны быть в состоянии достичь желаемых результатов, просто импортируя два сгенерированных файла в наборе правил.

Answer 2

Кажется странным для меня @import "bootstrap.less" under a class причина bootstrap.less содержит импорт для каждого файла css Booststrap. Смотрите также: Is it possible to apply bootstrap for a div only, using CDN?

Попробуйте посмотреть, как Bootstrap это сделать: https://github.com/twbs/bootstrap/issues/10332

Доводы в том, что чистый класс .navbar обеспечивает только стили макета и т.д., и> все цвета, применяемые классы-модификаторы.

Например, кнопка имеет два класса: .btn для стилей макета и. btn-* b.e. btn-error для цветов. Я думаю, вы можете использовать ту же стратегию.

Вы должны использовать что-то вроде:

<ul class="nav nav-dark nav-tabs nav-tab-dark"> ... </ul>

Где можно определить, например, в пользовательской-nav.less (импортируемого в bootstrap.less):

.nav-tabs-dark > li.active > a, 
.nav-tabs-dark > li.active > a:hover, 
.nav-tabs-dark > li.active > a:focus 
{ 
    background-color: #000; 
    color: #fff; 
} 

т.д.